processing/p5.js

> A client-side JavaScript library for creative coding — the web-native reinterpretation of Processing, aimed at artists, educators, and beginners.

GitHub repo · Official website · License: LGPL-2.1

Overview

p5.js is a JavaScript library for drawing and interactive graphics in the browser, created by Lauren Lee McCarthy in 2013 as a web-native interpretation of Processing — the Java-based creative-coding environment built by Casey Reas and Ben Fry¹. Where Processing gave beginners a canvas, a setup()/draw() loop, and a small drawing vocabulary, p5.js maps the same mental model onto the HTML5 <canvas> element and the DOM. It is stewarded by the Processing Foundation and developed almost entirely by volunteers under a rotating-leadership model adopted in 2020².

The library's defining priority is not performance or bundle size but accessibility and pedagogy: friendly error messages, an enormous illustrated reference, a browser-based editor (editor.p5js.org), and an API designed so a first-time programmer can put a circle on screen in four lines. That priority is also its central tension. p5.js is deliberately not a production graphics engine — its global-mode API pollutes the window namespace, its default build ships a large amount of code, and its immediate-mode canvas drawing is not built for the throughput of a game engine or a data-visualization library. It is a teaching and sketching tool that happens to be usable in production, not the other way around.

As of 2026 the library sits at 23.8k stars with an active 2.0 rewrite in beta (beta.p5js.org), which modernizes the internals and introduces breaking changes to the addon and renderer architecture³.

Getting Started

<!-- CDN, global mode — no build step -->
<script src="https://cdn.jsdelivr.net/npm/p5@1/lib/p5.js"></script>
<script src="sketch.js"></script>

npm install p5   # module / bundler usage

// sketch.js — global mode: setup() and draw() are found on window
function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);       // repaint each frame (~60 fps)
  circle(mouseX, mouseY, 80);
}

Architecture / How It Works

p5.js is organized around a single sketch lifecycle: setup() runs once, draw() runs on every animation frame via requestAnimationFrame (default ~60 fps, adjustable with frameRate()). Everything else — input events (mousePressed, keyPressed), the canvas, the renderer — hangs off that loop.

The library exposes two usage modes:

• Global mode — every p5 function and constant (circle, background, mouseX, PI) is attached to window. This is what makes the four-line first sketch possible, and also what makes p5.js awkward to embed: any name collision with your own code or another library is a real hazard.
• Instance mode — new p5((p) => { p.setup = ...; p.draw = ...; }) scopes everything under a passed object. This is the mode you use when p5 is one component of a larger app, but it is not the mode the tutorials teach first.

Rendering goes through a pluggable renderer. The default P2D renderer wraps the 2D canvas context; WEBGL mode switches to a WebGL renderer that adds 3D primitives, camera controls, shaders, and loadModel. A WebGPU renderer is in development for the 2.x line³. The two renderers do not have identical APIs — some 2D functions behave differently or are unavailable under WebGL, which is a recurring source of confusion.

A distinctive internal is the Friendly Error System (FES): p5 wraps its own function calls to detect wrong argument types or counts and print human-readable guidance to the console. FES is a teaching feature, not a free one — it adds runtime overhead and is stripped from the minified p5.min.js build.

Historically p5.js shipped companion modules — p5.dom (HTML element helpers) and p5.sound (Web Audio wrapper). p5.dom was folded into core in the 1.0 line; p5.sound remains a separate addon and is being restructured as p5.sound.js in the 2.0 effort³. The addon pattern — libraries that register themselves onto the p5 prototype — is how the ecosystem extends the core.

Production Notes

It is a sketching library, not an app framework. The global-mode ergonomics that make p5 great for teaching are a liability in a bundled SPA. Prefer instance mode, and expect to fight tree-shaking — the default build is monolithic and most bundlers pull in the whole library regardless of which functions you call.

Bundle size is significant. The full p5.js is on the order of several hundred KB minified; even p5.min.js is heavy relative to a purpose-built canvas wrapper. If you only need to draw a few shapes, p5 is a large dependency to carry.

draw() is an immediate-mode redraw. Every frame clears and repaints. For static output, call noLoop() so draw() runs once; for many moving objects, immediate-mode 2D canvas becomes the bottleneck well before WebGL would. p5 does not retain a scene graph — you are responsible for your own object state.

WebGL mode is not a drop-in. Coordinate origin, text rendering, and several 2D helpers differ or are missing under WEBGL. Porting a 2D sketch to 3D is rarely a one-line change.

The 2.0 migration is a real break. The 2.x rewrite changes renderer internals, the addon system, and some default behaviors. Sketches and third-party libraries written for 1.x should not be assumed to run unmodified on 2.x; pin to p5@1 on the CDN if you need stability³.

Contribution policy is strict on AI. The project does not accept fully AI-generated contributions and requires contributors to understand their own changes — relevant if you plan to submit patches with an assistant⁴.

When to Use / When Not

Use when:

• Teaching or learning programming, generative art, or interactive graphics.
• Prototyping visual/interactive ideas quickly with no build tooling.
• Building creative-coding sketches, installations, or classroom material where the illustrated reference and web editor matter.

Avoid when:

• You need a small, tree-shakeable dependency for a production web app.
• You are building a performance-critical game or a large 3D scene — use a dedicated engine.
• You need a retained scene graph or high-throughput data visualization — the immediate-mode loop is the wrong shape.

Alternatives

• three.js (mrdoob/three.js) — use when your work is genuinely 3D and you need a real WebGL scene graph rather than p5's WEBGL mode.
• paperjs/paper.js — use when you want a retained vector-graphics scene graph with hit-testing and path math rather than immediate-mode drawing.
• pixijs/pixijs — use when you need fast 2D WebGL rendering of many sprites for games or interactive UIs.
• d3/d3 — use when the goal is data-driven visualization with scales, axes, and data binding rather than free-form drawing.
• openframeworks/openFrameworks — use when you want the same creative-coding model natively in C++ for performance or hardware access.

History

References

1. ^ p5.js README and About — "p5.js was created by Lauren Lee McCarthy in 2013 as a new interpretation of Processing for the context of the web." https://github.com/processing/p5.js
2. ^ p5.js People / leadership model — Processing Foundation, rotating leadership since 2020. https://p5js.org/people/
3. ^ p5.js 2.0 beta — https://beta.p5js.org/
4. ^ p5.js AI Usage Policy — "This project does not accept fully AI-generated contributions." https://github.com/processing/p5.js/blob/main/AI_USAGE_POLICY.md

Tags

javascript, creative-coding, canvas, graphics, webgl, generative-art, education, processing, browser, visualization, drawing