Setting up your sketch

How to set the size & background colour of a sketch

To download this guide as a .PDF click this link  how to set size and bg colour.pdf

Projects in Processing are called ‘sketches’.

To define the size and background colour of a sketch, we need to write a set up function. A function is the name we give smaller ‘programs’ within our Processing sketch.

The ‘void setup()’ function is referenced by Processing once when it first runs a sketch.

It is useful to control things that need to happen just once.

  •  e.g. setting the size of your sketch.
  •  e.g. positioning pictures or text that won’t need to change over time

To remind Processing to set the size of the sketch the same each second would be a waste of its power, so usually do it only once.

How to write the void setup() function.

Type the following ….

void setup() {


Leaving a line between the open { & the closed } curly brackets.

This is the space where we tell Processing what to do when the void setup() function is run.

How to define the size of your sketch


void setup() {

size(200, 100);


We place a semicolon ; at the end of the size() command to let processing know that the line command has finnished.

Changing the value of the numbers in the brackets will change the width & height of the sketch in pixels.

With Processing, we measure the width and height of the sketch from a starting point at the top left hand corner.

How to define the background colour of your sketch


void setup() {

size(200, 100);



The three numbers in the brackets are known as RGB numbers.

Each represent a value of a different colour, red green or blue.

Processing uses this list of 3 numbers in brackets to define colours.

The higher the number is, the more of that colour there is.

You can mix colours by combining different mixtures of RGB values.

Here are some examples to copy & paste..

Background(0,255,0); //= Green

background(0,0,0); //= Black

background(255,255,255); //= white

background(0,255,125); //= turquoise,

background(255,0,125); //= purple

Experiment by creating & running sketches of different sizes with different background colours.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: