p5.js Labs

p5.js is a graphical programming framework for creating art, visualizations, and interactive experiences rendered to an HTML canvas. Read my notes on p5.js for more.

The p5.js sketches you find below were created as part of Patt Vira's SPARK program.

Sketches

Circles: A simple embellishment on the basic p5.js tutorial
HSL Color Picker: A color picker in HSL color space. interface
Color Wheel: A color wheel with 360 degrees of hues. interface
Grid tools: Working with coordinates in p5.js
Dino Creature: A shapely fellow
Clock: A clock
Scribble: Random scribbles. Hold the mouse or tap to attract the pen.
Step to mouse: Smooth out abrupt changes in mouse input or finger taps by taking gradual steps toward the mouse pointer. We do this by creating and tracking an input target, which is moved closer to the mouse position on each frame. interface
Types of Random: Coloring grids using different types of random number generation. noise is re-seeded when the page is reloaded. deep-dive
Star Field: It's just like that old screensaver
Alien: An alien created with basic shapes
Galactic Explorer: Every journey starts with a single step.
Draggable: Select and drag elements on a canvas. interface
Curves: A comparison of Catmull-Rom splines curve() and Bezier curves bezier(). deep-dive
Dissolve Grid: A grid that appears to dissolve as you mouse over it.
Hands: Basic hand detection with ml5.js, via your webcam. ML models are loaded via a third party website. ml5.jscamera
Sound: Visualizes sound frequencies detected from your microphone. Try it with some classical music! p5.sound.jsmicrophone
Dancers: Silly characters listen and react as you play music. This sketch was tuned for violin but may work with other instruments, or your voice! p5.sound.jsmicrophone
Star Power: Reach out into space. Your hands must be visible in the camera frame. ML models are loaded via a third party website. ml5.jscamera
Flow Field: Particles flow through a field which influences their velocity. flow-field
Rotate and Translate: Rotation and translation behave unintuitively in p5.js. In particular, the order in which you call rotate and translate has a significant impact. This sketch demonstrates the effect of different combinations of rotation and translation. deep-dive
GPS / GPX Visualization: Visualizing GPS track data in GPX format. gps
Create your own flow field: Create your own flow field by painting flow vectors. If you're not sure what a flow field is, take a look at an example interfaceflow-field
Painted Waterfall: Paint on the waterfall to change the colors interfaceflow-field
GPS / GPX Visualization with Map: Visualizing GPS track data in GPX format, overlaid on top of a map. gpsleaflet.js
Hello World with Matter.js: A basic example with matter.js. Note: this does not actually use p5.js at all. matter.js
User Interface: UI Components for p5.js rendered directly on the canvas
River: Draw a river, and watch the scenery come to life. Try writing something in cursive, or sign your name.
Sine Time: An example p5.js sketch that pulls data from a remote endpoint.
Open Hardware Monitor Gauges: Temperature, CPU, and RAM gauges for Open Hardware Monitor.
Peep hole: Look through the hole and see what's behind
K-Means: An exploration of k-means clustering algorithm.
K-Means Animated: An animated exploration of k-means clustering algorithm.
Palettize: Redraw a photo using a limited color palette derived from the image
Git Commit History: A playful visualization of 10 years of git commit history for this website.
Mazes: Maze generators, based on Mazes for Programmers
Leaderboard: It's like the high score screen in your (least?) favorite arcade game. Names borrowed from SSA.gov's most popular baby names.
Parallax: They're glow bracelets, or something...
Baby Names: Popularity of baby names in the United States from 1925 to 2024. Click a name to highlight that name and display the number of babies. (Data from SSA.gov)
Growing Seasons: See when things grow
Artelice Pâtisserie: Sample the flavors of Artelice Pâtisserie.