Concept

I wanted to capture the contrast between patience and explosive action you see when a frog hunts. Frogs sit completely still, tracking flies with just their eyes, then BAM tongue shoots out in a split second. The whole personality comes from this timing difference, not from making it look realistic.

The movement is controlled purely through acceleration values. The frog’s body never moves (zero acceleration on position), but the tongue has two completely different acceleration modes: aggressive when extending (accel = 8) and gentle when retracting (accel = -0.8). The flies get constant random acceleration in small bursts, which creates that jittery, unpredictable flight pattern you see in real insects.

I found a few videos of frogs hunting online and what struck me was how much waiting happens. Most of the time nothing is moving except the eyes tracking. Then when the tongue extends, it’s over in like 200 milliseconds. I tried to capture that same rhythm lots of stillness punctuated by sudden action.

Code Highlight

The part I’m most proud of is how the tongue uses completely different acceleration values depending on its state:

if (this.state === 'striking') {
  // Explosive acceleration out
  this.tongueAccel = 8;
  this.tongueVel += this.tongueAccel;
  this.tongueLength += this.tongueVel;
  
  if (this.tongueLength >= this.maxTongue) {
    this.state = 'retracting';
    this.tongueVel = 0;
  }
}

if (this.state === 'retracting') {
  // Gentle acceleration back
  this.tongueAccel = -0.8;
  this.tongueVel += this.tongueAccel;
  this.tongueLength += this.tongueVel;
  
  if (this.tongueLength <= 0) {
    this.tongueLength = 0;
    this.tongueVel = 0;
    this.tongueAccel = 0;
    this.state = 'idle';
  }
}

 

The 10x difference in acceleration (8 vs 0.8) creates that snappy-then-slow feeling. The tongue rockets out but drifts back lazily. This tiny numerical difference gives it way more personality than any visual design could.

Embedded Sketch

 

Reflection & Future Ideas

The acceleration-only constraint actually made this more interesting than if I’d used direct position control. You get these natural easing curves without writing any easing functions. The tongue feels weighty and real.

Things I noticed while testing:

• The flies sometimes cluster in corners and the frog gives up. Maybe add a “frustration” behavior where it shifts position after too many misses?
• The eye tracking is subtle but really sells the “watching” behavior. Glad I added that.
• Random acceleration on the flies works better than I thought. They feel nervous and unpredictable.

Future improvements:

• Add multiple frogs competing for the same flies
• Make the frog’s strike range dependent on hunger (longer tongue when hungry = more acceleration)
• Flies could accelerate away when they sense the tongue coming
• Different frog personalities (patient vs aggressive = different strike thresholds)
• Tongue could miss sometimes based on fly speed

The constraint of “acceleration only” forced me to think about how motion creates personality. A patient hunter isn’t patient because of how it looks, it’s patient because of when and how it accelerates.

 

Simulating the Free Movement of Clouds

Concept

This assignment is inspired by a scene from my favorite anime “Naruto” in which a character looks up at the sky and expresses a desire to be like the clouds, moving freely without worry and simply following the wind. That idea of effortless movement and quiet reflection became the foundation for this simulation.

To connect this idea to real world motion, I found a video online of clouds slowly drifting across the sky and used it as a reference. Rather than focusing on the visual appearance of the clouds, the emphasis was placed on replicating their movement. The behavior in the sketch is controlled entirely through acceleration, allowing motion to emerge naturally from wind like forces over time. While the clouds all move in the same general direction, small variations in their movement prevent the motion from feeling uniform or repetitive.

The intention of this assignment is to recreate the calm experience of watching clouds pass by, capturing a feeling of flow and freedom through motion rather than visual detail.

Code Highlight

A key part of the simulation is how wind direction and strength are controlled using Perlin noise, which provides smooth and natural variation over time:

let baseWindAngle = PI; // base direction pointing leftwards
let noiseVariation = (noise(frameCount * 0.003 + this.offset) - 0.5) * (PI / 6);
let windAngle = baseWindAngle + noiseVariation;
let wind = p5.Vector.fromAngle(windAngle);
wind.setMag(0.05);
this.acc.add(wind);

Here, each cloud experiences a base wind force pushing it leftwards (PI radians), with subtle angle variations added by noise for a natural, organic drift.

Embedded Sketch

