let pitches = [];

let chords = [];

let root = 86;

let oscars = [];

let filts = [];

// let numOscs = 1;

let prevFreq = 0;

let num = 25;

let inc = 0;

let keys, index, nextChord;

​

let values = 0;

let randomValue = "...";

​

function setup() {

  createCanvas(600, 600);

  chords = [

            ["major", [1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 1]],

            ["minor", [1, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 1]],

            ["maj7", [1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 1, 0]],

            ["maj6", [1, 0, 0, 0, 1, 0, 0, 1, 0, 1, 0, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 1, 0, 1, 0]],

            ["9b5", [1, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 1]],

            // ["maj7", [1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 1]],

            // ["maj7", [1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 1]],

            // ["maj7", [1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 1]],

            // ["maj7", [1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 1]],

          ];

//   chords = {

//             maj, [1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 1],

//             min, [1, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 1],

//             maj7, [1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 1],

//            };

  // values = Object.keys(chords);

​

​

  for (i = 0; i < num; i++) {

    let freq = midiToFreq(root - i);

    filts[i] = new p5.LowPass();

    filts[i].res(20);

  /* Setting the freq 1.5 times above the root note of the osc 

  will allow some harmonics to come through. */ 

    filts[i].freq(freq*1.5);

    oscars[i] = new p5.Oscillator();

  //sawtooth for a rich sound

    oscars[i].setType('sawtooth');

  /* By using the modulo operator % you can get some symmetry 

  in the notes or keep them centered around a value. */

    oscars[i].freq(freq);

  // Keep the volume low because there will be many oscillators

    oscars[i].amp(0.0);

  // Disconnect them from the Master output and connect to each filter

    oscars[i].disconnect();

    oscars[i].connect(filts[i]);

  // Turn oscs on

    oscars[i].start();

  }

  for (i = 0; i < num; i++) {

    let step = i * (height*0.8) / num;

    let x = width * 0.1;

    let y = height * 0.1 + step;

    let w = width * 0.8;

    let h = height*0.025;

    let col = color(255, 100);

    let pitch = root - i;

    // print(chords.maj[num - i]);

    // let showChord = chords.maj[num - i - 1];

    let showChord = chords[0][1][num - i - 1];

    // let showChord = 1;

    notes[i] = new Note(x, y, w, h, pitch, step, col, showChord);

  }

}

​

function mousePressed() {

  inc++;

}

​

​

​

function draw() {

  background(255,170,190);

  // if (frameCount % 300  < 1) randomValue = values[parseInt(Math.random() * values.length)];;

  if (frameCount % 1200  < 1) inc++;

  if (inc >= chords.length) inc = 0;

  fill(255);

  textSize(18);

  text("Let us make a " + chords[inc][0] + " chord.", width*0.025, height*0.05);

  for (i = 0; i < num; i++) { 

    notes[i].hover();

    oscars[i].amp(notes[i].amp);

    notes[i].display();

    notes[i].showChord = chords[inc][1][num - i - 1];

    notes[i].showChords();

  }

}

​

class Note {

  constructor(x, y, w, h, pitch, step, col, showChord) {

    this.x = x;

    this.y = y;

    this.w = w;

    this.h = h;

    this.pitch = pitch;

    this.step = step;

    this.col = col;

    this.amp = 0;

    this.showChord = showChord;

  }

  display() {

    noStroke();

    fill(this.col);

    rect(this.x, this.y, this.w, this.h);

  }

  showChords() {

    if(this.showChord) {

    push();

    fill(255);

      let xOff = 5;

    triangle(this.x - xOff, this.y + this.h/2, this.x - xOff*3, this.y, this.x - xOff*3, this.y + this.h);

    triangle(this.x + this.w + xOff, this.y + this.h/2, this.x + this.w + xOff*3, this.y, this.x + this.w + xOff*3, this.y + this.h);

    pop();

    }

  }

​

  hover() {

    if (mouseX < (this.x + this.w) && mouseX > this.x && 

                mouseY > this.y && mouseY < (this.y + this.h)) {

      this.col = color(175, 220, 255);

      this.amp+=0.001*1.5;

      if (this.amp > 0.2) this.amp = 0.2;

    } else {

      this.col = color(255, 100);

      this.amp-=0.001*1.5;

      if (this.amp <=0) this.amp = 0;

    }

  }

}