|
Chapter:
Transforms
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.
Translation
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.
Rotation
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.
Scaling
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.
size(400,60);
rect(0,0,50,50);
translate(width/2, 0);
fill(255,0,0);
rect(0,0,50,50);
A static
sketch using transforms
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.
|
|
Previous
