3:2 Lets just make something

Its sometimes great to learn by just jumping in with both feet. If this is too much and you like to learn all the fundamentals first, thats fine, just skip this. Some people want to immediately see something fun - thats ok too.

To follow along copy/type this code out in the p5js editor. That way you can save your own version of the code (make sure you log in first):

https://editor.p5js.org/

Make a sketch with a background colour

Start by colouring a canvas, the background of your sketch. Check out the reference for different ways to colour a background. We are going to start by typing in some RGB values:

background(237, 34, 93);

put this code in the draw function (though it will work in both setup and draw, but the draw function allows it to update in real time later on).

Make a square in your sketch

To make a square we use this code:

square(100, 100, 200)

This makes a square with x position 100px, y position 100px and 200px in width and height.

Now we have a square that is positioned just right so that its in the centre of the canvas. Notice squares position from the top left corner by default.

Colour the square

We colour things by using fill(), check the reference for fill to find out more, but we can just play with RGB values for now.

Put this above the square code:

fill(240,220, 60)

You might also want to get rid of the line, in p5js and most software line colour is called stroke. In p5js you can change the colour of the stroke in exactly the same way as fill, see the reference for stroke.

To get rid of the stroke entirely you can do this:

noStroke()

Look at this all together:

Use system variables to make this interactive

System variables in p5js are explained in later sections, but lets have a quick play.

First of all lets use the mouse, we can find out where the mouse currently is with mouseX and mouseY.

Lets stick a circle onto the canvas and set its x and y position with these values:

In the above code try changing the background colour and fill to use these mouseX, and mouseY values. These are just numbers, they go from 0 in the top left to whatever the position of the mouse is in the canvas (up to 400 in this case). We can use these numbers anywhere.

Try this for instance:

background(237, mouseX, mouseY);
fill(mouseX, mouseY, 60);

The reactive square

Here's a full sketch with a few additions.

I added rectMode(CENTER) to make the square position from its centre rather than top left. This makes resizing it more simple.

To position the square in the centre of the screen I could have made its position 200, 200 with rectMode(CENTER) added. However what if we changed the canvas size from 400, 400 to something else. Instead you can use the system variables width and height and divide them by 2 to get the centre instead - much more future proof.

All of these variables and tricks will be really handy in the future when you want full screen interactive things.

Play with this in the p5.js editor here

Next Lesson:

Variables