LESSON 1: SCRIPTING

INTRODUCTION

In this course you will be working towards your own character in six creative coding lessons. But before we can begin it is useful to start with a few basic coding principles. When you have finished this lesson you will have created your first working script, which will also serve to give you some insight into the concept of programming.

Your first sketch will cover the basic structure of a processing program including setting up your window size, background colors, draw basic shapes on the screen and update values every frame. By the end of this lesson you will be familiar with the concepts of functions and variables. The final result of this lesson will be a program that looks like the one you see on the right.
Download Processing

STEP 1

Each Processing sketch consists of two parts: setup and draw. As you may have guessed from these two words, setup does some initial work to get your application running, and draw allows you to draw. We will start with an empty setup and an empty draw, in other words, a blank canvas, which we will be filling in the course of the next steps. It is a sketch that doesn’t do anything, but it is the foundation for every sketch you will ever make.


void setup() {
 
}
 
void draw() {
 
}

Setup and draw are called functions. The content of a function is always displayed between brackets: {}, with which you can open a function and close it at the end.

STEP 2

In setup we place all code related to initialisation. A good example would be: adjusting the size of the screen. The code also shows you that we can add comments. This is code that will not be executed, it only serves to clarify. This is especially useful if you want to find a piece of code quickly or to clarify which action will follow from the code you have entered. You can write a comment by starting with //.


void setup() {
    size(400, 400);  // window will be 400 by 400 pixels
}
 
void draw() {

}

STEP 3

Everything that is entered in draw will be executed anew in every frame. Like a film or an animation, your sketch works with frames which allows you to work with movement and transformations. To begin with, we can render the background of our screen red.


void setup() {
    size(400, 400);  // window will be 400 by 400 pixels
}
 
void draw() {
    background(255, 0, 0); // set a red background
}

STEP 4

In draw we can also draw different shapes. In the code below we are drawing a circle with the ‘ellipse’ function in Processing. As you can see, ellipse has a number of characteristics; in coding, we call these characteristics arguments. In this case the arguments for ellipse are the horizontal and vertical positions within the plane and the width and height of the circle we want to draw. width means the width of the screen and height the height of the screen.

Processing makes sure that these variables will automatically have the correct value. We want our circle to be exactly in the middle, so we enter; width / 2, height / 2. width / 2 then means the horizontal middle of the screen; height / 2 the vertical middle. The final 2 arguments are width and height of the circle, in this case, both are 50 pixels. I you enter two differing numbers here, your circle will become an ellipse.


void setup() {
    size(400, 400);  // window will be 400 by 400 pixels
}
 
void draw() {
    background(255, 0, 0); // set a red background
    ellipse(width / 2, height / 2, 50, 50);
}

STEP 5

Once you have determined the size and position of your circle you can add colour to it. We do so using the function fill. The numbers you enter in fill correspond with the usual RGB colour codes. Once you use fill, everything you draw after that is drawn in this fill-colour, so every circle you would subsequently draw has the same colour.


void setup() {
    size(400, 400);  // window will be 400 by 400 pixels
}
 
void draw() {
    background(255, 0, 0);  // red background
    fill(0, 255, 0);  // everything that will be drawn will be green
    ellipse(width / 2, height / 2, 50, 50);  // draw a circle in the center of the screen
}

STEP 6

As a final step we can apply a simple transformation within our sketch, by letting the colour of our circle change at random. We can do this using the random function. random(255) will pick a number between 0 and 255, and the colours once again represent the RGB colours.


void setup() {
    size(400, 400);  // window will be 400 by 400 pixels
}
 
void draw() {
    background(255, 0, 0);  // red background
    fill(0, random(255), 0);  // everything that will be drawn will be randomly colored
    ellipse(width / 2, height / 2, 50, 50);  // draw a circle in the center of the screen
}