*   Single-page web app (HTML/CSS/JS).
    *   One file: `index.html`.
    *   Content:
        *   20 numbered balls (1 to 20).
        *   Dropping from the center of a heptagon.
        *   Heptagon rotates 360 degrees every 5 seconds.
        *   Physics: Gravity, friction, ball-to-ball collisions, ball-to-wall collisions.
        *   Wall collision must be realistic (bouncing off rotating walls).
        *   Ball spin: Numbers on balls should rotate.
        *   Constraint: No external resources (no CDNs, no libraries like Matter.js).
        *   Self-contained.

    *   Canvas API for rendering.
    *   A physics loop (`requestAnimationFrame`).

    *   `Heptagon`:
        *   Center (x, y), radius.
        *   Vertices (7 points).
        *   Rotation angle (increments over time).
        *   Rotation speed: $360^\circ / 5\text{s} = 72^\circ/\text{s}$.
    *   `Ball`:
        *   Position (x, y).
        *   Velocity (vx, vy).
        *   Radius.
        *   Mass (let's assume equal mass for simplicity, or proportional to radius).
        *   Rotation (angle).
        *   Angular velocity (spin).
        *   Number (1-20).

    *   *Gravity*: Add a constant to `vy` every frame.
    *   *Friction*: Multiply `vx` and `vy` by a factor (e.g., 0.99) every frame to simulate air resistance or surface friction.
    *   *Ball-Ball Collisions*:
        *   Distance check: $\text{dist} < R1 + R2$.
        *   Elastic collision impulse response.
    *   *Ball-Wall Collisions*:
        *   The wall is a set of segments (edges of the heptagon).
        *   Collision detection: Distance from ball center to line segment.
        *   Collision response:
            *   Reflect velocity based on the wall normal.
            *   *Crucial*: Since the wall is rotating, the ball should gain/lose energy/momentum based on the wall's tangential velocity at the point of impact.
            *   Wall tangential velocity at impact point: $V_{wall} = \omega \times r_{impact}$ (where $\omega$ is angular velocity and $r_{impact}$ is the vector from center to impact point).

    *   HTML structure: `<canvas>` and some basic styling to center it.
    *   CSS: Fullscreen, dark background.
    *   JS:
        *   Constants: `GRAVITY`, `FRICTION`, `BOUNCE`, `HEPTAGON_RADIUS`, `BALL_RADIUS`, `ROTATION_SPEED`.
        *   `class Ball`:
            *   `update()`: Update position, velocity, spin.
            *   `draw()`: Draw circle and text (rotated).
        *   `class Heptagon`:
            *   `getVertices()`: Returns current vertex positions based on current rotation.
            *   `draw()`: Draw the polygon.
        *   `Collision Engine`:
            *   `checkBallBallCollisions()`
            *   `checkBallWallCollisions()`

    *   When a ball hits a line segment (wall), we need:
        1.  The normal vector $\vec{n}$ of the wall.
        2.  The velocity of the wall at the collision point $\vec{V}_w$.
        3.  The relative velocity $\vec{V}_{rel} = \vec{V}_{ball} - \vec{V}_w$.
        4.  The component of $\vec{V}_{rel}$ along the normal: $V_{rel, n} = \vec{V}_{rel} \cdot \vec{n}$.
        5.  If $V_{rel, n} < 0$ (moving towards the wall), reflect it: $\vec{V}_{ball, new} = \vec{V}_{ball} - (1 + e) (\vec{V}_{rel} \cdot \vec{n}) \vec{n}$.
            Wait, more precisely for a rotating wall:
            Let $\vec{V}_w$ be the velocity of the point on the wall.
            $\vec{V}_{new} = \vec{V}_{old} - (1 + e) ((\vec{V}_{old} - \vec{V}_w) \cdot \vec{n}) \vec{n}$.
            Where $e$ is the coefficient of restitution.

    *   A heptagon has 7 sides.
    *   Each side is a line segment between two vertices.
    *   Distance from point $P$ to segment $AB$:
        *   Project $P$ onto line $AB$.
        *   Clamp to segment.
        *   Check distance.

    *   If a ball hits the wall, it's not just the normal velocity that changes; if there's friction with the wall, the tangential component changes too. But the prompt asks for "bounce realistically".
    *   The rotation of the ball itself: "show each ball's spin via the rotation of its number". This means when it hits a wall or another ball, we should probably apply some torque.
    *   To keep it simple yet "realistic":
        *   Ball-Ball: Standard elastic collision.
        *   Ball-Wall: Reflect velocity + add tangential impulse based on wall velocity and friction to induce spin.

    *   Heptagon vertices: $x_i = R \cos(\theta + i \frac{2\pi}{7})$, $y_i = R \sin(\theta + i \frac{2\pi}{7})$.
    *   $\theta$ increases by $2\pi / 5 \text{s} \approx 1.256\text{ rad/s}$.

    *   Setup canvas.
    *   Initialization of balls.
    *   Loop:
        *   Clear canvas.
        *   Update heptagon angle.
        *   Update balls (gravity, velocity, position).
        *   Check ball-ball collisions.
        *   Check ball-wall collisions.
        *   Draw heptagon.
        *   Draw balls.

    *   *Sub-problem: Ball-Wall Collision response with spin.*
        When a ball hits a wall, the velocity change $\Delta V$ affects the ball's angular velocity $\omega_{ball}$.
        Tangential impulse $J_t = \mu \cdot J_n$, where $J_n$ is normal impulse.
        However, for a "single file" implementation without complex physics engines, I'll use a slightly simplified model:
        1.  Reflect velocity normally.
        2.  Add a portion of the wall's tangential velocity to the ball's velocity.
        3.  Apply a portion of that to the ball's spin.

    *   *Sub-problem: Collision detection (Ball and Segment).*
        Finding the closest point on a segment $AB$ to point $P$.
        $\vec{u} = B - A$
        $\vec{v} = P - A$
        $t = \text{clamp}(\frac{\vec{v} \cdot \vec{u}}{\vec{u} \cdot \vec{u}}, 0, 1)$
        Closest point $C = A + t \cdot \vec{u}$.
        Distance $d = |P - C|$.

    *   *Sub-problem: Ball-Ball Collision Impulse.*
        $V_{new1} = V_1 - \frac{2 m_2}{m_1+m_2} \frac{\langle V_1 - V_2, P_1 - P_2 \rangle}{\|P_1 - P_2\|^2} (P_1 - P_2)$
        Since masses are equal, it's $\frac{2}{2} = 1$. Wait, the formula for equal mass is simpler:
        $\vec{v}_1' = \vec{v}_1 - \frac{(\vec{v}_1 - \vec{v}_2) \cdot (\vec{p}_1 - \vec{p}_2)}{\|\vec{p}_1 - \vec{p}_2\|^2} (\vec{p}_1 - \vec{p}_2)$
        $\vec{v}_2' = \vec{v}_2 - \frac{(\vec{v}_2 - \vec{v}_1) \cdot (\vec{p}_2 - \vec{p}_1)}{\|\vec{p}_2 - \vec{p}_1\|^2} (\vec{p}_2 - \vec{p}_1)$

    *   20 balls, 1 to 20.
    *   Heptagon spins 360 deg / 5s.
    *   Gravity + friction.
    *   Ball-ball collision.
    *   Ball-wall collision.
    *   Ball spin (numbers rotate).

    *   *Canvas Resize*: Handle window resizing.
    *   *Sub-stepping*: To prevent balls from passing through walls at high speeds or during fast rotation, I should run the physics loop multiple times per frame.

    *   One file.
    *   No external resources.
    *   Self-contained.

    *Self-Correction during drafting:*
    - The heptagon rotation is quite fast (72 deg/s). If the balls are fast, they might tunnel. I'll use 8 sub-steps.
    - For the ball's spin, I'll use the tangential component of the collision to update `ball.angle` and `ball.angularVelocity`.

    *Plan for Ball-Wall Collision*:
    - Point $C$ is the closest point on the segment to the ball's center $P$.
    - Normal $\vec{n} = \frac{P - C}{\|P - C\|}$.
    - Wall velocity at $C$: $\vec{V}_w = \vec{\omega}_{heptagon} \times (C - \text{Center})$.
      In 2D: $\omega = \text{rotation\_speed}$, $C-Center = (dx, dy)$.
      $\vec{V}_w = (-dy \cdot \omega, dx \cdot \omega)$.
    - Relative velocity: $\vec{V}_{rel} = \vec{V}_{ball} - \vec{V}_w$.
    - Normal component of $\vec{V}_{rel}$: $v_n = \vec{V}_{rel} \cdot \vec{n}$.
    - If $v_n < 0$ (colliding):
        - Impulse $J = -(1 + e) \cdot v_n$.
        - $\vec{V}_{ball} = \vec{V}_{ball} + J \cdot \vec{n} + \vec{V}_w$ ?? No, that's not quite right.
        - Let's use: $\vec{V}_{ball, new} = \vec{V}_{ball, old} - (1 + e) (\vec{V}_{rel} \cdot \vec{n}) \vec{n}$.
        - Actually, a simpler way to think about it:
          The ball wants to bounce off the wall as if the wall were stationary, but we must account for the wall's velocity.
          $\vec{V}_{rel} = \vec{V}_{ball} - \vec{V}_{wall}$
          $\vec{V}_{rel, new} = \vec{V}_{rel, old} - (1 + e) (\vec{V}_{rel, old} \cdot \vec{n}) \vec{n}$
          $\vec{V}_{ball, new} = \vec{V}_{rel, new} + \vec{V}_{wall}$
        - This correctly handles the rotating wall.
    - For spin:
        - Tangential component of relative velocity: $\vec{V}_{rel, t} = \vec{V}_{rel} - (\vec{V}_{rel} \cdot \vec{n}) \vec{n}$.
        - We can apply a friction impulse to the tangential direction to affect both linear velocity and angular velocity.
        - Let $J_t = \text{friction} \cdot J_n$ (tangential impulse).
        - Update $\vec{V}_{ball}$ and $\omega_{ball}$.

    *Actually, simpler for "realistic" spin*:
    - Just let the ball's tangential velocity change slightly based on the wall's tangential velocity.
    - And increase/decrease the ball's `angularVelocity` based on the tangential impulse.

    *Let's implement*:
    - Ball-ball collision:
        - Resolve overlap to prevent sticking.
        - Elastic collision for velocities.
        - Transfer some tangential momentum to spin.
    - Ball-wall collision:
        - Resolve overlap.
        - Elastic collision with the moving wall.
        - Tangential friction to affect spin.

    *One detail*: The balls start in the center. I should probably stagger them slightly so they don't all overlap perfectly at the start, or just let them explode outwards. The prompt says "dropping from the center". I'll place them in a small cluster or just one by one.

    *Code Structure*:
    ```html
    <!DOCTYPE html>
    <html>
    <head>
        <style>
            body { margin: 0; overflow: hidden; background: #111; }
            canvas { display: block; }
        </style>
    </head>
    <body>
        <canvas id="canvas"></canvas>
        <script>
            // Constants
            // Classes: Ball, Heptagon
            // Main loop
        </script>
    </body>
    </html>
    ```

    *Wait, ball spin implementation*:
    The prompt says "show each ball's spin via the rotation of its number".
    So each ball has `angle` (rotation of the ball) and `angularVelocity`.
    `ball.angle += ball.angularVelocity`.

    *Collision resolution detail*:
    When balls overlap, move them apart along the normal to prevent them from getting stuck.

    *Physics loop*:
    - Sub-steps: 8
    - Gravity: 0.2
    - Friction (Air): 0.995
    - Friction (Wall): 0.1 (tangential)
    - Restitution (Bounce): 0.7

    Let's refine the ball-ball collision to include spin.
    When two balls collide, they exchange tangential momentum.
    For simplicity, I'll just focus on the linear collision and a simple spin change.

    *Wait, 20 balls*. I'll start them at the center.

    *Heptagon vertices*:
    $x = cx + R \cdot \cos(\text{angle} + i \cdot \text{step})$
    $y = cy + R \cdot \sin(\text{angle} + i \cdot \text{step})$

    Let's write the code.

```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Heptagon Ball Physics</title> <style> body { margin: 0; overflow: hidden; background-color: #0a0a0a; display: flex; justify-content: center; align-items: center; height: 100vh; font-family: sans-serif; } canvas { box-shadow: 0 0 20px rgba(0,0,0,0.5); } </style> </head> <body> <canvas id="canvas"></canvas> <script> /** * PHYSICS CONSTANTS */ const GRAVITY = 0.15; const FRICTION_AIR = 0.998; const WALL_BOUNCE = 0.7; const BALL_BOUNCE = 0.8; const WALL_FRICTION = 0.1; const SUB_STEPS = 8; // Physics sub-steps for stability const HEPTAGON_SIDES = 7; const ROTATION_PERIOD = 5; // seconds const BALL_COUNT = 20; const BALL_RADIUS = 18; const HEPTAGON_RADIUS = 300; const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); let width, height; let time = 0; function resize() { width = window.innerWidth; height = window.innerHeight; canvas.width = width; canvas.height = height; } window.addEventListener('resize', resize); resize(); class Ball { constructor(id, x, y) { this.id = id; this.x = x; this.y = y; this.vx = (Math.random() - 0.5) * 4; this.vy = (Math.random() - 0.5) * 4; this.radius = BALL_RADIUS; this.mass = 1; this.angle = 0; this.angularVelocity = 0; this.color = `hsl(${(id * 360 / BALL_COUNT)}, 70%, 60%)`; } update() { // Gravity this.vy += GRAVITY; // Air friction this.vx *= FRICTION_AIR; this.vy *= FRICTION_AIR; // Apply velocity this.x += this.vx; this.y += this.vy; // Update spin this.angle += this.angularVelocity; this.angularVelocity *= 0.99; // angular friction } draw() { ctx.save(); ctx.translate(this.x, this.y); ctx.rotate(this.angle); // Draw ball body ctx.beginPath(); ctx.arc(0, 0, this.radius, 0, Math.PI * 2); ctx.fillStyle = this.color; ctx.fill(); ctx.strokeStyle = 'white'; ctx.lineWidth = 2; ctx.stroke(); // Draw number ctx.rotate(-this.angle); // Keep text upright relative to ball's orientation if desired, // but the prompt says "rotation of its number" // meaning the number itself rotates. ctx.fillStyle = 'white'; ctx.font = 'bold 16px Arial'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(this.id, 0, 0); ctx.restore(); } } class Heptagon { constructor(centerX, centerY, radius) { this.centerX = centerX; this.centerY = centerY; this.radius = radius; this.rotation = 0; this.angularVelocity = (Math.PI * 2) / (ROTATION_PERIOD * 60); // assuming 60fps } update(deltaTime) { // 360 degrees every 5 seconds // target angular velocity: 2 * PI / 5 seconds const targetWV = (Math.PI * 2) / ROTATION_PERIOD; // We'll assume deltaTime is roughly 1/60s for simpler math if not using actual delta this.rotation += (targetWV / 60) * deltaTime; } getVertices() { const vertices = []; for (let i = 0; i < HEPTAGON_SIDES; i++) { const theta = this.rotation + (i * 2 * Math.PI) / HEPTAGON_SIDES; vertices.push({ x: this.centerX + this.radius * Math.cos(theta), y: this.centerY + this.radius * Math.sin(theta) }); } return vertices; } draw() { const vertices = this.getVertices(); 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 = '#555'; ctx.lineWidth = 8; ctx.lineJoin = 'round'; ctx.stroke(); ctx.fillStyle = 'rgba(255, 255, 255, 0.05)'; ctx.fill(); } // Get velocity of a point on the boundary getPointVelocity(px, py) { const dx = px - this.centerX; const dy = py - this.centerY; const dist = Math.sqrt(dx * dx + dy * dy); const angularVel = (Math.PI * 2) / ROTATION_PERIOD; // V = omega * r, perpendicular to radius // V_x = -omega * dy, V_y = omega * dx // For a point at distance 'dist' return { vx: -angularVel * dy, vy: angularVel * dx }; } } const balls = []; for (let i = 1; i <= BALL_COUNT; i++) { balls.push(new Ball(i, width / 2, height / 2)); } const heptagon = new Heptagon(width / 2, height / 2, HEPTAGON_RADIUS); function resolveBallBallCollision(b1, b2) { const dx = b2.x - b1.x; const dy = b2.y - b1.y; const distance = Math.sqrt(dx * dx + dy * dy); const minDistance = b1.radius + b2.radius; if (distance < minDistance && distance > 0) { // 1. Resolve overlap const overlap = minDistance - distance; const nx = dx / distance; const ny = dy / distance; // Push balls apart const moveX = nx * overlap / 2; const moveY = ny * overlap / 2; b1.x -= moveX; b1.y -= moveY; b2.x += moveX; b2.y += moveY; // 2. Resolve velocity (Elastic collision) const rvx = b2.vx - b1.vx; const rvy = b2.vy - b1.vy; const velAlongNormal = rvx * nx + rvy * ny; if (velAlongNormal < 0) { const impulse = -(1 + BALL_BOUNCE) * velAlongNormal; const impulseX = impulse * nx; const impulseY = impulse * ny; b1.vx -= impulseX / 2; b1.vy -= impulseY / 2; b2.vx += impulseX / 2; b2.vy += impulseY / 2; // Add some spin transfer (simplified) const tangentX = -ny; const tangentY = nx; const velAlongTangent = rvx * tangentX + rvy * tangentY; const spinImpulse = velAlongTangent * 0.1; b1.angularVelocity -= spinImpulse; b2.angularVelocity += spinImpulse; } } } function resolveWallCollision(ball, heptagon) { const vertices = heptagon.getVertices(); for (let i = 0; i < vertices.length; i++) { const p1 = vertices[i]; const p2 = vertices[(i + 1) % vertices.length]; // Find closest point on segment p1-p2 to ball center const dx = p2.x - p1.x; const dy = p2.y - p1.y; const l2 = dx * dx + dy * dy; let t = ((ball.x - p1.x) * dx + (ball.y - p1.y) * dy) / l2; t = Math.max(0, Math.min(1, t)); const closestX = p1.x + t * dx; const closestY = p1.y + t * dy; const distDx = ball.x - closestX; const distDy = ball.y - closestY; const distance = Math.sqrt(distDx * distDx + distDy * distDy); if (distance < ball.radius) { // Collision detected const nx = distDx / distance; // Normal pointing away from wall const ny = distDy / distance; // Resolve overlap const overlap = ball.radius - distance; ball.x += nx * overlap; ball.y += ny * overlap; // Get wall velocity at collision point const wVel = heptagon.getPointVelocity(closestX, closestY); // Relative velocity const rvx = ball.vx - wVel.vx; const rvy = ball.vy - wVel.vy; // Normal component of relative velocity const velAlongNormal = rvx * nx + rvy * ny; // If moving towards the wall if (velAlongNormal < 0) { // Elastic bounce const impulse = -(1 + WALL_BOUNCE) * velAlongNormal; ball.vx += impulse * nx; ball.vy += impulse * ny; // Tangential friction and spin // Tangent vector const tx = -ny; const ty = nx; const velAlongTangent = rvx * tx + rvy * ty; // Apply some tangential impulse to reduce relative tangential velocity const frictionImpulse = velAlongTangent * WALL_FRICTION; ball.vx -= frictionImpulse * tx; ball.vy -= frictionImpulse * ty; // Update angular velocity based on friction ball.angularVelocity -= frictionImpulse * 0.5; } } } } function update() { // Reset center to handle window resize/centering heptagon.centerX = width / 2; heptagon.centerY = height / 2; // Update heptagon rotation heptagon.update(1); // approx 1 frame // Sub-stepping for physics stability for (let s = 0; s < SUB_STEPS; s++) { // Update balls balls.forEach(ball => ball.update()); // Ball-Ball collisions for (let i = 0; i < balls.length; i++) { for (let j = i + 1; j < balls.length; j++) { resolveBallBallCollision(balls[i], balls[j]); } } // Ball-Wall collisions balls.forEach(ball => resolveWallCollision(ball, heptagon)); } } function draw() { ctx.clearRect(0, 0, width, height); heptagon.draw(); balls.forEach(ball => ball.draw()); requestAnimationFrame(() => { update(); draw(); }); } // Initial start // Since we are using requestAnimationFrame, we just call draw() // The update loop is inside draw. // To ensure the first frame works correctly with the animation loop structure draw(); </script> </body> </html> ```