# p5.js — JavaScript Library for Creative Coding with a Focus on Accessibility > p5.js is the modern JS descendant of Processing, built for learning, art, and creative coding. Sketch interactive graphics in the browser in a handful of lines — no build step, no setup. ## Install Save as a script file and run: # p5.js — Creative Coding in the Browser ## Quick Use ```html ``` ## Introduction p5.js, initiated by Lauren McCarthy, is the JavaScript descendant of Processing — the creative-coding language born at MIT Media Lab in 2001. p5.js keeps Processing's friendly philosophy ("write 2 functions, make art") while embracing the modern web: browser-native, no installer, no IDE required. With over 23,000 GitHub stars, p5.js is the default tool for creative coding courses, generative art, educational animations, interactive installations, and artists who want to teach themselves programming. It's accessibility-focused by design, with robust support for screen readers and alternative input. ## What p5.js Does You write a `setup()` function (runs once) and a `draw()` function (runs every frame). p5 handles the canvas, animation loop, input, and graphics functions (`circle`, `rect`, `line`, `fill`, `noise`, etc.). Addons add DOM manipulation, WebGL 3D, sound, video, and accessibility hooks. ## Architecture Overview ``` [Browser] | [p5 core] setup() + draw() lifecycle canvas 2D + WebGL contexts input: mouse / touch / keyboard | [Drawing API] circle/rect/line/beginShape/vertex/... fill/stroke/noFill/textFont/... | [Math + utils] map, constrain, noise, random, sin/cos, vectors (p5.Vector) | [Addons] p5.sound — audio + analysis p5.dom — HTML element helpers p5.speech — text-to-speech p5.play, p5.serial, p5.gui, 100+ community libs ``` ## Self-Hosting & Configuration ```javascript // Sketch example: procedural art let particles = []; function setup() { createCanvas(windowWidth, windowHeight); noStroke(); colorMode(HSB, 360, 100, 100, 100); for (let i = 0; i < 300; i++) { particles.push({ x: random(width), y: random(height), vx: random(-1, 1), vy: random(-1, 1), hue: random(360) }); } } function draw() { background(240, 10, 5, 15); // translucent trail for (const p of particles) { p.x += p.vx; p.y += p.vy; if (p.x < 0 || p.x > width) p.vx *= -1; if (p.y < 0 || p.y > height) p.vy *= -1; fill(p.hue, 80, 90, 80); circle(p.x, p.y, 6); } } function mousePressed() { particles.forEach(p => { p.vx = random(-3, 3); p.vy = random(-3, 3); }); } ``` ```bash # Use p5 web editor (zero install) # https://editor.p5js.org/ # Or scaffolding locally: npm init vite@latest my-sketch -- --template vanilla cd my-sketch npm install p5 # import "p5" at top of main.js ``` ## Key Features - **setup() + draw()** — the simplest possible animation loop - **No build step** — drop into an HTML file, done - **Extensive drawing API** — shapes, colors, transforms, text, images - **p5.sound** — audio synthesis, analysis, recording - **WebGL mode** — 3D primitives, shaders, lights, textures - **Accessibility** — built-in hooks for screen readers, label text - **Web editor** — cloud IDE with hot reload, sharing, collaboration - **Massive learning ecosystem** — YouTube (The Coding Train), books, workshops ## Comparison with Similar Tools | Feature | p5.js | Processing (Java) | Three.js | PixiJS | openFrameworks | |---|---|---|---|---|---| | Language | JavaScript | Java | JavaScript | JavaScript | C++ | | Target | Browser | Desktop JVM | Browser | Browser | Desktop | | Learning curve | Very low | Very low | Moderate | Low | Higher | | 3D | Via WebGL mode | Yes | Yes (focus) | No (primarily 2D) | Yes | | Art community | Huge | Huge (older) | Large | Moderate | Moderate | | Best For | Beginners + art | Desktop sketches | Complex 3D scenes | High-perf 2D graphics | Installations + C++ | ## FAQ **Q: p5.js vs Processing?** A: Same philosophy. Processing is Java-based (desktop, exports to Android/JS). p5.js is JS-native (browser-first). New students usually start with p5 because it shares immediately on the web. **Q: Is p5 fast enough for real-time visuals?** A: For thousands of shapes at 60 FPS in canvas 2D — yes. For millions of particles, switch to WEBGL mode and use shaders. For production-grade games, use PixiJS or Three.js. **Q: Can I use p5 with TypeScript?** A: Yes. `npm install p5 @types/p5` and you get full type definitions. The web editor supports only JS, but any Vite/Webpack setup handles TS fine. **Q: Is accessibility really built in?** A: Yes — p5 is the only major creative-coding library with native screen reader support, descriptions for visual output, and keyboard-navigation helpers. A deliberate design choice from the start. ## Sources - GitHub: https://github.com/processing/p5.js - Website: https://p5js.org - Web editor: https://editor.p5js.org - Foundation: Processing Foundation - License: LGPL-2.1 --- Source: https://tokrepo.com/en/workflows/a89a37f1-3862-11f1-9bc6-00163e2b0d79 Author: Script Depot