If you're seeing this message, it means we're having trouble loading external resources on our website.

If you're behind a web filter, please make sure that the domains *.kastatic.org and *.kasandbox.org are unblocked.

### Course: Computer programming - JavaScript and the web>Unit 4

Lesson 6: Transformations

# 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 400x400 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.)
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.
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.
Why use `pushMatrix()` and `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 `pushMatrix()` and `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.

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 `x` and `y` location of the house’s upper-left corner as its parameters. Notice that the `drawHouse` function 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 `translate()` tool.

## 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.
• From the author:That specifies the alpha (the transparency).
• I still don't understand what pushMatrix and popMatrix does. Can someone help me out?
• `pushMatrix` saves the rendering engine's current state. `popMatrix` restores the saved state. You can inspect the current state at any time by invoking `printMatrix();`

If you want to leave things the way you found them (and you do), then always bracket your matrix transformations with `pushMatrix` and `popMatrix`. Avoid `resetMatrix` unless you know what you are doing.
• Why are there no videos for the Advanced JS section?
• There are no videos in the Advanced JavaScript because the people who are in it is usually know 50% of the program's words and function, which was made in 1995.
• 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?
• `width` and `height` are predefined terms in the JavaScript library that refer to the width and height of the canvas (400x400 by default). They work like any other variable; here is an example: `rect(width/2, height/2, 100, 100);`.
(1 vote)
• What is translation for game design useful for?
• 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!
• 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. :):):)
• 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.
• 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?
• 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);`
• `popMatrix` restores 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 `printMatrix();`