Processing is a free, open source programming environment suitable for creating interactive applications. It can be used to produce programs for PCs (Linux, Mac or Windows), displayed on web pages (using a Java plugin) and it can even be used to create iPhone apps. So, the best thing for a programmer new to Processing to do is to jump straight in an build an application.
Downloading and Starting Processing
Getting started with Processing could not be more simple. The programmer can obtain a set of compressed files from the Processing download page or by manually downloading and extracting the files. For example, a Linux user would go to the command line and type:
wget http://processing.googlecode.com/files/processing-1.1.tgz
tar xvzf processing-1.1.tgz
No installation is required and so it is then just be a matter of starting the Processing environment:
cd processing-1.1
. ./processing
At this point the programmer will see the Processing programming window (as shown in figure 1 at the bottom of this article).
The 2 Essential Processing Functions
The most basic Processing application requires 2 functions to be defined:
- setup
- draw
By extending those two functions the programmer can quickly create exciting visual based programs.
The Setup Function
The setup function fires as the Processing application starts. It is used to set the initial configuration for the application. For example, it can be used to set up:
- the screen size
- the background color
- the drawing pen color
So, in this case, the setup function would look like:
void setup() {
size(480, 480);
background(255, 0, 0);
stroke(0, 255, 0);
}
If the application is run at this point then a red screen will be displayed to the user. The draw function is required for any user interaction
The Draw Function
The draw function runs whenever the user interacts with the screen and this, with the built in line function, to produce a very simple drawing application:
void draw() {
line(0, 0, mouseX, mouseY);
}
If the Processing application is run at this point then as the user moves the mouse the application will draw lines from the screen's top left corner to the position of the mouse (as shown in figure 2).
Adding Variables
The programmer can add variables to the Processing applications by defining a data type and variable name along with a value (if required):
int x = 0;
int y = 0;
These variables can then be used in any of the functions:
void draw() {
line(x, y, mouseX, mouseY);
x = mouseX;
y = mouseY;
}
In this case the application will draw a line from the last mouse position to the current one.
Conditional Statements
Currently the application draws a continuous set of line from one mouse location to the next. Obviously that will not produce a particularly professional looking image. The next step, therefore, is make the drawing conditional on the mouse button being pressed. This is done with a simple if statement:
void draw() {
if (mousePressed) {
line(x, y, mouseX, mouseY);
}
x = mouseX;
y = mouseY;
}
Now lines will only be drawn if the user is pressing the mouse button when they move the mouse.
Saving a Drawing
The application user is now able to sketch directly onto the screen but is unable to save that sketch. A single line of code placed at the end of the draw function will rectify that:
void draw() {
if (mousePressed) {
line(x, y, mouseX, mouseY);
}
x = mouseX;
y = mouseY;
saveFrame("/tmp/output.png");
}
This will save an output to the file every time that the draw function runs. And so, with just a very few lines of code the Processing programmer can produce a very simple but effective drawing application.