The wagon-wheel effect, as a table
A 12-spoke wheel looks identical every 30 degrees. This computes what you see, and nothing is drawn.
Animate by how much time has passed, not by how many frames have been drawn. A wheel then turns at omega = v / r radians a second on a 30 fps phone and on a 144 Hz monitor alike.
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.
Write wheelStep(speedKmh, radius, delta) that returns the radians to add this frame. What does it return for 36 km/h, radius 0.35 and delta 1/60?
A tab is hidden for 30 seconds and shown again. With Timer.connect(document) and a clamp of 0.1, how far can the wheel jump on the first frame?
Explain it without notes
Why does rotation.z += 0.1 give different speeds on different screens, and how do you fix it?
A bike rolls at 18 km/h on wheels with a 0.35 m rolling radius. How fast should the wheel turn, in radians and in turns a second?
Console
Nothing logged yet.Expected console output
km/h fps degrees/frame looks like
5 30 7.5 forwards 7.5 deg
5 60 3.8 forwards 3.8 deg
5 144 1.6 forwards 1.6 deg
15 30 22.6 BACKWARDS 7.4 deg
15 60 11.3 forwards 11.3 deg
15 144 4.7 forwards 4.7 deg
40 30 60.3 standing still
40 60 30.1 standing still
40 144 12.6 forwards 12.6 deg
100 30 150.7 forwards 0.7 deg
100 60 75.4 BACKWARDS 14.6 deg
100 144 31.4 forwards 1.4 deg