Understanding rotate()

Step 1

rotate() spins around (0, 0) — the top-left corner

When you call rotate(), p5.js spins everything around the origin — which starts at the top-left corner of the canvas. This is usually not what you want.

The square disappears off-screen because it's rotating around the corner, not its own center.

no rotate — rotate(0)

rotated — rotate(PI / 4)

Step 2

translate() moves the origin first

The fix: move the origin to the center of the canvas using translate(width/2, height/2) before rotating. Now rotation happens around the center.

Order matters: always translate() first, then rotate(), then draw your shape.

translate only

translate → rotate(PI / 4)

Step 3

Radians: the unit rotate() uses

rotate() takes an angle in radians, not degrees. A full circle is TWO_PI (≈ 6.28). Use fractions of PI:

rotate(0) — 0°

rotate(PI/4) — 45°

rotate(PI/2) — 90°

rotate(PI) — 180°

Try it

Drag the slider — watch the angle change

See how the radian value and degrees relate as you rotate the square.

rotation angle

rotate(PI / 4)

≈ 0.785 rad — 45°

▦ world grid — always fixed → rotated x-axis ↓ rotated y-axis ◜ angle arc