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:
- p5.js tutorials
- p5.js Books
- The Coding Train is a set of videos that introduce JavaScript and p5.js.
- OpenProcessing.org has tutorials, and curated collections that include additional tutorials, advanced topics.
Also see my 
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
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()orconsole.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
Also see
