Look Here First
Familiarize yourself with the p5.js site for official documentation, examples, and tutorials.
- p5.js tutorials
- p5.js Books
- OpenProcessing.org has tutorials, and curated collections that include additional tutorials, advanced topics.
Also see my
- 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
Also see the Reference section of my
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.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.
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.
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