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

Javrimir · January 20, 2022, 5:50pm

Hello everyone,
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.

(p5.js Web Editor)

> // 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. That’s the direction I was thinking about:

Screenshot (471)

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

How can I execute in p5.js to fill up the ellipses in a particular order one by one by mouse-pressing?
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.

Chrisir · January 20, 2022, 7:04pm

Hello,

and welcome to the community and forum!

For the color in the function “function drawDownBuffer()” you can say:

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

Next

You can store the ellipse position
in a list. That’s still manually but you can work much better with an array.
(I think the calculation of the positions mathematically is not trivial)

When you display the array you can use a color. I did this.

You can store the colors in a
parallel array. I haven’t done this.
Then you can put all colors in the spiral to white and the pressed ellipse to its color.

Please try my code below.

In the 2nd version the ellipse in the spiral is highlighted. This is possible because the index of the piano below (the key variable) is the same as the index in spiral above.

You wrote:

Not sure what you mean by particular order. Is the user supposed to play a certain song? Then you could store the index in a new array (similar to notes but representing the indexes for notes) and compare the user input to it (wrong or correct index been played).

I hope I did this in the 2nd version.

Nice project!

I hope this helps!

Warm regards,

Chrisir

Full Code (1)

// 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;

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

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

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

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

  for (let i = 0; i < list.length; i++) {
    //
    upBuffer.fill(lerpColor(color(255, 0, 0), color(0, 0, 255), i / notes.length));
    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));

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

NEW VERSION (2)

// 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;

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

var key;

var playingNote = false;

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

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

// 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]);
  //fill(255, 22, 22);
  //upBuffer.ellipse(list[key].x, list[key].y, 15, 15);
  playingNote = true;
}

// 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(155);

  for (let i = 0; i < list.length; i++) {
    //
    // upBuffer.fill(lerpColor(color(255, 0, 0), color(0, 0, 255), i / notes.length));
    upBuffer.fill(222);
    if (playingNote && i == key)
      upBuffer.fill(
        lerpColor(color(255, 0, 0), color(0, 0, 255), key / notes.length)
      );
    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));

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

Javrimir · January 20, 2022, 10:26pm

Wow, I honestly didn’t expected so far a answer - awesome!

Thank you a lot, Chrisir.

Now I know a way to give every single key a specific colour.

But there is more I think I didn’t explained well.

Actually the idea is, that you can play any song you want to play and the ellipses supposed to show the “characteristics” of it by different colours:

So according to the first graph, we can see, that especially the deep-pitched tonal keys at the left were played. As the ellipses are mostly red.
At the second one it can be recognized, that mostly right blue tones were played and the “song” is very short, because only 8 keys were played, as there are only 8 ellipses filled up with colour.
The last one demonstrates how it would look like if we play the same tone all the time. The colour would be the same as well.

So, that means, that the colour which fills up a ellipse, should not disappear after that. It’s like the keys literally fill up the holes (the ellipses) and if one got filled up, and one more key gets pressed, the next ellipse gets coloured.
So the order would be always the same starting from the middle ellipse, but how many ellipses follow after that and in which colours there will be depicted, depends on the individual playstyle.

Thanks a lot for your help, Chrisir.

Chrisir · January 20, 2022, 10:28pm

You can as a start comment out background ()

Chrisir · January 20, 2022, 10:30pm

OR we can make a parallel 2nd array I already talked about: it would store the information if the ellipse is colored or not. When we have an array of color we switch the current ellipse permanently from white to its color

Remark

I just realized that you want to continuously fill the spiral from the center during playing and that the color used stems from the key that has been played.

This is also possible. Just track how many notes have been played with a new variable like counter and use it as an index for your ellipse color array

Copy the color from the piano below into the ellipse color array
at index counter

when a song is finished, we could leave the empty ellipses out (don’t show them) and enlarge the image of the colored ellipses

please ask when you need help or show your attempt

Javrimir · January 21, 2022, 9:42pm

That’s an offer I can’t refuse. Thank you.

I was thinking of make the unfilled ellipses white without black edges, same as the background. So the ellipses will be only then seen when they get coloured.

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

Do you mean from this spectre? I guess the colours should be defined then manually. Could that make sense? Some how giving each of the keys…

// 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;

… specific 60 colours?

Chrisir · January 21, 2022, 10:03pm

in setup() you can put the colors into an array like here:

something like this (or use append?)

  for (var i = 0; i < notes.length; i++) {
     colListForNotes[i] = lerpColor(color(255, 0, 0), color(0, 0, 255), i / notes.length);
  }

OR you type the color manually like

var colListForNotes =  [
   color(255, 0, 0),  
   color(252, 0, 0),
   ...
];

Javrimir · January 21, 2022, 11:32pm

Allright. I changed the unfilled ellipses color into white and the background just stays now grey or else we can’t see the ellipses (later bg will be white as well).

I wrote the colors manually in setup().
Couldn’t figure out yet how to the whole fill up/lerp with the new var.
p5.js Web Editor | Sturdy hisser (p5js.org)

// 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;

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

var key;

var playingNote = false;

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

  //  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));
  
  
  var colorsForNotes =  [
   color(0, 0, 255),  
   color(9, 0, 247),
   color(17, 0, 238),  
   color(26, 0, 230),
   color(34, 0, 221),  
   color(43, 0, 213),
   color(51, 0, 204),  
   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;
}

// 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(128);

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

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

Chrisir · January 21, 2022, 11:53pm

you were not using your new colors for the piano keyboard though

Made some other changes too (for colorsForNotes)

check out colorsForEllipses too

I have to leave now.

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

  // A triangle oscillator
  osc = new p5.TriOsc();
  // Start silent
  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, 255),
    color(9, 0, 247),
    color(17, 0, 238),
    color(26, 0, 230),
    color(34, 0, 221),
    color(43, 0, 213),
    color(51, 0, 204),
    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(128);

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

Javrimir · January 22, 2022, 9:31am

Cool, now I get how to imbed these.

Dude, it’s not self-evident to get help, especially that fast. There is no need to justify yourself for have other things to do.

You really helped me a lot, Chrisir! Thank you very much.

Chrisir · January 22, 2022, 2:10pm

you can still improve some things. For example you do use 2 buffers.

The piano buffer could be filled in setup() because it never changes
The ellipse buffer does only change when a note has been played. So it needs to be defined only then and not throughout

This reduces the computational load on the processor

Javrimir · January 22, 2022, 4:42pm

That are good suggestions. There are definitely many things which could improve the project. But for now it’s helping me already to try a few experiments, but I continuos look for improvements. I see your point to make the code more compact.

Topic		Replies	Views
Continuously update drawing during mouseDragged Coding Questions	6	526	October 21, 2020
Help with P5.js Project Coding Questions	1	325	November 26, 2019
Beginner question/s for a simple project Beginners	4	318	August 5, 2021
New to P5 - basic object question Coding Questions	3	386	March 12, 2019
Full screen issue, white canvas - keyPressed Beginners	5	894	October 15, 2021

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

Related Topics