What is p5.js?

A quick history

In 2001, Casey Reas and Ben Fry created Processing — a programming language designed specifically for visual artists and designers. The goal was radical: make coding approachable for people who think in images, motion, and interaction rather than algorithms and data structures.

Processing worked. Over the next decade it became the standard tool for interactive art, data visualisation, and experimental interfaces. But it ran as a desktop application, and sharing your work meant asking people to install software.

In 2013, Lauren McCarthy created p5.js — a JavaScript library that brings Processing’s philosophy to the web. Same creative approach, same gentle learning curve, but your sketches run directly in a browser. Send someone a link and they see your work instantly.

What can you actually make?

Here is a small sample of what people build with p5.js:

• Generative art — images created algorithmically, different every time
• Data visualisations — turning numbers into shapes and colours that reveal patterns
• Interactive installations — full-screen experiences that respond to mouse, touch, or microphone
• Games — simple or surprisingly complex
• Typography experiments — letters that move, deform, or react
• Music visualisers — real-time graphics driven by audio analysis
• Educational tools — simulations of physics, biology, or mathematics

Browse the p5.js showcase to see hundreds of examples.

p5.js vs raw JavaScript

You could make all of the above with plain JavaScript and the browser’s Canvas API. Here is what drawing a circle looks like in each:

Raw Canvas API:

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(200, 200, 50, 0, Math.PI * 2);
ctx.fillStyle = 'rgba(100, 150, 255, 1)';
ctx.fill();

p5.js:

function setup() {
  createCanvas(400, 400);
}

function draw() {
  fill(100, 150, 255);
  circle(200, 200, 100);
}

Both draw the same circle. The p5.js version reads almost like English, and it comes with a built-in animation loop, mouse/keyboard handling, image loading, sound — all without any configuration.

p5.js vs Processing

If you already know Processing, the transition to p5.js is smooth. Most function names are identical. The key differences are:

Is p5.js “real” programming?

Yes, completely. p5.js is a JavaScript library — the same language that powers most of the web. Everything you learn here transfers directly to web development, Node.js, and beyond.

The creative coding framing just means we care about aesthetics and experimentation as much as correctness and efficiency. Both things matter.

What you’ll need

To follow this tutorial series you need:

1. A web browser (Chrome or Firefox recommended)
2. A text editor, or just the p5.js online editor — no installation required

That’s it. Let’s start building.

Key takeaways

• p5.js is a JavaScript library for creative coding, inspired by Processing
• Your sketches run in any browser — no installation needed for viewers
• It simplifies canvas drawing, animation, and interaction without hiding JavaScript from you
• The same skills transfer to general web development