Concept

When I read thought about tension over time the visual that came to mind was that of a ball being squeezed until it ruptured. I originally wasn’t sure how I was going to fit that into the simulation and how I would incorporate flocking behavior but as I went through the the work of Robert Hodgin I had an idea.

I liked the look of the flocking behaviour in 3 dimensions as well as the red lighting. I thought about having it contained inside and that ball I had in mind upon rupture the flocks inside would escape rapidly and slow down over time.

Sketch

(orbit control is enabled, click and drag your mouse to view from different angles when viewing the sketch)

Highlight

function releaseBoids() {
  confinementActive = false;
  released = true;
  releaseFrame = frameCount;

  for (const boid of boids) {
    let outward = p5.Vector.sub(boid.pos, centerPoint);
    if (outward.magSq() < 0.0001) {
      outward = p5.Vector.random3D();
    }
    outward.setMag(random(5.5, 8.2));
    boid.vel.add(outward);
    boid.maxSpeed = RELEASE_SPEED_START + boid.speedBias;
  }
}

Once the circle reaches a certain threshold radius it vanishes and the function above is called. It’s only about 15 lines but in my opinion it creates the most interesting effect in the entire simulation.

What it does is simply give each boid an outward vector force of a random magnitude between 5.5 to 8.2. In my opinion that range and those values make it just right that the effect is not too strong that it’s overwhelming but is not too weak that its underwhelming but is instead in my opinion satisfying.

Milestones

The Humble Sphere

My first step after creating the WEBGL canvas was to make the sphere which decreases in size over time. I chose a black background to give the most contrast for any effects I add later on. For the sphere I chose a light-blueish color mostly because of personal preference. The color of the sphere itself is not meant to have much meaning instead I want the attention to be on the boids and the decreasing size of the sphere.

Boids

These are the boids travelling in 3 dimensions. At this point in time they did not have any special effects. I wanted them to be read since I imagined the effect of squeezing to be like that of increasing heat. In the real world particles as they are trapped in a volume that is decreasing increase the amount they vibrate by and the vibration also known as brownian motion is what we call temperature. It’s how combustion occurs in diesel engines whereby the volume decreases as the cylinder compresses the fuel air mixture and unlike gasoline there is no spark plug the combustion alone is enough to combust (this is known as compression ignition).

Boids + Sphere

The way I had the boids stay inside the sphere at this point was by hard limiting the position of the boids rather than manipulating the steering direction as well (I implemented that as well later on).

Final

In the final I made a few key improvements. I added multiple gradients and made the blendMode ADD: The color of the boids change based on their speed, at their fastest they are purple, at their slowest they are red, the radius of the boids change based on how close or far they are to the center of the sketch, bigger towards the center and smaller towards the edges, lastly blendMode(ADD) meant that with more boids overlapping the colors get added and make a whiter color this makes it easier to see when boids are more clumped up together especially at the beginning.

Reflection

I’m happy with how the effect turned out and I was surprised by the swirling effect that came about in the beginning. As the circle decreased the boids still moved as they would normally albeit constrained and this made it look like they were swirling around the circle.

Hodgin’s work was made in Houdini which utilized the GPU and made the effect of using point lights possible with large amounts of flying objects whereas in p5 I don’t think the same would be possible and still retain a high framerate. I found that for my simulation around 600 was the limit for the number of boids whilst still running fairly well and that was without any lighting effects the best I could do was add the blendMode(ADD) line to make things more aesthetically interesting.

Going forwards I would like to try out different software maybe openFrameworks to see what is possible and also I want to try out audio cues for when the sphere vanishes and for boids that are travelling close to the camera and based on how fast they are going.

Concept + References

I didn’t want to make a “flocking simulation” in the traditional sense. I wanted something that feels alive but also unstable. Something that holds itself together, then loses control, then collapses.

The system is structured as a looped lifecycle with four distinct phases: organism, boil, shockwave, spores

Each phase shifts not just motion, but also energy, density, and emotional tone. It’s less about birds flocking and more about a body going through pressure, rupture, and release.

I was really inspired by Ryoichi Kurokawa’s work, especially how he uses temporal disruption instead of just spatial complexity. His visuals feel like they’re glitching in time, not just moving fast.

I was also thinking about Robert Hodgin’s particle systems, especially how they feel dense and intentional rather than random. His work made me care more about composition, not just behavior.

So instead of just coding movement, I focused on how particles occupy space, how density creates visual tension, how color and blending create a kind of “liquid light”

Highlight of Code I’m Proud Of

I think the strongest part of my system is how the phases are structured and how each one completely redefines the physics:

