You build physics toys, and you have watched someone try the tablecloth trick at a family dinner.
Build me a single HTML page: a table set for dinner, and a tablecloth I can yank out from under it.
The build
- A table with a cloth and at least six objects on it: plates, glasses, a candlestick, a bowl. They differ in mass and contact area with the cloth.
- A pull-speed control shown on screen in feet per second, with a button to yank the cloth.
- Motion comes from friction and inertia, not a scripted rule keyed to pull speed. A slow pull drags the setting along with the cloth and off the edge. A fast pull leaves the objects standing. Between those speeds, some objects slide, some tip, and some fall.
- Objects can slide, tip over, collide with each other, fall off the table, and hit the floor.
- Keep simulating until everything has stopped moving. Then show a count: how many objects remain on the table, and how many remain upright.
- A reset control restores the starting layout.
- Loading the page as
#speed=12 sets the pull speed to 12 ft/s and pulls one second after load. Any number works.
- The art is yours.
House rules
- One file. Everything inline — no CDN, no external stylesheet, font, script or image.
data: URIs are fine.
- No libraries. No physics engine — write your own.
- No network at runtime.
- No
localStorage, sessionStorage, cookies or indexedDB — sandboxed frame, they throw.
- Return the file as exactly one fenced
html block.
Answer in exactly these sections
The prediction
One paragraph, before the file: the lowest pull speed at which every object stays on the table, and the speed below which no object stays on the table, as two numbers in ft/s. State the arithmetic using your masses, friction coefficients, and cloth length.
The page
The single fenced html block.
What it actually does
Where it behaves like the physical trick and where it does not. Name any special cases, scripted wobbles, or fall thresholds. Everyone has seen this trick fail; say how yours fails before I find out.