p5.js Resources
Educational resources for learning p5.js and JavaScript programming.
Look Here First
The official p5.js documentation is the primary reference for learning p5.js.
Learning JavaScript
p5.js uses the JavaScript programming language. Here are foundational resources for learning JavaScript:
- JavaScript Resources – Tutorials, books, and video series
- The Coding Train – Accessible video introduction to both languages
Tutorials and Examples
- p5.js Tutorials – Animation, interaction, OOP, particles, and more
- p5.js Examples – Code examples for common tasks
Creating and Editing Sketches
You can work with p5.js using either online editors (no setup required) or local applications (for users comfortable with code environments).
Online Playgrounds
Browser-based editors where you don’t have to create an HTML file, so you can focus on the code in your sketch:
- P5 Web Editor – Official p5.js editor
- OpenProcessing.org – Community tutorials and curated collections
- Glitch – Online coding platform
See the Online p5.js Editors page for detailed setup instructions.
Local Development
Visual Studio Code is recommended for local development. See the VSCode setup guide for configuration instructions.
References
Understanding p5.js doesn’t mean memorizing everything. Use references while you code:
Tip: The Kagi and DuckDuckGo search engines both support the !p5 bang to jump straight to the p5.js reference (e.g., !p5 rect).