p5.js
A JavaScript library for creative coding, built for artists and beginners
js is a JavaScript library that reimplements the ideas of the Processing programming language for the web, providing a simple, function-based API for drawing shapes, handling interaction, and creating generative art, animation, and…
Definition
p5.js is a JavaScript library that reimplements the ideas of the Processing programming language for the web, providing a simple, function-based API for drawing shapes, handling interaction, and creating generative art, animation, and creative-coding projects in the browser.
Overview
p5.js was created by Lauren McCarthy in 2013 as a JavaScript reinterpretation of Processing, the influential creative-coding language and environment originally developed by Casey Reas and Ben Fry to make programming accessible to artists, designers, and educators. Rather than adopting JavaScript's more abstract, object-oriented conventions, p5.js exposes a simple, largely function-based global API — `setup()`, `draw()`, `background()`, `ellipse()`, `fill()` — designed to lower the barrier to entry for people without a traditional software engineering background. The library's structure follows a `setup()`/`draw()` loop pattern borrowed directly from Processing: `setup()` runs once to configure the canvas, and `draw()` runs continuously (by default 60 times per second), redrawing the canvas each frame, which naturally supports animation and simulation without manual requestAnimationFrame management. p5.js extends beyond drawing shapes to cover typography, image manipulation, sound (via p5.sound), and basic interaction with mouse, keyboard, and touch events, plus experimental support for WebGL-based 3D drawing. A defining part of the p5.js project is its explicit focus on accessibility and inclusivity in computing education: the p5.js web editor allows writing and running sketches directly in the browser with no local setup, and the project has invested heavily in accessible documentation, screen-reader-friendly canvas descriptions, and educational resources aimed at classrooms and beginners. p5.js is widely used in creative coding communities, art and design education, generative art projects, and data-art visualizations, where its low ceremony and immediate visual feedback make it a popular entry point into programming as well as a practical tool for working artists and designers building interactive or generative pieces.
Key Features
- Simple, function-based global API modeled after the Processing language
- setup()/draw() loop pattern for straightforward animation and simulation
- Built-in drawing primitives for shapes, color, typography, and images
- p5.sound library extension for audio synthesis and analysis
- Mouse, keyboard, and touch interaction handled through simple event variables
- Browser-based p5.js Web Editor requiring no local setup to start coding
- Experimental WebGL mode for basic 3D drawing
- Strong focus on accessibility and computing education