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

• ColorExplorer3D: Explore the RGB color space in 2D and 3D. Code link

Sound

Visualizing Sound Level

Simple Sound Level Meters

• 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

Abstract Sound Visualizations

• 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

Time-series Visualizations

• 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

Waveform Visualizations

• Waveform Vis 1: Simple: Visualizes the waveform currently in the sound buffer. Code link

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 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 Spectrum Line Graphs

• Frequency Spectrum 1: Sound Level: Visualizes the current frequency spectrum in real-time Code link

Abstract Frequency Visualizations

• 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

Visualizing Multiple Sound Properties

• Sound Visualization: Processes microphone input in realtime and shows a scrolling waveform and various frequency visualizations (spectrogram, spectral graph). Writes to an off-screen graphics buffer for performance. Code link.

Perlin Noise

• NoiseGraph: Compare random to Perlin Noise in a scrolling graph. Code link.
• Noise2D: Explore Perlin Noise in 2D. Code link.

Vectors

• Angle Explorer: Shows how to use vectors to calculate angles
• Angle Playground: Draw two arrows and calculate angle between them
• Bouncing balls and line segments: Demonstrates how to use vectors to calculate vectors and reflecting collisions

Computer Vision

• Hand pose demo: demonstration of the ml5js handpose library
• Hand wave recognizer: wave your hand at the camera
• Elmo generator: turn you and your friends into Elmo in realtime! Uses the ml5js PoseNet implementation

Games

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

• Snake: simple Snake game. Code link.
• Pong: simple Pong game. Code link.
• Flappy Bird: simple Flappy Bird game with procedural backgrounds. Code link.
• Cookie Monster: simple 2D game starring my face and Sesame Street's cookie monster. This is my children's favorite game. Inspired by Robotron. Code link
• Simple Keyboard Game: rapid prototype of a simple 2D game like Cookie Monster. Code link.

Sound as input

• FFTGame: use different frequencies (pitches) of sound to launch a ball into the air. Code link

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 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

Makeability Lab Holiday Cards

• Holiday Card 2023: The interactive Makeability Lab holiday card for 2023 morphs a triangular Santa into the Makeability Lab logo. Code link