function getPhase(t) {
  if (t < 13000) return 'organism';     
  if (t < 21000) return 'boil';         
  if (t < 24000) return 'shockwave';    
  return 'spores';                      
}

This simple structure lets the whole system evolve over time instead of staying static.

But what I’m most proud of is the shockwave phase. Instead of just pushing particles outward, I introduced a temporal glitch:

if (frameCount % 4 === 0) {
  this.vel.mult(0.1); 
} else {
  let blastAngle = random(TWO_PI);
  let blast = p5.Vector.fromAngle(blastAngle).mult(5);
  this.acc.add(blast);
}

This creates a stuttering effect where particles freeze and explode intermittently, which feels much more chaotic and alive than a smooth explosion. It’s not just movement, it’s disruption.

Embedded Sketch

Milestones 

Milestone 1: The Basic Flocking Organism

Before I could build a complex timeline, I needed a base system. I started by creating 1,000 particles and using Perlin noise to guide their movement. I added a gentle pull toward the center of the screen so they wouldn’t just scatter. I also drew a low-opacity background every frame to create soft motion trails.

Milestone 2: Introducing the Time Machine

Once I had my organism floating nicely, I wanted the environment to change over time. I created a 30-second loop using millis() and wrote a getPhase() function to track time. I then updated my particle’s physics engine to react completely differently depending on whether it was in the organism, boil, shockwave, or spores phase.

Milestone 3: The Final Visuals and Additive Blending

The physics were working perfectly, but it felt a little stiff visually. For my final step, I mapped specific colors to the timeline so the sketch would transition from cool cyan to boiling orange, into blinding white sparks, and fade out into grey dust.

To give it that volumetric, glowing liquid feel, I implemented blendMode(ADD) in the draw loop, and I instructed larger particles to draw a secondary, highly transparent circle behind them.

Reflection

I think what worked best in this piece is the sense of tension and release.

The “organism” phase feels calm but slightly eerie, like something is forming. Then the “boil” phase starts introducing discomfort and instability. The “shockwave” is the breaking point. And the “spores” phase feels like exhaustion, like everything just gives up and drifts.

I also paid a lot of attention to:

• blending modes (ADD made everything feel volumetric and glowing)
• motion blur through background fading
• particle size variation to create depth

I didn’t want it to look like dots moving. I wanted it to feel like matter.

Future Improvements

If I were to push this further, I would:

• Make transitions between phases more gradual instead of abrupt
• Introduce sound and sync the phases to audio (especially inspired by Kurokawa)
• Add interaction, maybe letting the mouse disturb the system
• Experiment with depth or layering to make it feel even more spatial
• Refine color transitions so they feel less mapped and more emergent

Also, I think there’s potential to push the narrative more. Right now it suggests a lifecycle, but it could become something more specific or symbolic.

Final Thoughts

This project made me realize that generative systems don’t need to just simulate nature. They can simulate states, emotions, or conditions.

It’s not about particles.
It’s about what they feel like together.

Habub — هبوب

Concept

I wanted to simulate a desert sandstorm, specifically a haboob, which comes from the Arabic word هبوب meaning “blasting wind.” The idea was simple: start calm, build slowly, hit a peak, then fade back to silence and repeat.

I looked into how sandstorms actually work. Turns out there are three types of particles in a real storm. Heavy grains that barely move on the ground, medium grains that bounce and leap, and fine dust that the wind just carries completely. That’s exactly what the three particle types in this sketch are based on.

For inspiration I looked at Ryoichi Kurokawa, he makes audiovisual pieces that build tension slowly and let silence do the work. And Robert Hodgin who has been making flocking simulations for over 20 years and finds something new in them every time.

Code I’m proud of

The part I like most is how new particles are born from existing ones. A sand grain on the ground gets knocked loose and becomes a bouncing grain. A bouncing grain kicks up dust. The storm builds itself, I didn’t script it, it just emerges.

let source = random(creeps);
flock.addBoid(new Boid(source.pos.x, source.pos.y, 'saltation'));

A new particle appears at the exact position of an existing one. That one line is basically the whole storm.

Embedded sketch

Concept

In the deep ocean, bioluminescence is not just decoration. Many creatures glow brighter when threatened. Firefly squid, siphonophores, certain jellyfish species all do this. The light is involuntary. It is a biological fear signal, and every creature nearby can read it.

That is the idea behind this sketch. It is a flocking system where light and movement share the same variable. Each boid’s proximity to a descending predator controls both how hard it steers away and how brightly it glows. Fear is brightness. The swarm illuminates itself at the exact moment it is most in danger.

