Creating graphic animations with Processing
Entering the Third Dimension
It is quite easy to enter the third dimension with Processing. To demonstrate this, Listing 4 draws a simple cube. The great thing about it is that it reacts to mouse movements – you can push or drag it through the defined workspace (Figure 5). Unfortunately the screenshot tool on Gnome doesn't show you where the mouse is, but you can take my word for it that the mouse was at the center of the cube in all three figures.
Listing 4
A Simple Cube
The code comprises two basic functions: setup() and draw(), which contain other functions. The setup function defines the basic parameters for the program, and the draw function draws a specific object and executes the commands inside the curly brackets before restarting.
The first function in line 2 initializes the workspace; the extent is followed by an ominous looking P3D keyword, which initializes Processing's internal, software-based 3D engine. The engine calculates 3D graphics and sends them to the graphics card, which renders them on screen. To use OpenGL to render the graphic with the use of the faster hardware-based 3D graphics card support, just add the following line at the start of the code:
import processing. opengl.*;
Then replace P3D with OPENGL in Listing 4. On faster machines you will not notice any difference for simple figures.
To see improved performance with more complex figures, you will need a graphics card with 3D acceleration; in other words, you have to install the Nvidia, ATI, or Intel drivers.
Line 3 specifies the frame rate. A value of 30 should be fine, and you will not notice any jerky movements.
The next step relates to the properties of the cube. The example here uses light gray as the background color (background(200)).
The functions pushMatrix() and popMatrix() in lines 8 and 14 draw a framework around the figure. Whereas pushMatrix() creates a new coordinate system and loads it onto the Matrix Stack [4] (see the box titled "What is the Matrix?"), popMatrix() restores the matrix used previously.
Although the program will work without these two functions, they do make sense, as the next example shows.
Inside the matrix, the first function is translate(). It reads the three parameters and positions the cube on the intersection of the x-, y-, and z-axes – that is, in virtual space.
The function assumes a value of 0, 0 for the top left of the workspace and sets the center of the figure to these coordinates.
Any further translate functions that follow inside the draw function will use the previous translation coordinates as their reference point. This means that you can move the cube easily with the mouse because mouseX, mouseY will always relate to the mouse pointer's previous x/y coordinates.
The next trick is to define a color in the variable c1 – light gray in this case, although you can use sRGB values here, too. The script fills the cube with this color in line 11 and colors the edges dark gray by calling stroke().
The cube isn't actually assembled until line 13; the edge length is set to 150 pixels. To draw a cuboid, you need to enter three values for the length, width, and height.
What is the Matrix?
The following example will give you a rough idea of the Matrix Stack. If you create a series of three sequences, each comprising multiple movements, each sequence starts with the pushMatrix() function, which creates a new coordinate system. To return to the previous sequence, with the previously used coordinates, you just do a popMatrix(). The whole thing works like a kind of return marker, but you can't jump forward.
The Death Star
Finally, Listing 5 presents a more complex script. It displays two counter-rotating green cubes (see Figure 6).
Listing 5
Counter-Rotating Cubes
Short comments make the code more intelligible, but the most important features are the use of pushMatrix() and popMatrix() and the commands for rotating the figures.
In lines 3 to 7, I start by initializing two variables for each cube – an xdirection and a ydirection – with values of 1 and -1, respectively. The setup function is already familiar, but the draw function changes.
The script calls directionalLight() to shed some light on the cube. The function has six parameters, the first three of which are for an sRGB or HSV value, and the last three of which are positions on the x-, y-, and z-axes of a spatial coordinate system. The first three values specify the color of the light, and the last three define the direction from which the light comes.
The script defines the size, color, and rotation of the two cubes between the pushMatrix() and popMatrix() functions. The functions are the same for both cubes apart from one detail: The rotateX() and rotateY functions use opposite directions of rotation.
Lines 40 and 41 rotate cube 2 one degree counterclockwise on the x- and y-axes. Both variables start with a value of -1. Cube 1 rotates in the opposite direction. Because they are centered on the same position, they counter-rotate. After this minimal rotation, new values are assigned to the variables in lines 46 to 52.
The torque is incremented for cube 1 and decremented for cube 2. Processing executes the draw function again, and both cubes counter-rotate another degree. Because the draw function uses a frame rate of 30 frames per second, the cubes rotate smoothly.
One other interesting aspect might interest you: If you remove the pushMatrix() and popMatrix() functions in the sample code, the second cube suddenly orbits the first like a planet. Each cube would need a separate coordinate system – unless you want to design a virtual planetarium.
Publish on the Web
By default, Processing stores your efforts in a folder titled sketchbook below your home directory. If you save your creation as experiment_0815, you would find it later in ~/sketchbook/experiment_0815/.
To show off your programming skills to friends, colleagues, and acquaintances, you might want to publish your figures on the web. Selecting File | Export lets you do so. Processing will then create an applet subfolder below the above-mentioned directory and drop the required files into it. If you open the index.html file in your browser, you should see the figure.
To publish the figure on your homepage, just use an FTP client to push the applet folder onto the server with your website and add a link to index.html to your homepage.
If you want to access the file directly, just go to http://www.mydomain.com/applet/index.html.
Glossar
sRGB Color Space
An additive color space in which each color is defined by the red, green, and blue components with a depth of 8 bits per channel.
HSV
A color space that defines the color with reference to the hue, saturation, and value.
Infos
- The Code Swarm project uses Processing: http://code.google.com/p/codeswarm/
- Download page for Processing: http://processing.org/download/index.html
- Greenberg, Ira A. Processing: Creative Coding and Computational Art. Computer Bookshops, New York, 2007.
- pushMatrix() and popMatrix() explained: http://processing.org/discourse/yabb_beta/YaBB.cgi?board=Syntax;action=display;num=1177279317
« Previous 1 2
Buy this article as PDF
(incl. VAT)
Buy Linux Magazine
Subscribe to our Linux Newsletters
Find Linux and Open Source Jobs
Subscribe to our ADMIN Newsletters
Support Our Work
Linux Magazine content is made possible with support from readers like you. Please consider contributing when you've found an article to be beneficial.
News
-
PipeWire 1.0 Officially Released
PipeWire was created to take the place of the oft-troubled PulseAudio and has finally reached the 1.0 status as a major update with plenty of improvements and the usual bug fixes.
-
Rocky Linux 9.3 is Available for Download
The latest version of the RHEL alternative is now available and brings back cloud and container images for ppc64le along with plenty of new features and fixes.
-
Ubuntu Budgie Shifts How to Tackle Wayland
Ubuntu Budgie has yet to make the switch to Wayland but with a change in approaches, they're finally on track to making it happen.
-
TUXEDO's New Ultraportable Linux Workstation Released
The TUXEDO Pulse 14 blends portability with power, thanks to the AMD Ryzen 7 7840HS CPU.
-
AlmaLinux Will No Longer Be "Just Another RHEL Clone"
With the release of AlmaLinux 9.3, the distribution will be built entirely from upstream sources.
-
elementary OS 8 Has a Big Surprise in Store
When elementary OS 8 finally arrives, it will not only be based on Ubuntu 24.04 but it will also default to Wayland for better performance and security.
-
OpenELA Releases Enterprise Linux Source Code
With Red Hat restricting the source for RHEL, it was only a matter of time before those who depended on that source struck out on their own.
-
StripedFly Malware Hiding in Plain Sight as a Cryptocurrency Miner
A rather deceptive piece of malware has infected 1 million Windows and Linux hosts since 2017.
-
Experimental Wayland Support Planned for Linux Mint 21.3
As with most Linux distributions, the migration to Wayland is in full force. While some distributions have already made the move, Linux Mint has been a bit slower to do so.
-
Window Maker Live 0.96.0-0 Released
If you're a fan of the Window Maker window manager, there's a new official release of the Linux distribution that champions the old-school user interface.