Interactive #1: Color Flocking
This the first of a new series of interactive art using p5js. Color Flocking is an interactive animation based on the natural animal behavior known as flocking: something that birds, insects, and other wonderful creatures on our planet tend to do. Back in 1986, a guy named Craig Reynolds developed an algorithm that demonstrated a computer simulation of animal flocking. Additionally, with the help of Daniel Shiffman and his book The Nature of Code, I was able to create a similar flocking behavior using colors.
The idea of color flocking was very simple once I understood Reynolds’ flocking algorithm. His algorithm is based on each object’s position on the screen and this can either be 2-dimensional (x and y positions) or 3-dimensional (x, y, and z positions). There are three steering behaviors which make up the flocking simulation:
- Separation: avoid crowding by moving away from nearby flockmates.
- Alignment: steer toward the same heading as nearby flockmates.
- Cohesion: steer toward the average position of nearby flockmates.
You can see this in action many places on the web, and in particular on Shiffman’s site. In my color flocking version I replaced x, y, z positions as red, green, blue colors. The 3D vectors that contained x, y, z positions are now 3D vectors of red, green, and blue. Ultimately, they’re all still just numbers. The x position on screen might range from 0 to 1280 (depending on your screen size) while the red color value will range from 0 to 255. I made a grid of squares that only consider the colors of their neighbors (east, west, north, south, northeast, southeast, northwest, & southwest). The result is an ever-evolving color visualizer. You can play with the separation, alignment, and cohesion sliders below the animation to get different results. Since I used p5js to create this, it is limited by the speed of your browser. The square size is very important in the amount of processing the animation has to do. With smaller squares, you have exponentially more processing to do because there are exponentially more squares. If you aren’t satisfied with the larger blocks (but smaller amount) then check out my video of color flocking made in Processing at the bottom of the page. The p5js animation uses squares that are 20px in size while the video made in Processing used squares that are 5px in size. The next step is to create sound flocking…
This is best viewed on a desktop computer or tablet. Mobile phone screens are a little too small. The ‘r’ key will reset the squares by randomizing their colors. Mouse click on a square to set all squares to that color. Contact me if you have any questions or suggestions. Here’s the source code.