p5.js Particle Workshop

During this workshop, you will start from an empty p5.js web page and progress through a series of “particle systems” animations.

This workshop introduces JavaScript and p5.js tools through a sequence of particle animations. You will practice variables, functions, objects, iteration, randomness, and a code-and-browser workspace. These techniques also apply to other parts of your project; you do not need to build your own particle system after the workshop.

You do not need to memorize every technique. The goal is to recognize when a technique may help, then consult an instructor, the p5.js reference, or the workshop code posted after class.

Open the workshop

Install p5.js Sketchbook & Live Preview in Visual Studio Code. Then open an editable copy of the workshop:

Open in p5.js Sketchbook

Visual Studio Code asks where to save the copy and whether you want to trust it. The Sketch Explorer groups the numbered stages as runnable sketches. Select 01-follow-the-mouse.js to open it beside its preview.

You can also clone the workshop repository and open its folder in Visual Studio Code.

Live Coding

Follow along as we create setup and draw functions and use the p5.js reference to create images and animations. The numbered sketches preserve each stage for review after class.

Note: In the first studio (PoseNet) project, p5.js functions had to be prefixed with p5.: for example, p5.rect(50, 50, 10, 10). In this project, functions must be written without this prefix: for example, rect(50, 50, 10, 10).

After Class

Workshop notes: part 1, part 2, page 3

Intended takeaways

• Practice using variables

• Some examples of when and how to create a function

• Using JavaScript objects to make more than one of a thing

• Using forEach to do the same thing to several objects

• Using map to create several objects

• Using Math.floor and the modulus (%) operator to lay out objects

• Using Math.random to add randomness

• Using mouseX and mouseY to add interactivity.

  Note: Our class projects will not make use of the mouse. The mouse, today, is a stand-in for data that will come from other sources.

• Configuring a workspace (editor and browser) for productive coding