Introduction to Processing


How about learning to dabble in some cool animation projects, or creating some fun interactive features or even designing games through a simplified coding environment that’s not too tough to get the hang of in a few days, even for novice programmers? You are sure to find the Processing open source software to be a boon if you have a penchant for designing and of course coding. Although originally developed keeping in view creation of a domain-specific Java extension tool to aid digital artists and graphic designers, it has evolved into a production and prototyping tool used for installation work at a bigger scale, and visual instrument in a way more than anticipated. A very useful feature also provided is the capability of exporting your executable “sketch”, or code, to an applet.
Similar to the GNU Compiler Collection, GCC, the connected libraries are open source under the GNU Public License (GPL), under which changes to code must be made available. The programs created with GCC themselves do not need to be open source.

The Processing Development Environment (PDE) is the software the Integrated Development Environment (IDE) consists of a set of tools for testing and creating simple code scripts. The simplicity of the IDE can be credited to a number of functions, or methods or commands, that constitute the API, plus the numerous libraries allow integration of superior features like sending data in networks, streaming video, and so on.

So how about we delve into the process and get a look on how the basics work. The language syntax happens to be similar to Java, with a few tweaks. The createShape() function of class Pshape can be used to define a new shape. The shape can be drawn by using shape() function. The parameter ELLIPSE, RECT, ARC, TRIANGLE, SPHERE, etc. The parameters of each of these shapes can be given to define the size and location.

E.g.: square= createShape(RECT, 0, 0, 80, 80);

The above line of code gives us a rectangle object at coordinates (0,0) and of width and height 80 units. Alternatively, any unique shape may also be created simply setting the drawing attributes and geometry directly to the shape, using the vertex() function, which is used to define a vertex of the shape object of class Pshape. Uniform shapes can be defined by some available functions, such as: ellipse(x, y, width, height) where an ellipse shape can be drawn with center x pixels from the left and y pixels down from top, and width and height can be provided in pixels as function arguments. So if you type the following command:

ellipse(50, 50, 80, 80);

This is what the output may look like in a window of size 400*300 pixels:


But before beginning to write code, some basic steps need to be kept in mind. First of all, we need to write a function called setup() which should consist of a size() function, to set the width and height of the output screen, as well as initialize objects, which will execute once only. Next, the draw() function is of importance as this will continue executing till the program is stopped. The draw() function can be compared to the while(1) infinite loop condition in a C or Java program.

Here is an example:

void setup() {

  size(300, 300);


void draw()


void mousePressed {

  line(mouseX, 10, mouseX, 90);


In this code, although draw() is an empty function, the sketch can process the event of a pressed mouse button, or keep running the code in a continuous manner. The noLoop() function can be evoked to terminate the draw() loop. Moreover, the frameRate() function can be used to specify the frame rate, or the number of times the draw() function executes per second for a running sketch.


Working with images and pixels manipulation is also facilitated in the Processing environment. In order to use an image, it must first be present in the correct directory in use for the loadImage() function to work. The commands for creating an image object and fixing its location are as follows:

PImage img;

This will create an image object of type PImage, which is a predefined class.

void setup() {

 img = loadImage("example.jpg");


void draw() {

  image(img, 0, 0);


The above code snippet allows the opening of an image at coordinates (0,0) onscreen. The pixel data is loaded into the pixels[] array for display window. The loadImage() is a file handling function, which expects to find an image file inside a “data” folder, which is a subdirectory under the “sketch” folder. Here a “sketch” is nothing but a program, and it is kept in a “sketchbook”. The whole concept is to allow Java based programs to be written in a manner of “scripting”. For advanced programmers, there’s the option of using the Java libraries they are familiar with. A host of basic libraries are available with the software download, namely javascript, minim, video, serial, dxf, net and pdf, while other libraries can be easily incorporated to enable higher level applications to be developed, such as OpenGL for advanced graphical renderings, for example, to create an illusional 3D space on the 2D window. P2D and P3D modes make use of OpenGL-compatible graphics hardware. So, you can get your code running faster, through your computer’s graphics card. In particular, also techniques like the “shape recording” functionality in PShape can increase speed in P3D.

You could also create some lovely textual effects, using the PFonts class for instance…like the one below!



The software, as mentioned, is open source and downloadable in several versions, the most recent release being 2.0 and above, and also has the support of active online forums and published material. The best way to go about learning is going through the generous provision of examples ranging from basics to complicated data visualizations. And, needless to state, a great beginning is trying your hand at writing some of your own code and getting it up and running!


Leave A Reply