p5.js Resources
p5.js Resources
p5.js Resources

p5.js Resources

This is a page of resources for students learning p5.js and JavaScript.

Look Here First

Familiarize yourself with the p5.js site for official documentation, examples, and tutorials.

Learning JavaScript

p5.j use the JavaScript programming languages. These resources teach JavaScript within the context of p5.js:

Also see my

notes, for a list of resources that teach pure JavaScript without reference to p5.js.

References

“Knowing” p5.js and JavaScript doesn't mean memorizing everything about it. Use the following references while you code:

  • p5.js Reference
  • p5.js Cheat Sheet
  • If you use OpenProcessing.org, click the icon and then the book icon.
  • If you use the Duck Duck Go search engine, search for e.g. “!p5 rect” to go straight to the documentation for the rect() function.

Also see the Reference section of my

notes.

Editing p5.js sketches

You can edit and run your p5.js code online, or in an application that you download to your computer.

Online p5.js Playgrounds

Some online editors are specific to p5.js. They are easy to get started with.

  • OpenProcessing.org. This site has good tutorials, and lets you browse other people's portfolios and examples. Notes:
    • Pros: Project history, project description and instructions, easy to add libraries, powerful editing tools (multiple selection, find all matching words).
    • Cons: Does not auto-update (press command-return); does not auto-save (press command-S).
    • In order to see your code and the canvas at the same time, press the icon in the upper right, click Editor, and switch to the second Layout.
    • If an error occurs, or your code uses console.log() or console.write() it will cause the Console to pop up on the bottom of the page. This covers your source code and makes it difficult to edit. Click the at the top right of the console to dismiss it.
    • Warning: this site does not automatically save your work. You will need to press the Save button from time to time.
  • p5.js Web Editor. Notes:
    • Run the p5.js Web Editor in Chrome. In Safari, errors are reported as occurring on line 0. This makes it difficult to develop.
    • This web editor uses an older version of JavaScript. Not every p5.js program will run in it.

Other online editors are more flexible, but also require more work in order to set up a p5.js project.

  • Glitch is good for real-time collaboration. Notes:
    • In order to create a p5.js sketch, remix this template (adapted from one by J.H. Moon). Then edit the sketch.js file.
    • Unlike the playgrounds above, Glitch does not display the console when your program has an error. Follow these instructions to display the JavaScript Console in the browser tab that is running your sketch.

Downloadable Code Editors

You can also use a code editor, such as Visual Studio Code or Atom, on your own computer. You may find this preferable if you are already familiar with a code editor, or you have a slow internet connection.

Follow these instructions

to configure Visual Studio Code for web JavaScript development. Download or clone this p5.js Template (GitHub) to create a new p5.js project.

Also see

for libraries, examples, and tutorials that I've developed for my courses.