add drumpad demo

tmpvar · Aug 18, 2012 · 296c4be · 296c4be
1 parent 8b1d60f
commit 296c4be
Show file tree

Hide file tree

Showing 13 changed files with 152 additions and 4 deletions.
diff --git a/demos/drumpad/README.md b/demos/drumpad/README.md
@@ -0,0 +1,36 @@
+dancey-dots
+===========
+
+play with the app here: http://whichlight.synth_fun.jit.su/
+share the link with the friend to bring them in as well. 
+it is a collective browser synth
+
+background
+----------
+I've wanted to have a collaborative jam session in the browser for a while.  Not
+so much step sequencing, and more making wild sounds.  It started with the idea
+of droning together, and then grew from there.  So I'm really excited to share
+this.  it is amazing to see what is possible now with node and socketio.  I love interactive art between multiple people, so the most joyful thing
+for me has been to see how people use this, how languages form, and we can form
+little games together from gestures.   
+
+its also pretty wild playing with someone else here anonymously.
+You'll find a lot of personality can be embedded in a dot that makes sounds. 
+
+
+technicals
+----------
+I use a node.js server and socket.io.  The mouse positions are shared and map
+to a synth.  The synth uses the web audio api, so currently it only works in
+chrome.
+
+todo
+----
+currently it scales to about five people, and then it lags.  I'm sure there are
+ways to optimize the synth and the message passing.  Thats what I plan on
+working on next, and any insights are welcome. 
+
+
+author
+------
+Kawandeep Virdee, @kawantum , www.whichlight.com
diff --git a/demos/drumpad/clap.wav b/demos/drumpad/clap.wav
diff --git a/demos/drumpad/ding.wav b/demos/drumpad/ding.wav
diff --git a/demos/drumpad/hihat.wav b/demos/drumpad/hihat.wav
diff --git a/demos/drumpad/index.html b/demos/drumpad/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
+<!-- Consider specifying the language of your content by adding the `lang` attribute to <html> -->
+<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
+<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
+<!--[if IE 8]>    <html class="no-js lt-ie9"> <![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
+<head>
+
+    <meta charset="utf-8">
+    <title>tpad drumpad</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width">
+
+</head>
+<body>    
+  <audio id="kick" src="kick.wav"></audio>
+  <audio id="ding" src="ding.wav"></audio>
+  <audio id="snare" src="snare.wav"></audio>
+  <audio id="hihat" src="hihat.wav"></audio>
+  <audio id="clap" src="clap.wav"></audio>
+  <script type="text/javascript" src="/socket.io/socket.io.js"></script>
+  <script type="text/javascript" src="main.js"></script>
+</body>
+
+</html>
diff --git a/demos/drumpad/index.js b/demos/drumpad/index.js
@@ -0,0 +1,12 @@
+var tpad = require('../../lib/tpad')
+var color = require('color')
+var _ = require('underscore')
+var debounceMilliseconds = 100
+
+tpad.init(function (err, tpad) {
+  tpad.each(function(pad, index) {
+    pad.on('pressure', _.throttle(function(p) {
+
+    }, debounceMilliseconds))
+  })
+})
diff --git a/demos/drumpad/kick.wav b/demos/drumpad/kick.wav
diff --git a/demos/drumpad/main.css b/demos/drumpad/main.css
@@ -0,0 +1,11 @@
+#container{
+	font-family:helvetica;	
+	margin: 0px auto;
+	width:650px;
+}
+
+.mouse{
+	height=10px;
+	width=10px;
+	background-color:pink;
+}
diff --git a/demos/drumpad/main.js b/demos/drumpad/main.js
@@ -0,0 +1,22 @@
+try {
+	var context = new webkitAudioContext()
+}
+catch(err){
+	alert("this uses the web audio API, try opening it in google chrome \n\n <3 whichlight" );
+}
+
+var socket = io.connect('http://localhost:8000')
+
+var sounds = {
+  0: document.querySelector('#ding'),
+  1: document.querySelector('#snare'),
+  2: document.querySelector('#hihat'),
+  3: document.querySelector('#clap')
+}
+
+socket.on('hit', function(hit) {
+  console.log(+new Date())
+  var element = sounds[hit.pad]
+  element.currentTime = 0
+  element.play()
+})
diff --git a/demos/drumpad/package.json b/demos/drumpad/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "synth_fun",
+  "subdomain": "whichlight.synth_fun",
+  "scripts": {
+    "start": "server.js"
+  },
+  "version": "0.0.0-9",
+  "engines": {
+    "node": "0.6.x"
+  },
+  "dependencies": {
+    "socket.io": "0.9.x"
+  }
+}
diff --git a/demos/drumpad/server.js b/demos/drumpad/server.js
@@ -0,0 +1,28 @@
+var http = require('http')
+var socketio = require('socket.io')
+var fs = require('fs')
+var tpad = require('../../lib/tpad')
+var color = require('color')
+var ecstatic = require('ecstatic')(__dirname)
+
+tpad.init(function (err, tpad) {
+  var enabled = {0: true, 1: true, 2: true, 3: true}
+  tpad.each(function(pad, index) {
+    pad.on('pressure', function(p) {
+      console.log(p.value)
+      if (p.value === 0) return enabled[index] = true
+      if (!enabled[index]) return
+      enabled[index] = false
+      io.sockets.emit('hit', {pad: index, value: p.value})
+    })
+  })
+})
+
+var server = http.createServer(function(req, res) {
+  if (req.url.match(/socket\.io/)) return
+  ecstatic(req, res)
+})
+var io = socketio.listen(server)
+io.set('log level', 1)
+console.log('Listening on :8000')
+server.listen(8000)
diff --git a/demos/drumpad/snare.wav b/demos/drumpad/snare.wav
diff --git a/package.json b/package.json
@@ -23,15 +23,14 @@
     "optimist": "~0.3.4",
     "semver": "1.0.14",
     "request": "~2.10.0",
-    "chip.avr.lufacdc": "0.0.1"
+    "chip.avr.lufacdc": "0.0.1",
+    "ecstatic": "0.1.6",
+    "socket.io": "0.9.10"
   },
   "bin": {
     "tpad": "./bin/tpad"
   },
   "devDependencies": {},
-  "optionalDependencies": {
-    "midi": "~v0.5.0"
-  },
   "engines": {
     "node": "*"
   }