Reflection and Future Ideas

This project helped me understand how motion driven entirely by acceleration can create lifelike, organic behavior without directly manipulating position or velocity. Using Perlin noise to vary the wind direction over time introduces natural unpredictability, allowing each cloud to move with variation rather than uniform motion. Watching the clouds drift smoothly across the canvas feels calm and meditative, similar to observing real clouds moving through the sky.

In the future, this system could be expanded by allowing clouds to interact with one another, respond to changing environmental conditions, or evolve based on different wind patterns. Small visual enhancements, such as lighting changes or atmospheric shifts, could also be explored while keeping the movement rooted in physics-based rules. Overall, this simulation captures a quiet moment of nature’s flow and reflects the peaceful experience of simply watching clouds pass by.

Concept

For this weeks assignment we were asked to mimic movement we saw in the nature. To find out what I will do I decided to take a walk around the campus and observe movement around me. Other than students rushing to classes I also observed the trees moving under the subtle wind, but specifically I noticed the leaves falling off of the trees. This made me think, the movement of the leaves is not just done by the gravity pulling them towards the ground, but also by the wind pushing them around. I decided to try and mimic this movement.

I also wanted the sketch to be interactive so I gave the user “the power of the wind” with their mouse. So if you move your mouse closer to the leaf it will move away from it, simulating the wind in real life and how if affects a falling leaf.

Process

After getting the idea I decided to get straight to coding it. The first order of business was creating the background which includes the sky, the ground and the trees. But I didn’t want to just create a background that would be the same for everyone, I wanted to give some sense of randomness. So I came up with an idea to make a forest that randomly generates every time.

After I was happy with this and I made sure the generation would be random it was time for the more difficult task and that was actually adding the leaf that falls down and adding the required logic to make it swirl a bit so it doesn’t really just fall like a rock.

