Resources for learning p5.js and JavaScript.
- Look Here First
- Learning JavaScript
- Creating and Editing p5.js Sketches
- Online p5.js Playgrounds
- Using P5.js with Visual Studio Code
- References
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
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
References
“Knowing” p5.js and JavaScript doesn't mean memorizing everything about them. 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
Also see
