An Introduction To Programming With Processing


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.

is simply another way of saying “moving” but as the term moving can tend to be somewhat ambiguous when you consider that rotation also involves movement and so too does scaling (when you consider that the components making up an object such as it's vertices move when the object is scaled), we prefer to use the term translation as it specifically refers to positional data in terms of X, Y and Z of an entity. The function for applying translations within a sketch is translate() and it accepts parameters in the form of X and Y with an optional third parameter for Z (which we will discuss later) when using a 3D renderer.

is a transform that we have not discussed in any of our previous sketches, and as you will see can be a useful asset to creating certain types of animation within a sketch. Amongst the functions that provide us with access to rotation are rotate(), rotateX(), rotateY() and rotateZ() these functions accept values in radians.

is a transform accessed with the scale() function and it accepts a single float value or two floats that relate to X and Y or three floats that relate to X, Y and Z for 3D sketches. Scaling creates the impression of making things appear to be bigger or smaller within a sketch.

Let's have a look at an example of a static sketch using the translate() function.
translate(width/2, 0);
Static Sketch Transform
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.

Transform Graph Paper

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.