Introduction to
Creative Coding

In this workshop, you will be working in P5.js, a coding library which was created to help artists and creatives use code in their work. It is a great language for beginners and experienced coders alike. It is written in a way that is easy for humans to understand, but don't let that fool you into thinking it isn't powerful!

P5 has a lot in common with popular languages used by web and programming professionals in the way that it's structured, but it's a bit more friendly to learn. This means that P5 is a great jumping-off point for anyone who is interested in learning to code professionally.

One of the best things about P5 is its online editor, which means you can see your code take shape in your browser as you work, and you don't have to faff around installing and setting up software before you get started.

Step 1: setting up

To begin, click here to sign up to P5.js!

Complete the sign up process, and click 'sign up button'. You should now be taken to a this screen:

On the left is your code window, where you will be writing code. This is also a place where you can add images and files.

On the right is the preview window, where you can see the results of your hard work! P5 code snippets are called ‘sketches’, which is what I'll be referring to them as throughout this site. They get the name ‘sketch’ because they take place on an HTML ‘canvas’ element, which as the name suggests, is used for creating visuals, and manipulating images.

Below the code window is the console, which is useful for testing and getting info about your code. We'll go into this in more detail later! The console shows information about what's happening in your code and will also show error messages to help you figure out where you've gone wrong if you create a bug.

Now, click the play symbol. A grey square should appear in your preview window. Congratulations! You've just executed your very first P5 script. Not a lot seems to be happening at this point. Code doesn't always have to be fun or interesting!

Step 2: Understanding code

Before we add to our sketch, let’s first take a look at what's going on.

We have two parts to our code, and each of these parts is called a function. A function is basically a set of processes that are grouped together. You can nest multiple other functions inside a function, like Russian dolls.

For example, in real life you might have a function called myFunction. It might look like this:

function myFunction() {
    doSomething();
    doAnotherThing();
}

‘myFunction’ is the name of our function. You can call a function anything you like as long as it doesn't share its name with another function, but it's best to make it easy to remember to make things easier for yourself when you come back to your code. To make sure the computer knows that it's a function we will write ‘function’. After the name of your function, you will need to write (). This seems pointless now, but it comes in handy as a space for feeding your functions extra information if they need it. At this point, don't worry too much about these brackets.

After this set of brackets, there's an opening { curly bracket, and at the end of the function there's a closing } curly bracket. Between these is everything we want to happen when we run our function. Everything in a function happens from top to bottom.

Back to our P5 functions!

P5 has some special functions built in already to get you started quickly, without having to do loads of laborious setting up. There are two important functions in particular that you will use in 99.9% of all of your sketches: setup and draw.

Setup is run once, when the sketch is first loaded. This is where you will set up your 'canvas' for your sketch, and load in things like images that you want to use later in the code. Because setup is only run once, it can only create something which is static on the page.

In this sketch, we're telling the canvas to make a canvas that is 400 pixels wide and 400 pixels high.

createCanvas( *canvas width*, *canvas height* );

After setup has run once, draw runs continuously over and over again, 30 times every second. This means it can keep on running until we press stop, without us needing to tell the computer exactly when to run it.

The code inside draw basically draws another layer on top of our existing canvas. It can't change or undo layers that are already there but it can paint over them with a completely new layer, or paint over parts of them. Think of it like a stop-frame animation.

The reason why we can't see our canvas moving in the current sketch is that all that draw is doing here is drawing a grey background over the grey background from the previous frame each time draw runs.

The number 220 is telling the computer what colour to make the background. These numbers are based on how much light the screen is producing, from 0 (darkest) to 255 (lightest).

Step 3: writing code

Now we've covered the basics, let’s try rewriting some of our sketch.

First, let's try changing the colour of our background. Replace 220 with any whole number between 0 and 255 and press the play symbol.

Exciting!

Now, let’s create a variable to hold our colour value in. Create a new line at the top of your sketch and type:

var colourValue = 0;

In the brackets after ‘background’, replace the number with ‘colourValue’, so it reads:

background( colourValue );

Press play again, and voila! The computer has taken the value from colourValue, and used it as the background!

See it here if you're lost!

Variables are useful for storing values and data that you might need later. You can change the value of a variable later on if you need to.

Like functions, you need to tell the computer that you're making a variable, by writing 'var' before its name, when you declare it. Think of variables as like using algebra terms like x and y. You always need to declare the meaning of variables before trying to use them, otherwise the computer won't know what data it's working with (and it will give you an error message). This is why we put our variable at the top of the code.

var myVariable = 10;

Sometimes, you won't know the value of your variable at the start, and you will assign it a value later. In these cases you can declare just the name of your variable after 'var' (so the computer knows it's a variable and not a function.

var myVariable;

You will still need to give it a value before you try to use it though or the computer will get cross. After declaring your variable the first time, you should just write its name without the 'var'.

var myVariable;
...
function myFunction() {
   myVariable = 10;
   doSomethingWithMyVariable;
}

You can call your variables anything you want, as long as it doesn't have the same name as another function or variable (and again, it's wise to call them something that can be easily remembered).

Step 4: Interactive code!

Next, let’s make a circle that follows our mouse.

There are two very useful variables built into P5 which correspond to the position of the mouse, mouseX and mouseY.

mouseX tells the computer the horizontal position of the mouse, and mouseY tells the computer the vertical position of the mouse.

make a new line under background, and copy + paste the following:

ellipse( mouseX, mouseY, 20, 20);

See it here if you're lost!

Now, let's move the line of code which sets the background into our setup function, and press play.

See it here if you're lost!

Remember what we talked about with the draw function painting over what we already have on our canvas? If we don't paint the background over the top of everything on each frame, the only bit that gets painted over is the area where our circle is following the mouse.

Now let’s have a look at our ellipse. It contains four values, one in each 'slot' separated by commas:

mouseX, mouseY, 20, 20

Try swapping some of these round and see what happens!

Can you work out:

1. Which of the slots controls the height of the ellipse?
2. Which one controls the width?
3. Which one controls the horizontal position?
4. Which one controls the vertical position?

Thank you!

That's the end of the first half of the workshop! For the second half, you will use your new coding knowledge to create your own sketches (using some examples I've provided as starting points if you need to!)

If you're interested in learning how to create any of the interactive backgrounds on this website, click 'edit code' in the bottom right hand corner of the screen. You can click the reload button in the bottom left to see another example.