Resources for 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

JavaScript Resources

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

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.

📝

Online P5.js Editors

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

Visual Studio Code for P5.js

to configure Visual Studio Code for p5.js development.

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

JavaScript Resources

notes.

Also see

p5.js Course Materials

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