How to connect/trigger elements in specific mouse-pressed combinations in p5.js

Question

I'm trying to visualize music in a concrete way:

I built a keyboard with 60 keys, which I positioned at the bottom of the canvas. The whole visualization of every single key pressed, is supposed to be above that.

The idea is, that with every key triggered, a new ellipse will be created. The colour of the ellipses should depend on the key which has a particular colour (for example; starting from left with dark-purple till bright-yellow.) The whole individualy-coloured spiral of ellipses should start from the middle and become more and more bigger with every continueing tone triggered by the keys.

(https://editor.p5js.org/Javrimir/sketches/JGx8-9kIF)

 // The midi notes of a scale
var notes = [ 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, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99 ];
var osc;



var upBuffer;
var downBuffer;

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);
  
  
  
  // A triangle oscillator
  osc = new p5.TriOsc();
  // Start silent
  osc.start();
  osc.amp(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
  var key = floor(map(mouseX, 0, width, 0, notes.length));
  playNote(notes[key]);

}

// Fade it out when we release
function mouseReleased() {
  osc.fade(0,0.5);
}





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(155);
  
    upBuffer.ellipse(375,250,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()
  
    upBuffer.ellipse(390,250,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()  
  
    upBuffer.ellipse(383,263,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()
  
    upBuffer.ellipse(368,263,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()
  
    upBuffer.ellipse(360,250,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()  
  
    upBuffer.ellipse(368,237,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()

    upBuffer.ellipse(383,237,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()
  
    upBuffer.ellipse(398,237,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()
  
    upBuffer.ellipse(405,250,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()  
  
    upBuffer.ellipse(398,263,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()
  
    upBuffer.ellipse(390,276,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()  
  
    upBuffer.ellipse(375,276,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()  
  
    upBuffer.ellipse(360,276,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke() 
  
    upBuffer.ellipse(353,263,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()
  
    upBuffer.ellipse(345,250,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()  
  
    upBuffer.ellipse(353,237,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()
  
    upBuffer.ellipse(360,224,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke() 
  
    upBuffer.ellipse(375,224,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke() 
  
    upBuffer.ellipse(390,224,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke() 
  
    upBuffer.ellipse(405,224,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke() 
  
    upBuffer.ellipse(413,237,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()
  
    upBuffer.ellipse(420,250,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()  
  
    upBuffer.ellipse(413,263,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()
  
    upBuffer.ellipse(405,276,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke() 
  
    upBuffer.ellipse(398,289,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()
  
    upBuffer.ellipse(383,289,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()
  
    upBuffer.ellipse(368,289,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()
  
    upBuffer.ellipse(353,289,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()
  
    upBuffer.ellipse(345,276,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke() 
  
    upBuffer.ellipse(338,263,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()
  
    upBuffer.ellipse(330,250,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()  
  
    upBuffer.ellipse(338,237,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()
  
    upBuffer.ellipse(345,224,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke() 
  
    upBuffer.ellipse(353,211,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()
  
    upBuffer.ellipse(368,211,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()
  
    upBuffer.ellipse(383,211,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()
  
    upBuffer.ellipse(398,211,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()
  
    upBuffer.ellipse(413,211,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()
  
    upBuffer.ellipse(420,224,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke() 
  
    upBuffer.ellipse(428,237,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()
  
    upBuffer.ellipse(435,250,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()  
  
    upBuffer.ellipse(428,263,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()
  
    upBuffer.ellipse(420,276,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke() 
  
    upBuffer.ellipse(413,289,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()
  
    upBuffer.ellipse(405,302,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke() 
  
    upBuffer.ellipse(390,302,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke() 
  
    upBuffer.ellipse(375,302,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke() 
  
    upBuffer.ellipse(360,302,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke() 
  
    upBuffer.ellipse(345,302,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke() 
  
    upBuffer.ellipse(338,289,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()
  
    upBuffer.ellipse(330,276,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke() 
  
    upBuffer.ellipse(323,263,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()
  
    upBuffer.ellipse(315,250,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()  
  
    upBuffer.ellipse(323,237,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()
  
    upBuffer.ellipse(330,224,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()
  
    upBuffer.ellipse(338,211,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke() 
  
    upBuffer.ellipse(345,198,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke() 
  
    upBuffer.ellipse(360,198,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke() 
  
    upBuffer.ellipse(375,198,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke() 
  
    upBuffer.ellipse(390,198,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke() 
  
    upBuffer.ellipse(405,198,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke() 
  
    upBuffer.ellipse(420,198,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke() 
  
    upBuffer.ellipse(428,211,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke() 
  
    upBuffer.ellipse(435,224,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()
  
    upBuffer.ellipse(443,237,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()
  
    upBuffer.ellipse(450,250,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()  
  
    upBuffer.ellipse(443,263,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()
  
    upBuffer.ellipse(435,276,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()
  
    upBuffer.ellipse(428,289,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke() 
  
    upBuffer.ellipse(420,302,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke() 
  
    upBuffer.ellipse(413,315,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke() 
  
    upBuffer.ellipse(398,315,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke() 
  
    upBuffer.ellipse(383,315,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke() 
  
    upBuffer.ellipse(368,315,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke() 
  
    upBuffer.ellipse(353,315,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()
  
    upBuffer.ellipse(338,315,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()
  
    upBuffer.ellipse(330,302,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke() 
  
    upBuffer.ellipse(323,289,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke() 
  
    upBuffer.ellipse(315,276,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()
  
    upBuffer.ellipse(308,263,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()
  
    upBuffer.ellipse(300,250,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()  
  
    upBuffer.ellipse(308,237,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()
  
    upBuffer.ellipse(315,224,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()
  
    upBuffer.ellipse(323,211,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke() 
  
    upBuffer.ellipse(330,198,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke() 
  
    upBuffer.ellipse(338,185,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()
  
    upBuffer.ellipse(353,185,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()
  
    upBuffer.ellipse(368,185,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()
  
    upBuffer.ellipse(383,185,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()
  
    upBuffer.ellipse(398,185,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()
  
    upBuffer.ellipse(413,185,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()
  
    upBuffer.ellipse(428,185,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()
  
    upBuffer.ellipse(435,198,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke() 
  
    upBuffer.ellipse(443,211,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke() 
  
    upBuffer.ellipse(450,224,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()
  
    upBuffer.ellipse(458,237,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()
  
    upBuffer.ellipse(465,250,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()  
  
    upBuffer.ellipse(458,263,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()
  
    upBuffer.ellipse(450,276,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()
  
    upBuffer.ellipse(443,289,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke() 
  
    upBuffer.ellipse(435,302,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke() 
  
    upBuffer.ellipse(428,315,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke() 
  
    upBuffer.ellipse(421,328,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke() 
  
    upBuffer.ellipse(406,328,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke() 
  
    upBuffer.ellipse(391,328,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke() 
  
    upBuffer.ellipse(376,328,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke() 
  
    upBuffer.ellipse(361,328,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke() 
  
    upBuffer.ellipse(346,328,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke() 
  
    upBuffer.ellipse(331,328,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke() 
  
    upBuffer.ellipse(323,315,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke() 
  
    upBuffer.ellipse(315,302,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke() 
  
    upBuffer.ellipse(308,289,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke() 
  
    upBuffer.ellipse(300,276,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()
  
    upBuffer.ellipse(293,263,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()
  
    upBuffer.ellipse(285,250,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()
  
    upBuffer.ellipse(293,237,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()
  
    upBuffer.ellipse(300,224,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke()
  
    upBuffer.ellipse(308,211,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke() 
  
    upBuffer.ellipse(315,198,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke() 
  
    upBuffer.ellipse(323,185,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke() 
  
    upBuffer.ellipse(331,172,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke() 
  
    upBuffer.ellipse(346,172,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke() 
  
    upBuffer.ellipse(361,172,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke() 
  
    upBuffer.ellipse(376,172,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke() 
  
    upBuffer.ellipse(391,172,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke() 
  
    upBuffer.ellipse(406,172,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke() 
  
    upBuffer.ellipse(421,172,15,15)
    upBuffer.fill(255)
    upBuffer.noStroke() 
    



  }





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);
    }


    // Draw the key
    rect(x, 0, w-1, height-1);
  }

}

Actually I already made white ellipses, so they need to be filled up in a defined direction with other colours, depending of the peculiar key which was pressed. The background will be just white as well, so the discribed effect should work.

But still there are loose ends I'm not sure how to connect.

1. How can I execute in p5.js to fill up the ellipses in a particular order one by one by mouse-pressing?
2. How can the used colour for that be combined with a specific key at the same moment the mouse is pressed?

I would be very grateful if anyone could help and share further ideas with me.

Optionaly I'm also wondering if there would be a more elegant way to create the ellipses instead to do so manually.