The first circle starts dancing. The second wait for a fraction of a second and start to move. The third, the fourth, and the rest follow. There is less than a second delay between the circle's movement. Yet, in our brains, they form patterns that create different shapes. At times it looks like waves, at other times, it looks like the circles simply go up at down. In any case, I tried to visualize the same movement with slight variations - to make the circles dance!
Change the slider to interact!
Find the sketch here
Making of The Hive Mind of the Dancing Circles
To make this sketch work, I had to make each circle have different position values yet make them respond to the same overall movement.
Defining the circles
To define circles, I made a Class that included the position, appearance, and movement of the circles. Then, I defined the movement of the circles, making them go up and down by 3 pixels from their starting point. Doing it allowed me to reproduce moving circles more efficiently using a "for" loop. However, I found it challenging to create a nested loop because I used the loop to define the array (rather than the X and Y). Additionally, all the circles moved together up and down since they were all created at the same time in the same place.
An earlier version of the code - one line; same movement
Are we circles, or are we dancers?
To make more circles and make them "dance," I found a different way to produce the circles across the canvas. Instead of using a nested loop, I used "mod" to tell the loop to go down a line after producing eight circles. Additionally, I set a slightly different starting point in the "move()" function that I defined. Last, I added a slider to show how the pattern looks different when the distance between the circles changes.