Show 20 numbered balls (1 to 20) dropping from the center of a heptagon that spins 360 degrees every 5 seconds. The balls are affected by gravity and friction, collide with each other, and bounce realistically off the rotating walls; show each ball's spin via rotation of its number. Implement all collision detection yourself.

Build single-page web app, write it ALL into one self-contained file named index.html in current directory: CSS in <style> tag, JS in <script> tag, inline — do not create separate .css/.js files. Use NO external resources, CDNs or network requests.

We need to produce index.html with canvas simulation.

Constraints: no external resources. Self-contained.

We need heptagon rotating 360 deg every 5 seconds. Balls drop from center. Gravity and friction, collide with each other, bounce realistically off rotating walls; show each ball's spin via rotation of its number. Implement all collision detection yourself.

We need to do physics: 20 balls, each with position, velocity, angular velocity? Spin via rotation of number. So ball has rotation angle for visual.

Collision detection: ball-ball elastic collisions. Ball-wall collisions with rotating polygon. Need to handle moving walls.

Simplify: Heptagon centered at canvas center. Radius ~? Spins. Walls are line segments rotating. Balls inside.

We need to compute collision with rotating walls. Since walls move, need to compute relative velocity at point of contact considering wall velocity due to rotation.

Approach: Use simple physics loop ~60fps.

Represent balls: x,y,vx,vy, radius, mass (same), angle (for spin), angularVelocity.

Gravity: constant downward acceleration e.g., 0.2 px/frame^2.

Friction: maybe damping on velocity when colliding? Or air friction? Probably floor friction? Let's add small linear damping 0.999 and angular damping.

Ball-ball collision: detect overlap distance < 2r. Resolve using impulse-based elastic collision. Since equal mass, swap velocity components along normal.

Ball-wall collision: For each edge of heptagon, compute closest point to ball center, distance to line segment. If distance < radius, collision.

Because wall rotates, need wall velocity at contact point. Wall point moves due to rotation: velocity = omega cross r. For a point on wall relative to center, velocity = omega * perpendicular. Omega = 2π /5 sec = ~0.2π rad/s. In frame time ~1/60 sec => ~0.01047 rad/frame.

Compute wall point coordinates in world space. For each edge, define p1,p2 rotating. Compute normal pointing inward. Check if ball is inside? Might need to keep inside.

Simplify collision detection with rotating polygon: treat walls as static in rotating frame? Could transform ball coordinates into rotating frame, do collision with static polygon, then transform back with velocity correction. That might be easier: rotate coordinate system opposite to heptagon rotation. Then walls are static, but gravity rotates relative? Gravity is fixed in world. That complicates.

Alternative: compute wall velocity at contact point: point on edge. Its velocity = omega × r (perpendicular). In 2D, v = omega * (-y, x) relative to center.

Then relative velocity of ball vs wall point = v_ball - v_wall. If approaching along normal, reflect.

Impulse for ball-wall: reflect velocity component along normal, accounting for wall velocity.

Also need friction: tangential component reduce.

Implement ball-wall collision using closest point on segment.

Steps per frame:
- Update ball angle: angle += angularVelocity
- Apply gravity: vy += g
- Update position: x += vx, y += vy
- Apply linear damping: vx *= 0.999

Then handle collisions.

Ball-ball:
for i<j
dx = x2-x1...
dist...
if dist < 2r and dist>0:
normalize...
overlap = 2r - dist
move balls apart half each
relative velocity along normal
if <0 then impulse...

Simple.

Ball-wall:
heptagon vertices: for k 0..6, angle = baseAngle + k * 2π/7. baseAngle increases with time.

Compute vertices.

For each edge (v_i -> v_{i+1}), compute closest point.

Compute projection t = clamp( dot(p - a, b - a) / |b-a|^2, 0,1 )
closest = a + t*(b-a)
dx = ball.x - closest.x
dy = ball.y - closest.y
dist = sqrt(dx^2+dy^2)
if dist < radius and dist>0:
normal = (dx/dist, dy/dist) ??? Actually need inward normal. Compute edge normal pointing inward.

Better: compute penetration, push ball out along normal from edge.

