This concept is inspired by natural phenomena like planets orbiting stars due to gravity. But instead of perfect, smooth motion, we add turbulence to add a bit of chaos to keep things dynamic and fun to watch.

In the sketch below you’ll see several circular objects (the movers) being pulled towards an invisible point in the middle of the canvas (the attractor). I’ve added some randomness to their movements using turbulence, which shakes things up a bit.

 

Key parts of the code are:

• Movers: These are the objects that move around the canvas. They’re represented as circles that feel the force of the attractor and the added turbulence.
• Attractors: There’s only one attractor in this sketch, located in the center of the canvas, but we could add more for a more complex pattern.
• Forces: The attraction is like gravity, pulling the movers toward the center. The turbulence adds some randomness, so the movers don’t just head straight for the attractor.

The following code mimics gravity: the closer the mover gets to the attractor, the stronger the pull, but the force is constrained so that the mover doesn’t get stuck. Here’s how the attraction works:

function calculateAttraction(moverPos, attractorPos) {
  let force = p5.Vector.sub(attractorPos, moverPos);  // Direction of force
  let distance = constrain(force.mag(), 5, 25);  // Constrain the distance to avoid too strong forces
  force.normalize();
  let strength = (0.4 * 10) / (distance * distance);  // Gravitational pull formula
  force.mult(strength);
  return force;
}

code

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.

It’s fascinating to contemplate that simple agents, like ants or even molecules, can come together to create complex behaviors that we see in larger systems. This reading emphasized that we can’t always predict how a group will behave just by knowing about the individual parts. It’s like trying to understand a sports team by only looking at the skills of each player rather than how they fit/work together.

I am particularly intrigued by the idea that nature often uses simple rules to create complexity. The role of computers in studying these interactions also excites me, as it opens up new ways to explore and understand complex systems, and places technologists on the frontlines of the quest to understand nature.

The program generates a random walk where each step’s size is determined by a Gaussian distribution, causing the walker to move in smooth, less erratic paths. As the walker traverses the canvas, its position influences the RGB values used to create colors. The resulting display features a vibrant color trail that evolves with the walker’s movement.

function drawTrail() {
  for (let i = 0; i < colors.length; i++) {
    stroke(colors[i]);
    point(width / 2 + randomGaussian() * 80, height / 2 + randomGaussian() * 80);
  }
}

The above code draws points on the graph deviating from the center using gaussian distribution for each random color, leading to higher intensity closer to the middle of the canvas.

Full code