Skip to content
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


This is my first p5.js sketch that combines generative visuals with generative music. On the physics side, I used elastic collision to simulate the balls bouncing off each other, and musically I used a reordered chromatic scale, a very basic use of a 12-tone row, as that seemed like an interesting way to give it more structure than completely random notes, without limiting the possibilities harmonically.

The Rules

  • When the page loads, the chromatic scale (C, C#, D, ...B) is shuffled into a random order. This is our sequence of notes.
  • Balls appear with a random direction and speed, with a randomly assigned note from the shuffled chromatic scale sequence, and a randomly assigned octave. The ball's hue is determined by the note; size is determined by the octave.
  • If a ball bounces off another ball, or the edge of a screen, the note plays and the ball increments to the next note in the sequence, and so to the corresponding hue.
  • When the ball has completed the sequence, it disappears.
  • Another ball is added one second after the last one was added (if there aren't enough balls on screen), or one second after the last one was removed.
  • Clicking on the screen adds another ball at the cursor position.
  • Maximum starting speed and ball sizes are determined by the window size, to avoid things getting too cluttered or sparse.
  • It's in stereo too: the note's pan level at each bounce is set by the position of the ball.



  • Mass. It's hard-coded to equal 1 regardless of radius for now.


P5 sketch combining elastic collision with a 12-tone row



No releases published


No packages published