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)
You can see all of this code at our p5js GitHub repo.
Sound Level 1: Circle Size Meter: Visualizes the amplitude of microphone input in realtime (sound loudness) as a circle. Code link
Sound Level 2: Circle Y Location Meter: Visualizes the amplitude of microphone input in realtime (sound loudness) by changing the y-location of a circle. Code link
Sound Level Bubbles 1: Simple: Visualizes the amplitude of microphone input in realtime (sound loudness) as a set of random circles. Code link
Sound Level Bubbles 2: Image: Visualizes the amplitude of microphone input in realtime (sound loudness) as a set of random circles colored by a backing image. Code link
Sound Reactive Flower 1: Sound Level: Visualizes the amplitude of microphone input in realtime (sound loudness) as a set of rotating flower petals. Each petal represents sound loudness at a snapshot in time. Code link
Sound Level Time Series 1: Simple: A very simple visualization of sound level over time. Code link
Sound Level Time Series 2: Axes: Builds on the previous example but adds in axes. Code link
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 Graph 1: Simple: Visualizes the average underlying frequency amplitudes of sound (as measured by microphone input) using logarithmically-sized bins. Code link
Frequency Bar Graph 2: Axes: Builds on the previous example but adds in axes. Code link
Frequency Bar Graph 3: With Classes: Builds on the previous example but uses a more object-oriented approach. Also visualizes and animates peaks. Code link
Frequency Bubbles 1: Simple: Visualizes each FFT frequency bin as a dynamically sized circle proportional to frequency amplitude in that bin. Code link
Frequency Bubbles 2: Image: Visualizes each FFT frequency bin as a dynamically sized circle proportional to frequency amplitude in that bin. Code link
Sound Reactive Flower 2: Frequency: Visualizes the frequency amplitudes of microphone input as dynamically sized flower petals. Each petal is assigned a certain frequency range. Code link
Many of these games were created in 2020 when I first started learning p5js.
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 Logo: a programmatically built logo. Use keyboard commands to turn certain features/layers off.
Makeability Lab - Animation1 - Grid Fade Appearance: a triangle-based grid appears and the ML logo emerges
Makeability Lab Logo - Animation2 - Reverse Explosion: the ML logos start in random places and animate towards their final composition