Explore Creative Coding with 30 Hands-On p5.js Sketches

function setup() { // Create an 800x800 canvas createCanvas(800, 800); // Stop looping the draw function initially noLoop(); } function draw() { // Set background color to a light grayish tone background(225); }

Note

This page is best viewed on a larger screen, where you can use the navigation on the left to explore the sketches and the code snippets on the right to see how they were created.

This is a collection of interactive sketches created with p5.js, a JavaScript library for creative coding built on top of the HTML5 canvas. Each sketch demonstrates a different concept or technique, from basic shapes and colors to more complex animations and interactions.

The goal of this project is to demystify the process of creating interesting experiences with code and provide a starting point for your own experiments. Simple concepts can be combined and extended to create complex and beautiful results. I encourage you to open the sketches in the p5.js editor, modify the code, and see how it changes the output. Don't be afraid to experiment and try new things!

Note that this is by no means a comprehensive guide to p5.js. I'd highly recommend The Coding Train by Daniel Shiffman if you're looking for an in-depth tutorial series, regardless of your experience level with coding.

If you enjoy these sketches and want to follow my work, you can see what I've built here or follow me on BlueSky.

Buying me a coffee is also much appreciated - it keeps the lights on for projects like this! ☕️

Key Code Snippet