# Transforms

Processing provides a convenient method for animating and interacting with components of a sketch that are transformed in various ways. The term transform when used in this context generally refers to any one of, or combinations of the following three actions:Translation, Scaling, Rotation.

Let's have a look at an example of a static sketch using the translate() function.

```
size(400,60);
rect(0,0,50,50);
translate(width/2, 0);
fill(255,0,0);
rect(0,0,50,50);
```

In the first line of the sketch, we simply defined the size of the window in which the sketch is running as being very long horizontally and short, vertically. In the following line we drew a rectangle at the origin, and because the rectMode() function by default is set to CORNER, the rectangle sits perfectly flush with the top left hand corner of the Display Window. We then used the translate() function with a modification to the X parameter, and as you would expect the next time we draw a rectangle (after changing the fill color) it's position on the X axis reflects the translation we previously applied. However, if you have a look at the X parameter for the rect() function you will notice that things are a bit different to what you might expect as the X parameter reads 0 whereas the rectangle is drawn close to the center of the Display Window and to the right of the previously drawn rectangle.
Shouldn't the rectangle be drawn at the origin if it's X parameter is 0?
If you were thinking something along those lines then you are absolutely correct and in fact the rectangle is being drawn at the origin, the main difference here is that we have used the translate() function to move the origin, not of the rectangle but of the entire coordinate system. Let's have a look at how this happens.
# Transforming Coordinate Space

Although the effect of what you are seeing in the Display Window creates the impression that Processing has moved the rectangle, the rectangle as it is indicated by it's X parameter in both rect() function calls tells us something different. That is, that the rectangle has in fact not moved. The reason that the rectangle has come to be drawn in this new location is due to the effect of the entire coordinate system moving. If you were for a moment to reflect back on the Cartesian graph system that we discussed earlier you might remember that everything in Processing works in a similar fashion to that of something drawn on graph paper. Bearing this in mind, what we have done in the previous sketch cannot accurately be described as moving the rectangle, but more akin to “moving the graph paper”. For example if we were to draw a rectangle on a piece of graph paper, then move the graph paper around, we would in effect be creating the impression of the rectangle drawn on the graph paper moving around. The rectangle itself would not be what you are moving around, in terms of the fact that the rectangle's positional X and Y data has not changed with relation to the origin of the coordinate system it was drawn relative to. We can therefore say that the rectangle has not moved, however the coordinate system associated with it has.

An object drawn on graph paper does not move but the graph paper does

This is the purpose of transforms in Processing, they move the coordinate system for us. We can still move the components of a sketch through their own positional parameters, which we usually supply in terms of X and Y data for parameters of a function, but bear in mind that mixing translation techniques like this will result in the component appearing to have “moved” by the sum of the two data sets. To put this in another way, the distance the entity would appear to have moved would be the sum of the translate() function plus the X, Y and Z parameters of the function to draw the entity.