A tab hidden for 12 seconds
Plain numbers, no canvas. Frame 4 arrives after a 12 s gap. Without the clamp the wheel would jump 30 turns.
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?
Preview
Console
Nothing logged yet.Expected console output
frame delta s turns (raw) turns (clamped)
0 0.000 0.00 0.00
1 0.016 0.04 0.04
2 0.017 0.04 0.04
3 0.016 0.04 0.04
4 12.000 30.14 0.25
5 0.017 0.04 0.04
total turns: 30.30 raw, 0.42 clamped