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.