let textSz = 32;

let labelColor = "rgb(65, 25, 37)";

let q; // image 612 x 408

​

let root = "";

let lastRoot = "";

let octave = "4";

​

// Scales

let major = [0, 2, 4, 5, 7, 9, 11, 12];

let minor = [0, 2, 3, 5, 7, 9, 10, 12];

let scales = [{

  name: "major",

  contents: major

}, {

  name: "minor",

  contents: minor

}];

let currentScale;

​

// Chords

let majorChord = [0, 4, 7];

let minorChord = [0, 3, 7];

let mjr7Chord = [0, 4, 7, 11];

let minor7Chord = [0, 3, 7, 10];

let dom7Chord = [0, 4, 7, 10];

let dim7Chord = [0, 3, 6, 9];

let augChord = [0, 4, 8];

let chord = [{

  name: "major",

  contents: majorChord

}, {

  name: "minor",

  contents: minorChord

}, {

  name: "dom7",

  contents: dom7Chord

}, {

  name: "dim7",

  contents: dim7Chord

}, {

  name: "augChord",

  contents: augChord

}];

let notes = ["Db", "Ab", "Eb", "Bb", "F", "C", "G", "D", "A", "E", "B", "F#"];

let noteButtons = [];

let chordState = ["", "", ""];

let chordPlaying = [];

​

// Inputs

let keyRow1 = Array.from("1234567890½»");

let macKeys1 = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "-", "="];

let keyRow2 = Array.from("QWERTYUIOPÛÝ"); // QWERTYUIOP[]

let macKeys2 = ["Q", "W", "E", "R", "T", "Y", "U", "I ", "O", "P", "[", " ]"];

let keyRow3 = Array.from("ASDFGHJKLºÞÜ"); // ASDFGHJKL;'\

let macKeys3 = ["A", "S", "D", "F", "G", "H", "J", "K", "L", " ;", " '", " \\"];

​

// Synth

let synth = new Tone.PolySynth().toMaster();

​

function preload() {

  q = loadImage('q-chord.png');

}

​

function setup() {

  createCanvas(1050, 800);

  textSize(textSz);

  fill(labelColor);

  console.log("hello! welcome to keyChord! A web interaction implementation of the Suzuki QChord.");

  console.log("Hit the row of keys between (1) 1-+ for major chords, (2) q-] for minor chords and \n(3) a-\ for dominant 7th chords!");

console.log("\nAdd the 7th chord button to major and minor to get 7th chords and if you combine the major and minor chords, you'll get a diminished chord, if you press all three you'll get an augmented chord!");

​

  // draw chord labels

  text(chord[0].name, textSz * 2.5, textSz * 3.1);

  text(chord[1].name, textSz * 2.5, textSz * 5);

  text("7th", textSz * 2.5, textSz * 7);

​

  // draw all note names and their buttons

  let count = 0;

  let buttonY = textSz + 40;

  let onePosX = textSz * 5.5;

  let onePosY = textSz * 2;

  for (let one in notes) {

    let name = notes[one];

    text(name, onePosX, onePosY);

    // major button

    let mjrButton = createButton(macKeys1[count]);

    mjrButton.id = notes[one]+"mjr";

    // minor button

    let minorButton = createButton(macKeys2[count]);

    minorButton.name = notes[one]+"minor"; 

    // seventh button

    let seventhButton = createButton(macKeys3[count]);

    seventhButton.name = notes[one]+"7"; 

​

    if (count < 4) {

      mjrButton.position(onePosX + 4, buttonY);

      minorButton.position(onePosX + 4, buttonY + (textSz * 2));

      seventhButton.position(onePosX + 4, buttonY + (textSz * 4));

      onePosX += buttonY + 4;

    } else {

      mjrButton.position(onePosX, buttonY);

      minorButton.position(onePosX, buttonY + (textSz * 2));

      seventhButton.position(onePosX, buttonY + (textSz * 4));

      onePosX += buttonY - 1;

    }

    // show the key name when clicked

    mjrButton.elt.onclick = function(){ drawChord(notes[one], 0, "mjr")};

    mjrButton.elt.disabled = true;

    minorButton.elt.onclick = function(){ drawChord(notes[one], 1, "minor")};

    minorButton.elt.disabled = true;

    seventhButton.elt.onclick = function(){ drawChord(notes[one], 2, "7th")};

    seventhButton.elt.disabled = true;

​

    // add buttons to noteButtons

    noteButtons[count] = [mjrButton, minorButton, seventhButton];

​

    count++;

  }

  // move the image

  translate(220, 180);

  rotate(PI / 12.0);

  scale(1.3);

  q.id = "q";

  let i = image(q, 0, 0);

}

