Learning Music Visually
djembe & creative coding
How do you learn the djembe?
Play the Djembe
Say the Rhythm
- Boom - Pa - Boom Pa
- Boom - Pa - Boom Pa
- Boom - Pa - Boom Pa
- Boom - Boom - Pa
Count the Notes
1 2 3 4 5 6 7 8
b - t - b t - -
b - t - b t - -
b - t - b t - -
b - b - t - - -
Show the Notes
12345678
Qb-s-bs--
Qb-s-bs--
Qb-s-bs--
Qb-b-s---
Learning Styles
“Anything that is worth teaching can be presented in many different ways.” - Howard Gardner
Bridge the Gap
Music - Code - Visuals
Creative Coding
Processing
Processing.js
p5.js
Make coding for the modern web accesible to artists, designer, educators and beginners
Easy to Code*
function setup() {
createCanvas(windowWidth, windowHeight);
}
function draw() {
frameRate(5);
background(17,17,17,40);
fill(231,173,82);
noStroke();
x = random(width);
y = random(height);
ellipse(x, y, 100, 100);
}
What does Sound look like?
Source - NPR Videop5.sound
Extends p5.js with Web Audio API
Create simple music visualizations
Volume
"Intensity of the sound wave"
Volume
Can you feel the beat?
Beat
"A brutal variation in sound energy"
Beat
Can you find the rhythm?
Rhythm
"A strong, regular repeated pattern of sound"
Rhythm
Can we recreate the notation?
12345678
Qb-s-bs--
Notation
"To visually represent music through the use of symbols"
Notation
Algorithm
Volume - Beat - Rhythm - Notation
Extend the algorithm further
Fast Fourier Transform (FFT)
Sample a very small snapshot of sound (buffer) and returns measurement in bins (say, 1024)
Show volume
across time
Across Time
Show the volume
across frequency
Across Frequency
Show the volume
across freq. log
Across Frequency Log
Show the volume
Bass & Tone
Bass & Tone
Remap & Visualise
Bass & Tone
Remap & Visualise
Circular Visualisation
Bass & Tone
Circular Visualisation
What next?
djembeviz.amitkaps.com
Learn more at...
Music Viz Workshop with p5.js
By Jason Sigal
The Nature of Code
By Daniel Shiffman
“I hear and I forget.
I see and I remember.
I do and I understand.”
- Confucius