An Introduction To Programming With Processing

Hello Processing

Now that we have an idea of what programming is and how we will be using the PDE to create our own code in Processing lets start coding!

Install Processing

Once you have downloaded Processing, depending on your platform you might need to install it or just simply uncompress/unzip the package to a location on your hard disk drive and run it from there. Open the processing root folder inside which you will find an executable file called processing, double click this file to start the PDE and you are ready to start programming with Processing. If however you are unable to run the PDE check that you have permission to execute/run the processing file and that Java or more specifically the JRE (Java Runtime Environment) is properly installed. It is recommended that you use the version of Java that is available from Sun Microsystems (a subsidiary of Oracle), alternative open source versions of the JRE and Java Development Kit (JDK) such as OpenJDK do exist but are currently not recommended with Processing, however this might change at some point in the future, see the Processing website for updates. You can get the latest version of Java from http://www.java.com/getjava

Sketches

A program created in Processing is known as a sketch. Processing sketches are stored in a folder called the sketchbook folder. Being able to identify the location of this folder will be useful particularly when adding external data to a sketch. To identify the location of the sketchbook folder within the PDE click:

File → Preferences → “Sketchbook location”
In the Preferences dialogue box the sketchbook folder can be identified under the heading “Sketchbook location” or changed by clicking the “Browse” button and navigating to and choosing a new location under the same heading. All Sketches you create should be stored within your sketchbook folder.

Hello World Program 1.0

Hello World Program in Processing

Programming can be simple or very complex depending on what you are hoping to achieve. Since this is our introduction to programming we'll be following programming tradition and starting with a simple Hello World program. A Hello World program sounds a lot more complicated than it actually is, as the purpose of the program is simply to print the words “hello world” to a display. That display in our case is going to be the Text Area of the debugging console in the PDE. The purpose of the “Hello World 1.0” program is not as much to impress but rather to get a firm grasp on the key points that make a successful program, then to later expand on this understanding. If you have not already done so open the PDE and start a new sketch. You can do this by clicking:

File → New
Save the sketch in your sketchbook folder by clicking:
File → Save As...
Give the sketch a unique name that you will remember. In the text editor of the PDE create the Hello World 1.0 program by typing the following text exactly as it appears below:
println("Hello World");
Press the “Run” button in the PDE which looks like a play button, or ctrl-r on your keyboard. The PDE checks, compiles and executes (runs) your program. If all has gone well you should get a result similar the following image.
If your console window has the phrase “Hello World” printed in it, congratulations you've successfully completed the Hello World 1.0 program! Like I said earlier, don't expect to be impressed right away, building a more useful program is going to take a little more practice. Nonetheless let's have a look at what is going on here. Firstly you'll notice that the text editor has formatted the text we input in different colors. The colors denote specific meanings in Processing, for example in our Hello World 1.0 program:
Orange is used to identify a keyword.
Black identifies syntax formatting characters such as parenthesis and a statement terminator.
Blue identifies a string of data.
IDE's such as the PDE that use syntax highlighting make code more human readable and once you get familiar with what the colors represent you'll find yourself separating the code you are reading into smaller manageable chunks by identifying the colors that serve specific functions. We refer to the sentence typed in the text editor as a statement. Statements are easy to identify because they always end with a semi-colon and not with a period (like in English). Our entire Hello World 1.0 program consists of only one statement which in itself consists of only one command (or function as is the preferred terminology in Processing). Processing is a case sensitive language so it is very important that when you type a function you do not mix it's casing because println() and printLn() will not yield the same results, in fact the latter will cause an error.