Processing Tips & Tricks: 2D Transformations

You would think that moving, rotating or scaling things should be a very simple thing to do in Processing. Especially if your experience in creating computer graphics is from Photoshop, Illustrator etc. It is a fairly simple thing to do in Processing also, but the way we have to do it can be a little bit confusing at first.

In the examples below, I use this grid image made in Illustrator, you can download it here:

translate()

Let’s say you want to draw an image on the screen in a specific location, how we have done it normally would be just to change the x and y parameters in the image() function call.

image(x, y, width, height);

Another way to do this would be using the translate() command, before drawing the image.

translate(100,100);
image(grid,0,0);

Why would you want to do this? There are many reasons, but one important use for this would be the ability move multiple shapes at the same time. For example, you have a piece of code that draws some sort of a character and you want to move all of it at once without having to go and edit the coordinates for each shape that makes up the character.

rotate()

If you have used the rotate() command, you might have noticed that it always rotates around the top-left corner (0,0). Just like the translate, you are not rotating the individual shapes and other thing you draw, you actually are rotating the entire canvas.

Note that the rotate() is expecting you to use radians as the angle for your rotation. If you prefer to thing in degrees, you can use the radians() function to easily convert degrees to radians

 

pushMatrix() and popMatrix()

There is just one problem with these, the translate(), rotate()  and scale() affect everything you draw after calling them, if you don’t somehow reset the transformations. You could move, rotate and scale back in the opposite direction to reset the transformation, but there is also an easier way.

  • pushMatrix() saves the current coordinate system, which you can the restore by using popMatrix().
  • You can imagine the pushMatrix() and popMatrix() as something that allows you to isolate transformations in your code to only affect whatever is between them.

Let’s say you want to do this:

  • Draw two rectangles that both are rotating
  • Each of them rotates around their center points
  • They rotate in opposite directions

Using the pushMatrix() and popMatrix() you can isolate the transformations for each rectangle, without having to backtrack through all of your transformations.