Introduction To Processing Programming Language

Overview

Processing is a creative coding language developed at MIT labs by Ben Fry and Casey Reas. Processing language came into being for drawing in a sketch. Everything in Processing is a sketchbook.

flow

Processing language brings visual art to life using capabilities of the Processing language. The current version of Processing is 3.0 and the place where we write code is called the sketchbook. The extension of files in Processing is “pde”.

Language

The language has a very good similarity with Java and IDE built upon it but it has the syntax of its own.

Evolution

Processing has evolved over the years as a language and has been added and modified with the versions of it.

flow

Environment

Setting up environment in Windows.

Processing is completely free and open source and we can download it from here.

We will download for Windows version.

Processing is supportive for both Mac as well as Linux.

Configuration: As we download the file, it comes in a Zip version that we need to extract. I have used WinRAR freeware for extraction.

extract

We create a shortcut at desktop.

Program Structure

The basic program structure for a Processing sketch to work is a setup block and draw blocks. The setup block initializes the code and the draw block runs again and again to actually reflect what the code will do or visualize.

Basic flow of Processing language

Let’s start with constructing a triangle in Processing and then add movement to it. In the setup block, we need to mention the size of the window where we show the output.

We use size inside a setup block.

void setup() {
size(800, 600);
}
Now in the draw loop we make a simple triangle
void draw() {
triangle(80, 75, 58, 240, 286, 75);
}
The full code
void setup() {
size(800, 600);
}
void draw() {
triangle(80, 75, 58, 240, 286, 75);
}

After completing the code logic, we need to run the play icon on top left hand side.

code

The output

output

Now, we need to save the sketch as after that we will be exporting it for different platforms.

We save it in a location and name it accordingly.

After saving the file, we are done with saving the message.

message

Now, we need to click on File >> Export Application.

After that, we have options for saving it for different platforms.

Now, we select for Windows platform.

After exporting for Windows platform, we get an exe file.

Let’s modify the triangle code and a little bit of mouse logic to it.

We add an if-else logic where we recognize the mouse pressed activity to produce the output with movement.

void draw() {
if (mousePressed) {
fill(0);
} else {
fill(255);
}
triangle(mouseX, mouseY, pmouseX, pmouseY, 30, 60);
}

Let’s see the output,

output

mouseX gives horizontal position of the mouse and mouseY gives vertical position of the mouse.

pmouseX gives the frame earlier to mouseX. Similarly, pmouseY gives a frame earlier to mouseY.