We need answer by creating index.html. Need inspect cwd maybe empty. Need build single-page web app. Need no external resources. Need implement heptagon spinning 360 every 5s, balls 1-20 dropping from center. Gravity friction, collide each other, bounce off rotating walls, show ball spin via rotation of number. Collision detection self. Need likely canvas HTML. Need provide file. We can create index.html. Need maybe use bash? We need write file. Need maybe inspect.

Need write index.html. Need think physics. Single file. Canvas. Heptagon centered maybe rotates around center. Balls spawn from center? "dropping from the center of a heptagon" Could spawn near center with slight jitter and gravity downward. Need colliding with rotating walls. We need implement collision detection self.

Need deliver code. Need maybe use requestAnimationFrame. Need robust.

Need design:

Canvas fills viewport. Coordinate system centered at canvas center. Heptagon radius maybe min(width,height)*0.38. Polygon vertices computed angle offset -PI/2? Heptagon has 7 sides. It spins 360 every 5s (angular velocity = 2π/5). It rotates around center. Balls radius maybe 12 or based min. 20 balls, numbered 1-20. Start positions near center in maybe random radial positions, velocities downward. Gravity. Friction: air drag and wall friction? "friction" maybe include velocity damping on collisions and global air drag. Bounce realistically off rotating walls. Need account rotating wall velocity at contact. For each ball-wall collision:
- Represent circle vs line segment. Find closest point on segment to ball center, vector n from closest to center, distance. If distance < r. Normal = normalized vector from wall to ball. If closest is endpoint, normal from vertex; but for wall collision with convex polygon, using segment closest works. Need handle if ball outside. If distance < r. If d==0 maybe normal from center to vertex? But okay.
- Penetration = r - d.
- Position correction: ball += normal * (penetration + tiny).
- Relative velocity: ball vel - wall vel. Wall velocity due rotation: omega cross r = (-omega * y, omega * x) if omega rad/s, center origin. Use normal component vn = rel dot normal. If vn < 0 (ball moving into wall), reflect: rel' = rel - (1+e)*vn*normal. Then add wall friction tangential: rel' -= tangent * (1 - mu?)? Need be careful. Could use tangential impulse with friction coefficient. But if wall moving tangentially, maybe use Coulomb friction. Simpler: reflect normal, then damp tangential relative velocity: rel' = rel' - tangent * min(mu * normalImpulse, |tangent|?) Need implement impulse-like.

Pseudo:
omega = 2π/5.
wallVel = {x:-omega*y, y:omega*x}
rel = ball.v - wallVel
vn = dot(rel,n)
if vn < 0:
  restitution = 0.82 maybe
  impulseScalar = -(1+e)*vn // unit mass
  ball.v -= impulseScalar * n // since rel = v - wallVel, adjust ball.v
  // friction impulse
  tangent = rel - dot(rel,n)n
  if tangent length > 0:
    tangent normalized
    maxFriction = mu * impulseScalar
    jt = -dot(rel,tangent)
    impulse = clamp(jt, -maxFriction, maxFriction)
    ball.v += impulse * tangent
  // maybe global air drag: v *= exp(-drag*dt)
  ball.v += wallVel? no after adjust.
  // If ball already has normal velocity outward, okay.

