Learn

These tutorials provide more in-depth or step-by-step overviews of particular topics. Check out the examples page to see short demonstrations of various p5.js topics.

Introduction to p5.js

Getting Started

Welcome to p5.js!
This introduction covers the basics of setting up a p5.js project.

p5.js overview

An overview of the main features of p5.js.

p5.js and Processing

The main differences between the two, and how to convert from one to the other.

Using a local server

How to set up a local server on Mac OSX, Windows, or Linux.

p5 with a screen reader

Setting up p5 so that it can be used easily with a screen reader.

Connecting p5.js

node.js and socket.io

Using a node.js server with p5.js, communication via socket.io.

Programming topics

Beyond the canvas

Creating and manipulating elements on the page beyond the canvas.

3D/WebGL

Developing advanced graphics applications in p5.js using WEBGL mode.

Color

An introduction to digital color.

Coordinate System and Shapes

Drawing simple shapes and using the coordinate system.

Curves

An introduction to the three types of curves in p5.js: arcs, spline curves, and Bézier curves.

Interactivity

Introduction to interactivity with the mouse and keyboard.

Program Flow

Introduction to controlling program flow in p5.js.

Becoming a better programmer

Debugging

Field guide to debugging for everyone.

Optimizing p5.js code for performance

A tutorial of tips and tricks for optimizing your code to make it run faster and smoother.

Unit testing and test driven development

Save yourself from agony on install day. What is unit testing and how to use it? By Andy Timmons.

Contributing to the community

Development

Getting started and overview for contributing to development.

Looking inside p5

A friendly intro to the file structure and tools for p5.js development, by Luisa Pereira.

Writing a tutorial

A guide to writing a p5.js programming tutorial.

Creating libraries

Creating p5.js addon libraries.

Language Settings