But we need to compute normal of edge (perpendicular). Compute edge vector e = b-a. Edge normal outward? Need inward. Heptagon center at origin. For each edge, compute midpoint, vector from center to midpoint, that's outward. So normal outward = normalize(mid). Inward = -outward.

If ball is inside polygon, collision occurs when distance from center line is less than radius and ball is outside towards edge.

Simpler: if dist < radius, compute penetration depth = radius - dist. Move ball along normal (from closest point outward? Actually normal from edge to ball). Use vector from closest to ball.

If ball is inside, closest point is on edge, ball is inside so vector from closest to ball points inward. Move ball outward along that vector.

But also need to handle wall velocity.

Compute wall point velocity at closest point: v_wall = omega * perpendicular to r (r = closest - center). v_wall.x = -omega * r.y, v_wall.y = omega * r.x (since rotation CCW).

Relative velocity = v_ball - v_wall.

Normal component of relative velocity along normal n (pointing outward from wall towards ball? Actually n should point from wall into ball). Let's define n = normalized (ball - closest). That's direction from wall to ball.

If dot(relativeVelocity, n) < 0 => ball moving into wall.

Reflect: v_rel_tangent = relativeVelocity - dot(relativeVelocity, n) n
v_rel_normal = dot(relativeVelocity, n) n

After collision, normal component reverses with restitution e.g., 0.8. So new v_rel_normal' = -e * v_rel_normal

Thus new relative velocity = v_rel_tangent * friction? maybe reduce tangential.

Then v_ball_new = v_wall + v_rel_normal' + v_rel_tangent' * friction.

Implement restitution 0.7.

Also spin: when colliding with wall, impart angular velocity based on tangential relative velocity / radius. Similarly ball-ball collision imparts spin.

Simpler: For ball spin visual, we can just set angularVelocity = tangential velocity / radius? Could be independent. But requirement show each ball's spin via rotation of its number. So we need to update angle.

We can approximate: angularVelocity changes due to collisions with walls (friction). When ball collides with wall, compute tangential relative velocity, set angularVelocity += tangential / radius * factor.

Also add some random spin initially? Maybe small.

Also balls colliding with each other: exchange angular momentum? Could ignore.

Simplify: Each ball has angularVelocity, updated by damping, and on wall collision add impulse.

Implementation details:

Canvas full window.

Heptagon radius: e.g., 250px.

Ball radius: 20px.

Start balls at center with small random velocities, maybe drop from center.

Numbered 1-20.

Draw heptagon: lines.

Draw balls: fill circle, draw number rotated by ball.angle.

We need to implement all collision detection ourselves. Yes.

Potential issues: balls may get stuck inside walls due to discrete steps. Use small time step or resolve penetration.

Also need to ensure balls stay inside heptagon. Could initially place at center.

Implementation steps in JS:

const canvas = document.getElementById('c');
ctx...

let balls = [];
for i 1..20:
 balls.push({
  x: cx + (Math.random()-0.5)*20,
  y: cy + (Math.random()-0.5)*20,
  vx: (Math.random()-0.5)*2,
  vy: (Math.random()-0.5)*2,
  r: 18,
  angle: 0,
  angularVel: (Math.random()-0.5)*0.2,
  mass:1
 })

gravity = 0.3

rotation speed: omega = 2*Math.PI / (5*60) rad per frame.

baseAngle = 0

loop:
 baseAngle += omega

 update balls

 draw background

 draw heptagon with rotation baseAngle

 draw balls

requestAnimationFrame

Collision with walls: For each ball, for each edge:
 compute a,b.
 compute closest.
 dist...
 if dist < r:
  // push out
  overlap = r - dist
  n = (ball.x - closest.x)/dist ... if dist==0 use edge normal.
  ball.x += n.x * overlap
  ball.y += n.y * overlap
  // compute wall velocity
  rx = closest.x - cx
  ry = closest.y - cy
  vwx = -omega * ry (in px/frame? omega in rad/frame, radius in px => velocity px/frame)
  vwy = omega * rx
  relVx = ball.vx - vwx
  relVy = ball.vy - vwy
  // normal component
  relDot = relVx*n.x + relVy*n.y
  if relDot < 0:
   // reflect
   restitution = 0.8
   // reflect normal component
   // new relative velocity
   relVx -= (1+restitution)*relDot*n.x
   relVy -= (1+restitution)*relDot*n.y
   // friction tangential
   // compute tangent
   tx = -n.y
   ty = n.x
   tangentDot = relVx*tx + relVy*ty
   // apply friction
   friction = 0.8
   relVx -= tangentDot*tx * (1-friction) ??? Hmm.
   Simpler: reduce tangential component by friction factor.
   Actually we already changed normal. Now apply tangential reduction:
   // compute new tangential
   // we can just scale tangential part
   // Let's decompose.
   // easier: after normal reflection, scale tangential velocity by friction
   // compute tangent component of new rel velocity
   // etc.

