Kamel Ghabte · Course · Free

Particles & Gravity

Create a particle system with forces in p5.js.

The concept

A particle system simulates objects under forces: gravity, wind, friction. Each particle has position, velocity, acceleration. Each frame: acceleration = sum of forces, velocity += acceleration, position += velocity. Particles are born, live (decreasing alpha) and die.

The code

// Particle fountain with gravity
let parts = [];
function setup() { createCanvas(400, 280); }
function draw() {
  background(11,15,20,40);
  if (frameCount%2===0) parts.push({x:width/2,y:height,vx:random(-1.5,1.5),vy:random(-6,-3),life:255});
  for (let i=parts.length-1;i>=0;i--) {
    let p=parts[i]; p.vy+=0.12; p.x+=p.vx; p.y+=p.vy; p.life-=3;
    noStroke();fill(55,227,195,p.life);ellipse(p.x,p.y,4,4);
    if(p.life<=0) parts.splice(i,1);
  }
}

Going further

Explore other free courses on the Learn page, or book a call to discuss your project.

Want to go further?

Book a discovery call →