← WORKSHOP

03. Make things move.

Time plus a little trigonometry makes animation. This satellite rotates around an imaginary planet. The scene is drawn on every frame.


The important part

const angle = time * 0.001;
const x = 160 + Math.cos(angle) * 110;
const y = 90  + Math.sin(angle) * 55;
// Draw the satellite at (x, y)
requestAnimationFrame(animate);

Exercise: make the orbit elliptical, add a second satellite, or draw stars with random positions.