Making Things Move

Here's What You'll Build

A bouncing ball that moves across the screen and bounces off walls. Your first animation.

The Concept

The animation loop. Every game draws the screen many times per second. Each time, it clears the canvas, updates positions, and redraws everything. This creates the illusion of movement, just like frames in a movie.

The key function is requestAnimationFrame -- it tells the browser "call this function again before the next screen refresh." This typically runs 60 times per second.

The Math Behind It

Velocity is how fast something moves and in which direction. We represent it as two numbers: dx (change in x per frame) and dy (change in y per frame). Each frame, we add these to the ball's position.

Boundary detection checks whether the ball has hit a wall. If the ball's x position reaches the left or right edge, we reverse dx (multiply by -1). Same for dy with the top and bottom edges.

Building with Claude

Step 1: Create the Canvas and Ball

Type this prompt into Claude Code:

Create a single HTML file called bouncing-ball.html. Dark background
(#0d0a1a), centered 800x600 canvas with a border. Draw a neon green
(#39ff14) circle with radius 15 in the center of the canvas. No
animation yet, just a static ball.

Why this prompt works: We start with the simplest possible version. Getting the canvas and a drawn circle working first means we can see something immediately. Starting simple and adding complexity is a pattern you will use in every lesson.

Step 2: Make It Move

Update bouncing-ball.html to animate the ball. Use requestAnimationFrame
to create a smooth animation loop. The ball should move diagonally across
the screen. When it hits any edge of the canvas, it should bounce off by
reversing its direction on that axis. The ball should start moving at a
speed of about 3 pixels per frame in both x and y directions.

Why this prompt works: We described the behavior ("move diagonally", "bounce off"), gave a specific speed (3 pixels per frame), and named the exact function to use (requestAnimationFrame). Mentioning technical details like this helps Claude generate code that matches what you expect.

Step 3: Polish

Improve bouncing-ball.html: 1) Add a fading trail effect so the ball
leaves a ghostly path as it moves, instead of a clean background clear.
2) Gradually change the ball color as it bounces, cycling through hues.
3) Display the current ball speed and position in small text at the top
of the canvas. 4) Add a button below the canvas that resets the ball to
the center.

Why this prompt works: The numbered list keeps four separate features organized. The trail effect instruction ("ghostly path" vs "clean background clear") describes the visual result, not the implementation. Claude knows to use partial canvas clearing to achieve this.

Understanding What Claude Built

The Animation Loop: The code calls requestAnimationFrame(update) at the end of each update function. This creates an infinite loop: draw, update positions, draw again. Each cycle is one "frame."

Clearing the Canvas: Instead of fully clearing the canvas each frame (which would erase the trail), the code draws a semi-transparent rectangle over everything. This gradually fades old drawings while keeping recent ones visible.

Velocity Reversal: When ball.x + ball.radius > canvas.width, the ball has hit the right wall. Setting dx = -dx reverses the horizontal direction. The ball's speed stays the same, only the direction changes.

Frame-Independent vs Frame-Dependent: This version uses frame-dependent movement (the ball moves a fixed amount per frame). If the framerate drops, the ball slows down. In Lesson 1.6, you will learn delta time, which makes movement consistent regardless of framerate.

AIArtificial Intelligence Skill: Iterating on Output

This lesson demonstrated iterative refinement -- starting with a basic version and asking Claude to improve it step by step.