Month: February 2026

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.