Tutorials : Processing: Open Source Language Brings You Closer to Web 2.0 :

The Anatomy of a Processing Application

A Processing application is called a 'sketch'. The file you create in the IDE is saved with a .pde extension. You type commands in the IDE window and execute them directly. This is the simplest mode and the easiest way to delve into what Processing has to offer (called a 'basic' programming mode).

A reasonably complex project will have to be developed in the 'continuous' mode (at least). In this mode, your code has to implement a setup and a draw function. setup takes care of initializations, variable definitions, etc, while draw is similar to the message pump in GUI programming—it is an endless loop that defines your application's event space.

The most convenient way to distribute a Processing project so that it runs outside the Processing environment is to export it. During this process, the .pde file gets converted to a *.java file, which includes the original code and a few import directives. The *.java file also encloses the original code in a class structure, which extends a PApplet class (defined by the Processing environment). The Processing environment thus acts as a precompiler, preparing the Processing application for compilation in Java (this is the 'continuous' programming mode).

You can also explicitly derive from the PApplet class in your Processing code. In this case, you are effectively using Processing as a set of add-on libraries for Java. This is the last and most complex programming mode.

Processing (or the additional libraries developed for it) offers functions that deal with 2D and 3D graphics, fonts, images (including pixel-level manipulation), sounds, camera detection, mouse and keyboard detection, and file I/O (including rendering of Quicktime files or export to frame-based animation applications).

A 3D Example

Processing is heavily graphics-oriented: the main loop of the application is enclosed in the draw function, so graphics processing (pun intended) is a core feature of the language. The rendering mode is an important concept of a Processing application, and there are three modes available:
  • 2D: The default mode, in which the developer has to define a two-dimensional canvas (in the setup function)
  • 3D: This mode is optimized for 3D drawing, and it also supports 2D graphics
  • OPENGL: To be used when an OPEN GL-compatible graphics card is available.
The rendering mode is important because the 3D graphics commands that Processing implements are only available in the 3D mode.

In order to test the 3D proficiency of Processing, I created three projects. One will be discussed in detail next, and the other two are available for download.

The project to be discussed in detail is called ballStudy. At run-time, it looks like Figure 2:


Figure 2. The ballStudy Application

Simply, it involves a ball rotating around a rectangular 'wall'. The user can navigate (change the viewpoint) in this space by using a, d, w, x, S, and s. The ball is illuminated by a light source as it rotates around the wall, and the screen also displays the camera's coordinates, to give the user an idea about the viewpoint. While this is not earth shattering stuff, it is a project of reasonable complexity which can be developed quickly enough in Processing.

The project is developed in 'continuous' mode. First, declare the variables before implementing any functions, and then implement the setup and draw functions. As it turns out, only one other function has to be implemented: keyPressed, the standard Processing keyboard handler.

The first statement in setup is:

size( 400, 400, P3D );
This defines the environment as a 400 X 400 pixel area to be used for 3D rendering (thus making the 3D primitives available).

When using the 3D mode, the drawing area uses the coordinate system shown in Figure 3:


Figure 3. 3D Rendering Mode

This is similar to the graphic coordinate system in Windows or Java 2D: Y and X are positive (they increase in absolute terms as you move along the axes), while Z is negative (-3 is farther away than -2).

An object's coordinates will have to be defined in this space, which is then mapped on to the canvas (as defined by the size statement). The 'origin' (0, 0, 0) is in the upper left corner of the screen.

In a 3D environment, the coordinates of the object are not the only thing that matters; also, the position (the viewpoint) in relation to the object is important. In Processing, the viewpoint is implemented by the camera object, which is defined by two sets of coordinates: a) its location; and b) where it is 'looking' at. Readers who have used 3D modeling applications such as Blender will be familiar with the concept. It is quite simple, really. As you can see in Figure 4, in order for the sphere to be visible, you have to be 'looking' at it:


Figure 4. Camera and Object in 3D Space

Home / Articles / Processing: Open Source Language Brings You Closer to Web 2.0 / 1 / 2 / Next Page

How to Add Java Applets to Your Site

New on the Java Boutique:

New Review:

Time Management Made Easy with the Quartz Enterprise Job Scheduler
Why not just use the Java timer API? This open source scheduling API boasts simplicity, ease-of-integration, a well-rounded feature set, and it's free!

New Applet:

Reverse Complement
Reverse Complement is a simple applet that converts DNA or RNA sequences into three useful formats.

Elsewhere on internet.com:

WebDeveloper Java
Lots of Java information on webdeveloper.com

WDVL Java
Thorough Java resource at the Web Developer's Virtual Library.

ScriptSearch Java
Hundreds of free Java code files to download.

jGuru: Your View of the Java Universe
Customizable portal with online training, FAQs, regular news updates, and tutorials.