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 2 slides

Coordinates shapes and colors

Create an account on https://editor.p5js.org/. Watch the video below and experiment with drawing basic shapes with p5.js.

Assignment 2

This example is inspired by the work of Casey Reas. In the video below he explains thoughts and ideas behind a few of his generative prints.

For the assignment you will use a ready made particle system template, which you can modify by specifying what kind of shapes are being drawn as the elements of the particle system and what colors are used. Use this code as your template: https://editor.p5js.org/otsohavanto/sketches/r5j8FiHMR. Starting from line 136, use 2d-primitives and colors for drawing the particles. The particle's position is this.pos.x (x-axis) and this.pos.y (y-axis). Submit a p5js.org link to your sketch on MyCourses. Watch the video below for more instructions.