top of page
  • Dror Margalit

The Flocking of the Digital Sky

The patterns formed by flocking starlings are mesmerizing. They fly in organized chaos, creating cloud-like shapes that move at a vast speed. Yet their astounding beauty comes not from their physical appearance but their behavior. Each bird takes part as an individual, creating a whole.

Find the sketch here. Watch full screen here (click on the screen to initiate)

In The Flocking of the Digital Sky, I attempted to show the connection between the natural behavior of flocking and the digital process of coding. In the first part of this project, an image of birds flocking appears on the screen. Once a participant clicks the mouse, dots appear in random areas on the screen and start to move. While the movement might seem random at first glance, it operates in a flocking manner, according to Craig Reynolds.

I chose to start the flocking behavior with dots, as it is one of the most abstract ways in which a digital element can simulate natural behavior. From there, I decided to lose some of the abstraction by adding one of the most simplistic representations of birds: an emoji of a bird. Thus, when the mouse is pressed again, emojis of birds appear on the screen and join the flocking. Last, I broke the decision between natural behavior to the digital world. At the third mouse press, the whole picture breaks into squares and joins the flocking.

To make this simulation, I followed Dan Shifman's flocking "coding challenge" when he broke down Craig Reynolds' paper about flocking and Boids. In his essay, Reynolds claims that there are three main components to flocking behavior:

"Separation: steer to avoid crowding local flockmates.
Alignment: steer towards the average heading of local flockmates
Cohesion: steer to move toward the average position of local flockmates"

On p5.js, I created a class for Boids that holds separation, alignment, and cohesion attributes. Each one of these attributes has its own function and returns a "steering" value, which is added together to form an "acceleration" value. The acceleration is added to the velocity of vectors, making them flock. Later, I experimented with different representations of the vectors - ultimately leading me to choose the dots, bird emojis, and image regions to visualize the flocking behavior.

The flocking phenomenon in nature:


Recent Posts

By Joann Myung and Dror Margalit In this project, we attempted to increase our online presence and create a feeling of proximity. Using PoseNet, we made users control their position on the screen base

bottom of page