Processing Tutorial

Zak Cutner

Welcome to my tutorial on Processing, please don't rush as it's important to read and understand the whole section before attempting the activity.


Take a look at the Processing reference if you get stuck or you want to find some extra information about a command. This tutorial also prints well, which can be useful if you're going to be offline.

Getting started

Beginner

Processing is a programming language that lets you draw stuff using code. We'll begin by learning some simple commands so you can get started with some coding.

size(width, height);

Substitute in numbers here to tell Processing how big you want your sketch to be, both in width and in height. Like all distances in Processing, width and height are measured in pixels.

line(x1, y1, x2, y2);

Think of your Processing sketch as a map, when we want to draw anything we need specify where on the grid we want it, both how far across and how far down. This code draws a line from one set of grid co-ordinates to another.

Try it out

Create a new Processing window with a width of 400 and height of 400.

Draw a line starting at the co-ordinate 100, 100 and going to 300, 300.

Drawing shapes

Beginner

Now we’ve made some lines in Processing, let's have a go at drawing some common shapes, rectangles and ellipses.

rect(x, y, width, height);

This draws a rectangle. The x and y tell Processing where we want it to be drawn on our grid and the width and height allow us to set the size.

ellipse(x, y, width, height);

An ellipse is squashed circle, everything else works in exactly in the same way as the rectangle. If the width and height are equal, we’ll draw a circle!

Try it out

Delete your line and make a circle, sized 200 by 200 at the point 160, 160.

Draw a rectangle at 140, 200 with a size of 160 by 100.

Adding some colour

Beginner

We know how to make lines and shapes, but let's give them some colour now to make your sketch more fun!

fill(red, green, blue);

This sets the fill colour of any shape we draw after this command. The red, green and blue can all range from 0 to 255 depending on how much of each we want, like you’re mixing different coloured paints!

stroke(red, green, blue);

This command works in exactly the same as fill(), but it sets the line colour of shapes rather than the fill.

Try it out

Give your circle a green fill and a blue outline.

Make your rectangle have a white line and a yellow fill.

Introducing functions

Beginner

Functions allow you to easily group bits of code which do something together so that it can all be run at once.

void setup() {
    // All my code here
}

This creates a function called setup, the “void” means function. Don't worry about the double slash, it just serves as a placeholder for where your code should go. It’s important to remember the curly brackets and to indent all the code within the function (you can use the tab key on your keyboard to do this).

Try it out

Create a function called “setup” which we will use later.

Put all our code so far here, remembering to indent it by selecting it and pressing the tab key.

Making it interactive

Intermediate

Our sketches so far have been static. We can now make things happen, for example the shapes could move with your mouse.

mouseX

This command fetches the x co-ordinate of where our mouse is currently on the sketch. It will give us a number which we can use instead of an x, y, width or height value. Any interactive code always goes in a function called draw because it loops over and over again.

mouseY

You can also get the y co-ordinate of where the mouse is on the sketch.

Try it out

Put your rect() command in a function called draw.

Make the position of the rectange follow the mouse.

Customising the background

Intermediate

We know how to set the stroke and fill colour of your shapes and line, we'll now learn how to change the colour of the background or remove an outline altogether.

background(red, green, blue);

This works in excatly the same way as fill() or stroke() but sets the colour of the background. The background is placed over everything else, so using this command in the draw function will cause everything to be erased every frame as the function loops.

noStroke();

Whilst the stroke() command sets the stroke colour of a shape, this completely removes the outline of all shapes or lines proceeding it.

Try it out

Clear the screen every frame, setting the background to white.

Keep the stroke colour for the circle, but remove the outline for the rectangle.

Using maths operators

Intermediate

Just like mouseX and mouse Y, we can use maths to tell Processing where and how big objects should be.

width
height

These commands work in the same way as mouseX and mouseY but get the width and height of your sketch in pixels.

+, -, *, /

We can use these in our sketch to add, subtract, multiply or divide numbers. Remember that the star (*) means multiply and the slash (/) means divide.