​

function draw() {

  strumplate();

​

}

​

function keyPressed(k, row, type) {

  console.log("the chord type is:");

  // save the note that corresponds to the key that is pressed

  if (row === 0 || keyRow1.indexOf(key) !== -1) {

    root = notes[keyRow1.indexOf(key)];

    synth.triggerRelease(chordPlaying);

    if (root !== lastRoot) {

      chordState[1] = "";

      chordState[2] = "";

      updateChord();

    }

    chordState[0] = notes[keyRow1.indexOf(key)];

    lastRoot = root;

  }

  else if (row === 1 || keyRow2.indexOf(key) !== -1) {

    root = notes[keyRow2.indexOf(key)];

    synth.triggerRelease(chordPlaying);

    if (root !== lastRoot) {

      chordState[0] = "";

      chordState[2] = "";

      updateChord();

    }

    chordState[1] = notes[keyRow2.indexOf(key)];

    lastRoot = root;

  }

  else if (row === 2 || keyRow3.indexOf(key) !== -1) {

    root = notes[keyRow3.indexOf(key)];

    synth.triggerRelease(chordPlaying);

    if (root !== lastRoot) {

      chordState[0] = "";

      chordState[1] = "";

      updateChord();

  }

    chordState[2] = notes[keyRow3.indexOf(key)];

    lastRoot = root;

  }

  if (keyRow1.indexOf(key) !== -1 || keyRow2.indexOf(key) !== -1 || keyRow3.indexOf(key) !== -1) {

    updateChord();

    synth.triggerAttack(chordPlaying);   

  }

}

​

function keyReleased() {

  if (keyRow1.indexOf(key) != -1 && root === notes[keyRow1.indexOf(key)]) {

    chordState[0] = "";

    updateChord();

  } else if (keyRow2.indexOf(key) != -1 && root === notes[keyRow2.indexOf(key)]) {

    chordState[1] = "";

    updateChord();

​

  } else if (keyRow3.indexOf(key) != -1 && root === notes[keyRow3.indexOf(key)]) {

    chordState[2] = "";

    updateChord();

  }

}

​

function updateChord() {

  if (chordState[0] !== "" && chordState[1] !== "" && chordState[2] !== "") { // aug

    chordPlaying = Tone.Frequency(root + octave).harmonize(augChord);

    console.log("aug");

  } else if (chordState[0] !== "" && chordState[1] !== "") { // dim7

    chordPlaying = Tone.Frequency(root + octave).harmonize(dim7Chord);

    console.log("dim7");

  } else if (chordState[0] !== "" && chordState[2] !== "") { // mjr7

    chordPlaying = Tone.Frequency(root + octave).harmonize(mjr7Chord);

    console.log("mjr7");

    //console.log(chordPlaying);

  } else if (chordState[1] !== "" && chordState[2] !== "") { // minor7

    chordPlaying = Tone.Frequency(root + octave).harmonize(minor7Chord);

    console.log("minor7");

  } else if (chordState[1] !== "" && chordState[2] === "") { // minor

    chordPlaying = Tone.Frequency(root + octave).harmonize(minorChord);

    console.log("minorChord");

  } else if (chordState[0] !== "" && chordState[2] === "") { // major

    // synth.triggerRelease(chordPlaying);

    chordPlaying = Tone.Frequency(root + octave).harmonize(majorChord);

    console.log("mjr");

  } else if (chordState[2] !== "") { // dom7

    chordPlaying = Tone.Frequency(root + octave).harmonize(dom7Chord);

    console.log("dom7");

  }

​

  if (chordState[0] === "" && chordState[1] === "" && chordState[2] === "") { // no chords

    synth.releaseAll();

  }

}

​

​

// track the strumplate ~ 60 x 184 parallelogram

function strumplate(){

  // account for scale of image ~ 78 x 239 parallelogram

  let w1 = 78, h1 = 239;

  let topX = 754, bottomX = 667;

  let topY = 475, bottomY = 651;

  if(h1*mouseX + w1*mouseY - w1*h1 == 0){

      console.log("in");

  }

  //console.log(mouseX, mouseY);

  if(mouseX <= topX && mouseX >= bottomX && mouseY <= topY && mouseY >= bottomY){

    console.log("strumplate");

  }

​

}

​

// Graphics

function drawChord(note, row, type){

  let uno = chordState[0];

  let dos = chordState[1];

  let tres = chordState[2];

  keyPressed(note, row, type);

}