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;