Bouncing balls in a heptagon · qwen3-235b-a22b-2507

Successfully wrote to index.html

{"console":["warning: An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing.","error: Unexpected identifier 'a'"],"dom":"Pause Reset","images":"model does not support images"}

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Rotating Heptagon Ball Simulation</title> <style> body { margin: 0; overflow: hidden; display: flex; justify-content: center; align-items: center; height: 100vh; background: #f0f0f0; font-family: Arial, sans-serif; } canvas { border: 1px solid #ccc; background: white; } .controls { position: absolute; top: 10px; left: 10px; z-index: 10; } button { margin: 5px; padding: 8px 12px; font-size: 14px; } </style> </head> <body> <div class="controls"> <button id="pauseBtn">Pause</button> <button id="resetBtn">Reset</button> </div> <canvas id="canvas"></canvas> <script> const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const pauseBtn = document.getElementById('pauseBtn'); const resetBtn = document.getElementById('resetBtn'); // Set canvas size canvas.width = 600; canvas.height = 600; // Constants const gravity = 0.3; const damping = 0.97; const friction = 0.98; const ballRadius = 15; const wallElasticity = 0.8; const ballElasticity = 0.85; const numBalls = 20; const heptagonRadius = 250; // Heptagon rotation let heptagonAngle = 0; const rotationPeriod = 5; // seconds const rotationSpeed = (2 * Math.PI) / (rotationPeriod * 60); // per frame at 60fps // Ball class class Ball { constructor(x, y, number) { this.x = x; this.y = y; this.vx = 0; this.vy = 0; this.number = number; this.angle = 0; this.angularVelocity = 0; this.radius = ballRadius; } update() { this.vy += gravity; this.x += this.vx; this.y += this.vy; this.angle += this.angularVelocity; // Apply damping this.vx *= damping; this.vy *= damping; this.angularVelocity *= friction; } draw() { ctx.save(); ctx.translate(this.x, this.y); ctx.rotate(this.angle); // Draw ball ctx.beginPath(); ctx.arc(0, 0, this.radius, 0, Math.PI * 2); ctx.fillStyle = '#3498db'; ctx.fill(); ctx.strokeStyle = '#2980b9'; ctx.stroke(); // Draw number ctx.fillStyle = 'white'; ctx.font = 'bold 14px Arial'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(this.number.toString(), 0, 0); ctx.restore(); } } // Heptagon walls function getHeptagonVertices(angle) { const vertices = []; for (let i = 0; i < 7; i++) { const theta = angle + (i * 2 * Math.PI) / 7; vertices.push({ x: canvas.width / 2 + Math.cos(theta) * heptagonRadius, y: canvas.height / 2 + Math.sin(theta) * heptagonRadius }); } return vertices; } // Collision detection: circle vs segment function collideCircleWithSegment(ball, p1, p2, wallVx, wallVy) { const dx = p2.x - p1.x; const dy = p2.y - p1.y; const length = Math.sqrt(dx * dx + dy * dy); const nx = -dy / length; const ny = dx / length; // Project ball center onto the line const relX = ball.x - p1.x; const relY = ball.y - p1.y; const proj = (relX * dx + relY * dy) / length; const px = p1.x + (dx * proj) / length; const py = p1.y + (dy * proj) / length; // Check if projection is on segment if (proj < 0 || proj > length) return false; // Check distance const distX = ball.x - px; const distY = ball.y - py; const dist = Math.sqrt(distX * distX + distY * distY); if (dist < ball.radius) { const penetration = ball.radius - dist; ball.x += nx * penetration; ball.y += ny * penetration; // Relative velocity including wall motion const relVx = ball.vx - wallVx; const relVy = ball.vy - wallVy; const normalDot = relVx * nx + relVy * ny; if (normalDot < 0) { const impulse = -(1 + wallElasticity) * normalDot; ball.vx += nx * impulse; ball.vy += ny * impulse; // Add angular velocity from tangential impact const tangentX = relVx - nx * normalDot; const tangentY = relVy - ny * normalDot; const tangentialSpeed = Math.sqrt(tangentX * tangentX + tangentY * tangentY); if (tangentialSpeed > 0.1) { const tx = tangentX / tangentialSpeed; const ty = tangentY / tangentialSpeed; const cross = nx * ty - ny * tx; ball.angularVelocity -= cross * tangentialSpeed * 0.1; } } return true; } return false; } // Collision between two balls function collideBalls(a, b) { const dx = b.x - a.x; const dy = b.y - a.y; const distSq = dx * dx + dy * dy; const minDist = a.radius + b.radius; if (distSq < minDist * minDist) { const dist = Math.sqrt(distSq); const penetration = minDist - dist; const nx = dx / dist; const ny = dy / dist; // Separate n a.x -= nx * penetration * 0.5; a.y -= ny * penetration * 0.5; b.x += nx * penetration * 0.5; b.y += ny * penetration * 0.5; // Relative velocity const rvx = b.vx - a.vx; const rvy = b.vy - a.vy; const normalDot = rvx * nx + rvy * ny; if (normalDot > 0) return; // moving apart const impulse = -(1 + ballElasticity) * normalDot; const impulseX = nx * impulse; const impulseY = ny * impulse; a.vx -= impulseX * 0.5; a.vy -= impulseY * 0.5; b.vx += impulseX * 0.5; b.vy += impulseY * 0.5; // Transfer some angular momentum const tangentialVel = rvx * (-ny) + rvy * nx; if (Math.abs(tangentialVel) > 0.1) { const spinTransfer = tangentialVel * 0.05; a.angularVelocity -= spinTransfer; b.angularVelocity += spinTransfer; } } } // Initialize simulation let balls = []; let isPaused = false; function initSimulation() { balls = []; heptagonAngle = 0; const cx = canvas.width / 2; const cy = canvas.height / 2; const spacing = ballRadius * 2.2; const cols = 5; for (let i = 0; i < numBalls; i++) { const col = i % cols; const row = Math.floor(i / cols); balls.push(new Ball(cx - (cols-1)*spacing/2 + col*spacing, cy - 2*spacing + row*spacing, i+1)); } } // Animation loop function animate() { if (!isPaused) { // Update heptagon rotation heptagonAngle += rotationSpeed; // Update balls for (let ball of balls) { ball.update(); } // Ball-ball collisions for (let i = 0; i < balls.length; i++) { for (let j = i + 1; j < balls.length; j++) { collideBalls(balls[i], balls[j]); } } // Ball-wall collisions const vertices = getHeptagonVertices(heptagonAngle); const angularSpeed = rotationSpeed * heptagonRadius; for (let i = 0; i < vertices.length; i++) { const p1 = vertices[i]; const p2 = vertices[(i+1)%vertices.length]; // Wall velocity perpendicular to segment const dx = p2.x - p1.x; const dy = p2.y - p1.y; const len = Math.sqrt(dx*dx + dy*dy); const wx = -dy / len * angularSpeed; const wy = dx / len * angularSpeed; for (let ball of balls) { collideCircleWithSegment(ball, p1, p2, wx, wy); } } } // Clear and draw ctx.clearRect(0, 0, canvas.width, canvas.height); // Draw heptagon const vertices = getHeptagonVertices(heptagonAngle); ctx.beginPath(); ctx.moveTo(vertices[0].x, vertices[0].y); for (let i = 1; i < vertices.length; i++) { ctx.lineTo(vertices[i].x, vertices[i].y); } ctx.closePath(); ctx.strokeStyle = '#2c3e50'; ctx.lineWidth = 2; ctx.stroke(); // Draw balls for (let ball of balls) { ball.draw(); } requestAnimationFrame(animate); } // Controls pauseBtn.addEventListener('click', () => { isPaused = !isPaused; pauseBtn.textContent = isPaused ? 'Resume' : 'Pause'; }); resetBtn.addEventListener('click', () => { isPaused = false; pauseBtn.textContent = 'Pause'; initSimulation(); }); // Start initSimulation(); animate(); </script> </body> </html>

Successfully replaced 1 block(s) in index.html.

{"console":["warning: An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing."],"dom":"Pause Reset","images":"model does not support images"}

{"console":["warning: An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing."],"dom":"Pause Reset","images":"model does not support images"}

{"console":["warning: An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing."],"dom":"Pause Reset","images":"model does not support images"}