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 400x400 size). Here you can see the rectangle is at x=20, y=20, with a width and height of 40:
Square on canvas
If you want to move the rectangle 60 units right and 80 units down, you can just change the coordinates by adding to the
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.)
Square at new location on grid
But there is a more interesting way to do it: move the graph paper instead. If you move the graph paper 60 units right and 80 units down, you will get exactly the same visual result. Moving the coordinate system is called translation.
Moving the graph paper
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.
Here is a program that draws the original rectangle, then draws it in red at the new location by changing its coordinates, then draws it in blue at the new location by moving the grid (
translate()ing). The fill colors are translucent, so that you can see that the red and blue overlap to form a purple square that is at virtually the same place. Only the method used to move them has changed. Fiddle with the numbers below to see for yourself:
Let’s look at the translation code in more detail.
pushMatrix()is a built-in function that saves the current position of the coordinate system. The
translate(60, 80)moves the coordinate system 60 units right and 80 units down. The
rect(20, 20, 40, 40)draws the rectangle at the same place it was originally. Remember, the things you draw don’t move—the grid moves instead. Finally,
popMatrix()restores the coordinate system to the way it was before you did the translate.
popMatrix()? You could have done a
translate(-60, -80)to move the grid back to its original position. However, when you start doing more sophisticated operations with the coordinate system, it’s easier to use
popMatrix()to save and restore the status rather than having to undo all your operations. Later on in this section, you will find out why those functions seem to have such strange names.
What's the advantage?
You may be thinking that picking up the coordinate system and moving it is a lot more trouble than just adding to coordinates. For a simple example like the rectangle, you are correct. But let’s take an example of where
translate()can make life easier.
Here is a program that draws a row of houses. It uses a loop that calls function named
drawHouse(), which takes the
ylocation of the house’s upper-left corner as its parameters. Notice that the
drawHousefunction has to do a lot of parameter manipulation to get the house drawn at the given coordinates:
What if we used the
translate()function instead of calculating new coordinates? In this case, the code draws the house in the same place every time, with its upper left corner at (0, 0), and lets translation do all the work instead.
It doesn't mean that you should always favor
translate()instead of calculating new coordinates. Like much of what we teach, it is another tool in your toolbox, and it will be up to you to figure out when it makes sense to use this new
This article is an adaptation of 2D Transformations by J David Eisenberg, used under a Creative Commons Attribution-NonCommercial-ShareAlike License.
Want to join the conversation?
- Hi Pamela!
On the first program with the squares, there is an extra number on the fill() command of 128. What exactly does this do? Thanks in advance.(224 votes)
- From the author:That specifies the alpha (the transparency).(298 votes)
- I still don't understand what pushMatrix and popMatrix does. Can someone help me out?(12 votes)
pushMatrixsaves the rendering engine's current state.
popMatrixrestores the saved state. You can inspect the current state at any time by invoking
If you want to leave things the way you found them (and you do), then always bracket your matrix transformations with
resetMatrixunless you know what you are doing.(17 votes)
- Why are there no videos for the Advanced JS section?(14 votes)
- What is a global variable width? I'm trying to do the challenge, and it says use the global variable width. How do I do that?(6 votes)
rect(width/2, height/2, 100, 100);.(1 vote)
- What is translation for game design useful for?(5 votes)
- If you want to rotate something, you need to use translation first for it to work nicely. So, this is a very useful command to learn!(5 votes)
- Okay so, I am trying to make a new game that nobody knows of, but I don't know what I should do. Does anybody have any suggestions? I am open to anything! If you do have a suggestion or suggestion(s) then comment below. :):):)(2 votes)
- How about a game where there's a guy and he can move around with the arrow keys and jump and he goes around collecting ice cream cones and monsters try to kill him along the way? Or, a little bit simpler, bouncing a ball with a rectangle and you can't drop it.(4 votes)
- I'm having a lot of trouble with the Translation Challenge; this error keeps popping up, and I don't understand it. :
"The magnitude of the translation should come from the variable in the for loop--that is, your call to translate() should take the variable that is updated in your for loop as one of its arguments."
Could someone help me with it?(3 votes)
- Try using "i" or what ever variable name you used in
for (var i = 0...in the call to translate. For example
translate(i + 10, 200);(2 votes)
- Can translate be used with a continuous graphical refresh to effectively have a scrolling screen?(3 votes)
- Why is the programming canvas on Khan Academy made in quadrant IV? Wouldn't it be simpler to just make it like the ordinary quadrant I graphs?(1 vote)
- The quadrant is ONE - positive X and positive Y appear in that quadrant. The Y coordinates grow downward for the same reason that we read an English page from top (the first line) to bottom (the last line).(3 votes)
- If popMatrix resets the coordinates, then shouldn't everything move back to where it was?(1 vote)
popMatrixrestores the rendering transformation matrix to the value recorded by
pushMatrix. It does not reset anything, certainly not the picture canvas.
You can inspect the value of the rendering transformation matrix by invoking