Learning djembe visually with p5.js
summary
Claims that live djembe learning becomes visual using p5.js and p5.sound (Web Audio API + HTML canvas). Builds a pipeline from raw mic input: RMS volume → threshold beat detection → FFT on a log scale to separate bass and tone, then maps events to simple tablature. Ships about 10 sketches at gemwaybiz.mitcaps.com. Demo mostly works for learning cues but shows audible pickup (voice, room) and visible lag (projector ~150 ms, 60 fps/animation limits), so detection is approximate not sample‑perfect.
AI-written summary · about
chapters (25)
- 0:00Start
- 2:38How do you learn the djembe?
- 3:07Play the Djembe
- 4:48Count the Notes 4
- 5:47Learning Styles Anything that is worth teaching can be presented in many different ways- Howard Gardner
- 6:29Bridge the Gap Music - Code - Visuals
- 6:41Creative Coding Processing Processing.js
- 7:27p5.js Make coding for the modern web accesible to artists, designer, educators and beginners
- 9:31What does Sound look like?
- 10:09p5.sound Extends p5.js with Web Audio API
- 10:28Volume "Intensity of the sound wave"
- 11:12Can you feel the beat?
- 11:39Beat "A brutal variation in sound energy"
- 12:19Can you find the rhythm?
- 13:30Can we recreate the notation?
- 14:12Notation "To visually represent music through the use of symbols"
- 14:57Algorithm Volume-Beat-Rhythm - Notation
- 15:31Extend the algorithm further
- 16:01Show volume across time
- 16:33Show the volume across frequency
- 17:04Show the volume across freq. log
- 17:46Show the volume Bass & Tone
- 18:22What next?
- 19:10Music Viz Workshop with p5js By Jason Sigal
- 20:01Play your Rhythm
related talks
44mBeats in the Browser - Coding Music with JavaScript
40mLiveJS: Making Music with JavaScript
30mJavaScript Patterns For Contemporary Dance Music
31mBeats in the Browser - Coding Music with JavaScript
24mDrum 'n' JS
25mHow To Be A Web A/V Artist
26mHow To Be a Web AV Artist
25mJavaScript, JavaScript…. Rocks You!