Butterfly Flutters

In this project, we simulate the fluttering motion of a butterfly by focusing on how acceleration could be used to control the movement.

Rules

• A butterfly’s movement is influenced by unpredictable changes in its speed and direction, so we’ll randomize the acceleration over time.
• While acceleration can be random, the butterfly doesn’t move too fast. We’ll use a damping factor to slow the object down.
• The butterfly has to stay within the canvas, so we’ll implement boundary conditions to keep it in view.
• By focusing on irregular accelerations and smooth decelerations, we can simulate the light, erratic fluttering of a butterfly.

Code

I’m particularly proud of how adding slight randomness to the acceleration makes the butterfly feel alive, without the need for overly complex design or physics.

let randomAcc = createVector(random(-1, 1), random(-1, 1));
this.acceleration.add(randomAcc);

// Update velocity based on acceleration
this.velocity.add(this.acceleration);

// Limit velocity to simulate fluttering motion, not too fast
this.velocity.limit(this.maxSpeed);

// Dampen the velocity slightly
this.velocity.mult(0.95);

link to code

Future improvements

• I could improve the butterfly’s visual design by adding more details to the wings and body.
• Adding mouse or keyboard interactions could let users “guide” the butterfly around the canvas.
• Introducing environmental elements like wind or obstacles could add complexity and realism to the simulation.