Here is a self-contained HTML document that renders a ball bouncing inside a spinning hexagon, using Canvas 2D and inline JavaScript. It includes realistic gravity, friction, wall collisions, and Pause/Resume and Reset controls.
```html
Bouncing Ball in a Spinning Hexagon
space — pause / resume · r — reset
```
### Physics, Controls, and Visual Feedback
The page runs a fixed-timestep physics loop with sub-stepping to keep collisions stable at high speed. Gravity pulls the ball downward, air drag gradually reduces its velocity, and each wall collision applies restitution and tangential friction. Because the hexagon rotates continuously, the wall velocity at the contact point is included in the bounce calculation, so the ball is pushed sideways by the spinning walls in a realistic way.
**Controls** — The on-screen Pause/Resume button freezes the simulation, while Reset respawns the ball near the center with a random direction. Keyboard shortcuts are also available: Space toggles pause, and R resets.
**Visual feedback** — A soft motion trail follows the ball, the hexagon has a glowing outline with highlighted vertices, and the ball itself uses a radial gradient. The background darkens toward the edges to keep focus on the arena.
---
**Optimization Tip:** You can tune the simulation by editing the constants at the top of the script — for example, increase `GRAVITY` to make the ball fall faster, adjust `RESTITUTION` for bouncier walls, or change `OMEGA` to alter the hexagon's spin speed.