p5.js and Processing Tutorials, Sketches and Guides

This hub gathers Demos Lab's coverage of p5.js and Processing, the open-source tools that let artists, designers and students sketch with code. You'll find tutorials, annotated sketches and practical advice for building generative and interactive work in JavaScript or Java. It serves beginners drawing their first shape on a canvas and experienced coders who want cleaner, more expressive projects.

What you'll find here

Beginner-friendly tutorials

Walkthroughs start with setup() and draw(), then build toward shapes, color, motion, mouse and keyboard input, and simple animation.

Annotated example sketches

Each sketch is explained line by line so you understand why it works, with ideas for remixing it into something of your own.

OpenProcessing community guides

These pieces cover publishing, forking and learning from sketches on OpenProcessing, plus advice on presenting your work so others can explore and build on it.

JavaScript versus Java workflows

Comparisons show when browser-based p5.js suits a project and when Processing's Java environment is the better choice for installations, high-resolution exports and heavier computation.