Processing Tutorial

This is an introduction to Processing, and a recap from sections on May 16.

A Processing document is called a sketch. Sketches are stored in a folder that is created automatically when you save the sketch. When you first run Processing, the sketch last used will automatically open.

Interface & Compiling

Here is a screenshot of the Processing workspace.

To introduce some code lingo, here is the broad definition of the word compile: to transform source code into an executable program. This is exactly what you are doing when you press the "run program" button - Processing compiles the sketch, and then runs the program. If the program doesn't run, that means you have errors in your code.

Below is another image that illustrates a useful feature in Processing - highlighting of reserved words. Functions and special variables are automatically highlighted.

Static Sketch Mode

A static sketch is written like a list of statements, and only runs once. In static mode, a series of functions are used to perform tasks or create a single image without any animation or interaction. Below is an example.

size (400, 400);

background (192, 64, 0);

stroke (255);

line (150, 25, 270, 350);

To become more familiar with Processing, visit the Reference resource, and try to swap the line () function with rect (), triangle (), or other shapes.

Dynamic Sketch Mode

Interactive sketches are initialized by the setup () function, and by adding functions like draw(). These are built-in functions that can be called-on automatically. Below is an example.

void setup () {

size (400, 400);

stroke(255);

background (192, 64, 0);}

void draw () {

line(150, 25, mouseX, mouseY);}

In this example, the setup () function determines the size of the window and the color of the background (as well as the color of the line shape), and then draws a line from a point (150, 25) to the current mouse position. It is important to know that the setup () function always runs once, and all other functions (such as draw in this case), are constantly looping for the duration of the program.

To explain some of the syntax, "void" is a term that means a function (such as setup () or draw ()) does not return anything (like a data type such as a number). Also, for a function like size(), the values that are required in the parathesis are called arguments. If you enter this code in Processing, you'll notice that mouseX and mouseY are reserved words - these are special variables that pass the current mouse position to Processing. One more thing, to learn the parameters required by any function, be sure to check out the Processing Reference.

To modify this example above, we are going to add a little code that will constantly erase the background before drawing a new line.

void setup () {

size (400, 400);

stroke (255); }

void draw (){

background(192, 64, 0);

line (150, 25, mouseX, mouseY);}

Color in Processing

There are three easy ways to input color in Processing - (1) RGB values, (2) hex decimal notion (like in HTML), (3) or use the greyscale values from 0-255 (0 is black, 255 is white). Here are some examples of each below. For a more detailed description of color in Processing, check out this tutorial.

RGB Values: stroke(255, 255, 255); // sets the stroke color to white

Hex Decimal: stroke(#FFFFFF); // sets the stroke color to white

Greyscale: stroke(255); // sets the stroke color to white

Drawing Ellipses

The following sketch was covered in lecture. Try messing around with it by changing the shape from Ellipse to Triangle, and/or changing the values of some parameters (like size, fill, etc.). The only new addition to this sketch is the presence of the "if" statement. An "if" statement is a conditional statement, if checks to see if (in this case) the mouse button is pressed. If it is, it fills the ellipse with black, in the case that its not pressed, it fills it with white.

void setup () {

size (800, 420);

smooth (); }

void draw () {

ellipse (mouseX, mouseY, 80, 80);

if (mousePressed){

fill (0);

}else {

fill(255);}}

Global/Local Variable & Data Types

Before we do one more sketch, its important to define data types as well as variables. A data type is a classification of one type of data, examples include numbers ("int" [an integer], "float" [which is a decimal], and "long" [a long number]) and letters ("char" is a single character, while a "string" is comprised of several chars). In terms of variables, there are two main types, global and local. A global variable is a variable that is defined in the beginning of the sketch and is accessible in every scope (all functions), which a local variable is defined inside a function and can only be used in that scope. In the following example, we will define two global variables (two integers) and then use them later in the program. FYI: the format for defining a global variable is this: datatype + name of variable + "=" assignment + value.

int myX = 300;

int myY = 200;

void setup () {

size (800, 420);

smooth ();

background (192, 64, 0);}

void draw () {

ellipse (myX, myY, 80, 80);

if (mousePressed){

fill (0);

}else {

fill(255);}

if (keyPressed) {

if (key == 'b'){

myX = 500;

background (192, 64, 0);}}}

One more thing, just so this is clear, there is a difference between "=" and "==" in Processing and the Java language. "=" a single equals sign, is an assignment, meaning you are going to assign a value to variable. "==" two equals signs, is called a boolean operator, and this is a simple true/false statement. So in the example above, in the If statement, the keyPressed function checks to see if the key pressed is 'b' - true or false. If it is true, it performs the function directly below, if not, it moves to the next part of the code. For now, test yourself and see if you can do the following: add a new condition for another key press to move the circle somewhere else.