- Look Here First
- Creating and Editing p5.js Sketches
- Online p5.js Playgrounds
- Using P5.js with Visual Studio Code
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
Creating and Editing p5.js Sketches
You can edit and run your p5.js code in an online editor (such as the P5 Web Editor, OpenProcessing.org, or Glitch) that runs in your web browser; or, in an application that you runs on your computer (such as Visual Studio Code or Atom).
The distinction is similar to the distinction between a web document editor such as Google Docs or Dropbox Paper, and an application such as Microsoft Word or Apple Pages that runs on your computer.
Online p5.js Playgrounds
Some online editors (P5 Web Editor, OpenProcessing.org) are specific to p5.js. They are easy to get started with. You don't have to create an HTML file, so you can focus on the code in your sketch.
Using P5.js with Visual Studio Code
You can also use a code editor, such as Visual Studio Code or Atom, that runs as an application on your own computer.
You may find this preferable if you are already familiar with a code editor, if you have a slow internet connection, or if you prefer to manage your own files – especially if you want to connect these files in your own git repository.
Follow these instructions
- 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