var notes = [

​

​

  30,

  31,

  32,

  33,

  34,

  35,

  36,

  37,

  38,

  39,

  40,

  41,

  42,

  43,

  44,

  45,

  46,

  47,

  48,

  49,

  50,

  51,

  52,

  53,

  54,

  55,

  56,

  57,

  58,

  59,

  60,

  61,

  62,

  63,

  64,

  65,

  66,

  67,

  68,

  69,

  70,

  71,

  72,

  73,

  74,

  75,

  76,

  77,

  78,

  79,

  80,

  81,

  82,

  83,

  84,

  85,

  86,

  87,

  88,

  89,

​

​

​

];

​

var colorsForNotes;

​

var osc;

​

var upBuffer;

var downBuffer;

​

let list = [new p5.Vector(375, 250)];

​

var key;

​

var playingNote = false;

​

var counter = 0;

​

var colorsForEllipses = [];

​

function setup() {

  // 800 x 600 (double width to make room for each "sub-canvas")

  createCanvas(750, 600);

  // Create both of your off-screen graphics buffers

  upBuffer = createGraphics(750, 500);

  downBuffer = createGraphics(750, 100);

​

​

  osc = new p5.TriOsc();

  // Start silent//TriOsc//Oscillator

  osc.start();

  osc.amp(0);

​

  //  append(list, new new p5.Vector(375,250) );

​

  append(list, new p5.Vector(390, 250, 15, 15));

  append(list, new p5.Vector(383, 263, 15, 15));

  append(list, new p5.Vector(368, 263, 15, 15));

  append(list, new p5.Vector(360, 250, 15, 15));

  append(list, new p5.Vector(368, 237, 15, 15));

  append(list, new p5.Vector(383, 237, 15, 15));

  append(list, new p5.Vector(398, 237, 15, 15));

  append(list, new p5.Vector(405, 250, 15, 15));

  append(list, new p5.Vector(398, 263, 15, 15));

  append(list, new p5.Vector(390, 276, 15, 15));

  append(list, new p5.Vector(375, 276, 15, 15));

  append(list, new p5.Vector(360, 276, 15, 15));

  append(list, new p5.Vector(353, 263, 15, 15));

  append(list, new p5.Vector(345, 250, 15, 15));

  append(list, new p5.Vector(353, 237, 15, 15));

  append(list, new p5.Vector(360, 224, 15, 15));

  append(list, new p5.Vector(375, 224, 15, 15));

  append(list, new p5.Vector(390, 224, 15, 15));

  append(list, new p5.Vector(405, 224, 15, 15));

  append(list, new p5.Vector(413, 237, 15, 15));

  append(list, new p5.Vector(420, 250, 15, 15));

  append(list, new p5.Vector(413, 263, 15, 15));

  append(list, new p5.Vector(405, 276, 15, 15));

  append(list, new p5.Vector(398, 289, 15, 15));

  append(list, new p5.Vector(383, 289, 15, 15));

  append(list, new p5.Vector(368, 289, 15, 15));

  append(list, new p5.Vector(353, 289, 15, 15));

  append(list, new p5.Vector(345, 276, 15, 15));

  append(list, new p5.Vector(338, 263, 15, 15));

  append(list, new p5.Vector(330, 250, 15, 15));

  append(list, new p5.Vector(338, 237, 15, 15));

  append(list, new p5.Vector(345, 224, 15, 15));

  append(list, new p5.Vector(353, 211, 15, 15));

  append(list, new p5.Vector(368, 211, 15, 15));

  append(list, new p5.Vector(383, 211, 15, 15));

  append(list, new p5.Vector(398, 211, 15, 15));

  append(list, new p5.Vector(413, 211, 15, 15));

  append(list, new p5.Vector(420, 224, 15, 15));

  append(list, new p5.Vector(428, 237, 15, 15));

  append(list, new p5.Vector(435, 250, 15, 15));

  append(list, new p5.Vector(428, 263, 15, 15));

  append(list, new p5.Vector(420, 276, 15, 15));

  append(list, new p5.Vector(413, 289, 15, 15));

  append(list, new p5.Vector(405, 302, 15, 15));

  append(list, new p5.Vector(390, 302, 15, 15));

  append(list, new p5.Vector(375, 302, 15, 15));

  append(list, new p5.Vector(360, 302, 15, 15));

  append(list, new p5.Vector(345, 302, 15, 15));

  append(list, new p5.Vector(338, 289, 15, 15));

  append(list, new p5.Vector(330, 276, 15, 15));

  append(list, new p5.Vector(323, 263, 15, 15));

  append(list, new p5.Vector(315, 250, 15, 15));

  append(list, new p5.Vector(323, 237, 15, 15));

  append(list, new p5.Vector(330, 224, 15, 15));

  append(list, new p5.Vector(338, 211, 15, 15));

  append(list, new p5.Vector(345, 198, 15, 15));

  append(list, new p5.Vector(360, 198, 15, 15));

  append(list, new p5.Vector(375, 198, 15, 15));

  append(list, new p5.Vector(390, 198, 15, 15));

  append(list, new p5.Vector(405, 198, 15, 15));

  append(list, new p5.Vector(420, 198, 15, 15));

  append(list, new p5.Vector(428, 211, 15, 15));

  append(list, new p5.Vector(435, 224, 15, 15));

  append(list, new p5.Vector(443, 237, 15, 15));

  append(list, new p5.Vector(450, 250, 15, 15));

  append(list, new p5.Vector(443, 263, 15, 15));

  append(list, new p5.Vector(435, 276, 15, 15));

  append(list, new p5.Vector(428, 289, 15, 15));

  append(list, new p5.Vector(420, 302, 15, 15));

  append(list, new p5.Vector(413, 315, 15, 15));

  append(list, new p5.Vector(398, 315, 15, 15));

  append(list, new p5.Vector(383, 315, 15, 15));

  append(list, new p5.Vector(368, 315, 15, 15));

  append(list, new p5.Vector(353, 315, 15, 15));

  append(list, new p5.Vector(338, 315, 15, 15));

  append(list, new p5.Vector(330, 302, 15, 15));

  append(list, new p5.Vector(323, 289, 15, 15));

  append(list, new p5.Vector(315, 276, 15, 15));

  append(list, new p5.Vector(308, 263, 15, 15));

  append(list, new p5.Vector(300, 250, 15, 15));

  append(list, new p5.Vector(308, 237, 15, 15));

  append(list, new p5.Vector(315, 224, 15, 15));

  append(list, new p5.Vector(323, 211, 15, 15));

  append(list, new p5.Vector(330, 198, 15, 15));

  append(list, new p5.Vector(338, 185, 15, 15));

  append(list, new p5.Vector(353, 185, 15, 15));

  append(list, new p5.Vector(368, 185, 15, 15));

  append(list, new p5.Vector(383, 185, 15, 15));

  append(list, new p5.Vector(398, 185, 15, 15));

  append(list, new p5.Vector(413, 185, 15, 15));

  append(list, new p5.Vector(428, 185, 15, 15));

  append(list, new p5.Vector(435, 198, 15, 15));

  append(list, new p5.Vector(443, 211, 15, 15));

  append(list, new p5.Vector(450, 224, 15, 15));

  append(list, new p5.Vector(458, 237, 15, 15));

  append(list, new p5.Vector(465, 250, 15, 15));

  append(list, new p5.Vector(458, 263, 15, 15));

  append(list, new p5.Vector(450, 276, 15, 15));

  append(list, new p5.Vector(443, 289, 15, 15));

  append(list, new p5.Vector(435, 302, 15, 15));

  append(list, new p5.Vector(428, 315, 15, 15));

  append(list, new p5.Vector(421, 328, 15, 15));

  append(list, new p5.Vector(406, 328, 15, 15));

  append(list, new p5.Vector(391, 328, 15, 15));

  append(list, new p5.Vector(376, 328, 15, 15));

  append(list, new p5.Vector(361, 328, 15, 15));

  append(list, new p5.Vector(346, 328, 15, 15));

  append(list, new p5.Vector(331, 328, 15, 15));

  append(list, new p5.Vector(323, 315, 15, 15));

  append(list, new p5.Vector(315, 302, 15, 15));

  append(list, new p5.Vector(308, 289, 15, 15));

  append(list, new p5.Vector(300, 276, 15, 15));

  append(list, new p5.Vector(293, 263, 15, 15));

  append(list, new p5.Vector(285, 250, 15, 15));

  append(list, new p5.Vector(293, 237, 15, 15));

  append(list, new p5.Vector(300, 224, 15, 15));

  append(list, new p5.Vector(308, 211, 15, 15));

  append(list, new p5.Vector(315, 198, 15, 15));

  append(list, new p5.Vector(323, 185, 15, 15));

  append(list, new p5.Vector(331, 172, 15, 15));

  append(list, new p5.Vector(346, 172, 15, 15));

  append(list, new p5.Vector(361, 172, 15, 15));

  append(list, new p5.Vector(376, 172, 15, 15));

  append(list, new p5.Vector(391, 172, 15, 15));

  append(list, new p5.Vector(406, 172, 15, 15));

  append(list, new p5.Vector(421, 172, 15, 15));

​

  colorsForNotes = [

    color(0, 0, 160),

    color(0, 0, 165),

    color(11, 0, 170),

    color(22, 0, 175),

    color(32, 0, 181),

    color(41, 0, 186),

    color(51, 0, 191),

    color(60, 0, 196),

    color(68, 0, 187),

    color(77, 0, 179),

    color(85, 0, 170),

    color(94, 0, 162),

    color(102, 0, 153),

    color(111, 0, 145),

    color(119, 0, 136),

    color(128, 0, 128),

    color(136, 0, 119),

    color(145, 0, 111),

    color(153, 0, 102),

    color(162, 0, 94),

    color(170, 0, 85),

    color(179, 0, 77),

    color(187, 0, 68),

    color(196, 0, 60),

    color(204, 0, 51),

    color(213, 0, 43),

    color(221, 0, 34),

    color(230, 0, 26),

    color(238, 0, 17),

    color(247, 0, 9),

    color(255, 9, 0),

    color(255, 17, 0),

    color(255, 26, 0),

    color(255, 34, 0),

    color(255, 43, 0),

    color(255, 51, 0),

    color(255, 60, 0),

    color(255, 68, 0),

    color(255, 77, 0),

    color(255, 85, 0),

    color(255, 94, 0),

    color(255, 102, 0),

    color(255, 111, 0),

    color(255, 119, 0),

    color(255, 128, 0),

    color(255, 136, 0),

    color(255, 145, 0),

    color(255, 153, 0),

    color(255, 162, 0),

    color(255, 170, 0),

    color(255, 179, 0),

    color(255, 187, 0),

    color(255, 196, 0),

    color(255, 204, 0),

    color(255, 213, 0),

    color(255, 221, 0),

    color(255, 230, 0),

    color(255, 238, 0),

    color(255, 247, 0),

    color(255, 255, 0),

  ];

}

