My favorite tricks

Physics

Friction

// Make the velocity for an object slightly smaller for each frame:
xVelocity *= 0.99;
yVelocity *= 0.99;

Gravity

// Add a small value to the velocity for each frame, in the ball update
yVelocity += 1;

Demo

Press the mouse to spawn more particles

Follow the mouse

// Make the velocity of the object point towards the mouse
// And scale it down to slowly move towards the mouse
xVelocity = (mouseX - xPosition)*0.05;
yVelocity = (mouseY - yPosition)*0.05;

Random walk

// Add a random number to the velocity for each frame
xVelocity += random(-2, 2);
yVelocity += random(-2, 2);

Springs(!!)

Like “follow the mouse” but with acceleration

// By adding a force/acceleration
let springiness = 2.0;
let energyLoss = 2;
let mass = 10;
xAcceleration = (springiness * (mouseX - xPosition) - energyLoss * xVelocity) / mass;
xVelocity += xAcceleration;
xPosition += xVelocity;
Click in the canvas to stretch the spring

Cheap motion blur

// Add to setup
noStroke(); // turns off stroke

// at start of draw, instead of background:
fill(0,0,0,5); // set the fill-color to black, almost fully transparent
rect(0,0,width, height); // draw a black, almost transparent rectangle on the entire window

// Don't forget to set the fill color back to the ball colors.
fill(255);

Smoke

// In the setup, set the blend-mode to additive
blendMode(ADD);

//In draw() make the balls grey transparent.
fill(200, 200, 200, 10);


// Make the blob accelerate upwards
yVelocity -= 0.1;

// In the ball.update, make the balls go up and re-appear at
// the bottom when it hist the top
if (this.yPosition < 0) this.yPosition = height;