Transform

Translate

Processing has helpful functions like translate, rotate and scale, that make it easy to move, spin, grow or shrink objects in your sketch. Let’s look at translate first.

Translate moves the whole coordinate system to a new location. You can create a complex shape relative to position 0,0 and move the shape around by moving the whole canvas.

How translate works

Images and text from 2D Transformations tutorial by J David Eisenberg

In the first image below, you see a rectangle drawn with rect(20, 20, 40, 40);.

If you want to move the rectangle 60 units right and 80 units down, you can just change the coordinates by adding to the x and y starting point: rect(20 + 60, 20 + 80, 40, 40); (second image).

But there is a more interesting way to do it: move the coordinate system instead. If you move the coordinates 60 units right and 80 units down, you will get exactly the same visual result. Moving the coordinate system is called translation. In the third image translate(60, 80); is called first and then rect(20, 20, 40, 40);. This comes very handy when you want to draw and move more complex shapes.