class Leaf {
  constructor(x, y) {
    this.pos = createVector(x, y);
    this.vel = createVector(0, 0);
    this.acc = createVector(0, 0);

    this.size = 26;

    // Rotation
    this.angle = random(TWO_PI);
    this.spin = random(-0.03, 0.03);

    // Motion
    this.flutterStrength = 0.06;
    this.flutterChance = 0.02;
    this.dragK = 0.02;

    // Background wind
    this.windT = random(1000);
    this.baseWindStrength = 0.18;
  }

I created a leaf class that would “manage” all the leaves.

I was really happy with the result, but there is one issue with this. The leaves start from way up above the trees so it looks pretty unnatural. To fix this I created a new function which would spawn a leaf on a random tree foliage.

function spawnLeafFromTree() {
  let t = random(trees);

  // Spawn somewhere near the canopy
  let x = t.x + random(-t.canopyW * 0.25, t.canopyW * 0.25);
  let y = t.trunkTopY + random(-t.canopyH * 0.35, t.canopyH * 0.05);

  return new Leaf(x, y);
}

And this is how I got the final result and something I am happy with.

Code Highlight

// Leaf swinging
if (random(1) < this.flutterChance) {
  let up = createVector(0, -random(0.4, 1.0) * this.flutterStrength * 10);
  let side = createVector(random(-1, 1) * this.flutterStrength * 6, 0);
  this.applyForce(up);
  this.applyForce(side);

  this.spin += random(-0.05, 0.05) * this.flutterStrength;
}

This part of the code is responsible for the subtle swinging of the leaves. It makes their movement natural so they don’t just smoothly fall on the floor by introducing upwards, sideways and rotational impulses simulating that brief moment when a leaf catches air as it falls. I am proud of all the little math that went into it and it was honestly fun tweaking numbers to get the right movement I was happy with.

Future improvements

In the future I would like to add a bit more functionalities and possibly gamify the sketch. I like how the leaves fall and how they all pile up at the bottom but maybe I would add a feature where the mouse wind would move the ones on the floor and maybe the point will be to clean the garden. Due to the deadline I didn’t add these features yet but it is definitely something I will continue working on and improving. Overall this was a really fun project and I can’t wait to explore it further.

 

Concept

This sketch explores the movement of trees responding to wind. The main inspiration comes from observing how trees do not move rigidly or instantly, but instead sway, and slowly settle after a gust passes. I was particularly inspired by a reference video showing the collective motion of trees, where the movement feels alive and unpredictable rather than mechanically precise:

@heart_echo_creates

I love watching the trees sway in the wind and the sound it makes…soothing…#fyp #nature #trees #relaxing #naturelover #windy

♬ original sound – Heart_Echo_Creates

 

Instead of directly animating tree shapes, I focused on simulating the forces that cause the movement, allowing the motion to emerge naturally. The mouse represents wind: when the mouse is pressed, wind is applied, and when it is released, the environment returns to a calmer state.

Sketch

Highlight of some code

This sketch simulates tree movement by using a force-based system built around position (pos), velocity (vel), and acceleration (acc). Wind is applied through the applyWind() function, where a force vector is calculated toward a target and scaled using setMag() to control acceleration strength. Instead of directly controlling position, acceleration influences velocity, which is then damped using vel.mult(0.97) to simulate resistance and prevent abrupt motion. Wind strength is smoothly transitioned using lerp, avoiding sudden changes in force, while Perlin noise (noise()) continuously offsets the field position to create subtle movement even when no wind is applied.

// Acceleration-driven “wind” (force → acc → vel → pos)
applyWind(tx, ty, strength, maxSpeed) {
let target = createVector(tx, ty);
let force = target.sub(this.pos); // direction toward wind target

this.acc = force.setMag(strength); // ACCELERATION is the control
this.vel.limit(maxSpeed); // cap speed so it stays natural
}

update() {
this.vel.mult(0.97); // keeps it tree-like
this.vel.add(this.acc);
this.pos.add(this.vel);
}

Milestones and challenges

Initially, my plan was to have the wind continuously follow the mouse position. However, during testing, I encountered a major issue: when the mouse moved too quickly, the motion became glitchy. I experimented with changing acceleration values to smooth it out, but doing so removed the feeling that made the movement feel like trees.
So I decided to switch from mouse-movement interaction to mouse-press interaction. The wind becomes a controlled event rather than a constantly fluctuating input. This solved the glitching problem and preserved the idea of gust-based movement, which better communicates the behavior of wind moving through trees. Here is a video of when it was following the mouse.

Reflection & future work

With more time I would like to revisit the idea of having the system follow the mouse position more directly, but with improved smoothing techniques that preserve the tree-like behavior. I’m also interested in expanding the project beyond the screen.
One future direction would be integrating a projected camera and Arduino input, where physical movement in space such as camera motion controls the wind force. This would further emphasize the connection between real-world motion and the simulated environment, strengthening the metaphor of wind and trees.

Flake’s argument that nature is “frugal” and reuses the same simple rules for everything feels like a massive leap for us to make as a species. While he uses examples like the self-similarity in snowflakes and ferns to show how simple rules create complexity , I think we’re still too early in our development to claim we’ve figured out nature’s “program.” Now I’m not a hard science expert, but I find it hard to buy into his bold claim that nothing in nature stands above computational processes. We’re constantly discovering new things that break our old rules, and it feels a bit arrogant to assume that just because we’ve invented math and physics that can simulate a duck or an ant colony, we’ve actually decoded the fundamental “code” of the universe.

I also have a hard time with Flake’s “Silicon Laboratory” metaphor, mostly because it feels like it strips away the actual weight of being human. He talks about how groups like ant colonies or gazelle species find “solutions” through multiplicity , and while it’s true that human societies developed faster when we started sharing knowledge, being part of a group isn’t always a perfect “computational” win. In real life, groups can lead to things like mob violence or, on a completely different coin, the deep grief of losing someone – emotional experiences that a computer simulation could never truly capture. Flake seems biased by his computer science background, seeing the world as a series of number mappings. It makes me wonder, if we reduce everything to simple rules, do we lose the ability to understand things like yearning or heartbreak that don’t follow a logic-based script?

Reading Chapter 2 of The Nature of Code weirdly calmed me down. I think I usually approach motion by trying to make things feel dramatic or responsive, like faster equals better. This chapter made me slow down and realize that motion is not about speed at all. It is about pressure. Direction. Influence.

What really clicked for me is the idea that forces act on acceleration, not velocity. That sounds obvious when you read it, but in practice I was constantly breaking that rule. Every time I moved the mouse, I was basically telling the system to panic. Once I stopped doing that and forced the speed to stay constant, the sketch suddenly felt more confident. The rain did not need to prove anything. It just kept falling.

I also liked how the book is not obsessed with realism. It cares more about whether something feels believable. That gave me permission to simplify. My rain is not physically accurate, but it behaves consistently. Gravity always pulls down. Wind always pushes sideways. When the cursor leaves, the wind eases out instead of snapping back. That easing honestly made the biggest difference emotionally. It feels patient, not reactive.

Another thing that stuck with me is how small forces matter when they accumulate. I kept my wind values tiny because I was scared of it getting messy. But because they are applied every frame, they slowly shape the motion. That made me trust the system more instead of over-designing the interaction. I did not need big gestures. I needed persistence.

this chapter made me realize that personality in motion comes from constraints. By limiting speed and letting forces only steer, the rain feels stubborn in a quiet way. It does not rush when you touch it. It responds, but on its own terms. I think that is the first time I felt like I was designing behavior instead of just animation.

For future work, I want to play more with multiple forces at once without losing control. I am also interested in how constraints can be used intentionally to create mood, not just structure. This reading made me think less about showing off interaction and more about letting motion breathe.

reference video

For my movement-in-nature example, I focused on rain falling in wind. I like rain because it looks simple, but it is actually full of micro rules. It accelerates because of gravity, it gets pushed sideways by wind, and it never falls in a perfectly clean line. It feels alive even when nothing “exciting” happens.

My goal was to give the rain a personality through behavior only: steady, determined drops that do not freak out. Even when you move your cursor hard left or right, the rain will lean but it will not speed up. It is stubborn in a calm way.

Rules I used

1. Each raindrop has a velocity and an acceleration.

2. Acceleration acts like steering, not like speed boosting.

3. After applying acceleration, I force the velocity back to a constant magnitude so every drop keeps the same speed.

4. Cursor movement creates wind direction, but the wind eases in and out so it feels natural, not like a switch.

5. Mouse click adds more drops, it does not change the physics.

Code highlight I am proud of

This is the moment where the whole concept becomes real. I let acceleration steer the motion, then I “lock” the speed so nothing can accidentally accelerate out of control:

This is basically my “thesis”. The rain can have mood and direction changes, but it stays consistent. It feels grounded.

Embeded sketch

Reflection + future improvements

I love how it turned out honestly

What worked:

• The constant speed constraint makes the sketch feel controlled and intentional. Even when the wind changes, it stays believable and not chaotic.

• The eased wind makes interaction feel like a real force building up, not a sudden game mechanic.

• The click-to-add drops changes the “weather intensity” without breaking the physics.

What I would improve next:

• Depth: Add a second layer of drops that are thinner and slightly slower, so it feels like near/far rain.

• Gust behavior: Instead of mapping wind directly to mouseX every frame, make occasional gusts that ramp up and decay, then let the cursor influence gust direction.

• Splashes: When drops hit the bottom, spawn tiny splash particles for a few frames.

• Performance polish: Use an object pool for drops so we reuse drops instead of constantly adding new ones when clicking.

 

What inspired this project is my fish, Abdulfattah, a Betta fish that was gifted to me from a very dear person to my heart.

This sketch mimics natural fish movement when it spots food. The user moves the mouse around and upon clicking you essentially drop a fish food pellet, and the fish mimics natural movement and acceleration towards food.

I first started t project by adding a background I found online

then I made a rectangle that will later be a fish to start simulating it’s  movement.

then I wrote very simple code with if statements just as a base for my fish movement.

 

then I updated my code to lerp (linear interpolation) towards the mouse.

new_pos= current_pos + (target_pos – current_pos) * speed

 

After that I started implementing dropping fish pellets, I started with creating a simple function to spawn pellets with an array of circles.

let circles[];

