Introduction to
Creative Coding

This page contains a list of links to terms you will probably find useful on the P5 website. There are loads more you can use if you can’t find what you’re looking for on this page—find the full code reference here.

width — a variable that stores the width of the canvas

height — a variable that stores the height of the canvas

random — generate a random number

random( minimum, maximum );

mouseX — a variable that stores the horizontal position of the mouse.

mouseY — a variable that stores the vertical position of the mouse.

ellipse — Use this function to draw circles and ovals

rect — Use this function to draw squares and rectangles

line — Use this function to draw straight lines

color — a variable that lets you set the colour, in grayscale or rgb (and other colour spaces too)! It's important to remember that the American spelling is used for colour! Each value in a colour can be from 0-255. If you add a fourth value, it controls the opacity (also called the alpha) of the colour. If you use software/apps such as PhotoShop, this will probably come quite easily to you.

color(red, green, blue);
color(red, green, blue, opacity);
color(white);
color(white, opacity);

background — Use this to fill the entire canvas with a colour

fill — Use this to define the fill colour of whatever you draw with next

stroke — Use this to define the outline colour of whatever you draw with next

noFill — Use this to remove the fill of whatever you draw with next

noStroke — Use this to remove the outline of whatever you draw with next

Image — A bit trickier to get them working but once you're comfortable with everything else, try and use some images in your code!