Processing p5.js

Processing Foundation

Processing intuition times JavaScript power


p5.dom lets you interact with HTML5 objects beyond the canvas, including video, audio, webcam, input, and text.

p5.sound extends p5 with Web Audio functionality including audio input, playback, analysis and synthesis.


p5.serial enables serial communication between devices that support serial (RS-232) and p5 sketches running in the browser. Created by Shawn Van Every, with contributions from Jen Kagan and Tom Igoe.

p5.collide2D provides tools for calculating collision detection for 2D geometry with p5.js. Created by Ben Moren.

RiTa.js provides a set of natural language processing objects for generative literature. Created by Daniel C. Howe.

p5.geolocation provides techniques for acquiring, watching, calculating, and geofencing user locations for p5.js. Created by Ben Moren.

p5.speech provides simple, clear access to the Web Speech and Speech Recognition APIs, allowing for the easy creation of sketches that can talk and listen. Created by R. Luke DuBois.

With p5.bots you can interact with your Arduino (or other microprocessor) from within the browser. Use sensor data to drive a sketch; use a sketch to drive LEDs, motors, and more! Created by Sarah Groff-Palermo.

grafica.js lets you add simple but highly configurable 2D plots to your p5.js sketches. Created by Javier GraciĆ” Carpio. provides sprites, animations, input and collision functions for games and gamelike applications. Created by Paolo Pedercini.

p5.gif let's you play and manipulate animated gifs in p5.js sketches. Created by Sam Lavigne.

p5.gibber provides rapid music sequencing and audio synthesis capabilities. Created by Charlie Roberts.

The Particle and Fountain objects can be used to create data-driven effects that are defined through user structures or JSON input and user-draw functions. Created by Robert Cook.

Using a library

A p5.js library can be any JavaScript code that extends or adds to the p5.js core functionality. There are two categories of libraries. Core libraries (p5.dom and p5.sound) are part of the p5.js distribution, while contributed libraries are developed, owned, and maintained by members of the p5.js community.

To include a library in your sketch, link it into your HTML file, after you have linked in p5.js. An example HTML file might look like this:

<!doctype html>
  <script src="p5.js">
  <script src="p5.sound.js">
  <script src="sketch.js">

Create Your Own

p5.js welcomes libraries contributed by others! Check out the libraries tutorial for more specifics about how to create one.