  //in draw
  for (let circle of circles) {
    fill(139, 69, 19); // brown
    noStroke();
    ellipse(circle.x, circle.y, 20, 20);

function mousePressed() {
  circles.push({x: mouseX, y: mouseY});
}

Then I added a sinking motion for the pellets with a slight drift using the sin function to simulate natural waves pushing pellets around as they are sinking with a random angle for variation.

// draw food pellets
for (let i = circles.length - 1; i >= 0; i--) {
  let circle = circles[i];
  
  // make circle float downwards
  circle.y += circle.speed;
  
  // increment the angle for sin
  circle.angle += 0.05;
  
  // subtle drift for food pelletes
  let drift = sin(circle.angle) * 20;
  
  // draw circles
  fill(139, 69, 19);
  noStroke();
  ellipse(circle.x + drift, circle.y, 20, 20);

 

then I edited the code to make the rectangle follow the pellets instead of the mouse. For error handling, the pellets are put in a stack such that the rectangle eats the pellets using a queue as a data structure following the FIFO (first in last out) principle.

 

A challenge I faced:

As shown in the previous gif, there was a problem where the rectangle can’t eat the food because the pellets are drifting and sinking. This is happening because the rectangle is trying to go the position of that circle but it doesn’t account for the drifting and sinking, therefore, its more like it’s tracing the pellet rather than trying to catch it.

The way I tackled this challenge is also a highlight of the code that I’m proud of.

function followCircles(){
  // if there are circles, follow the first one following FIFO principle
  if (circles.length > 0) {
    let target = circles[0];
    
    // predict where the pellet will be
    let futureY = target.y + target.speed * 10;
    let futureAngle = target.angle + 0.03 * 10;
    let futureDrift = sin(futureAngle) * 1.5;
    
    let targetX = target.x + futureDrift; // i add the predicted position here so the fish can catch the food
    let targetY = futureY;
    
    // calculate direction to predicted position
    let dx = targetX - x;
    let dy = targetY - y;
    let distance = dist(x, y, targetX, targetY); // calculate the eucilidian distance of the fish and the pellet
    
    // normalize direction and apply acceleration
    if (distance > 0) {
      vx += (dx / distance) * acceleration;
      vy += (dy / distance) * acceleration;
    }
    
    // apply friction for more natural movement
    vx *= friction;
    vy *= friction;
    
    // limit speed
    let speed = dist(0, 0, vx, vy);
    if (speed > maxSpeed) {
      vx = (vx / speed) * maxSpeed;
      vy = (vy / speed) * maxSpeed;
    }
    
    // update position with velocity
    x += vx;
    y += vy;
    
    // check if rectangle is touching the circle 
    let actualDistance = dist(x, y, target.x + target.drift, target.y);
    if (actualDistance < 30) {
      circles.shift(); // eat the circle
      // reduce velocity when eating 
      vx *= 0.3;
      vy *= 0.3;
    }
  } else {
    // slow down when no target
    vx *= 0.9;
    vy *= 0.9;
  }
}

another problem I faced was the fish was getting stuck around the corners but I easily fixed that but implementing a function that lets the fish wander using perlin noise (Thanks professor Jack!!)

Then I added the fish’s sprite from this website.

Future improvements and reflection:

I want to have a simulation of the background such that it actually simulates fluids and looks like water. I also have 3 more fish in the tank that are Abdulfattah’s friends that I want to add, they always steal his food so it would be more realistic that way. Moreover I want to have a bigger canvas so I can add object you naturally find in the ocean or the one’s I have in my fish tank, and an algorithm that makes the fish occasionally hide behind those objects. Lastly, I want an algorithm where  sometimes the fish just rests in the tank doing nothing, which would add more realism to the sketch.

Code Production: The Physics of the Chase

Concept & Inspiration

For this assignment, I was tasked with finding an example of movement in nature and simulating it using code. I started by looking at how birds move in flocks. There is a specific fluidity to how they accelerate and glide that feels very different from mechanical movement.

I found this video of birds in flight which served as my primary visual reference:

https://www.youtube.com/watch?v=SCX946jtKXw

The Pivot

While watching the video, I realized that we almost always observe birds from the ground looking up. I wondered: How do birds see each other?

I decided to shift the perspective. Instead of a human watching a bird, I wanted to create a First-Person Flyer (FPF) experience. The concept became a “Bird Chase Simulation,” where the user plays as a predator bird (or perhaps a playful friend bird) trying to catch up to a leading bird.

My goal was to give the movement “personality” not just through the way the bird looks, but through how the acceleration feels. High acceleration shouldn’t just mean “go faster”, it should feel energetic and slightly chaotic, changing the bird’s perspective of the world.

Process

Before I could make it look like a bird, I had to make it move like one. The prompt required controlling motion only by manipulating acceleration.

I started with a greyboxing phase.  I created a relationship where the distance between the player and the target wasn’t represented by X/Y coordinates, but by the scale of the target. If you accelerate and get closer, the target gets bigger,if you stop flapping (drag), you fall back, and the target shrinks.

Here is a screen recording of that initial physics test:

 

The Code

The part of the code I am most proud of is the relationship between the Acceleration Input and the Camera Shake.

The prompt asked us to give the movement personality. I achieved this by making the “camera” (the viewport) physically shake when the user pushes the acceleration slider to the max. It simulates the physical exertion of flapping wings hard against the wind. It bridges the gap between the math (acceleration numbers) and the feeling (struggle/speed).

Here is the snippet that handles that logic:

// === PHYSICS SECTION ===
  let accVector = createVector(0, accInput);
  playerVel.add(accVector); 
  
  // === CAMERA SHAKE EFFECT ===
  // Add shake when accelerating hard (makes it feel more dynamic)
  let shakeX = 0;
  let shakeY = 0;
  
  // Only shake if we are putting in significant effort (> 0.05)
  if (accInput > 0.05) {
    // Map the shake intensity to the acceleration input
    let shakeAmt = map(accInput, 0, 0.5, 0.5, 6); 
    shakeX = random(-shakeAmt, shakeAmt);
    shakeY = random(-shakeAmt, shakeAmt);
  }

  // Later, in the drawing section:
  translate(width/2 + shakeX, height/2 + shakeY);

The Simulation

To finalize the piece, I added a circular clipping mask to create a “binocular” or “focus” effect, simulating the bird’s vision. I also added wind lines that react to the player’s speed to create a parallax effect, enhancing the sensation of forward momentum.

Instructions:

1. Use the slider at the bottom to control your Acceleration (how hard you are flapping).

2. Try to catch up to the bird in front of you.

3. Notice how the view shakes and the wind rushes faster as you exert more energy.

Reflection & Future Work

This project was a great exercise in using simple variables (acceleration and scale) to create a 3D illusion. The hardest part was tuning the “drag” or air resistance. If the drag was too high, it felt like flying through soup; too low, and the bird felt like a rocket with no weight.

I’m happy with how the beak breathing animation and the camera shake added life to the static shapes.

For the future: Currently, the movement is linear (forward/backward). I would love to introduce steering, allowing the player to move left and right to chase the target bird as it weaves through the sky. I also think adding a Stamina bar would add a game-like element, forcing the player to choose when to glide and when to sprint.

The Computational Beauty of Nature – Ch1

The concepts explored in this reading were very central to how we view things and analyze not only nature but also human-made systems like the stock market. What left a strong impression on me is how important it is to analyze interaction in order to truly understand what something is. At the beginning of this chapter, Flake introduces the idea of reductionism, which is the process of reducing something into increments to better understand its true nature.

In my understanding, we are invited to look at this from a rather “scientific” lens in order to see how we could apply a similar concept in computing. This leaves me with the impression that it is very important for us to first understand how dissecting something in terms of meaning can then help us introduce that understanding to a computer.

The Concept

My concept is inspired by fireflies. Having never experienced them, I have always been curious about what it would feel like to interact with one, so why not simulate it?

For the sake of simulating human-to-firefly interaction, I did not want the firefly to simply float around randomly. I wanted it to follow the mouse around the sketch in order to translate a sense of curiosity between both the firefly and the user.

I implemented a Gaussian random walk (List 1) and mapped the motion to color and brightness to create a firefly glow effect (List 2).

Code that I am proud of

let glow = 220 + randomGaussian() * 20;
glow = constrain(glow, 140, 255);

I’m proud of this part of the code because I wanted the firefly’s glow to feel as natural as possible. Using Gaussian randomness makes the brightness fluctuate gently instead of jumping unpredictably, and constraining the values keeps the light within a realistic range.

The Sketch

Reflection

Initially, I wanted to mimic bacteria and binary fission, but that idea felt a bit too ambitious at this stage. I decided to step back and focus on exploring motion in a simpler way, which led me to this firefly concept. I was interested in creating something that felt organic and calm rather than complex.

For future work, I wanted to place the firefly over an image of a forest, but I realized that doing so would either cause the firefly’s trail to disappear or require the background to fade over time. I think finding a way to balance a real forest image with the artificial movement of the firefly could be an interesting direction to explore further.