Simplify: just reflect normal, leave tangential unchanged, but add spin.

Compute tangential speed = dot(relVel, tangent). Then angularVel += tangential / r * 0.1 (impulse). Might be enough.

Let's implement simpler physics:

if relDot <0:
  // impulse
  impulse = -(1+restitution)*relDot
  ball.vx += impulse * n.x
  ball.vy += impulse * n.y
  // Wait we need to account wall velocity? Actually impulse already relative? Hmm.

Alternative more accurate: treat wall as infinite mass, so ball velocity after collision = v_wall + reflect( v_ball - v_wall ) * restitution along normal, keep tangential.

Compute relVx, relVy as above.
normal component = relDot
tangent component vector = relVx - normal*n.x etc.

New rel normal = -restitution * normal
New relVel = tangent + new normal

Then ball.vx = vwx + new relVx
ball.vy = vwy + new relVy

That's better.

Then update angular velocity: delta tangential = ... maybe angularVel += tangential * 0.05 ?

Okay.

Ball-ball collisions:

for i<j:
 dx = ...
 dist...
 if dist < 2r:
   // normal
   nx = dx/dist
   ny = dy/dist
   // overlap
   overlap = 2r - dist
   // separate
   move each half
   // relative velocity
   rvx = balls[j].vx - balls[i].vx
   rvy = balls[j].vy - balls[i].vy
   velAlongNormal = rvx*nx + rvy*ny
   if velAlongNormal >0 continue
   restitution = 0.8
   j = -(1+restitution)*velAlongNormal /2 // equal mass
   balls[i].vx -= j*nx
   balls[i].vy -= j*ny
   balls[j].vx += j*nx
   balls[j].vy += j*ny
   // spin exchange? optional
   // add spin from tangential
   tangent vector = -ny, nx
   tangentVel = rvx*tangent.x + rvy*tangent.y
   balls[i].angularVel += tangentVel * 0.01
   balls[j].angularVel -= tangentVel * 0.01

This should work.

Edge cases: balls may escape heptagon if collision not perfect. Could also check if ball center outside polygon, then push towards center.

Simpler to just rely on wall collisions.

Performance fine.

Now implement HTML file.

Write index.html with <style> full screen canvas.

No external resources.

Add UI maybe counter.

Make sure self-contained.

Let's generate file.

Potential improvements: Use requestAnimationFrame with timestamp.

Ensure numbers rotate: ctx.save(), translate to ball center, rotate ball.angle, draw text centered.

Ball spin visual: number rotates with ball.angle.

Implement angular damping: angularVel *= 0.99

Also maybe random spin initial.

Now produce file.

Let's write with write tool.

We wrote file. Should verify exists.

File created. Possibly need to ensure no external resources. All good.

We might want to ensure balls drop from center. Currently y = CY -120. That's okay, dropping from center-ish. Could start at center exactly. But okay.

The requirement: dropping from center. Maybe start at center. Currently they start near top. Might be okay but could improve.

Could adjust to start at center with small spread. The current code has y = CY -120. Let's modify to start at center. Could edit.

Better to satisfy requirement: dropping from center. Let's update initial positions to center with small random offset.

We can edit file.

Now balls start near center. Good.

Maybe ensure spin visual: number rotates with ball.angle. Already done.

Implement all collision detection yourself: yes.

Potential improvements: wall velocity calculation uses omega in rad/frame, radius in px -> velocity px/frame correct.

Heptagon spins 360 deg every 5 seconds. Yes.

Gravity and friction: yes.

Collide with each other: yes.

Bounce realistically off rotating walls: okay.

Show each ball's spin via rotation of its number: yes.

Self-contained file present.

Return summary.