Bouncing Rainbow Balls
<button onclick="addBalls(10)" style="padding:8px 20px;margin:4px;border:none;border-radius:20px;background:linear-gradient(135deg,#ff6b6b,#ffa500);color:#fff;font-size:1em;cursor:pointer;font-weight:bold;">+10 Balls</button> <button onclick="addBalls(50)" style="padding:8px 20px;margin:4px;border:none;border-radius:20px;background:linear-gradient(135deg,#00ff88,#00ccff);color:#000;font-size:1em;cursor:pointer;font-weight:bold;">+50 Balls</button> <button onclick="addBalls(200)" style="padding:8px 20px;margin:4px;border:none;border-radius:20px;background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;font-size:1em;cursor:pointer;font-weight:bold;">+200 Balls 💀</button> <button onclick="clearBalls()" style="padding:8px 20px;margin:4px;border:none;border-radius:20px;background:linear-gradient(135deg,#333,#555);color:#fff;font-size:1em;cursor:pointer;font-weight:bold;">Clear</button> <button onclick="toggleGravity()" style="padding:8px 20px;margin:4px;border:none;border-radius:20px;background:linear-gradient(135deg,#ffd700,#ff8c00);color:#000;font-size:1em;cursor:pointer;font-weight:bold;">Toggle Gravity 🌍</button> <button onclick="explodeBalls()" style="padding:8px 20px;margin:4px;border:none;border-radius:20px;background:linear-gradient(135deg,#ff0000,#ff4444);color:#fff;font-size:1em;cursor:pointer;font-weight:bold;">💥 EXPLODE 💥</button>
Balls: 0 | FPS: 0
<script> (function(){ var canvas = document.getElementById('ballCanvas'); var balls = []; var gravity = false; var hue = 0; var running = false; var lastTime = performance.now(); var frameCount = 0; var fps = 0;
function resize() {
canvas.style.width = '100%';
} resize(); window.addEventListener('resize', resize);
function createBall(x, y, vx, vy) {
var w = canvas.offsetWidth;
var h = canvas.offsetHeight;
var r = 8 + Math.random() * 20;
hue = (hue + 17) % 360;
var ball = document.createElement('div');
ball.style.cssText = 'position:absolute;border-radius:50%;pointer-events:none;box-shadow:0 0 15px currentColor,inset 0 -5px 15px rgba(0,0,0,0.3),inset 0 5px 15px rgba(255,255,255,0.3);';
ball.style.width = r*2 + 'px';
ball.style.height = r*2 + 'px';
ball.style.background = 'radial-gradient(circle at 35% 35%, hsl(' + hue + ',100%,80%), hsl(' + hue + ',100%,50%))';
ball.style.color = 'hsl(' + hue + ',100%,60%)';
canvas.appendChild(ball);
balls.push({
el: ball, x: x || Math.random()*(w-r*2)+r, y: y || Math.random()*(h-r*2)+r,
vx: vx !== undefined ? vx : (Math.random()-0.5)*8, vy: vy !== undefined ? vy : (Math.random()-0.5)*8,
r: r, hue: hue
});
updateCount();
}
function updateCount() {
var el = document.getElementById('ballCount');
if (el) el.textContent = balls.length;
}
function tick() {
var w = canvas.offsetWidth;
var h = canvas.offsetHeight;
for (var i = 0; i < balls.length; i++) {
var b = balls[i];
if (gravity) b.vy += 0.3;
b.x += b.vx;
b.y += b.vy;
if (b.x - b.r < 0) { b.x = b.r; b.vx = Math.abs(b.vx) * 0.95; }
if (b.x + b.r > w) { b.x = w - b.r; b.vx = -Math.abs(b.vx) * 0.95; }
if (b.y - b.r < 0) { b.y = b.r; b.vy = Math.abs(b.vy) * 0.95; }
if (b.y + b.r > h) { b.y = h - b.r; b.vy = -Math.abs(b.vy) * 0.95; }
b.el.style.transform = 'translate(' + (b.x - b.r) + 'px,' + (b.y - b.r) + 'px)';
}
frameCount++;
var now = performance.now();
if (now - lastTime >= 1000) {
fps = frameCount;
frameCount = 0;
lastTime = now;
var fEl = document.getElementById('fpsCount');
if (fEl) fEl.textContent = fps;
}
requestAnimationFrame(tick);
}
window.addBalls = function(n) {
for (var i = 0; i < n; i++) createBall();
if (!running) { running = true; tick(); }
};
window.clearBalls = function() {
for (var i = 0; i < balls.length; i++) balls[i].el.remove(); balls = []; updateCount();
};
window.toggleGravity = function() { gravity = !gravity; };
window.explodeBalls = function() {
for (var i = 0; i < balls.length; i++) {
var angle = Math.random() * Math.PI * 2;
var speed = 10 + Math.random() * 20;
balls[i].vx = Math.cos(angle) * speed;
balls[i].vy = Math.sin(angle) * speed;
}
};
addBalls(20); })(); </script>
About[edit]
This page is a celebration of bouncing rainbow balls. They bounce. They are rainbow. They are balls. What more do you want?
History[edit]
- Balls have been bouncing since the dawn of time
- Rainbows were invented by Sir Isaac Newton while staring at a prism
- Someone combined the two concepts and this wiki page was born
Fun Facts[edit]
- Adding 200 balls at once may cause your browser to have a spiritual experience
- Toggling gravity makes the balls obey the laws of Ohio
- The explode button exists because violence is always the answer
- Each ball has a unique hue because we believe in ball diversity
Controls[edit]
- +10 Balls - Add a reasonable amount of balls
- +50 Balls - Things are getting spicy
- +200 Balls 💀 - Enter the brainrot zone
- Clear - When you've had enough of this goofy ahh simulation
- Toggle Gravity 🌍 - Make Isaac Newton proud (or roll in his grave)
- 💥 EXPLODE 💥 - Send them to the shadow realm
