Learn P5JS with Real Code Examples

Include p5.js via CDN or download library files

Link p5.js in HTML `<script>` tags

Optional: include p5.dom.js or p5.sound.js for extended features

Use a text editor or online editor like editor.p5js.org

Open HTML file in a web browser to run sketches

Install any code editor (VSCode, Sublime, etc.)

Download p5.js or link via CDN

Optional local server for testing

Organize assets and code files

Open HTML file in browser to test sketches

HTML file linking p5.js

Optional JS files for modular code

Assets folder for images, sounds, videos

README or documentation

Optional CSS for page styling

No CLI required; runs in browser

Optional: use local server to host sketches

Live reload with editor.p5js.org

Debug via browser console

Export sketches via HTML/JS bundle

Supports Unicode characters in canvas

Text can be rendered in multiple languages

Event handling works globally

Assets can include local content

Community examples in various languages

Browser-based, no installation required

Keyboard and mouse accessible

Text-to-speech or sound libraries possible

Open-source and widely documented

Works on most modern devices

Canvas for visuals

Optional DOM elements via p5.dom

Styling via `fill()`, `stroke()`, `textSize()`

Can integrate HTML/CSS for UI

Supports interactive controls like sliders and buttons

Global variables typically store state

`draw()` updates state every frame

Event handlers modify state interactively

Objects and classes help manage complex sketches

Use `push()` and `pop()` to manage transformations

Variables, arrays, and objects hold data

Load external data via `loadJSON()`, `loadTable()`, etc.

Images and sounds stored in assets folder

Data-driven sketches possible

State updated in `draw()` or callbacks