Translation

When you create a program here using ProcessingJS, the output is drawn to a canvas that acts like a piece of graph paper. To draw a shape, you specify its coordinates onto that graph.As an example, here is a simple rectangle drawn with the code rect(20, 20, 40, 40). The coordinate system (a fancier word to describe that “graph paper”) is shown in gray, and to keep our example images smaller, the coordinate system shown is 200 pixels by 200 pixels (instead of the default 400×400 size). Here you can see the rectangle is at x=20, y=20, with a width and height of 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) and the rectangle will appear in a different place. (We put the arrow in there for dramatic effect.)

The important thing to notice in the preceding diagram is that, as far as the rectangle is concerned, it hasn’t moved at all. Its upper left corner is still at (20, 20). When you use transformations, the shapes you draw never change position; the coordinate system does.

background(255, 255, 255);
noStroke();

// draw the original position in gray
fill(190, 190, 190);
rect(20, 20, 40, 40);

// draw a translucent red rectangle by changing the coordinates
fill(255, 0, 0, 128);
rect(20 + 60, 20 + 80, 40, 40);

// draw a translucent blue rectangle by translating the grid
fill(0, 0, 255, 128);
pushMatrix();
translate(60, 80);
rect(20, 20, 40, 40);
popMatrix();