Tutorials › Make It Move Simple Mode

Make It Move

Discover animation! Use variables to make shapes move, bounce, and follow patterns.

1

Variables That Change

Animation is all about changing things over time. Declare a variable at the top of your code (outside setup: and draw:), then change it inside draw:. Since draw runs 60 times per second, the variable changes smoothly — creating motion!
0 / 11 lines
Loading editor...
setup: size(400 200) draw: background(white) fill(dodgerblue) noStroke() circle(x 100 25) x = x + 2
Try it!

Change the 2 to a bigger number like 5 or 10. What happens to the speed?

2

Wrapping Around

The circle flies off the right edge! Let's make it wrap back to the left side when it goes past the edge. We check if x is bigger than the canvas width, and if so, reset it to 0.
0 / 16 lines
Loading editor...
setup: size(400 200) draw: background(white) fill(dodgerblue) noStroke() circle(x 100 25) x = x + 2 // Wrap around when off the right edge if (x > width + 25) { x = -25 }
3

Bouncing

Wrapping is cool, but bouncing is even cooler. Use a speed variable that can be positive (moving right) or negative (moving left). When the ball hits an edge, flip the speed!
0 / 17 lines
Loading editor...
let speed = 3; setup: size(400 200) draw: background(white) fill(tomato) noStroke() circle(x 100 25) x = x + speed // Bounce off edges if (x > width - 25 || x < 25) { speed = speed * -1 }
Try it!

Try changing the starting speed to 7. What happens when you change the circle size?

4

Bouncing in 2D

Let's make the ball bounce in both directions — horizontal and vertical! We need separate x/y positions and x/y speeds.
0 / 16 lines
Loading editor...
let speedX = 3, speedY = 2; setup: size(400 300) draw: background(white) fill(mediumpurple) noStroke() circle(x y 20) x += speedX y += speedY if (x > width - 20 || x < 20) speedX *= -1 if (y > height - 20 || y < 20) speedY *= -1
5

Using frameCount for Animation

The built-in frameCount variable counts up every frame. You can use it with math functions like Math.sin() to create smooth, looping animations without any if statements!
0 / 13 lines
Loading editor...
size(400 300) draw: background(midnightblue) noStroke() for (let i = 0; i < 8; i++) { let x = 50 + i * 45 let y = 150 + Math.sin(frameCount * 0.05 + i * 0.5) * 60 fill("hsl(" + (i * 45) + ", 80%, 65%)") circle(x y 18) }

What to try next

  • Make the ball change color each time it bounces
  • Add gravity: increase speedY a little bit each frame, and make it bounce off the floor
  • Animate multiple balls at once using arrays
  • Make a shape that moves in a circle using Math.sin() and Math.cos()
← Adding ColorMaking Decisions →