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

The goal of this workshop is to help you become aware of some of the tools and techniques that are available in JavaScript and in p5.js, and to practice some of the element of a productive programming workflow. You might never write your own particle system after this workshop! (There are libraries for this, for p5.js and for other platforms.) Rather, the things that we practice today will be useful to you in your programming in general, and can be applied to coding other parts of your project (and to programming outside this course).

You are not expected to remember exactly how to use everything that appears on the screen. Instead, now that you have seen that they exist, you can ask the instructors and others how to do a thing, when you recognize that it may be useful in your own work. Also, after class we will post the code that was used today, so that you can refer back to it.

Set up your workspace

The instructions for configuring Visual Studio Code and Chrome for web development have moved here.

A. Configure Visual Studio Code

  1. Launch Visual Studio Code.

  2. Verify that File > Auto Save is enabled:

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b9265bd8-9364-4e68-aafb-476f535fece6/Untitled.png

  3. Open the Extensions panel ①. Search for the “Live Server” extension ②. Install it ③.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/067e0ba1-215c-4327-983b-8ad632ba7d14/Untitled.png

B. Download the project starter kit

  1. In a terminal, run git clone <https://github.com/osteele/p5-particle-workshop.git>
  2. In Visual Studio Code, open the p5-particle-workshop
  3. In Visual Studio Code, open the sketch.js file.
  4. In Visual Studio Code, click the Go Live button

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/d3447211-c261-47d9-8bc8-e9a160d961b4/Untitled.png

C. Configure Chrome

  1. Chrome (or your preferred browser) should open a tab that displays the sketch. (The current sketch is blank.)

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/5bcbbf60-7309-43b6-971e-e3e87126d280/Untitled.png

  1. Open the JavaScript Console: View > Developer Tools > JavaScript Console. Or, press Command+Option+J (Mac) or Control+Shift+J (Windows).