Drawing with Processing

Processing is a program designed to allow artists and designers to explore the creative potential of code and computation.

Processing and the software (the IDE) used to develop programs (which are called ‘sketches’) are open source and you can download the program and find some fun tutorials to get you started at the Processing Website.

The processing language (a subset of Java) allows us to easily draw shapes and manipulate a canvas to explore the potential for drawing procedurally.

Strangely enough this also makes for a very powerful way of learning to code.

Lets start by drawing some primitives in processing and learning how to use the same simple programming structures that we used when programming the Arduino to draw procedurally and to explore the power and potential of doing so.

Like Arduino most programming in processing is executed by way of two functions that are called automatically.

The first is the same as in Arduino – void setup() {} is called once the sketch is first executed.
The second is a little bit different to Arduino. Instead of void loop(){} being called continuously we have void draw(){} – but they work in exactly the same way.

A basic processing sketch therefore looks like this:

void setup(){

//what happens is here happens once when the program starts

}

void draw(){

//what happens in here happens continuously in a loop 

}

 Drawing Primitives (Shapes and lines).

Now we have a program lets draw something with it.
First we need to set up a ‘canvas’ on which to draw.

We will do that in setup by using the ‘size’ method. Adding the line….

size(800,600);

…we tell the computer what size drawing we will be making. In Arduino our canvas was the screen we were using  ( it was 128*64) – in Processing our canvas is virtual – it can be as big as a house or as small as a mouse. In this case we want ti to fit on our computer screen and so 800 * 600 is a good size – but try changing these numbers and see what happens.

These numbers describe the grid on which we will be drawing. The first number describes the X Axis of the grid. The second number describes the Y axis of the grid. In order to draw something on the screen we give the computer an X coordinate between 0 and 800 (the width of the canvas) and a Y coordinate 0 and 600 (the height of the canvas)

Lets draw a circle by adding the line below to the draw function of our program;

ellipse(400,800,100,100);

In this code we are giving the program two numbers that tell it where to draw the circle and then two numbers telling the computer how high and wide (what size) our circle should be.Try changing these numbers – note that when the third and fourth numbers are different we are drawing an oval rather than a circle.

Try drawing with these other shapes;

rect(200,300,150,60);
line(100,100, 700,500);
triangle(20,30,40,50,80,90);
quad(10,10,100,10,100,100,10,100);

The good thing about drawing on the computer screen is that we can now draw with lots of colours. We describe colours in processing with three number – this is called RGB – which stands for Red, Green, Blue – by choosing three numbers between 0 and 255 to add shades of Red, Green and Blue we can make any colour our computer can represent.

Lets try it. We will start by making a background colour. Add this line to your draw(){} function;

background(100,125,80);

Now add this line above the lines in which you draw a shape;

fill(20,180,200);
stroke(100,40,80);

What happens when you add a fourth number to your three colours?
You can also try experimenting with these commands in your void draw(){} function;

noFill();
noStroke();

what do they do?
Like we discovered with Arduino – randomness leads to lots of fun discoveries. To make a random number we use the method random(). In order to turn the random number into an integer we need to write (int)random(800); Try using randomness in different places in your shape code like this;

ellipse((int)random(800),(int)random(800), 100,100);

Can you make a random colour? What happens when we move our background() lines from the draw(){} function to the setup(){} function?? Why?

Drawing with Loops and Procedures

Now lets try and remember back to our early drawing with Arduino where we learnt about if(){} and for(){} structures. Lets see if we can use them to create some interesting patterns like the ones we executed on paper last week.

Try this;

int x=0;
int y = 0;

void setup(){
  size(800,600);
  background(255);
  
}

void draw(){
 
  fill(120,60,95,80);  
  ellipse(x,y,100,100);
  
    x= x+50;
  
      if(x > 800){
         x = 0;
         y= y+50;
  }
  
}

Can you work out whats going on here? Go through and change all numbers a little bit and see what you can make this sketch do.

Try this one;

int x=0;


void setup(){
  size(800,600);
  background(255);
  
}

void draw(){

  
 for(int x=1; x<8; x++){
    fill((int)random(255),(int)random(255),(int)random(255));  
    ellipse(x*100,height/2,100,100);
  }
 
}