The piece moves through three acts. First, creatures drift in near-total darkness, sparse, slow, barely visible. Then a shadow descends from above. Not fast, not aggressive, just a pressure. The boids closest to it sense it first and begin moving away, the fear-glow spreading outward through the swarm. Finally the predator arrives fully and the swarm explodes outward in a burst of light. Then silence. The survivors scatter into the dark, dimmer than before.

Embedded Sketch

Code I’m Proud Of

The piece’s central idea lives in about ten lines inside the Boid class. this.fear is a single float between 0 and 1 computed from distance to the predator. It does two jobs at once: it scales the steering force pushing the boid away, and it is read by draw() to amplify the glow radius and opacity.

// Inside applyPhaseForces(), descend phase:
let toPred   = p5.Vector.sub(this.pos, createVector(pred.x, pred.y));
let d        = toPred.mag();
let fearZone = 280;

if (d < fearZone) {
  this.fear = map(d, 0, fearZone, 1.0, 0);
  toPred.normalize().mult(this.fear * 0.38);
  this.acc.add(toPred);
} else {
  this.fear = 0;
}

// Inside draw():
const baseAlpha = 0.60 + fearGlow * 0.40;
const glowR     = this.size * 2.2 + fearGlow * 5;

The same number that moves the creature also lights it up. I did not need a separate brightness system. That reduction felt like the sketch finding its own logic rather than me imposing one.

Milestones and Challenges

Milestone 1: Basic flocking

The first working version was just the three steering forces running on a plain black background. No phases, no predator, no glow. Getting alignment, cohesion, and separation balanced took more time than expected. At equal weights the boids collapsed into a tight unmoving ball. I had to bring cohesion down significantly and give separation more authority before the swarm started feeling alive.

Milestone 2: Adding bioluminescent glow

Once the flocking was stable I replaced the flat ellipse with a radial gradient halo drawn through drawingContext. This is where the creatures started feeling like they lived underwater rather than on a screen. I also added the teardrop body shape and started assigning each boid a random hue in the cyan-to-violet range.

Milestone 3: The predator as pressure, not shape

My first predator was a solid dark ellipse and it looked like a game obstacle. The fix was removing any hard edge entirely and replacing it with a radial gradient that fades to nothing — an absence of light rather than a presence of shape. This one change made the whole sketch feel more like an environment and less like a simulation.

Milestone 4: Fear driving both movement and light

This was the central technical challenge. Once the predator was descending I needed the boids to respond to it — not just steer away, but glow brighter as they got closer. The insight was that these could be the same number. I computed this.fear as a map() of distance and fed it into both the physics and the renderer simultaneously.

Reflection

The fear-as-light mechanism worked the way I hoped. Watching the swarm light up at the moment of greatest danger, because of the danger, gave the piece a logic that felt biological rather than programmed.

A few directions I would take this further. Sound is the most obvious missing layer. The panic phase has a visual density that feels like it needs a corresponding audio response, something close to how Kurokawa synchronizes brightness and sound intensity. The predator could also be made reactive rather than scripted, hunting the brightest cluster in the swarm. This would create a feedback loop where fear-glow attracts the very thing the swarm is afraid of. Individual boid memory would also add depth. Creatures that were nearly caught could stay darker and more erratic for longer, while those that escaped early return to calm faster. Trauma as a behavioral variable rather than just a visual one.

References

Ryoichi Kurokawa’s audiovisual works were a direct influence, specifically how he treats light density as a rhythmic and emotional variable rather than aesthetic decoration. Robert Hodgin’s fluid creature systems shaped how I wanted the boids to feel: biological rather than mechanical. 

This project is inspired by murmuration by robert hodgin. It merges algorithmic plant growth with flocking mechanics. The project transitions particles between a structured tree form and a chaotic swarm. I also took inspiration from the reinforcement learning process which is where the idea of generations comes from.

I started by defining the base entity. I created the Boid class then I gave each boid standard steering behaviors. These include separate and align then I added the cohere function. These functions calculate vectors. The boids avoid crowding instead they match velocities with neighbors. Next, I tackled the structural element. I wrote a recursive function named genPts. This function calculates coordinates for a branching fractal tree. The function takes arguments for position and angle then it processes length and depth and it calculates segments using trigonometry. It pushes vectors into a global treePts array but I needed a system to alternate between the two behaviors so I implemented a time-based state machine inside the draw loop. Phase zero represents the growth phase. Boids use an arrive steering behavior to settle into specific coordinates along the fractal branches. Phase one represents the swarm phase. The boids break free. They apply flocking rules.

