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

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

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

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

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

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

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

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

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

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

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

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

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