Fly between two views
The pathAt() function is the same one the showroom's controls use. The console lists the path at five moments; the flight then repeats with a 1 s pause.
To move the camera between views, turn progress into a position: lerp the target, slerp the camera's direction and lerp its distance, shaped by an easing curve and measured in seconds. Stop when the user grabs the controls, and jump instead of flying when reduced motion is on.
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 3 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write easeOut(t) that starts fast and ends slowly, using 1 - (1 - t) ** 3, and print it at 0.25, 0.5 and 0.75.
Write goTo(view) that respects reduced motion: it should return 0 and move at once if the visitor asked for it, otherwise start a 1 s flight and return 1.
Explain it without notes
Why is lerping the camera's position between two views a bad path, and what is the better one?
What should happen to a camera flight when the visitor presses the mouse button on the canvas, and why?
Console
Nothing logged yet.Expected console output
duration: motion allowed 1.2 s | reduced motion 0 s (an instant cut)
t 0.00 eased 0.000 camera 0.00, 0.45, 2.60
t 0.25 eased 0.063 camera 0.03, 0.51, 2.49
t 0.50 eased 0.500 camera 0.08, 0.76, 1.68
t 0.75 eased 0.938 camera -0.15, 0.73, 0.86
t 1.00 eased 1.000 camera -0.20, 0.70, 0.75