Build: the showroom with its pedalling crank (the real project files, joined)
This is the exact code of loop.js, a11y.js and bike.js below (import and export words removed, because local imports cannot run in the preview), plus short stand-ins for the other files. The button is the page's own. Open the scene tree: the bike now holds a crankset.
The bike pretends to ride on its stand: both wheels and the new crankset turn together at a real speed, the loop caps its delta, and a pause button plus the reduced-motion rule decide whether anything moves.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Add a bike.userData.speed = 0 branch so the bike stands still when speed is 0, without special code.
Make the loop log a warning when a frame needed clamping.
Explain it without notes
Why does main.js call bike.tick only when motion.mayMove(), but call the controls always?
How is the crank's angle related to the wheel's angle, and where in the code does the 2.75 come from?
Console
Nothing logged yet.Expected console output
bike parts: down-tube, top-tube, seat-tube, chain-stays, seat-stays, fork, front-wheel, rear-wheel, handlebar, crankset
speed: 1.667 m/s, after 1 s: wheel 0.754 turns, crankset 0.274 turns
may move on its own: true | button says: Pause animation