Further Reading

We’ve only just scratched the surface of what is possible using p5.js. This section includes information about 3rd party p5.js libraries and links to all sorts of example code.

Table of Contents

  1. Community Libraries
  2. Installing Libraries (Local Dev)
  3. Installing Libraries (Web Editor)
  4. Learning Examples
  5. Other Important Links

Community Libraries

The p5js.org website includes a section on all the community libraries you can use with p5.js. There are libraries for animation, geolocation, speech synthesis, GUI toolkits, machine learning, and so much more.

Resources

Installing Libraries (Local Dev)

Although you can manually download libraries to your project folder, the easiest way to install community libraries is using the 🧰 p5.vscode extension.

With your project open in a workspace in VS Code:

  • Open the command pallet (CTRL-SHIFT-P)
  • Then type: Install p5.js Contributor Library and hit enter
  • Select the library you wish to install

The library will be downloaded to the libraries folder and a new <script> tag will be added to your index.html file to load the library.

⚡ Warning:

This only seems to work if you have a single project folder in your VS Code Workspace.

Installing Libraries (Web Editor)

When using the p5.js Web Editor you can install libraries by manually uploading the library’s javascript file(s) and adding the appropriate <script> tag(s) to the index.html.

Some libraries might also provide you with a way to load the script from a content delivery network (CDN). Library readyoume provides you with a script tag that points to a CDN version of the library, then you need only add that script tag to your index.html file.

⚡ Warning:

The new script tags should come after the main p5.js script tag.

Learning Examples

Throughout these notes I’ve linked to a number of example sketches on the official p5js.org website.

The site includes 🏷️ many many more amazing examples you can learn from.

Dan Shiffman’s Coding Train channel on YouTube (also linked to in these notes) is also a great source of p5.js examples and inspiration. He also has a Coding Train website that embeds all his videos with links to the source.