Merge pull request #5 from ianmunrobot/refactor-view-memory

Refactor view memory

Author: ianmunrobot

app/index.js

@@ -1,89 +1,61 @@
 const Tone = require('tone')
 
 const socket = require('./socket')
+
 const spaceCircle = require('./views/spaceCircle')
 const coolBlobs = require('./views/coolBlobs')
 
-StartAudioContext(Tone.context, '#test').then(function(){
+const start = require('./toneCenter').start
+const duoSynth = require('./instruments/duoSynth');
 
-})
+const views = {
+	spaceCircle,
+	coolBlobs
+}
+
+// main synth memory
+const synthesizers = {};
 
+// start with audio defaults
+start();
+duoSynth(synthesizers)
 const drums = require('./basic-beat')
 
+// menu click handler
+$('a').on('click', function(e) {
+	// update menu
+	$('li').removeClass('active')
+	$(this).parent().addClass('active')
+	e.preventDefault()
+	// reset socket listeners
+	socket.removeAllListeners('serverDown');
+	socket.removeAllListeners('serverDrag');
+	socket.removeAllListeners('serverUp');
+
+	// reset and repopulate view
+	project.clear();
+	views[this.id]();
+
+	// restart synth
+	duoSynth(synthesizers);
+})
 
+// set up canvas
 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 = {}
-
-//create a synth and connect it to the master output (your speakers)
-var reverb = new Tone.JCReverb(0.25).connect(Tone.Master)
-
-// helper function - change synth frequency
-function changeFrequency(id, direction, frequency) {
-  synthesizers[id][direction].frequency.value = frequency
-}
-
-function changeAmplitude(id, amplitude) {
-  // var newAmp = amplitude * -3
-  // console.log('newAmp:', newAmp);
-  // synthesizers[id].x.volume.value = newAmp;
-  // synthesizers[id].y.volume.value = newAmp;
-}
-
-function attack(id) {
-  synthesizers[id].x.triggerAttack(synthesizers[id].x.frequency.value)
-  synthesizers[id].y.triggerAttack(synthesizers[id].x.frequency.value * 1.5)
-}
+// begin view default
+spaceCircle();
 
-function release(id) {
-  synthesizers[id].x.triggerRelease()
-  synthesizers[id].y.triggerRelease()
-}
+let room = window.location.pathname.slice(1);
 
 // on connection, emit event to join a specific room
 socket.on('connect', () => {
-    socket.emit('create', room);
+	socket.emit('create', room);
 });
 
-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 = -15;
-    newYSynth2.volume.value = -15;
-    synthesizers[id] = {
-      x: newXSynth1,
-      y: newYSynth2
-    }
-  })
-})
-
-socket.on('mouseDown', (event) => {
-  changeFrequency(event.id, 'x', event.x)
-	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
-
+// drawing tool emitters
 var tool = new Tool()
 tool.minDistance = 10;
 tool.maxDistance = 30;
@@ -115,6 +87,4 @@ tool.onMouseUp =(event) => {
 		y: event.point.y,
 	}
   socket.emit('mouseUp', outEvent)
-}
-
-coolBlobs();
+}

app/instruments/duoSynth.js

@@ -0,0 +1,64 @@
+const Tone = require('tone')
+
+const reverb = require('../toneCenter').reverb
+// const synthesizers = require('../toneCenter')
+// console.log('in duo', synthesizers);
+
+const socket = require('../socket')
+
+module.exports = function(synthesizers) {
+
+  // helper function - change synth frequency
+  function changeFrequency(id, direction, frequency) {
+    synthesizers[id][direction].frequency.value = frequency
+  }
+
+  function changeAmplitude(id, amplitude) {
+    // var newAmp = amplitude * -3
+    // console.log('newAmp:', newAmp);
+    // synthesizers[id].x.volume.value = newAmp;
+    // synthesizers[id].y.volume.value = newAmp;
+  }
+
+  function attack(id) {
+    synthesizers[id].x.triggerAttack(synthesizers[id].x.frequency.value)
+    synthesizers[id].y.triggerAttack(synthesizers[id].x.frequency.value * 1.5)
+  }
+
+  function release(id) {
+    synthesizers[id].x.triggerRelease()
+    synthesizers[id].y.triggerRelease()
+  }
+
+  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 = -15;
+      newYSynth2.volume.value = -15;
+      synthesizers[id] = {
+        x: newXSynth1,
+        y: newYSynth2,
+        random: Math.floor(Math.random() * 100)
+      }
+    })
+  })
+
+  socket.on('serverDown', (event) => {
+    changeFrequency(event.id, 'x', event.x)
+    changeFrequency(event.id, 'y', event.x * 1.5)
+    attack(event.id)
+  })
+
+  socket.on('serverDrag', (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('serverUp', (event) => {
+    release(event.id)
+  })
+
+}

app/toneCenter.js

@@ -0,0 +1,17 @@
+const Tone = require('tone')
+
+// const synthesizers = {};
+
+//create a main reverb element
+const reverb = new Tone.JCReverb(0.25).connect(Tone.Master);
+
+var start = function () {
+  StartAudioContext(Tone.context, '#test').then(function(){
+
+  })
+}
+
+module.exports = {
+  start,
+  reverb,
+}

app/views/coolBlobs.js

@@ -1,7 +1,8 @@
 const socket = require('../socket')
+const paths = require('./index')
 
 module.exports = function() {
-  var paths = {}
+
   var count = 20
   var radiusSize = 100;
   var shadowBlur = 100;
@@ -65,56 +66,58 @@ module.exports = function() {
   }
 
   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
-      }
+    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) {
+  socket.on('serverDown', 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] = {
+        past: []
+      };
     }
