Tutorial 1.1:

anatomy of a Processing sketch



Introduction
Processing is an open source programming language and environment for people who want to create images, animations, and interactions. Initially developed to serve as a software sketchbook and to teach fundamentals of computer programming within a visual context, Processing also has evolved into a tool for generating finished professional work. (from processing.org).



Processing can be thought of as a sketching tool, a way of creating quick visual representations of data, and therefore the code & visualisations produced with Processing are called 'sketches'.



1) Open a new empty Processing window and save as a new sketch.

All of your code needs to be carefully stored inside a folder system on your hard drive. By default, your sketches will be saved in the 'Sketchbook' defined when you first installed Processing.



In File>Preferences you can change the location of your Sketchbook. I recommend keeping this folder wherever you store active documents on your computer. Keeping your Sketchbook in Dropbox or another cloud storage service gives the advantage of making your work available on whatever computer you happen to be using (and also backing up your work).



One of the most difficult things about getting started with programming is that you have to be very precise with how you write your code (this is called programming syntax). Processing will not run your sketch if a semi-colon or bracket is misplaced, or you have spelled the name of an object differently (this includes CAPITALS). You'll get used to this syntax and error-checking your code ('debugging') during the module.



Every time you save a new sketch Processing automatically puts it inside a new folder with the same name. The name of your files cannot have any spaces (although if they do they are automatically changed).



IMPORTANT NOTE: You cannot open a sketch if it is not contained in a folder with the same name. If we ask you to submit a sketch as a zip file it is therefore important to zip the containing folder (with all of the files in it).



2) Give your sketch a title using a comment

As long as they are contained by the correct markup:

// single line comment

/*
Multiple
line 
comment
*/

Comments do not get read by the computer. Comments are extremely important as they allow other humans to understand your code, and for you to understand it at a later date.

// My first sketch

/*
November 2014
Computational Design
Mark Meagher and Adam Park
SSoA
*/


3) Declare your variables.
Variables can be declared almost anywhere in the sketch, but where you declare the variable determines its scope - ie, how long the variable is stored and from what part of the script it is accessible. If you're not sure what the scope of your variable should be, it's usually best to declare it in the first part of your Processing sketch, before the beginning of the setup() function. Variables declared in this part of the sketch are called global variables. Remember that variables in Processing must have a specific type corresponding to the kind of data that will be stored (is int, float, char, boolean etc).


int myHeight = 400;
int myWidth = 400;
int myBackground = 200;


4) Set up a new sketch by adding the setup function.
Functions are the building blocks of code, and instruct the computer to carry out specific operation. In Processing (which is Java-based) a function is contained by curly brackets {} and is declared using this syntax:

void ourFunction(){
// some code
}

The setup function declares all of the information Processing needs to launch a new sketch. The setup() function runs once only, and is the first function to be executed when you run a sketch. This is the place to put all the commands that you want to have executed only once at the beginning of your script.

void setup(){
  size(myWidth,myHeight); //the size of the display window
  background(myBackground); //background colour as a greyscale value; this can also be defined as RGB values
}

Colours are defined by the RGB (red, green, blue), on a scale from 0 - 255. White is therefore (255,255,255) and Black is (0,0,0), Red is (255,0,0) etc. We can use a shorthand for the grayscale colours by just providing one value eg. background(200) which draws a light grey background.



Try changing the colour of the background using different RGB codes.



You should notice that every line of code inside that function (that is not a comment) is terminated with a semicolon. A good place to start with code that is not working is to check all of your brackets and semicolons!



The setup() and draw() functions are unique in Processing, in that they run automatically and do not need to be explicitly invoked. Any other function will not run unless you call it somewhere in your code.


5) Finish the sketch by adding a second function, called draw().
The draw function is where we need to declare all of the geometric elements and controls that we want to be visualised in the sketch. All the code within the draw function is automatically executed in each frame of the Processing sketch. By default the framerate is set at 60 frames per second; this can be changed by invoking the framerate() function in setup().

void draw(){
   ellipse(myHeight/2,myWidth/2,100,100);   

/*
Here we simply define which elements 
of our geometry are drawn (displayed)
*/
}



The ellipse function has four parameters: x-coordinate, y-coordinate, width, and height. The x- and y-coordinates can be given, as above, in relation to the width and height of the Processing window using the reserved variables 'width' and 'height'. Note that white is automatically assigned as the fill colour and black as the stroke colour.



What happens if we move the background into the draw() function and run the sketch - can you explain what is happening?


6) Click the play button to run the sketch

If all of the syntax is correct, your sketch should load a new window containing a circle in the center. If the window does not load and the Processing console shows errors (in red) - check that you have typed the code correctly (or copy and paste from below).



tutorial 1.1 code in full:

// My first sketch

/*
November 2014
CD 1
Mark Meagher and Adam Park
SSoA
*/

int myHeight = 400;
int myWidth = 400;
int myBackground = 200;


void setup(){
  size(myWidth,myHeight); //the size of the display window
  background(myBackground);

}

void draw(){
  ellipse(myWidth/2,myHeight/2,100,100);        
/*
Here we simply define which elements 
of our geometry are drawn (displayed)
*/
}

Exercises:



1- Try replacing the circle with an oval, a square, a rectangle and a triangle.

2- Change the position of the figure to the upper left corner, then the lower right corner of the Processing window.

3- Change the fill colour and stroke colour.