If you've landed here, that probably means you're interested in building your first ml5.js project. If so, wonderful! In p5.js we use the setup. Getting Started with p5. P5.js is for writing software to make images, animations, and interactions. The idea is to write a single line of code, and have a circle show up on the screen.

1. P5 Js Library
2. P5 Js Game
3. P5 Js Button

Foundation

Procedures

p5.js

Random Values

p5.js

Parameters

p5.js

Noise

p5.js

Strategies

p5.js

Exploration

Tile Maps

pencil + paper

Hello, p5!

p5.js + github

Pixel Data

p5.js

Turtle Graphics

p5.js + custom library

Vector Data

paper.js

Animation

p5.js

Generating Text

javascript + html

Comp Sound

p5.js + p5.sound

Comp Music

tone.js

3D Forms

OpenSCAD

Microgames

p5.js + p5.play

Class Resources

This session is for anyone who would like to explore music, visuals and creative coding for the web. We’ll demonstrate types of data we can get from digital signal processing using interactive sketches in p5.js and the p5.sound library that builds upon the Web Audio API. We’ll explore various methods to map this data onto meaningful visuals that enhance our experience of music.

##1. Amplitude### Hello Amplitude | Source Code

Amplitude over time

Amplitude Threshold

Simple Beat Detection

Draw Full Waveform w/ Playhead

Time Domain (Oscilloscope) | Source Code

##2. FrequencyFFT - Fast Fourier Transform### FFT Spectrum Drag, Drop ‘n Analyze | Source Code

FFT Spectrograph

FFT Particle System | Source Code

Scaling the FFT### FFT Scale by Neighbors

FFT Scale by 1/3 Octave

FFT Unknown Pleasures

FFT Particle System Scaled / Seek (Fireworks)

FFT Peak Detect | Source Code

##3. Pitchautocorrelation in the time domain to detect fundamental frequency

Autocorrelate Time Domain | Source Code

Autocorrelation Circle | Source Code

Pitch Track | Source Code

#4. Musical Timingsync music to timestamped lyrics### Display Lyrics | Source Code

Visualizaitons with the Spotify Audio Analysis API (formerly Echo Nest API)### Pre-rendered Analysis (via Echo Nest - Beat + Pitch) | Source Code

Pre-rendered Analysis (via Spotify) - Pitch Segment 1 | Source Code

P5 Js Library

Participants may use whatever tools they wish, but the demos in this repo use the following libraries:

p5.js is a JavaScript library that starts with the original goal of Processing, to make coding accessible for artists, designers, educators, and beginners, and reinterprets this for today’s web. * p5js.org * /learn * /reference * github

p5.sound.js is an addon library that brings the Processing approach to the Web Audio API. * p5.sound documentation * github

p5.dom.js is an addon library that helps us manipulate the DOM. * p5.dom documentation

• Download this github repo, and build off of the empty example sketch in the template folder. It links to the libraries.
• You’ll need a text editor. Some options:

Inspiration:

p5.sound Classes That We’ll Use For Music Visualizations:

P5 Js Game

p5.SoundFile - load and play .mp3 / .ogg files.documentation | source code- loadsound() creates a SoundFile using a Web Audio API buffer. Use during preload(), or with a callback, or with drag and drop.

p5.Amplitude - Analyze volume (amplitude).documentation | source code - .getLevel() returns a Root Mean Square (RMS) amplitude reading, between 0.0 and 1.0, usually peaking at 0.5- .smooth()

p5.FFT - Analyze amplitude over time / frequency.documentation | source code - .analyze() returns amplitude readings from 0-255 in the frequency domain.- .waveform() returns amplitude readings from -1 to 1 in the time domain. demo | source

Music included in the demos/repo:- Yacht - Summer Song (Instrumental) - See Mystery Lights InstrumentalsCreative Commons BY-NC-SA- Broke For Free - As Colorful As Ever - Layers - Creative Commons BY-NC- Alaclair Ensemble - Twit Journalist - This Is America - Creative Commons BY-SA- Peter Johnston - La ere gymnopedie (Erik Satie) - Best of Breitband Vol1- Inara George - Q - Sargent Singles Vol 1Creative Commons BY-NC-SA- For more Creative Commons resources, check out the Free Music Archive’s Guide to Online Audio Resources

• Marius Watz’ Sound As Data workshop with Processing // blog post
• Echo Nest Remix API can get you beats, tatums, regular API has more data about music/artists/songs.
• p5.gibber Rapid music sequencing and synthesis. Also its own live coding environment.
• Tone.js is a JS library for composing interactive music.
• dancer.js is a JS library for audio visualizations.
• heartbeat.js is a JS library for working with MIDI.

Notation* Optical Poem, Oskar Fischinger’s 1938 visualization of Franz Liszt’s “2nd Hungarian Rhapsody”* Notations21* Piano Phase (Alex Chen)* George & Jonathan* dennis.video, generative video by George ^* Stephen Malinowski’s Music Animation Machine* Artikulation (Rainer Wehinger / Gyorgy Ligeti)* animatednotation.com* John Whitney* Mark Fell - Skydancer

Interactive* computer.jazz (Yotam Mann, Sarah Rothberg)* Patatap (Jono Brandel)* jeffro / xtal* Incredibox

Audio* Cymatics* Golan Levin, Zach Lieberman, Jaap Blonk, Joan La Barbara (w/ autocorrelation)* Oscillator Art (TK Broderick)* Music Makes You Travel (makio135)* Ripple* Ryoji Ikeda

Data Sonification* Listening to the Data* Listen to Wikipedia* Metadata - Echo Nest’s Map of Musical Styles* Making Music with Tennis Data* Sonifying the Flocking Algorithm (@b2renger)

Musical Form* The Shape of Song (Martin Wattenberg)* Infinite Jukebox (Paul Lamere / Echo Nest)

P5 Js Button

Lyrics* Solar (Robert Hodgin)* Lyrical Particles (Salem Al-Mansoori)