This sketch lets you click anywhere on the screen to drop a colorful ball that falls under gravity, bounces off the floor and side walls while losing a bit of energy each time, and gradually fades out and disappears. Every click spawns a brand-new independent ball, so rapid clicking fills the screen with a bouncing, fading crowd.
Experiment with the code by making these changes:
This sketch turns mouse clicks into colorful balls that fall, bounce, and fade away in a satisfying physics-toy style animation. Each click spawns a new ball with a random color, size, and slight sideways velocity, and gravity pulls it downward until it collides with the floor or side edges of the canvas. The bounce isn't perfect - a damping factor shaves off some speed on every impact, so balls settle down over time - and each ball fades to transparent and vanishes about five seconds after it's born. The key p5.js techniques on display are the array-of-objects pattern, per-frame physics using velocity and gravity, boundary collision checks, and alpha-based fading using millis().
The code is compact but dense: a single global array called balls stores every active ball as a plain JavaScript object with position, velocity, radius, color, and birth-time properties. setup() just creates a full-window canvas, mousePressed() adds a new ball object to the array on every click, and draw() loops through the array backwards each frame to update physics, handle wall and floor bounces, fade and remove old balls, and draw everything that's still alive. Studying this sketch teaches you how to manage a growing and shrinking collection of independent objects, how to fake realistic-looking bouncing physics with just a few lines, and why looping backwards through an array is important when you're deleting items from it mid-loop.
setup()setup() runs once when the sketch first loads. Here it's kept minimal - just building a full-window canvas - because all the interesting state (the balls array) is created dynamically later by clicks.
function setup(){
createCanvas(windowWidth,windowHeight);
}createCanvas(windowWidth,windowHeight);draw()draw() runs continuously at roughly 60 frames per second and is the heart of this sketch's physics simulation. Looping backwards through the balls array while removing dead entries with splice() is a classic p5.js pattern any time you manage a dynamic list of particles or objects.
🔬 These three lines handle bouncing off the left wall, right wall, and floor. What happens if you add a fourth line to also bounce off the ceiling (b.y<b.r)? Try it and see if balls can now bounce upward off the top too.
if(b.x<b.r){b.x=b.r;b.vx*=-d;}
if(b.x>width-b.r){b.x=width-b.r;b.vx*=-d;}
if(b.y>height-b.r){b.y=height-b.r;b.vy*=-d;}🔬 The fade uses 255*(1-age), a linear fade. What happens visually if you square age, like 255*(1-age*age), so balls stay solid longer and then fade quickly at the end?
if(age>1) balls.splice(i,1);
else{
noStroke();
fill(b.c[0],b.c[1],b.c[2],255*(1-age));
circle(b.x,b.y,b.r*2);
}function draw(){
background(200);
let now=millis();
for(let i=balls.length-1;i>=0;i--){
let b=balls[i],age=(now-b.t)/5000;
b.vy+=g;
b.x+=b.vx;
b.y+=b.vy;
if(b.x<b.r){b.x=b.r;b.vx*=-d;}
if(b.x>width-b.r){b.x=width-b.r;b.vx*=-d;}
if(b.y>height-b.r){b.y=height-b.r;b.vy*=-d;}
if(age>1) balls.splice(i,1);
else{
noStroke();
fill(b.c[0],b.c[1],b.c[2],255*(1-age));
circle(b.x,b.y,b.r*2);
}
}
}for(let i=balls.length-1;i>=0;i--){
Loops through every ball backwards so that removing a ball mid-loop (with splice) doesn't cause the next ball to be skipped.
if(b.x<b.r){b.x=b.r;b.vx*=-d;}
Stops the ball from leaving the left edge and reverses its horizontal velocity, dampened by d.
if(b.x>width-b.r){b.x=width-b.r;b.vx*=-d;}
Stops the ball from leaving the right edge and reverses its horizontal velocity, dampened by d.
if(b.y>height-b.r){b.y=height-b.r;b.vy*=-d;}
Stops the ball from falling through the floor and reverses its vertical velocity, dampened by d, simulating a bounce.
if(age>1) balls.splice(i,1);
Deletes a ball from the array once it has fully faded out, keeping the array from growing forever.
background(200);let now=millis();for(let i=balls.length-1;i>=0;i--){let b=balls[i],age=(now-b.t)/5000;b.vy+=g;b.x+=b.vx;b.y+=b.vy;if(b.x<b.r){b.x=b.r;b.vx*=-d;}if(b.x>width-b.r){b.x=width-b.r;b.vx*=-d;}if(b.y>height-b.r){b.y=height-b.r;b.vy*=-d;}if(age>1) balls.splice(i,1);fill(b.c[0],b.c[1],b.c[2],255*(1-age));circle(b.x,b.y,b.r*2);mousePressed()mousePressed() is a p5.js event function that automatically runs once every time the mouse button is clicked. It's the perfect place to spawn new objects into an array in response to user interaction.
🔬 vx starts as a small random value between -2 and 2. What happens if you widen that range to random(-8,8) - do balls scatter sideways much more dramatically when dropped?
balls.push({x:mouseX,y:mouseY,vx:random(-2,2),vy:0,
r:random(15,30),c:[random(255),random(255),random(255)],t:millis()});function mousePressed(){
balls.push({x:mouseX,y:mouseY,vx:random(-2,2),vy:0,
r:random(15,30),c:[random(255),random(255),random(255)],t:millis()});
}balls.push({x:mouseX,y:mouseY,vx:random(-2,2),vy:0,r:random(15,30),c:[random(255),random(255),random(255)],t:millis()});windowResized()windowResized() is a built-in p5.js callback that fires whenever the browser window is resized, letting you keep a full-window canvas responsive without any extra event-listener code.
function windowResized(){
resizeCanvas(windowWidth,windowHeight);
}resizeCanvas(windowWidth,windowHeight);balls
array
Stores every currently active ball as an object with position, velocity, radius, color, and creation time. Grows when you click and shrinks as balls fade out.
let balls=[];
g
number
The gravity constant added to each ball's vertical velocity every frame, controlling how fast balls accelerate downward.
let g=0.4;
d
number
The damping (bounce energy loss) factor applied to velocity whenever a ball hits a wall or the floor - values closer to 1 keep more bounce energy.
let d=0.8;
Here are some ways this code could be enhanced:
There is no check for the ball crossing the top of the canvas (b.y<b.r), so a ball with strong upward velocity (from a hard bounce) can fly off the top of the screen and never come back since gravity will eventually pull it back down off-screen, wasting frames updating an invisible ball.
💡 Add a matching conditional like `if(b.y<b.r){b.y=b.r;b.vy*=-d;}` to bounce it back down, or simply skip drawing/updating balls once they're far outside the canvas.
Magic numbers like 0.4, 0.8, 5000, 15, and 30 are scattered through the code without explanation, making the physics tuning harder to understand at a glance.
💡 Extract them into named constants such as `let GRAVITY=0.4, BOUNCE_DAMPING=0.8, FADE_MS=5000, MIN_RADIUS=15, MAX_RADIUS=30;` and reference those names throughout for clarity.
Every ball recalculates `255*(1-age)` and constructs its fill color every frame even when barely changing, and colors are stored as raw arrays rather than p5.Color objects, which is fine here but won't scale well if hundreds of balls are on screen at once.
💡 For heavier use, consider using p5's `color()` objects created once per ball and adjusting only the alpha channel, or batching similar draws, to reduce per-frame overhead.
Balls can currently only be spawned one at a time per click, and mouseDragged is not implemented, so holding the mouse down while moving doesn't create a stream of balls.
💡 Add a `mouseDragged(){ mousePressed(); }` function (or copy its body) so dragging the mouse continuously spawns balls for an even more satisfying effect.
Code flow showing setup, draw, mousepressed, windowresized
💡 Click on function names in the diagram to jump to their code
The sketch creates a colorful display of bouncy balls that fall and bounce off the walls and floor, gradually fading away as they lose height with each bounce.
Users can interact by clicking anywhere on the canvas to drop colorful bouncy balls, creating a satisfying visual effect as they react to gravity and bounce.
This sketch demonstrates basic physics principles, including gravity and collision detection, along with the use of arrays to manage multiple objects in a creative coding environment.
