ScriptsApr 15, 2026·3 min read

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.

Script Depot
Script Depot · Community
TL;DR
Modern JS library for creative coding and interactive graphics. The browser-native descendant of Processing, no setup needed.
§01

What it is

p5.js is a JavaScript library for creative coding that makes it easy to draw interactive graphics in the browser. It is the modern descendant of Processing, designed for learning, art, data visualization, and creative experiments. A p5.js sketch requires only an HTML file with a script tag -- no build step, no configuration, no package manager.

The library targets artists, designers, students, and developers who want to create visual and interactive content with code. Its API is intentionally simple: createCanvas(), background(), circle(), and line() get you started immediately.

§02

How it saves time or tokens

p5.js eliminates the setup overhead of creative coding projects. No webpack, no npm install, no build configuration. You write a sketch function, include the CDN script, and open the HTML file. For prototyping visual ideas, generative art, or data visualizations, this zero-setup approach means you go from idea to pixels in seconds rather than minutes of tooling configuration.

§03

How to use

  1. Create an HTML file with p5.js from CDN:
<!DOCTYPE html>
<html>
<head>
  <script src='https://cdn.jsdelivr.net/npm/p5@1.10.0/lib/p5.js'></script>
</head>
<body>
<script>
function setup() {
  createCanvas(600, 400);
}

function draw() {
  background(220);
  circle(mouseX, mouseY, 50);
}
</script>
</body>
</html>
  1. Open the file in a browser. A circle follows your mouse.
  1. Build from there: add colors, shapes, animations, and interactivity.
§04

Example

Generative art with seeded randomness:

function setup() {
  createCanvas(800, 800);
  randomSeed(42);
  noLoop();
}

function draw() {
  background(10);
  for (let i = 0; i < 500; i++) {
    let x = random(width);
    let y = random(height);
    let size = random(5, 40);
    let hue = random(360);
    colorMode(HSB);
    fill(hue, 80, 90, 0.5);
    noStroke();
    ellipse(x, y, size, size);
  }
}

The randomSeed(42) ensures the same output every time, making generative art reproducible.

§05

Related on TokRepo

§06

Common pitfalls

  • p5.js creates a global canvas by default. In projects with multiple sketches, use instance mode to avoid global namespace conflicts.
  • The draw() function runs 60 times per second by default. Heavy computations inside draw() cause frame drops. Use noLoop() for static art and frameRate() to control animation speed.
  • p5.js is not designed for production web applications. Use it for creative projects, prototyping, and learning. For production UI, use a framework like React or Vue.

Frequently Asked Questions

What is the difference between p5.js and Processing?+

Processing is a Java-based creative coding environment. p5.js is its JavaScript port that runs in web browsers. p5.js provides the same simple API but with browser-native features like DOM manipulation, WebGL, and web audio.

Can p5.js do 3D graphics?+

Yes. p5.js has a WebGL mode for 3D graphics. Use createCanvas(width, height, WEBGL) to enable 3D rendering with lights, materials, and camera controls.

Is p5.js good for data visualization?+

Yes, for simple and custom visualizations. p5.js gives you full control over every pixel. For standard chart types (bar, line, scatter), libraries like D3.js or Chart.js are more appropriate. p5.js shines when you need custom visual representations.

Can I use p5.js with React?+

Yes, using instance mode. Instead of global setup/draw functions, you create a p5 instance scoped to a specific DOM element. This avoids conflicts with React's DOM management.

Does p5.js require a server?+

No. p5.js runs entirely in the browser. An HTML file with a CDN script tag is all you need. You can open the file directly from your filesystem without any server.

Citations (3)
Related on TokRepo
Design toolsContent toolsFeatured workflows

Discussion

Sign in to join the discussion.
No comments yet. Be the first to share your thoughts.

Related Assets

NAPI-RS — Build Node.js Native Addons in Rust

Write high-performance Node.js native modules in Rust with automatic TypeScript type generation and cross-platform prebuilt binaries.

Script Depot

Mamba — Fast Cross-Platform Package Manager

A drop-in conda replacement written in C++ that resolves environments in seconds instead of minutes.

Script Depot

Plasmo — The Browser Extension Framework

Build, test, and publish browser extensions for Chrome, Firefox, and Edge using React or Vue with hot-reload and automatic manifest generation.

Script Depot
◈Home🔍Search👤Me