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

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:

  1. 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.
  2. 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.
  3. 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.

1 Like