Creating graphic animations with Processing
Spinning Pictures
The Java application known as Processing can make a computer artist of a non-programmer. We'll show you how to create moving objects and publish a Flash-style applet.
If you have ever tried to program a rotating cube in OpenGL, you have probably experienced hours of debugging fun in the process. The lack of libraries and incorrect variable declarations make life hard on amateur programmers.
Processing
A graphics programming tool called Processing brings graphic effects back to the everyday user. Processing targets artists who have ideas but no computer science degree. The tool is ideal for users who would like to improve the presentation of their data without having to resort to boring charts and monotonous multi-colored pie diagrams.
The Code Swarm [1] project, for example, uses Processing to visualize the development of various open source projects over the course of time. The fascinating results resemble a beehive, which is sometimes quiet and sometimes populated by large numbers of very active bees.
Processing lets you write a simple program and then just press Play; the code either runs or it doesn't. In the latter case, you are given fairly intelligible feedback to help you troubleshoot. If you want to publish your results on the Internet, you can output a ready-made Java applet at the press of a button, and you can upload it to your web space or web server.
Processing, which first saw the light of day around 2001 at MIT Labs, is often compared with Flash; however, unlike Flash, it is an open source project. Instead of Flash plugins, the viewer simply needs a Java plugin for the browser, an extension that is typically installed in next to no time.
Installation
To enjoy the 3D capabilities of the Processing environment, you need either a graphics card with 3D acceleration and driver support or the software 3D engine that comes with the Java application, P3D. The P3D 3D engine needs slightly more in the way of resources than OpenGL, but it is a big help if you do not have a working 3D driver for your graphics card on Linux.
Processing is available for download from the project website [2]. First, unpack the TGZ archive in a folder below your home directory, then pop up a console, change to the directory created in the first step, and enter ./processing to launch the application.
After launching the program, you will see an empty field in which you can start typing code (Figure 1). Why not try it out right way? Just type the program shown in Listing 1 in the window, and then press the icon with the triangle at the top left. Now you should see the object shown in Figure 2 (left).
Listing 1
Drawing a Simple Figure
When you run the code in Listing 1, you should see a small window depicting a series of concentric circles. Click Help | Reference in the Processing GUI for a command reference that gives you a short and terse explanation of the individual functions.
If you prefer a more detailed description, select File | Examples to discover one of the many sample programs included with the Processing files. The code is annotated in all cases.
Also, you can find some books on Processing. The tome by Ira Greenberg [3] that I recommend targets artists and non-programmers.
The first two lines of the sample program in Listing 1 open a 200x200-pixel workspace with a white background (background(255)). If you just enter one value, you are selecting one of 255 possible grayscales from 0 (black) to 255 (white). If you enter three comma-separated values, you are specifying the sRGB color space. A background(255, 0, 0) entry would give you a pure red background, for example. To add a black brush stroke, follow the same approach (stroke(0)).
The noFill() function tells Processing not to fill the figures – otherwise the largest circle would cover all the others. An anti-aliasing effect gives smoother edges and is enabled by the aptly named smooth() keyword, which acts on all the following figures. Next, a for() loop executes a specific function until a stop condition occurs (in this case, when i reaches a value of 200).
The loop starts by setting the integer counter to zero (int i =0) and then incrementing in steps of 10 (i+=10). The loop continues while the counter is less than 200 (i < 200). As soon as it reaches the target value, the loop terminates. Each round executes the ellipse() function in line 7. The function draws a circle with the specifications given in the parentheses. The values 100, 100 position the center of the circle at the center of the 200x200-pixel workspace. The two i variables define the vertical and horizontal diameters of the circle. Because i increments in steps of 10, Processing starts by drawing a circle with a diameter of 10, then 20 pixels, and so on.
Changes
Small changes can have drastic effects in programming. For instance, if you change the second i in the brackets following ellipse and replace it with 100, as in
ellipse(100, 100, i, 100)
you change the circle to an ellipse (Figure 2, right). While the horizontal diameter continues to grow, thanks to the remaining i, the vertical diameter remains constant at 100 pixels.
The next step adds a random element. Replace the for() loop in Listing 1 with the loop in Listing 2.
Listing 2
Changing a Parameter
The new loop introduces a new element with the random variable r. In each round, the line float r = random(200); creates a floating point number (float) between 0 and 200 and stores it in variable r. This continually changing number explains the irregular horizontal distances in Figure 3. Adding a second random number (Listing 3) and leaving the vertical diameter to chance (Figure 4) adds more randomness. The figure looks more spatial, but it is by no means three dimensional.
Listing 3
Adding Randomness
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
-
Canonical Releases Ubuntu 24.04
After a brief pause because of the XZ vulnerability, Ubuntu 24.04 is now available for install.
-
Linux Servers Targeted by Akira Ransomware
A group of bad actors who have already extorted $42 million have their sights set on the Linux platform.
-
TUXEDO Computers Unveils Linux Laptop Featuring AMD Ryzen CPU
This latest release is the first laptop to include the new CPU from Ryzen and Linux preinstalled.
-
XZ Gets the All-Clear
The back door xz vulnerability has been officially reverted for Fedora 40 and versions 38 and 39 were never affected.
-
Canonical Collaborates with Qualcomm on New Venture
This new joint effort is geared toward bringing Ubuntu and Ubuntu Core to Qualcomm-powered devices.
-
Kodi 21.0 Open-Source Entertainment Hub Released
After a year of development, the award-winning Kodi cross-platform, media center software is now available with many new additions and improvements.
-
Linux Usage Increases in Two Key Areas
If market share is your thing, you'll be happy to know that Linux is on the rise in two areas that, if they keep climbing, could have serious meaning for Linux's future.
-
Vulnerability Discovered in xz Libraries
An urgent alert for Fedora 40 has been posted and users should pay attention.
-
Canonical Bumps LTS Support to 12 years
If you're worried that your Ubuntu LTS release won't be supported long enough to last, Canonical has a surprise for you in the form of 12 years of security coverage.
-
Fedora 40 Beta Released Soon
With the official release of Fedora 40 coming in April, it's almost time to download the beta and see what's new.