two options for all

two synths
two bgs/interfaces
two backgrounds

Author: ianmunrobot

app/index.js

@@ -9,6 +9,14 @@ const start = require('./toneCenter').start
 const duoSynth = require('./instruments/duoSynth');
 const tunedSynth = require('./instruments/tunedSynth');
 
+const spacey = require('./grounds/spacey')
+const junkyard = require('./grounds/junkyard')
+
+const grounds = {
+	spacey,
+	junkyard
+}
+
 const views = {
 	spaceCircle,
 	coolBlobs
@@ -19,47 +27,81 @@ const instruments = {
 	tunedSynth
 }
 
+const state = {
+	view: 'spaceCircle',
+	synth: 'duoSynth',
+	ground: ['spacey']
+}
+
+// ids of room members
+const users = {}
+
 // main synth memory
 const synthesizers = {};
 
 // start with audio defaults
 start();
-tunedSynth(synthesizers)
-const drums = require('./grounds/spacey')
+instruments[state.synth](synthesizers)
+
+grounds.spacey.start()
 
 // view click handler
 $('#views a').on('click', function(e) {
-	console.log(this);
+	// update state
+	state.view = this.id
 	// update menu
 	$('#views li').removeClass('active')
 	$(this).parent().addClass('active')
 	e.preventDefault()
 	// reset socket listeners
-	socket.removeAllListeners('serverDown');
-	socket.removeAllListeners('serverDrag');
-	socket.removeAllListeners('serverUp');
+	socket.removeAllListeners('serverDrawDown');
+	socket.removeAllListeners('serverDrawDrag');
+	socket.removeAllListeners('serverDrawUp');
 
 	// reset and repopulate view
 	project.clear();
-	views[this.id]();
+	views[state.view]();
+})
+
+$('#grounds a').on('click', function(e) {
+	e.preventDefault()
+	var $parent = $(this).parent();
+	// update state
+	if ($(this).parent().hasClass('active')) {
+		state.ground.splice(state.ground.indexOf(this.id))
+		console.log('id', this.id, 'grounds', grounds[this.id]);
+		grounds[this.id].stop();
+	} else {
+		state.ground.push(this.id)
+		grounds[this.id].start();
+	}
+	$(this).parent().toggleClass('active')
 
-	// restart synth
-	tunedSynth(synthesizers);
 })
 
 // instrument click handler
 $('#instruments a').on('click', function(e) {
+	// update state
+	state.synth = this.id
 	// update menu
 	$('#instruments li').removeClass('active')
 	$(this).parent().addClass('active')
 	e.preventDefault()
+
 	// reset socket listeners
 	socket.removeAllListeners('serverDown');
 	socket.removeAllListeners('serverDrag');
 	socket.removeAllListeners('serverUp');
 
+	// clear current synths
+	clearSynths()
+	socket.emit('synthChange', state.synth)
+})
+
+socket.on('newSynth', (newSynth) => {
 	// restart synth
-	instruments[this.id](synthesizers)
+	clearSynths();
+	instruments[newSynth](synthesizers)
 })
 
 // set up canvas
@@ -109,4 +151,13 @@ tool.onMouseUp =(event) => {
 		y: event.point.y,
 	}
   socket.emit('mouseUp', outEvent)
+}
+
+function clearSynths() {
+	Object.keys(synthesizers).forEach(id => {
+		Object.keys(synthesizers[id]).forEach(synth => {
+			synthesizers[id][synth].dispose()
+		})
+		synthesizers[id] = {}
+	})
 }

app/views/coolBlobs.js

@@ -59,8 +59,9 @@ module.exports = function() {
   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);
+    // The center position is in one of four columns
+    let column = ((i % 4) / 4)
+    var center = new Point((view.size.width * -1 + view.size.width * column) + (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;
   }
@@ -73,9 +74,21 @@ module.exports = function() {
     }
   }
 
+  view.onResize = (event) => {
+    console.log(event);
+    for (var i = 0; i < count; i++) {
+      var item = project.activeLayer.children[i]
+      // if(i < 5) console.log('before', item.position.x);
+      let column = item.position.x / view.size.width + 1
+      // if (i < 5) console.log(column);
+      item.position.x += (event.delta.width * column)
+      // if (i < 5) console.log('after', item.position.x);
+    }
+  }
+
   // Space Circle Path:
 
-  socket.on('serverDown', function(event) {
+  socket.on('serverDrawDown', function(event) {
     var circlePath = new Path.Circle({
       center: [event.x, event.y],
       radius: 20,
@@ -93,7 +106,7 @@ module.exports = function() {
     }, 300);
   })
 
-  socket.on('serverDrag', function(event) {
+  socket.on('serverDrawDrag', function(event) {
     var last = paths[event.id].past[paths[event.id].past.length - 1]
     var circlePath = new Path.Circle({
       center: [event.x, event.y],
@@ -107,7 +120,7 @@ module.exports = function() {
     }, 300)
   });
 
-  socket.on('serverUp', function() {
+  socket.on('serverDrawUp', function() {
 
   })
 

app/views/spaceCircle.js

@@ -59,7 +59,7 @@ module.exports = function() {
 
 
 	// create drawing events
-	socket.on('serverDown', function(event) {
+	socket.on('serverDrawDown', function(event) {
 		var shadow = new Path();
 		var path = new Path();
 		path.fillColor = {
@@ -90,7 +90,7 @@ module.exports = function() {
 		};
 	})
 
-	socket.on('serverDrag', function(event) {
+	socket.on('serverDrawDrag', 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;
@@ -114,7 +114,7 @@ module.exports = function() {
 
 	})
 
-	socket.on('serverUp', function(event) {
+	socket.on('serverDrawUp', function(event) {
 		var current = paths[event.id].currentPath.path;
 		var shadow = paths[event.id].currentPath.shadow;
 		current.add(new Point(event.x, event.y));

public/css/style.css

@@ -13,4 +13,9 @@ body, html { height:100%; }
 canvas[resize] {
     width: 100%;
     height: 100%;
+}
+
+.navbar-nav {
+  margin-left:30px;
+  margin-right:30px;
 }

server/index.js

@@ -51,14 +51,21 @@ io.on('connection', socket => {
       // on 'draw' add to memory and draw to others in room
       socket.to(room).on('mouseDown', (inEvent) => {
         io.to(room).emit('serverDown', inEvent)
+        io.to(room).emit('serverDrawDown', inEvent)
       })
 
       socket.to(room).on('mouseDrag', (inEvent) => {
         io.to(room).emit('serverDrag', inEvent)
+        io.to(room).emit('serverDrawDrag', inEvent)
       })
 
       socket.to(room).on('mouseUp', (event) => {
-          io.to(room).emit('serverUp', event)
+        io.to(room).emit('serverUp', event)
+        io.to(room).emit('serverDrawUp', event)
+      })
+
+      socket.to(room).on('synthChange', (event) => {
+        io.to(room).emit('newSynth', event)
       })
 
       // log on disconnect