Lesson Plan

• Describe how variables store position and velocity for animated objects.
• Apply the motion equations x_new=x_old+v_x·Δt and y_new=y_old+v_y·Δt to update coordinates each frame.
• Construct a JavaScript animation loop using requestAnimationFrame that updates and renders objects.
• Modify the basic animation to include boundary detection or acceleration.

• Projector and screen
• Computers with internet access and a code editor (e.g., VS Code)
• Printed handout of the pseudo‑code and variable table
• Worksheet with motion‑equation practice problems
• Whiteboard and markers

Begin with a quick demo of a square moving across the screen to capture interest. Ask students how the motion is being controlled and link it to prior knowledge of variables and basic algebra. Explain that by the end of the lesson they will be able to write and run their own position‑controlled animations.

1. Do‑now (5 min): Students solve a short problem calculating new coordinates using given velocity and Δt.
2. Mini‑lecture (10 min): Review animation concepts, frame rate, and the motion equations.
3. Guided coding (15 min): Walk through the pseudo‑code, initialise variables, and demonstrate requestAnimationFrame.
4. Independent practice (15 min): Students create their own animation on the canvas, experimenting with different velocities.
5. Extension activity (10 min): Add boundary detection or simple acceleration; teacher circulates to check understanding.
6. Check for understanding (5 min): Quick quiz on variable roles and the update loop.

Recap the key steps: initialise variables, compute new positions, render, and repeat. Have students write one‑sentence exit tickets describing how they would add a bounce‑back effect. Assign homework to modify their animation to include a second moving object using separate variable sets.