​

// A function to play a note

function playNote(note, duration) {

  osc.freq(midiToFreq(note));

  // Fade it in

  osc.fade(0.5, 0.2);

​

  // If we sest a duration, fade it out

  if (duration) {

    setTimeout(function () {

      osc.fade(0, 0.2);

    }, duration - 50);

  }

}

​

// When we click

function mousePressed() {

  // Map mouse to the key index

  key = floor(map(mouseX, 0, width, 0, notes.length));

  playNote(notes[key]);

  //upBuffer.ellipse(list[key].x, list[key].y, 15, 15);

  playingNote = true;

  append(colorsForEllipses, colorsForNotes[key]);

  counter++;

}

​

// Fade it out when we release

function mouseReleased() {

  osc.fade(0, 0.5);

  playingNote = false;

}

​

function draw() {

  // Draw on your buffers however you like

  drawUpBuffer();

  drawDownBuffer();

  // Paint the off-screen buffers onto the main canvas

  image(upBuffer, 0, 0);

  image(downBuffer, 0, 500);

}

​

function drawUpBuffer() {

  upBuffer.background(255);

​

  for (let i = 0; i < list.length; i++) {

    //

    // upBuffer.fill(lerpColor(color(255, 0, 0), color(0, 0, 255), i / notes.length));

    upBuffer.fill(255);

    //if (playingNote && i == key) upBuffer.fill(colorsForEllipses[i]);

    if (i < counter) upBuffer.fill(colorsForEllipses[i]);

    // lerpColor(color(255, 0, 0), color(0, 0, 255), key / notes.length)  );

    upBuffer.noStroke();

    upBuffer.ellipse(list[i].x, list[i].y, 15, 15);

  }

}

​

function drawDownBuffer() {

  // Draw a keyboard

​

  // The width for each key

  var w = width / notes.length;

  for (var i = 0; i < notes.length; i++) {

    var x = i * w;

    // If the mouse is over the key

    if (mouseX > x && mouseX < x + w && mouseY < height) {

      // If we're clicking

      if (mouseIsPressed) {

        fill(100, 255, 200);

        // Or just rolling over

      } else {

        fill(127);

      }

    } else {

      fill(200);

    }

​

    //fill(lerpColor(color(255, 0, 0), color(0, 0, 255), i / notes.length));

    fill(colorsForNotes[i]);

​

    // Draw the key

    rect(x, 0, w - 1, height - 1);

  }

}

//