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;
}