p5js

p5js repo for teaching by Jon E. Froehlich. Many of these programs are also available in the p5js editor (in one form or another though typically the code on this page—which is served from GitHub—is more up-to-date)

Some fun examples

You can see all of this code at our p5js GitHub repo.

Color

Sound

Visualizing Sound Level

Simple Sound Level Meters

Abstract Sound Visualizations

Time-series Visualizations

Waveform Visualizations

Visualizing Sound Frequency

You can learn more about analyzing sound frequency using Fast Fourier Transforms here. But you don’t need to understand the underlying mathematics to extract and visualize the underlying frequencies of sound waves in p5js, their FFT library and examples make it easy!

Frequency Bar Graphs

Frequency Spectrum Line Graphs

Abstract Frequency Visualizations

Visualizing Multiple Sound Properties

Perlin Noise

Vectors

Computer Vision

Games

Many of these games were created in 2020 when I first started learning p5js.

Sound as input

Makeability Lab Logos

The Makeability Lab logo is precisely geometric in its foundation, composed solely of triangles and 45 degree angles. I’ve long wanted to programmatically play with this form. Here are some of my experiments:

Makeability Lab Holiday Cards