This web app is a drum machine I'm building for my 1 year-old daughter Hunter. It is optimized for multi-touch, high DPI (I refuse to write "Retina") devices with sloppy users. Don't worry. It will also work in your desktop browser... one boring 1/1 pixel ratio click at a time. It is built using only native functionality with no plugins or libraries because sometimes it's good to get your hands dirty. That being said, it's written in Coffeescript and Sass because I don't want to get that dirty. It takes advantage of the Web Audio Api for audio playback, Canvas for animations, and SVG for the loading indicator.
To run this app, you'll need node.js installed. After that, you can start up the server by using the Connect plugin for Grunt.
$ npm install
$ grunt
If you'd like to edit any of the CoffeeScript or Sass files, Grunt can watch and compile your project for you. Just make sure to run the watch task.
$ grunt watch
The sprite images were based on the following images from The Noun Project
- Music by Márcio Duarte
- Lightning Bolt by Christopher Reyes
- Cat by Martin LEBRETON
- Drum by Hum
- Smell by Takao Umehara
- Taste by Takao Umehara
- Chicken by Geoffrey Joe
- Tin Whistle by factor[e] design initiative
- Gloves by TNS
Drums by the great Clyde Stubblefield on James Brown's "Funky Drummer." You already knew that though.