Tutorials › Make It Move JS 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 outside of setup() and draw(), then change it inside draw(). Since draw() runs 60 times per second, the variable changes smoothly — creating motion!
0 / 14 lines
Loading editor...
function setup() { size(400, 200); } function 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 / 19 lines
Loading editor...
function setup() { size(400, 200); } function 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 / 20 lines
Loading editor...
let speed = 3; function setup() { size(400, 200); } function 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 / 19 lines
Loading editor...
let speedX = 3, speedY = 2; function setup() { size(400, 300); } function 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 / 16 lines
Loading editor...
size(400, 300); } function 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 →