Processing Functions: Setup & Draw

****THIS PAGE IS A WORK IN PROGRESS****

Most processing programs you will find will have two main functions declared already. The first one is "void setup" and the second one is "void draw".

Void Setup()

Functions, just like variables are declared with a data type first and a name after. The word "void" means, the function will not return anything, thus, there is no need for a data type, hence the "void". No need to worry about return values just yet, it will all be clear very soon.

Setup function is used to set your application's properties such as, size, background color and framerate. You can leave the body of the setup function blank and not set anything up, which would setup your document with the default values but for the sake of learning, we will.

I am sure you noticed the "()" notation we use after a function, if you are going to use any parameters, they go between the parenthesis -bu you do not need to worry about that right now. We will go over return types and parameters in detail when we learn about functions later.

Functions that you can use in the setup()
-size() is used to setup your canvas size in pixel. This function takes two parameters, a width and a height. To use a parameter, as I've mentioned, you just put the values between the parenthesis such as: size(400,240). This would set our canvas' size to 400 pixels by 240 pixels.

-background() is used to setup your canvas' background color. The parameters are used to define a color value such as: background(120,244,27), which is a blinding green so do not try it as it is :) For gray values, you can use something like background (80,80,80) which means r=80, g=80 and b=80 but there is an easier way. background(80) would give you the same gray value by setting up all three (rgb) values to 80.

These two functions are enough to get started :)

A function's body is the space between the curly brackets. The way we use them is by writing them in the body of the setup function such as:

 
  void setup(){
      size(400,240);
      background(120,244,27);
}
 

So, in the setup function, we call two pre-defined functions; size() and background(). If you run this code in your Processing IDE, you will get a canvas that is sized to 400x240 and is painted to a horrible tone of green.

Void Draw

The draw() function is a function that is executed every frame of your application's life. Whatever statements you write in the body of the draw function will be run, continously. Here's an example:

 
  void draw(){
      println("Hello World");
}
 

The above code will print (println function, takes a string) "Hello World" on the console of your IDE as long as the application is running.

Now that we have the Hello World example out of the way, we can add in what we talked about in the previous material; variables.

Let's imagine a scenario where we are told to make a counter (or the world will end). Our counter will increase by 1 every second just like a normal counter. What we need to do is, declare a variable to hold the value of the counter and increment it by 1 every one second. Remember the draw function that runs really fast? We have a way to slow it down by putting a delay with the delay() function. The delay() function takes an integer as a parameter and stops that many milliseconds before continuing the execution of the code.

 
int counter=0;     //variable declared at the top so it is accesible
                   //from the draw function
 
void setup(){
  size(400,240);
  background(120,164,28);
 
}
 
void draw(){
  counter++;        //increment the counter variable's value by one
  delay(1000);      //wait 1000ms/1s before going on
  println(counter); //print it on the console
}
 

Now, that's boring to look at. If only there was a way to visualize the information displayed on the IDE's console.