JSFoo 2015

The future of JavaScript

Amit Kapoor

@amitkaps

Learning djembe visually with p5.js

Submitted Jul 28, 2015

What if we could learn music visually? It would be great if we could learn the djembe not only by playing it and by listening to it, but also seeing it visually. We will use p5.js to visualise music. That’s it.

Outline

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. But what if we could visualise music for not only our aesthetic senses but also for learning the music. We all learn differently - aurally, symbolically, visually and kinesthetically. We will have live djembe play and see if we can all learn music visually together. This is a live demo and what could possibly go wrong!

  • 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!

For the technically inclined, we will leverge HTML canvas and Javascript Web Audio API using p5.js. But basically this is a fun talk to explore creative coding to learn new things.

Requirements

None. Just come and listen and see the music live!

Speaker bio

Amit Kapoor is interested in learning and teaching the craft of telling visual stories with data. He uses storytelling and data visualization as tools for improving communication, persuasion and leadership. He conducts workshops and trainings for corporates, non-profits, colleges, and individuals at narrativeVIZ Consulting. You can find more about him at amitkaps.com and tweet him at @amitkaps

Ashok Kumar is an accomplished djembe - an African drum - player. He has been playing djembe for more than 15 years and has done numerous performances both as a soloist as well as with his band - Shoonya World Music. You can watch him play in this clip and can find more about him at jembeashok.com

Slides

http://djembeviz.amitkaps.com

Comments

{{ gettext('Login to leave a comment') }}

{{ gettext('Post a comment…') }}
{{ gettext('New comment') }}
{{ formTitle }}

{{ errorMsg }}

{{ gettext('No comments posted yet') }}

Hosted by

JSFoo is a forum for discussing UI engineering; fullstack development; web applications engineering, performance, security and design; accessibility; and latest developments in #JavaScript. Follow JSFoo on Twitter more