Need collision between balls:
- For each pair, dx,dy, dist. If dist < sum radii:
  normal = dx/dist. penetration. correction = normal * (penetration/2) each.
  rel = b.v - a.v. velAlongNormal = dot(rel,n). If >0 separate moving apart no impulse. Else impulse magnitude = -(1+e)*velAlongNormal / (invMassA+invMassB) = ... unit mass. impulse = j*n. a.v -= impulse; b.v += impulse.
  friction: tangent = rel - normal*dot(rel,n); normalize; jt = -dot(rel,t); impulse clamp by mu*j. a.v += jt*t? Need sign. For equal masses, if relative tangential velocity exists, damp. Use same formula:
  jn = -(1+e)*velN if velN<0 else 0
  impulse = jn*n
  a.v -= impulse; b.v += impulse
  tangent = rel - normal*dot(rel,n)
  jt = -dot(rel,tangent)
  jt = clamp(jt, -mu*jn, mu*jn)
  a.v += jt*tangent; b.v -= jt*tangent
  Then spin update: ball.spin += (tangential relative velocity? or impulse/t radius). Could use spin += (tangent dot rel)*dt*? For visible rotation, set spin velocity based on linear velocity and collision tangential. Need "show each ball's spin via rotation of its number." We can draw number inside circle rotated by ball.spin. Ball.spin += angular velocity from linear velocity: spin += (v.x * sin? Actually a rolling ball would spin angle = angle(v) + π/2? We can approximate spin += (v.x * something) maybe. Better:
  ball.spin += (ball.v.x * Math.cos(ball.angle?) - ball.v.y * Math.sin?) Hmm.
  Simpler: spin += (ball.v.x * 0.08 - ball.v.y * 0.08)*dt? Not physical. Need number rotates as ball moves. Could use spin += (v.x * sin(theta) - v.y * cos(theta)) dt? Where theta = atan2(vy,vx), tangent direction = (-sin theta, cos theta). Spin velocity = dot(v, tangent)/r? = (-v.x sinθ + v.y cosθ)/r = v magnitude/r. That just positive spin with speed. But rolling without slipping direction? For circle, angular velocity = -v.x/r? Depends orientation. We'll show. Use spin += (ball.v.x * Math.sin(ball.angle) - ball.v.y * Math.cos(ball.angle))*dt? Need not.

Maybe maintain spin variable, update:
spinVelocity += (linearTangentVel / radius) * dt * 0.8; spin += spinVelocity * dt; spinVelocity *= 0.98? But ball can spin even after moving. Use dt in seconds.
For collision, apply angular impulse:
omegaDelta = jt / (mass*r^2) maybe; ball.spin += delta.
But we can simpler update spin = atan2(v.y, v.x) + π/2 + spinOffset, causing number rotates with direction of movement. But "spin via rotation of number" not necessarily physical. Better maintain.

Need use time step. We can use substeps for stability. Use dt capped 1/30? RequestAnimationFrame. Physics step maybe 1/120 for 10 substeps. Need all collisions self.

Heptagon: Need draw polygon with rotating vertices. Need collision against rotating walls. Use vertex positions in world.

Potential issue: balls spawn from center of rotating heptagon. If center within polygon, no wall collision initially. Gravity downward, they fall. But heptagon rotates, walls move; walls can hit balls. Good.

Need maybe "dropping from center": We can spawn all at center with small jitter and tiny downward velocities? If all at exact center, balls overlap; collisions self. They will collide. Maybe spawn in a small cluster at center with random jitter and downward velocities. They drop from center. Numbered balls.

Need "realistically" with friction: use restitution 0.82, friction 0.12, air drag. For ball-ball restitution 0.92, friction 0.08.

Need maybe handle boundary: heptagon radius maybe 270. If small canvas, adjust. Ball radius maybe min(13, minDim*0.018). 20 balls radius 10-14. Need no overflow.

Need maybe show a status overlay? Not necessary. Could include instructions? The user asked show. Single page. Could include CSS.

Need maybe create index.html. Let's craft. Need ensure no external resources. Use system fonts. Use canvas. Need all JS inline.

Let's think physics details thoroughly.

HTML structure:
<!doctype html><html lang="en"><head><meta charset="utf-8">...<style> html,body { margin:0; height:100%; overflow:hidden; background:#090d18; } canvas { display:block; width:100vw; height:100vh; } .hint ... maybe optional. </style></head><body><canvas id="scene"></canvas><script>...
</script></body></html>
Need no external.

JS:
(() => {
 const canvas = document.getElementById('scene');
 const ctx = canvas.getContext('2d');
 let W=0,H=0,DPR=1;
 function resize(){ DPR = Math.min(window.devicePixelRatio || 1, 2); W=window.innerWidth; H=window.innerHeight; canvas.width = Math.floor(W*DPR); canvas.height = Math.floor(H*DPR); canvas.style.width = W+'px'; ... ctx.setTransform(DPR,0,0,DPR,0,0); initBalls? If resize, preserve? Simpler reset balls on resize. But if resize after load, maybe okay. Use resetBalls().
 window.addEventListener('resize', resize);
 const heptagon = { radius:0, vertices:[], angle:0, omega: Math.PI*2/5 };
 const balls=[];
 const ballRadius = maybe 12.
 function resetBalls(){ balls.length=0; for i 1..20: const r=ballSize; angle = (i*2π/20) + random; dist = r*1.2 + random*r*0.4; x = cos(angle)*dist; y = sin(angle)*dist; // center. But "dropping from center" maybe all start at center, but cluster. Use jitter small. Maybe x=(Math.random()-0.5)*r*2, y=(Math.random()-0.5)*r*2. velocity x random -100..100, y -20? They drop.
 }
});
Need if heptagon radius changes, ball radius changes. Use ballSize = clamp(Math.min(W,H)*0.018, 8, 14). If reset on resize, okay.

Need use random? deterministic? Could use Math.random. Fine.

Coordinate: Canvas center at W/2,H/2. Gravity positive y (down). Heptagon vertices:
function polygonVertices() {
 const r=heptagon.radius;
 for i 0..6:
   a = heptagon.angle + i*2π/7 - π/2;
   vertices[i] = {x:cx+cos(a)*r, y:cy+sin(a)*r};
}
Need initial angle maybe 0.5 rad. Rotates 360 every 5s.

Collision with walls:
Need compute normal. Let's define normal from wall to ball. Segment closest point.
function closestPointOnSegment(p,a,b):
  const vx=b.x-a.x; vy=b.y-a.y; const wx=p.x-a.x; wy=p.y-a.y; const c1 = vx*wx+vy*wy; const c2=vx*vx+vy*vy; const t=Math.max(0,Math.min(1,c1/c2)); return a + t*vx...
For each side, p=ball center, closest. dx = p.x - closest.x; dy = p.y - closest.y; distSq=dx^2+dy^2; if distSq < r^2:
  if distSq > 1e-10:
    n = dx/dist, dy/dist
  else:
    // If center exactly on side? Use normal from center of polygon to closest point? For circle center on segment, normal ambiguous. Choose outward normal of side maybe:
    side vector = b-a, outward normal? For polygon vertices CCW? Need determine. Canvas y down. Heptagon vertices with -π/2 and increasing angle, that's clockwise? In canvas coordinate y down, points at top, then top-right, etc. That is clockwise visually? Cross product maybe negative. For collision normal from wall to ball, if center on segment, use outward normal from polygon. Need compute outward normal of side. For CCW polygon in standard y up, interior left of edge. In canvas y down, vertices generated with increasing angle from top maybe are clockwise? Let's test: vertex top (0,-r), next top-right. Edge top -> top-right. Interior is to right? In canvas, polygon is clockwise? The normal to left in screen coords? We can compute outward normal for side as normalized (dy, -dx) or (-dy,dx). Need determine. For edge top -> top-right, dx>0,dy>0. Interior is below-left? Outward is above-right? vector (dy,-dx) = (positive, negative) = up-right. Good. So outward normal = (dy,-dx)/len. Use if dist=0.
  penetration = r - dist.
  // position correction: ball.x += n.x * (penetration + 0.01)
  // compute wall velocity at contact point maybe use closest point or ball contact point. Use contact point = closest point. wallVel = {x:-omega * (contact.y - cy), y:omega * (contact.x - cx)}
  // Relative velocity ball - wallVel.
  const relVx = ball.vx - wallVx, relVy = ball.vy - wallVy;
  const vn = relVx*n.x + relVy*n.y;
  if (vn < 0) {
    const e = 0.82;
    const j = -(1+e)*vn; // unit mass
    ball.vx -= j*n.x; ball.vy -= j*n.y;
    // friction
    const tx = relVx - n.x*(relVx*n.x+relVy*n.y);
    const ty = relVy - n.y*(relVx*n.x+relVy*n.y);
    const tlen = hypot(tx,ty);
    if (tlen > 1e-6) {
      const jt = - (relVx*(tx/tlen)+relVy*(ty/tlen));
      const mu = 0.08;
      const fj = Math.max(-mu*j, Math.min(mu*j, jt));
      ball.vx += fj*(tx/tlen); ball.vy += fj*(ty/tlen);
    }
    ball.spin += fj / ball.r * 0.35? Sign maybe.
    // maybe spin += j * 0.02? 
  }
  // also if vn >=0 but penetration correction still.
  // spin from tangential relative velocity:
  // const tangentVel = dot(rel,tangent); ball.spin += tangentVel / r * dt? But in wall collision not have dt. Could use small.
Need note if ball outside and normal points outward; if ball center inside near wall, normal from segment could point inward? For convex polygon, closest point on side to center inside will produce vector from side to center that points inward, not outward. Wait if circle center inside heptagon near side, dx from closest point to center points inward (towards polygon center), but collision with wall should push ball outward, normal should be outward. Our closest point method uses normal from closest point to ball center. If ball center is inside, that normal is inward, wrong. For wall collision, we need handle both inside and outside? Balls should be inside polygon. If circle center inside but overlapping wall, closest point vector from side to center points inward, penetration correction would push further into polygon, wrong. Need use outward normal for inside. For a circle inside a convex polygon, collision with wall should be along outward normal of side (away from interior). Need detect whether ball center is inside polygon. If inside, normal = outward normal of side; penetration = r - distance to side (signed distance). If outside, normal = from closest point to center (outward from wall). In practice balls inside. Need compute signed distance to side. For oriented polygon maybe outward normal. Use polygon vertices in clockwise in screen coords? We can compute outward normal per side as normalized (dy, -dx) for vertices generated clockwise? Need verify. With vertices top->top-right->... For edge top -> top-right, outward is up-right. (dy,-dx) positive y, negative x = down-left? Wait dx = cos a2 - cos a1 (a1=-π/2, a2=-π/2+2π/7 = -0.142). cos top=0, cos top-right=0.623, dx=0.623, dy=0.782-0=0.782. (dy,-dx)=(0.782,-0.623) = down? y positive = down, x left. That's not up-right. (-dy,dx)=(-0.782,0.623) = up-right. So outward normal = (-dy, dx) for vertices in clockwise? Need check. Edge top-right to right. a2=-0.142, a3=0.755. dx=0.378-0.623=-0.245, dy=0.688-0.782=-0.094 (left/up). Edge along upper-right to right. Interior is below-left. Outward is above-right? (-dy,dx)=(0.094,-0.245) = up-right. Good. So outward normal = (-dy, dx)/len.

But if vertices generated with increasing angle in screen coordinates, that's clockwise, so outward normal = (-dy,dx). Good.

However if we use closest point normal for outside, maybe outside near side; vector from side to center may be outward. Need for inside use outward. Need determine inside. Could use pointInPolygon. But for each side, signed distance can be based on outward normal. For an edge of a convex polygon oriented clockwise, for any interior point, dot(p - a, outward) < 0? For top edge, outward up, point center below => dot((0,0)-(0,-r), up) = dot((0,r), up negative y?) = y*r? screen y down, outward y=-0.623, dot=(r)*(-0.623)<0. Good. If inside, distance signed = dot(p-a, outward) negative. Distance to line = -dot. If outside, signed >0.
For circle overlap:
- lineDist = dot(p - a, nOut). For inside lineDist < 0. signed distance from boundary inward = -lineDist.
- If lineDist > -r? Need if ball center is within r of boundary. Penetration = r - max(0,-lineDist)? If inside, penetration = r + lineDist (since lineDist negative, e.g -10, r=12 =>2). If outside, penetration = r - lineDist? But outside lineDist positive, if lineDist < r. However closest point method may be better for corners. For inside near side, use normal outward nOut. For outside, normal from closest point to center. But if outside near corner, normal from closest point. For inside, use nOut.

But if outside near side but not near endpoint, closest normal likely outward. We can unify:
For each segment:
  closest point c, dx=p-c, d = hypot(dx). If d < r:
    if d > eps:
       normal = dx/d
    else:
       normal = outward
    // But for inside, d is distance to side and normal points inward. Need if center is inside polygon and d < r, use outward. How know? lineDist = dot(p-a,nOut). If lineDist < 0 and d < r, use outward.
    normal = (lineDist < 0 && d < r) ? nOut : dx/d.
But for outside near side lineDist positive; normal from c to p outward. Good.
For corners, if ball outside near vertex, lineDist may be negative? Actually near outside corner may be inside halfplanes but distance to vertex < r. closest normal from vertex to center. That is okay.
For inside near corner, closest point might be vertex and normal from vertex to center could point inward? But if inside and near corner, collision with corner should push outward along direction from vertex to center (which points inward? Wait if ball center inside near corner, vector from vertex to center points into polygon, but to resolve circle overlapping corner, you should push ball away from vertex outward, which is opposite vector from vertex to center? Example square, corner top-left, center inside below-right, vector from corner to center down-right; to resolve, push down-right? Actually ball inside square near top-left, circle overlaps corner; to move center out of corner, push further down-right (away from corner into interior), not outward wall. Wait if ball near corner, the wall boundary is both top and right; nearest point is corner, pushing along vector from corner to center (down-right) moves it away from corner into interior, okay. Normal from vertex to center is correct. For side collision, pushing along vector from side to center (inward) moves away from side into interior, but if ball overlaps wall, need move into interior, yes! I earlier said wrong; for circle inside near wall, pushing inward is correct. The ball should not cross wall; it's inside, so push away from wall into interior. Normal from side to center points into polygon. So closest point normal works for inside too. Good. For side top, center below side, vector down, push down. Correct. So no issue. Outward normal not needed for resolution. But for outside, normal from closest to center also correct. So closest point method works both inside/outside. Great.
Need if d==0, use normal from polygon center to closest point? If center exactly on wall, push toward interior? If center on side, vector zero; choose normal from side outward or inward? If center exactly on side, both. But rare. Use outward normal maybe. If center is on side, pushing inward or outward? If center is on boundary, to keep inside push inward. Use inward normal = (dy,-dx). But if outside? d zero impossible. Use nOut? Hmm if center exactly on wall, we can choose normal from polygon center to closest point, which points inward (for side). So use nIn = (dy,-dx). Good.
But for outside near side, normal from closest to center outward. For inside, inward. Both correct.

Need wall rotation: wall velocity at contact point. If using normal and rel. Good.

Need wall collision with rotating polygon and balls inside. Because walls rotate, they can impart tangential velocity. Need maybe if ball is not in contact, no wall. If wall sweeps into ball, collision impulse.

Need wall collision position correction with normal from closest point to center. For inside, pushes further inward. For outside, pushes outward. Fine.

Need ball-ball collision. Need maybe "drop from center" all balls start at center. If exact overlap, collision normals random? Use jitter. Good.

Need use continuous? Not necessary.

Potential issue: if balls are all spawned at center with radius 12, cluster, ball-ball collisions resolve. Good.

Need maybe heptagon radius computed after resize. resetBalls uses ballRadius. Need create balls after resize. If reset on resize, balls reappear. Accept.

Need maybe initial velocities downward: vx random -30..30, vy -10? Gravity will make drop. Maybe "dropping" means no horizontal? But collisions and rotating walls make motion. Could give small random horizontal to prevent stacking. Fine.

Need draw:
- clear background.
- Draw heptagon walls: use ctx.lineWidth = 10; strokeStyle = '#5ad7ff'; shadow maybe no external. Use lineCap round. Draw polygon. Draw inner subtle fill.
- Draw rotating heptagon perhaps with small ticks at vertices.
- Draw balls:
  for each ball:
    ctx.save(); translate(x,y); rotate(ball.spin); draw circle; draw number rotated.
    Need draw circle maybe with radial gradient? Canvas gradients okay. Use createRadialGradient(-r*0.3,-r*0.4,r*0.1,0,0,r). Colors per number? Could use HSL hue based on number. But if gradient inside rotated context? okay.
    Draw circle fill. Stroke.
    Draw number at center with font = `${Math.max(14,r*1.15)}px system-ui`; textAlign center; baseline middle; fillStyle = '#fff'; stroke black.
  restore.
Need maybe draw trail? Not necessary.

Need draw "spinning heptagon" maybe with angle. Could draw vertex labels? not needed.

Need stats? Maybe overlay "7-sided rotating chamber • 20 numbered balls". Fine.

Need implement all collision detection. Need maybe comment.

Need maybe use dt:
let last=performance.now();
function frame(now){
  const dtRaw = Math.min(0.033,(now-last)/1000); last=now;
  const dt = dtRaw;
  heptagon.angle = (now - startTime)/1000 * omega; // absolute angle. Or += omega*dt.
  updatePhysics(dt);
  draw();
  requestAnimationFrame(frame);
}
Physics:
const gravity=1150; const airDrag=0.08? Use v *= exp(-drag*dt), with drag maybe 0.08 s^-1. 
const substeps = 8; h=dt/substeps; for s 0..substeps-1:
  heptagon.angle += omega*h;
  for balls:
    ball.vy += gravity*h;
    // air drag
    const drag = Math.exp(-0.12*h); ball.vx*=drag; ball.vy*=drag; // very slight
    ball.x += ball.vx*h; ball.y += ball.vy*h;
  resolveBallBalls(h);
  resolveWalls(h);
Need order maybe wall after ball-ball. For wall collision, ball velocities adjusted. Maybe after wall, ball-ball again? Could do 2 iterations of pair/walls per substep for stability. But 20 balls, 190 pairs, 8 substeps, fine. Let's do:
for substeps:
  integrate
  for pass=0; pass<2; pass++: resolveBallBallPairs(); resolveWalls()
But if ball-ball after wall might push into walls, second pass wall correct. Good.
Maybe if dt large, substeps.

Need ball-ball collision details:
function resolveBallBallPairs() {
 for i...
  const a=balls[i], b=balls[j];
  let dx=b.x-a.x; dy=b.y-a.y; let distSq=dx*dx+dy*dy; const minDist=a.r+b.r;
  if (distSq ===0) { dx=(i-j)*0.01; dy=0.01; distSq=...}
  const dist=Math.sqrt(distSq); if (dist < minDist) {
    const nx=dx/dist, ny=dy/dist;
    const penetration=minDist-dist;
    const correction = penetration/2 + 0.01;
    a.x -= nx*correction; a.y -= ny*correction; b.x += nx*correction; b.y += ny*correction;
    const rvx=b.vx-a.vx, rvy=b.vy-a.vy;
    const velN=rvx*nx+rvy*ny;
    if (velN < 0) {
      const e=0.93;
      let j = -(1+e)*velN;
      // equal mass.
      a.vx -= j*nx; a.vy -= j*ny; b.vx += j*nx; b.vy += j*ny;
      // friction
      const tx=rvx - nx*velN; const ty=rvy - ny*velN; const tlen=Math.hypot(tx,ty);
      if(tlen>1e-6){
        const jt=- (rvx*(tx/tlen)+rvy*(ty/tlen));
        const mu=0.08;
        const fj=Math.max(-mu*j, Math.min(mu*j,jt));
        a.vx += fj*(tx/tlen); a.vy += fj*(ty/tlen);
        b.vx -= fj*(tx/tlen); b.vy -= fj*(ty/tlen);
        a.spin += fj / (a.r*2); b.spin -= fj/(b.r*2);
      }
    }
    // spin due to tangential velocity
    a.spin += (rvy*nx - rvx*ny)*0.015; b.spin -= ...
  }
}
Need units: spin is radians. jt units velocity. Dividing by r gives angular velocity; not per step. Need maybe multiply by h? In ball-ball function no h. We can add spin += (jt / (r * 1000))? Actually tangential relative velocity m/s, /r = rad/s. In a collision event, angular impulse per collision maybe jt/(r). But if called many times per second, spin changes too much. Use spin += (jt / (r * 40)) maybe. Simpler use spin += (tangentVel / r) * 0.002. But visible.

Maybe maintain spin velocity:
ball.spin += (ball.vx * Math.sin(ball.angle) - ball.vy * Math.cos(ball.angle)) * h * 0.002? Hmm.
Maybe in integrate:
ball.spin += (ball.vx * ball.spinTangentX - ball.vy * ...)*h. Too much.
Simpler:
const tangentSpin = (rvx*ty - rvy*tx) / Math.max(dist,1); // angular velocity rad/s approx
a.spin += tangentSpin * 0.002; b.spin -= tangentSpin*0.002;
But if velocities ~1000, tangentSpin ~1000/r~80, *0.002=0.16 rad per collision, okay.
Also after integrate:
ball.spin += (ball.vx * Math.sin(ball.angle) - ball.vy * Math.cos(ball.angle)) * h * 0.001; Not needed.

Need spin via rotation of number. Ensure numbers rotate visibly. Use spin += small from collisions/wall. Good.

Need wall collision spin:
const tangentVel = relVx*tx + relVy*ty; // maybe wall tangential velocity. ball.spin += tangentVel / r * 0.002.
Friction impulse fj maybe negative; ball.spin += fj / r * 0.002.

Need friction with wall:
Rel velocity before impulse. Compute tangent = rel - normal*vn. After impulse normal, friction along tangent. Use jt = -dot(rel,tangent). Clamp. Add to ball.v. If wall moving, friction could add energy.

Need maybe restitution with rotating wall:
j = -(1+e)*vn. If wall moving toward ball, wallVel influences. Good.

Need "bounce realistically off rotating walls" include wall velocity.

Need maybe collision with rotating walls at vertices. Closest point handles.

Need maybe heptagon rotates 360 every 5 seconds exactly:
omega = Math.PI * 2 / 5. angle = performance time * omega + startAngle. Then angular speed exactly.

Need maybe balls dropped from center of heptagon: If heptagon rotates, center same. Good.

Need maybe "numbered balls (1 to 20)" draw numbers.

Need maybe "collide with each other" self implemented. Good.

Need maybe "gravity and friction" visible. Gravity constant, friction from collisions/air. Good.

Need maybe "single-page web app" yes.

Need maybe no external resources. Good.

Need perhaps include high-DPI scaling. Good.

Need maybe use no libraries.

Need maybe if viewport too small, balls radius adjust. Good.

Need maybe if canvas resizes, resetBalls. Good.

Need maybe if user asks "Show" maybe final just file. Need not explain too much. Need mention index.html created. But final maybe concise.

Need write file.

Need final with path and maybe mention. But before final, maybe inspect file? Need ensure no syntax errors. Could run maybe node? HTML not executed. We can maybe use python parse? Maybe no. Need maybe check file exists. Use bash.

Oops python not found but ls okay. Need not. Need maybe check with node? Could use node -c? JS syntax check by extracting? Node can't parse HTML. Could use node maybe regex. Need maybe use grep? But okay. Need perhaps use `node --check` with extracted script? We can use bash with node -e read and new Function. Need not but good.