Particles

flocking

fractar tree generation

putting the particles together

the code i am proud of is regenTree function. It manages the visual evolution of the simulation across generations, then it scales the tree depth. It mutates the branching spread angle and dynamically links the boid objects to the newly generated tree points.

// rebuild tree by age/gen
function regenTree(g) {
  treePts = [];
  
  // scale depth/len by gen (cap depth 4 fps)
  let maxD = min(3 + floor(g / 2), 6); 
  let baseLen = min(height * 0.12 + g * 12, height * 0.3);
  
  // mut spread by gen
  let spread = PI / (5 + sin(g) * 1.5);

  genPts(width / 2, height - 30, -PI / 2, baseLen, maxD, spread);

  // sync boids to new pts
  for (let i = 0; i < treePts.length; i++) {
    if (i < boids.length) {
      boids[i].treePos = treePts[i].copy(); // assign new tgt
    } else {
      // spawn new boids at base to sim growth
      boids.push(new Boid(width / 2, height, treePts[i]));
    }
  }
  
  // trim excess (edge case)
  if (boids.length > treePts.length) {
    boids.splice(treePts.length);
  }
}

A specific challenge involved the arrive steering behavior. The boids would overshoot their target coordinates at high velocities. They would oscillate rapidly around the target point. I adjusted the distance threshold mapping by mapping the boid’s speed to decrease linearly when it enters a 100-pixel radius of its assigned treePos. This adjustment solved the jittering issue.

I plan to add interactive elements. Users will click to disrupt the swarm. I want to introduce a wind force variable. This force will push the boids horizontally. I will implement a visual trail system for the boids to emphasize their flight paths.

Concept and Sketch

For this assignment, I wanted to explore the concept of tension and release within a biological system. I was inspired by the way starling murmurations move as a single, fluid organism, and how that harmony is momentarily shattered by external threats.

My visual goal was to move away from the triangle-boid aesthetic and create something more aetherial: bioluminescent beings. I drew inspiration from the use of additive blending and light trails to create volumetric glow that we’ve seen in our course before.

The sketch begins in a state of calm flocking. The beings move in a coordinated, rhythmic dance, glowing with soft blue hues. Their wings flap slowly, and they form dense, glowing clouds.

When the user clicks, a lightning strike occurs. A thunder crack sounds, the screen flashes, and the flock’s physics instantly shift into a scatter behaviour. They turn a fiery red, their wings flap frantically, and they fly away from each other in a panic. However, nature always finds its way back to balance; after five seconds, the storm passes, and the beings slowly regroup into their peaceful blue pulse.

Highlight

I am particularly proud of how I achieved the cloudy look of the swarm without using expensive blur filters. By using blendMode(ADD) and layering multiple ellipses with very low opacity, the light “stacks” wherever the beings are close together.

// This creates the "Nebula" effect when birds cluster
fill(h, 90, 100, 3); // Only 3% opacity
ellipse(0, 0, this.bodySize * 7, this.bodySize * 5);

// The "Hot Core" stays visible in the center
fill(h, 15, 100, 85);
ellipse(0, 0, this.bodySize, this.bodySize * 0.5);

This means a single bird looks like a faint spark, but a cluster of fifty birds creates a brilliant, white-hot center that fades into a saturated blue aura.

Milestones and Challenges

The first step was getting the math right. I started with simple, non-glowing circles to ensure the Separation, Alignment, and Cohesion forces were balanced. The challenge here was making the movement feel organic rather than robotic.

Once the movement was smooth, I replaced the circles with layered ellipses and enabled blendMode(ADD), and it transformed the dots into a cohesive, glowing nebula.

To make the agents feel like beings rather than particles, I added wings. I used a sin() wave to oscillate the position of two side-ellipses. Matching the flap speed to the flock’s velocity made a huge difference in the realism of the motion.

The biggest logic challenge was creating the Auto-Revert system. I had to implement a timer using millis() so that the scatter state wasn’t permanent. I also added the lightning flash and the thunder sound to turn the state change into a sensory event.

Reflection

This project taught me again how small changes in physics parameters (like increasing separation while decreasing cohesion) can completely change the emotional tone of a piece. Thematically, it was a reminder of something we often forget: this too shall pass. Working on this sketch reminded me of an Urdu quote from the legend Faiz Ahmed Faiz: “لمبی ہے غم کی شام مگر شام ہی تو ہے”. Translated, it means: “The night of sorrow is long, but it is still just a night.“

The storm will clear. The sun will rise!