     bgColor = "rgb(#{Math.round(x * 255)}, 40, #{Math.round(y * 255)})"
     document.body.style.backgroundColor = bgColor
 
+  getXYFromEvent = (e) ->
+    if e.touches?
+      touch =  e.touches[0]
+      rawX = touch.pageX
+      rawY = touch.pageY
+    else
+      rawX = e.pageX
+      rawY = e.pageY
+    x = rawX / window.innerWidth
+    y = rawY / window.innerHeight
+    return rawX: rawX, rawY: rawY, x: x, y: y
+
   Template.controller.events
     'mousedown .controller, touchstart .controller, touchmove .controller': \
         (e) ->
-      if e.touches?
-        touch =  e.touches[0]
-        rawX = touch.pageX
-        rawY = touch.pageY
-      else
-        rawX = e.pageX
-        rawY = e.pageY
-      x = rawX / window.innerWidth
-      y = rawY / window.innerHeight
-      sendChat x: x, y: y
+      e.preventDefault()
+      {rawX, rawY, x, y} = getXYFromEvent(e)
+      sendChat x: x, y: y, noteOn: true
       if window.innerWidth != canvas.width
         canvas.width = window.innerWidth
         canvas.height = window.innerHeight

            IMAGE_SIZE, IMAGE_SIZE
      updateBackgroundColour x, y


    face.src = 'face.png'

    chatStream.on 'message', (message) ->
      [x, y, noteOn] = [message.x, message.y, message.noteOn]
      if noteOn
        synth.playPad(x, y)
      else
        synth.stop()
        return
      updateBackgroundColour(x, y)
      rawX = x * window.innerWidth
      rawY = y * window.innerHeight
