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.
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.