Merge pull request #4 from ianmunrobot/add-view-#3

closes #3 Add view

Author: ianmunrobot

app/event-emitter.js

@@ -1,17 +1,22 @@
 const Tone = require('tone')
-const EventEmitter = require('./event-emitter')
+
+const socket = require('./socket')
+const spaceCircle = require('./views/spaceCircle')
+const coolBlobs = require('./views/coolBlobs')
 
 StartAudioContext(Tone.context, '#test').then(function(){
 
 })
 
 const drums = require('./basic-beat')
 
-var socket = io(window.location.origin)
-let room = window.location.pathname.slice(1);
 
-// put the socket on global scope (required for paperscript file to access and emit events)
-window.socket = socket
+const canvas = document.getElementById('paperCanvas');
+paper.setup(canvas);
+paper.install(window);
+
+// const drums = require('./basic-beat')
+let room = window.location.pathname.slice(1);
 
 // synthesizer memory
 let synthesizers = {}
@@ -50,8 +55,8 @@ socket.on('populateSynths', (ids) => {
   ids.forEach(id => {
     let newXSynth1 = new Tone.DuoSynth({harmonicity: 1.5}).chain(reverb)
     let newYSynth2 = new Tone.DuoSynth({harmonicity: 1.5}).chain(reverb)
-    newXSynth1.volume.value = -12;
-    newYSynth2.volume.value = -12;
+    newXSynth1.volume.value = -15;
+    newYSynth2.volume.value = -15;
     synthesizers[id] = {
       x: newXSynth1,
       y: newYSynth2
@@ -61,19 +66,55 @@ socket.on('populateSynths', (ids) => {
 
 socket.on('mouseDown', (event) => {
   changeFrequency(event.id, 'x', event.x)
-  changeFrequency(event.id, 'y', event.x * 1.5)
+	changeFrequency(event.id, 'y', event.x * 1.5)
   attack(event.id)
 })
 
 socket.on('mouseDrag', (event) => {
   // console.log(event);
   let amplitude = Math.abs(event.delta[1]) + Math.abs(event.delta[2])
   changeAmplitude(event.id, amplitude)
-
   changeFrequency(event.id, 'x', event.x)
   changeFrequency(event.id, 'y', event.x * 1.5)
 })
 
 socket.on('mouseUp', (event) => {
   release(event.id)
 })
+
+// drawing tool
+
+var tool = new Tool()
+tool.minDistance = 10;
+tool.maxDistance = 30;
+
+tool.onMouseDown = (event) => {
+	var outEvent = {
+		id: socket.id,
+		x: event.point.x,
+		y: event.point.y,
+	}
+  socket.emit('mouseDown', outEvent);
+}
+
+tool.onMouseDrag = (event) => {
+	var outEvent = {
+		id: socket.id,
+		x: event.point.x,
+		y: event.point.y,
+		delta: event.delta,
+		middlePoint: event.middlePoint,
+	}
+  socket.emit('mouseDrag', outEvent)
+}
+
+tool.onMouseUp =(event) => {
+	var outEvent = {
+		id: socket.id,
+		x: event.point.x,
+		y: event.point.y,
+	}
+  socket.emit('mouseUp', outEvent)
+}
+
+coolBlobs();

app/index.js

@@ -0,0 +1,6 @@
+var socket = io(window.location.origin)
+
+// put the socket on global scope (required for paperscript file to access and emit events)
+// window.socket = socket
+
+module.exports = socket

app/socket.js

@@ -0,0 +1,124 @@
+const socket = require('../socket')
+
+module.exports = function() {
+  var paths = {}
+  var count = 20
+  var radiusSize = 100;
+  var shadowBlur = 100;
+
+  var path1 = new Path.Circle({
+    center: [-150, 200],
+    radius: radiusSize,
+    fillColor: 'white',
+    alpha: 0,
+    shadowColor: '#00fca4',
+    shadowBlur: 100,
+    shadowOffset: [view.size.width, 0]
+  });
+
+  var path2 = new Path.Circle({
+    center: [-150, 200],
+    radius: radiusSize,
+    fillColor: 'white',
+    alpha: 0,
+    shadowColor: '#00acfc',
+    shadowBlur: 100,
+    shadowOffset: [view.size.width, 0]
+  });
+
+  var path3 = new Path.Circle({
+    center: [-150, 200],
+    radius: radiusSize,
+    fillColor: 'white',
+    alpha: 0,
+    shadowColor: '#00e003',
+    shadowBlur: 100,
+    shadowOffset: [view.size.width, 0]
+  });
+
+  var path4 = new Path.Circle({
+    center: [-150, 200],
+    radius: radiusSize,
+    fillColor: 'white',
+    shadowColor: '#0011ff',
+    shadowBlur: 100,
+    shadowOffset: [view.size.width, 0]
+  });
+
+  // path1.blendMode = 'darken';
+  // path2.blendMode = 'darken';
+  // path3.blendMode = 'darken';
+  // path4.blendMode = 'darken';
+
+  var symbol1 = new Symbol(path1)
+  var symbol2 = new Symbol(path2)
+  var symbol3 = new Symbol(path3)
+  var symbol4 = new Symbol(path4)
+
+  var symbols = [symbol1, symbol2, symbol3, symbol4]
+
+  for (var i = 0; i < count; i++) {
+    // The center position is a random point in the view
+    var center = new Point((view.size.width * -1 + view.size.width * ((i % 4) / 4)) + (view.size.width / 8), Math.random() * view.size.height);
+    var placedSymbol = symbols[Math.floor(Math.random() * 4)].place(center);
+    placedSymbol.speed = Math.random() * 4 - 2;
+  }
+
+  view.onFrame = (event) => {
+      for (var i = 0; i < count; i++) {
+        var item = project.activeLayer.children[i];
+        item.position.y = item.position.y + item.speed
+        if (item.position.y > view.size.height + 60 || item.position.y < -60) item.speed *= -1
+      }
+  }
+
+  // Space Circle Path:
+
+  socket.on('mouseDown', function(event) {
+    var circlePath = new Path.Circle({
+      center: [event.x, event.y],
+      radius: 20,
+      fillColor: 'cyan',
+    });
+    // create memory queue
+    if (!paths[event.id]) {
+      paths[event.id] = [];
+    }
+    paths[event.id].push(circlePath)
+    window.setTimeout(function() {
+      itemTimeout(circlePath, event.id);
+    }, 300);
+  })
+
+  socket.on('mouseDrag', function(event) {
+    var last = paths[event.id][paths[event.id].length - 1]
+    var circlePath = new Path.Circle({
+      center: [event.x, event.y],
+      radius: 20 + event.delta[1] + event.delta[2],
+      fillColor: last.fillColor,
+    });
+    circlePath.fillColor.hue += Math.floor(Math.random() * 4)
+    paths[event.id].push(circlePath)
+    window.setTimeout(function() {
+      itemTimeout(circlePath, event.id)
+    }, 300)
+  });
+
+  socket.on('mouseUp', function() {
+
+  })
+
+  var itemTimeout = function(pathToRemove, id) {
+    var alpha = 1.0
+    var fadeOut = window.setInterval(function() {
+      if (alpha === 0) {
+        window.clearInterval(fadeOut)
+        pathToRemove.remove()
+        paths[id].unshift()
+      } else {
+        pathToRemove.fillColor.alpha -= 0.1
+        alpha -= 0.1
+      }
+    }, 20)
+  }
+}