Starting with p5.js - coordinates, shapes and colors

On this lecture we'll start with the basics of p5.js: how to draw basic shapes on canvas.

Lecture 1 slides

Coordinates shapes and colors

Create an account on Watch the video below and experiment with drawing basic shapes with p5.js.

Tip: you can run your code in the p5 editor by pressing command ⌘ + enter ↵.

Assignment 1

Draw a face:

For the first assignment, use basic shape primitives to draw a face. The aim is to get familiar with the p5 shape primitives, coordinate system and colors so don't be too critical of your creation.

Submit a link to your sketch on MyCourses.

More resources