p5.js — JavaScript Library for Creative Coding with a Focus on Accessibility

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

// 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); });
}

# 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

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