Create

AI Bouncy Ball Drop - Satisfying Physics

59 views Β· Dec 15, 2025

Click anywhere to drop colorful bouncy balls! Watch them fall with realistic gravity, bounce off walls and floor with decreasing height each time, then gently fade away. Spam click for maximum satisfaction. Simple physics fun.

#xelsedia#xelsedai#physics#interactive#satisfying
πŸ”€ Remix This πŸ“– View Docs β›Ά Full Screen ← Back to Gallery
πŸ“‹ Embed Code

Copy this code to embed this sketch on your website:

<iframe src="https://p5js.ai/embed/35016662-9e07-4e72-9143-6363377d6b45" width="400" height="400" frameborder="0" allow="autoplay" title="AI Bouncy Ball Drop - Satisfying Physics"></iframe>

Adjust width and height as needed. Preview embed β†’

❓ About This Sketch 3 questions

What visual experience does the AI Bouncy Ball Drop sketch provide?

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.

How can I interact with the AI Bouncy Ball Drop sketch?

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.

What coding concepts does the AI Bouncy Ball Drop sketch illustrate?

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.

πŸ’¬ AI Chat History 2 messages
πŸ‘€ You
Create a bouncy ball dropper. Gray background. Click anywhere to spawn a colored ball at that position. Ball falls with gravity (accelerates down). Ball bounces off floor (bottom edge) with damping (each bounce lower). Ball also bounces off left/right walls. Multiple balls can exist. Each ball random color. Balls slowly fade out after 5 seconds. Simple satisfying physics. Under 40 lines.
πŸ€– AI
Here’s a complete bouncy ball dropper, with `sketch.js` kept under 40 lines.

---

```js
// sketch.js
let balls=[],g=0.4,d=0.8;
function setup(){
createCanvas(windowWidth,windowHeight);
}
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);
}
}
}
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()});
}
function windowResized(){
resizeCanvas(windowWidth,windowHeight);
}
```

---

```html
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bouncy Ball Dropper</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/p5@1.11.3/lib/p5.min.js"></script>
<script src="sketch.js"></script>
</body>
</html>
```

---

```css
/* style.css */
body {
margin: 0;
padding: 0;
overflow: hidden;
}

canvas {
display: block;
}
```

Notes:
- Click anywhere to spawn a ball with a random color at that position.
- Gravity accelerates the ball downward each frame.
- Balls bounce off left/right walls and the floor with damping.
- Each ball fades out over 5 seconds and is then removed.
🎬 Video Preview