Skip to content

A1 - Drawing with p5js

Setting up p5js

In this unit, we will get a gentle introduction to JavaScript using a graphics library called p5js. If you have not already, install the Live Server extension within Visual Studio Code.

Templates for each assignment will be provided to you via the update script you downloaded earlier. You can double click on it right now to download the first assignment, which will go into a new Unit 2 folder. If you open the folder that was created for assignment #1, you will see three files. The one you're going to want to edit for each assignment in this unit is sketch.js.

JavaScript is run in a web browser. To run your code, right-click index.html from within Visual Studio code. This will open a browser window containing your running code. Within the browser, hit F12 (or CTRL+SHIFT+I) to open the error console. This will let you know of any errors that occur in your code.

Getting Started in p5js

In this assignment, you will learn to draw with simple shapes. Start by looking through the examples posted here and here.

Reference for the functions being used here can be found on this page, mostly under the Shape and Color sections.

JavaScript Language Features

While this code is very similar to what you would see in Python, you may notice a few differences in JavaScript.

  • Commented lines begin with // rather than #
  • Some lines can optionally end in a semicolon. While you will see this in some examples, I recommend avoiding semicolons as they can create some difficult problems to debug if used in the wrong places.
  • The function declaration - as described below

Functions and Code Blocks

The function keyword in JavaScript is like the def keyword in Python. It is used to create a subprogram. In both languages, subprogram definitions are followed by a block of code which contains the implementation of the subprogram. In Python, a block of code is specified using indentation. In JavaScript, a block of code is enclosed in curly braces. In fact, JavaScript will run even without proper indentation, although indentation is still crucially important to keep code clear and readable.

Here is a comparison:

Python
def setup():
    # Do stuff here
JavaScript
function setup() {
    // Do stuff here
}

Functions in p5js

The examples we're looking at in this assignment have all code defined inside the setup function. This is a special function in p5js, and runs on startup. In this assignment, all your code will go in the setup function.

If you look at more complex examples, you'll also see a draw function. This function is called once per screen frame, and we'll use it soon when we start looking at animation.

Colour in p5js

There are several functions in p5js that set colour, such as background, fill and stroke. Each of these functions accept colours in variety of formats. These include:

  • A single string argument specifying a CSS colour
  • A single integer argument between 0 and 255, specifying a shade of gray (0 is fully black, 255 is fully white)
  • Three integer arguments between 0 and 255, specifying the intensities red, green, and blue colour components

If you're interested in some more advanced ways to specify colour in p5js, check out its colorMode function.

Your Task (or you can do something different but similar)

Learning Goals

  • Get some experience with p5js shape functions, as well as the fill and stroke functions
  • Get used to the p5js coordinate system

Suggested Task

Open the folder Unit 2/a1 in VS Code, then open the Live Preview to ensure it works (an empty grid should be displayed).

Your task is to modify this program to draw something of your choice. Your drawing should contain

  • at least four different shape functions
  • at least ten shapes in total
  • at least one use each of fill and stroke to add some colour (you can use any of the colour modes shown in the example)

You are welcome to go beyond these specifications as an extension. While I will not be marking you on your artistic ability, you need to produce some sort of coherent image that convinces me that you understand how to use these functions.