Rotating elements in Processing
In Processing it is easily possible to transform graphical elements such as ellipses, or rectangles, but also images, text, or any other more complex objects. This tutorial gives an overview on how to rotate visual elements in different ways, and explains the mechanisms behind it.
Turning elements around specific points, like the corner or the center of a visual object, can be achieved by calculating rotated points by trigonometric functions.
Luckily, Processing provides simple functions to rotate elements.
The following example visualizes one or multiple rotated rectangles:
Fig. 1: one rotated rectangle
Fig. 2: multiple rotated rectangles
The Processing code for Fig. 2:
Rotates the drawing area (the coordinate system) with the given angle in units of radians. As it is clearly recognizable in Fig. 2 consider that …
- all elements are rotated around the point of origin (0, 0)
rotate()-statements sum up.
Positive angle values rotate the elements clockwise, while negative values rotate them counter-clockwise.
Fig. 3: rotate(+45°)
Fig. 4: rotate(-45°)
In Processing – as in other screen based computer programs – the y-axis in the coordinate system is turned upside down, and so are the angle values. They go the other way around.
Fig. 5: Unit-circle with angles in degrees
Radians and degrees
The angle for the
rotate() function has to be given in radians.
Thus, all of the three following code snippets result in the same rotation:
In the third example the angle is given in units of somewhat more intuitive, or more internalized degrees.
For this we can use the conversion function
radians() – to convert a radians value in degrees use
If you want to rotate the elements not around the point of origin (upper left corner of the drawing area), but for instance
around their own origin, you can combine
translate() with other transformations.
Moves the origin of the coordinate system to the given position. For instance, with a translation with an x-offset of 100 and a y-offset of 30 a point at position (50, 20) will be drawn at (150, 50).
Fig. 6: Without translation
Fig. 7: With translation
Translate calls are additive (as the
rotate() function), i.e. if
translate(10, 15) is run twice, the overall
offset would be (20, 30).
rotate() & translate()
Of course, the image of Fig. 7 could be achieved by directly drawing the rectangle at that position
(i.e. by executing
rect(50, 50, 100, 100);). The problem herein is this would
not work as excepted, if additionally the element is rotated (see Fig. 9).
rect(50, 50, 100, 100);
Fig. 9: "wrong" rotation around the point of origin of the drawing area
To get the correct result (i.e. a rotation around the visual point of origin of the rectangle),
rotate() have to be combined as in the following example. Note, that the rectangle
function now is called with position parameters of (0, 0), but after a translation of the origin with (50, 50) it is displayed
at and rotated around that new point.
Fig. 10: proper rotation about the upper left corner of the rectangle
Loops & animation
Quite interesting and nice results can be achieved, by utilizing multiple graphic transformations in a loop.
Follow the step-by-step process on how to create a spiral with the help of one for-loop and a simple rotation.
Of course, these transformations can be used and manipulated over time. For instance the angle could be varied, and used in an animation or be dependent from some user interaction.
Very simple interactive flower, made out of rotated squares.
To rotate multiple elements in different, independent ways, matrices has to be used. Isolating transformations to just some elements is possible by employing an own matrix for those. Each transformation matrix stores stated rotations and translations and affects only elements drawn in that matrix.
The screenshots above show both rectangles with different rotations. In this RotateMultiElements example one rectangle is rotated interactively by mouse position, while the other is turning automatically.
Pushs a new transformation matrix on the stack. All subsequent transformations only affect this matrix –
as long as until the next
Takes the last tranformation matrix of the stack, thus the previous is the affected one.
Using push and pop matrix
In the following example all three rectangle functions are called with same x-parameter, but displayed at different horizontal positions.
The top rectangle is at its original position. The middle one is translated with (50, 0) twice, so its displayed position is at (100, 74).
The bottom one is translated once, because the second translation in line 6 was stated in another matrix,
which is not valid for the third rectangle anymore, due to the
Example: A clock
Shows the time on an analog clock. The three arrows – of course – rotate independently.
Displays the image thumbnail of news feed items in a radial layout. The user can rotate and scale the image wheel with the mouse, interactively.