-    paths[event.id].push(circlePath)
+    paths[event.id].past.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]
+  socket.on('serverDrag', function(event) {
+    var last = paths[event.id].past[paths[event.id].past.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)
+    paths[event.id].past.push(circlePath)
     window.setTimeout(function() {
       itemTimeout(circlePath, event.id)
     }, 300)
   });
 
-  socket.on('mouseUp', function() {
+  socket.on('serverUp', function() {
 
   })
 
   var itemTimeout = function(pathToRemove, id) {
     var alpha = 1.0
     var fadeOut = window.setInterval(function() {
-      if (alpha === 0) {
-        window.clearInterval(fadeOut)
+      if (alpha <= 0) {
         pathToRemove.remove()
-        paths[id].unshift()
+        paths[id].past.unshift()
+        window.clearInterval(fadeOut)
       } else {
         pathToRemove.fillColor.alpha -= 0.1
         alpha -= 0.1

app/views/index.js

@@ -0,0 +1,4 @@
+ // main paths memory
+ var paths = {}
+
+ module.exports = paths;

app/views/spaceCircle.js

@@ -1,7 +1,7 @@
 const socket = require('../socket')
+const paths = require('./index')
 
 module.exports = function() {
-	var paths = {}
 	// The amount of circles we want to make:
 	var count = 100;
 
@@ -59,7 +59,7 @@ module.exports = function() {
 
 
 	// create drawing events
-	socket.on('mouseDown', function(event) {
+	socket.on('serverDown', function(event) {
 		var shadow = new Path();
 		var path = new Path();
 		path.fillColor = {
@@ -85,7 +85,7 @@ module.exports = function() {
 		};
 	})
 
-	socket.on('mouseDrag', function(event) {
+	socket.on('serverDrag', function(event) {
 		var middlePoint = new Point(event.middlePoint[1], event.middlePoint[2])
 		var step = new Point(event.delta[1] / 2, event.delta[2] / 2)
 		step.angle += 90;
@@ -109,7 +109,7 @@ module.exports = function() {
 
 	})
 
-	socket.on('mouseUp', function(event) {
+	socket.on('serverUp', function(event) {
 		var current = paths[event.id].currentPath.path;
 		var shadow = paths[event.id].currentPath.shadow;
 		current.add(new Point(event.x, event.y));
@@ -139,6 +139,7 @@ module.exports = function() {
 				paths[id].past.unshift()
 			} else {
 				pathToRemove.fillColor.alpha -= 0.05
+				alpha -= 0.05
 			}
 		}, 50)
 	}

index.html

@@ -6,15 +6,38 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <meta name="description" content="">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
   <link rel="stylesheet" type="text/css" href="css/style.css">
+  <script type="text/javascript" src="jquery/jquery.min.js"></script>
   <script type="text/javascript" src="socket/socket.io.js"></script>
+  <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
   <script type="text/javascript" src="paper/paper-full.js"></script>
   <script type="text/javascript" src="startaudiocontext/StartAudioContext.js"></script>
 </head>
 <body>
   <div id="test">
     <canvas id="paperCanvas" resize="true"></canvas>
   </div>
+  <nav class="navbar navbar-inverse">
+  <div class="container-fluid">
+    <!--<div class="navbar-header">
+      <a class="navbar-brand" href="#">WebSiteName</a>
+    </div>-->
+    <ul class="nav navbar-nav">
+      <!--<li class="dropdown">
+        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
+        <span class="caret"></span></a>
+        <ul class="dropdown-menu">
+          <li><a href="#">Page 1-1</a></li>
+          <li><a href="#">Page 1-2</a></li>
+          <li><a href="#">Page 1-3</a></li>
+        </ul>
+      </li>-->
+      <li class="active"><a id="spaceCircle" href="#">circles</a></li>
+      <li><a id="coolBlobs" href="#">blobs</a></li>
+    </ul>
+  </div>
+</nav>
   <script type="text/javascript" src="js/bundle.js" charset="utf-8"></script>
 </body>
 </html>