Try it out

Make the circle exactly in the centre of the screen using the width and height commands.

Set its width to twice the value of the mouse x co-ordinate.

Making it random

Advanced

Sometimes we want to generate a random number to set the colour or position of a shape.

random(number)

This command generates a random whole number between zero and the number we specify, which can be used just like width or mouseX. For example, if our number was 2, then 0, 1 or 2 would be chosen at random.

Try it out

Save you sketch and make a new one, setting the background to white.

Draw a line from the center of the window to the mouse with a random colour.

Introducing if statements

Advanced

Sometimes we want to only do something if something else happens, for this we use an if statement.

if(mousePressed == true) {
    // Do something here
}
else {
    // Do something else here
}

The if statement looks very similar to a function. The mousePressed returns true if the mouse is being pressed and false if it isn’t. The double equals sign means equals too, the code within the if statement is run if the statement is true, if not the code in the else is run.

Try it out

Make the line from your sketch a random shade of red if the mouse is pressed, using the equal to operator.

If it isn't, set the line colour to a random shade of blue instead.

Using modular arithmetic

Advanced

We use modular arithmetic in order to reset things back to 0 when they have reached a certain value easily, rather than using if statements which would require far more code.

time % 12

Modular arithmetic is sometimes also referred to as clock arithmetic. This is because it works in the same way as we tell the time on a 24 hour clock; once it passes 12 o'clock, we rewind to 1, naming the next hour 1 o'clock rather than 13 o'clock. The percentage in the example above represents the modulo operator, both 12 % 1 and 12 % 13 will output 1.

frameCount

A new frame is created every time your draw function loops. This command gets the number of frames which have appeared since the application started (i.e. when the frameCount was 0).

Try it out

Set your line's outline to a random colour which changes every 20 loops of your program.

When the mouse is pressed, pause the colour that you are currently on until it is released

Working with variables

Advanced

We’ve already used some preset variables like width and height, but you can also set your own to store information.

int myNumber = 0;

This declares an integer variable called green and sets it to 0, you must put this line at the top of the sketch, before any functions.

myNumber = myNumber + 1;

This would add one to the green variable and can go in any of your functions, such as draw.

Try it out

Set your line's stroke colour black, moving one tone towards white every 5 loops of the draw function.

When the line becomes white, use the modulo operator to reset it to black again and repeat the cycle.

A new kind of colour

Expert

RGB (red, green, blue) colours can only get you so far. We'll now explore the HSB system which allow us to manipulate colours in a different way.

colorMode(HSB, 360, 100, 100);

This line of code sets Processing to use HSB colours rather than RGB colours. We'll go through what the letters stand for shortly but the three numbers in the command signify what each of the three letters go up to, just like R, G and B all go up to 255. Here, H goes up to 360 and both S and B go to 100.

fill(hue, saturation, brightness);

For HSB colours, the hue is part of the colour spectrum, just like on a rainbow, starting with red. The saturation represents how strong the colour is, 100 would be a bright colour whereas 0 would be a shade of grey. Finally, brightness relates to how bright the colour is, no brightness would be black.

Try it out

Change your sketch's colour mode from RGB to HSB and set your line to red, hue of 0.

Every 5 loops move one shade along the colour spectrum, resetting at a hue of 360. Experiment which the saturation and brightness values.

Integrating timings

Expert

Processing can use your computer's clock to get the time. We're going to learn how to integrate the current second, minute or hour into your code.

second()
minute()
hour()

Each of these returns a number, just like width or height, which represents the current time. The number returned by second or minute will be from 0 to 59, and hour will be from 0 to 23. For example, if the time was 14:28:46, hour would return 14, minute would return 28 and second would return 46.

int s = second();

We can also assign the returned value to a variable and use it with arithmetic, just as if it was a number.

Try it out

Make the line's colour on the hue spectrum relative to the current number of seconds in the minute.

So zero seconds would be red, thirty seconds would be turquoise and sixty seconds would be red again.

Show All