makeabilitylab / p5js

All things p5js for playing, teaching, and experimenting!

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

p5js's Issues

Auto-generate index to navigate all p5js projects

A simpler version of #2 (which suggests making a thumbnail gallery of all projects).

Discussion on stackoverflow making a simple Python-based site generator:
https://stackoverflow.com/questions/39048654/how-to-enable-directory-indexing-on-github-pages

Gallery for p5js projects

Need to create a navigable gallery for all p5js projects. Would be nice to have search and filtering.

Experiment with auto-deploy of node.js app on cloud services

If we want to support multiplayer games in our prototyping courses, then each team needs a server (seems complicated). There are lots of sites trying to offer servers as a service and, specifically, for node.

Here's how to do it on Microsoft Azure: https://azure.microsoft.com/en-us/resources/videos/create-a-nodejs-site-deploy-from-github/

Lots of other node.js hosting services, however, including:

• https://www.heroku.com/
• https://glitch.com/
  • But it's difficult to setup auto-deploy from github to glitch: https://dev.to/glitch/automating-my-deploys-from-github-to-glitch-2fpd

Add Google Analytics?

Something to consider...

Create a reusable Web Serial class

Create a Web Serial class with various events to process received data, trigger when connection established, etc.

And then refactor sample code that uses web serial to use that class.

The _libraries folder is being excluded by GitHub pages build process

From:

• https://github.community/t/unable-to-access-resources-in-folder-with-name-starting-with/10505
• https://medium.com/@juliakmdev/learning-that-github-pages-struggles-with-certain-file-names-4d867d499ca9

GitHub Pages uses Jekyll by default to build Pages sites. Because of the way that Jekyll works, any files or folders that start with _, ., # or end with ~ are not built:

https://help.github.com/articles/files-that-start-with-an-underscore-are-missing/ 34

If you’re not using Jekyll, you can add an empty file named .nojekyll to the root of your publishing source to avoid this.

If you are using Jekyll, you can use the include directive in your _config.yml file to explicitly include these files/folders:

https://jekyllrb.com/docs/configuration/options/

Node notes

As usual, Daniel Shiffman's introductory videos are awesome. He has one for Node:
https://youtu.be/bjULmG8fqc8

Here's a nice, 7-min video on using Azure cloud services to run a Node app with Express:
https://youtu.be/uuY5j4N78vw

Here's official docs on getting Node app on Azure:

• https://docs.microsoft.com/en-us/azure/app-service/quickstart-nodejs?pivots=platform-linux
• https://azure.microsoft.com/en-us/resources/videos/create-a-nodejs-site-deploy-from-github/

We are going to use the Express—a minimal web framework on top of Node

Auto-deploy to server

Ideally, we'd be able to auto-deploy to Azure, Heroku, or Glitch (etc) using a single github repo (this one) and then setup the auto-deploy infrastructure to just look at a sub-folder within our github repo. Is this possible? Still investigating.

• https://social.msdn.microsoft.com/Forums/en-US/f3dbfb9e-b70f-4409-a118-cc3ebdf985b7/git-deploy-subdirectory?forum=windowsazurewebsitespreview
  • Looks like this is possible on Azure: https://joeraio.com/deploy-azure-web-app-or-azure-function-from-repository-folder/
• Nice blog entry of various methods to do this with Heroku: https://jtway.co/deploying-subdirectory-projects-to-heroku-f31ed65f3f2

Add in control panel sidebar on left side

For landscape generator, sound vis, and other things, would be nice to have a control panel on left side.

Some of Mike Freeman's work has this such as Triangulate (GitHub), which appears to be in React using Material-UI, however.

Get microphone sketches to work. Fix permission issue

The microphone-based sketches aren't working with Chrome? Permissions issue?

• https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#webaudio
• processing/processing-sound#48