Editing Bouncing Rainbow Balls

__NOTOC__

<div style="position:relative;width:100%;height:500px;border:2px solid #ff00ff;border-radius:12px;overflow:hidden;background:#111;margin:1em 0;" id="ballCanvas"></div>
<div style="text-align:center;margin:1em 0;">
<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>
</div>
<p style="text-align:center;color:#888;">Balls: <span id="ballCount">0</span> | FPS: <span id="fpsCount">0</span></p>

<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 ==
This page is a celebration of '''bouncing rainbow balls'''. They bounce. They are rainbow. They are balls. What more do you want?

=== History ===
* 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 ===
* 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 ===
* '''<span style="color:#ff6b6b">+10 Balls</span>''' - Add a reasonable amount of balls
* '''<span style="color:#00ff88">+50 Balls</span>''' - Things are getting spicy
* '''<span style="color:#a78bfa">+200 Balls 💀</span>''' - 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

[[Category:Interactive]] [[Category:Brainrot]] [[Category:Balls]]