Particles
Particles are great fun. Basically particles are a list of objects with a position (x/y) and velocity (vx/vy) and a size (radius). Then during each draw cycle we move the particles x += vx; y += vy; and after that we add a little bit of logic: 1. If a particle leave the canvas (e.g. x > canvasWidth) then we change the velocity (vx/vy) so that the particles bounces of the wall. 2. If two particles hit each other, then they bounce off one another. This is a bit more tricky, as we need to calculate the angle of impact and then calculte the bounce off angle. You could also comment out the collision part.
Starting from this example you could modify this, make particles grow or shrink over time, pulsate, remove particles or add particles, make their velocity increase or decrease.
const numParticles = 100;
const particles = [];
const maxSpeed = 1;
const spring = 0.5; // speed calculation on collision
function setup() {
createCanvas(400, 400);
// createParticles
for (let i = 0; i < numParticles; i++) {
particles.push({
radius: random(3, 10),
x: random(width), // position
y: random(height),
vx: random(-maxSpeed, maxSpeed), // velocity
vy: random(-maxSpeed, maxSpeed)
});
}
noStroke();
fill(0);
}
function draw() {
background(255);
for (let i = 0; i < numParticles; i++) {
// move particle
particles[i].x += particles[i].vx;
particles[i].y += particles[i].vy;
// draw particle
circle(particles[i].x, particles[i].y, particles[i].radius);
// change direction if particle hits edge
if (particles[i].x + particles[i].radius / 2 > width) {
particles[i].vx *= -1;
} else if (particles[i].x - particles[i].radius / 2 < 0) {
particles[i].vx *= -1;
}
if (particles[i].y + particles[i].radius / 2 > height) {
particles[i].vy *= -1;
} else if (particles[i].y - particles[i].radius / 2 < 0) {
particles[i].vy *= -1;
}
// calculate collisions
for (let j = i + 1; j < numParticles; j++) {
let dx = particles[j].x - particles[i].x;
let dy = particles[j].y - particles[i].y;
let distance = sqrt(dx * dx + dy * dy);
let minDist = particles[j].radius / 2 + particles[i].radius / 2;
if (distance < minDist) {
let angle = atan2(dy, dx);
let targetX = particles[i].x + cos(angle) * minDist;
let targetY = particles[i].y + sin(angle) * minDist;
let ax = (targetX - particles[j].x) * spring;
let ay = (targetY - particles[j].y) * spring;
particles[i].vx -= ax;
particles[i].vy -= ay;
particles[j].vx += ax;
particles[j].vy += ay;
}
}
}
}