Art and Code

How to learn the djembe visually

I have been learning the djembe with my friend Ashok Kumar for the last few years. I have always wondered whether we could learn the djembe not only by playing it and by listening to it, but also seeing it visually. So I decided to play with visualising djembe music on the web. Now I have always wanted to do something in the intersection of art and code - and this was great topic. So I coded up some examples and gave a talk at JSFoo conference earlier this year on this topic.

Now music visualisation is not new. Winamp and iTunes have been doing it for years. But they are designed to augment the aural senses with a nice visual display. We should be able to visualise music for not only our aesthetic senses but also for learning the music. And since we all learn differently - aurally, symbolically, visually and kinesthetically - this helps bridge the gap for the more visually inclined. The idea was to explore topics like how can we see sound? Can we see how loud it is? Can we see all parts of it? We can all tap to a beat. Can we find the beat and show it? Can we show the pattern in the beat? Boom Boom Pa!

Ashok was playing the djembe live during the talk and I was doing all of the talking (and coding). For the technically inclined, the talk leverages leverge HTML canvas and javascript web audio API using p5.js. But basically it was a fun talk to explore creative coding to learn new things. If you want you can play with all the examples at djembeviz.amitkaps.com.