new init 3

.gitignore

@@ -62,3 +62,7 @@ typings/
 
 #osx
 .DS_Store
+
+#atom
+.tern-project
+.tern-port

.tern-port

@@ -1 +0,0 @@
-42697

index.js

@@ -1,56 +1,14 @@
-//NOTE: SERVER CONFIGURATION has 2 options. ENABLE 1 of 2 options
+//NOTE: SERVER CONFIGURATION for heroku..
-
-// //NOTE: option (1) - https server (443) + redirection 80 to 443
-//
-// //prepare credentials & etc
-// var fs = require('fs');
-// var https = require('https');
-// var privateKey = fs.readFileSync('/etc/letsencrypt/live/choir.run/privkey.pem', 'utf8');
-// var certificate = fs.readFileSync('/etc/letsencrypt/live/choir.run/fullchain.pem', 'utf8');
-// var credentials = {
-//   key: privateKey,
-//   cert: certificate
-// };
-//
-// //https WWW server @ port 443
-// var express = require('express');
-// var app = express();
-// var httpsWebServer = https.createServer(credentials, app).listen(443, function() {
-//   console.log('[express] listening on *:443');
-// });
-//
-// //http Redirection server @ port 80
-// //  ==> Don't get why this works.. all others not. ==> https://stackoverflow.com/a/23283173
-// var http = require('http');
-// var httpApp = express();
-// var httpRouter = express.Router();
-// httpApp.use('*', httpRouter);
-// httpRouter.get('*', function(req, res) {
-//   var host = req.get('Host');
-//   // replace the port in the host
-//   host = host.replace(/:\d+$/, ":" + app.get('port'));
-//   // determine the redirect destination
-//   var destination = ['https://', host, req.url].join('');
-//   return res.redirect(destination);
-// });
-// var httpServer = http.createServer(httpApp);
-// httpServer.listen(80);
-//
-// //https socket.io server @ port 443 (same port as WWW service)
-// var io = require('socket.io')(httpsWebServer, {
-//   'pingInterval': 1000,
-//   'pingTimeout': 3000
-// });
-
-//NOTE: option (2) - simple http dev server (8080)
-
 var http = require('http');
 var express = require('express');
 var app = express();
 var httpServer = http.createServer(app);
-httpServer.listen(process.env.PORT || 8080);
+httpServer.listen(process.env.PORT || 5000);
+// heroku will auto-assign a port number: process.env.PORT
+// heroku local will serve the app @ port == 5000, by default (this is heroku's preference)
+// regular node index.js will serve the app @ port == 5000, as description above.
 
-//http socket.io server @ port 8080 (same port as WWW service)
+//http socket.io server (same port as WWW service)
 var io = require('socket.io')(httpServer, {
   'pingInterval': 1000,
   'pingTimeout': 3000
@@ -78,17 +36,6 @@ io.on('connection', function(socket) {
     console.log('sound.group :' + sound.group);
   });
 
-  //on 'pan'
-  socket.on('pan', function(pan) {
-
-    //relay the message to everybody EXCEPT the sender
-    socket.broadcast.emit('pan', pan);
-
-    //DEBUG
-    console.log('pan.width :' + pan.width);
-    console.log('pan.speed :' + pan.speed);
-  });
-
   //on 'clap' --> relay the message to everybody INCLUDING sender
   socket.on('clap', function(clap) {
 

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "scroll-link-server",
+  "name": "sound-mixing-bowl-server",
   "version": "1.0.0",
   "lockfileVersion": 1,
   "requires": true,

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "scroll-link-server",
+  "name": "sound-mixing-bowl-server",
   "version": "1.0.0",
   "description": "",
   "main": "app.js",

public/sample/.tern-port

@@ -1 +0,0 @@
-42761

public/sample/index.js

@@ -4,18 +4,24 @@
 
 $(document).ready(function() {
 
-  //common metrics
+  //networking - socket.io
+  var socket = io('https://sound-mix.herokuapp.com');
+
+  //metrics related to 'view size'
+  // 'coarse'
   var vs = view.size;
   var vsw = vs.width;
   var vsh = vs.height;
+  // 'fine'
   var vss = view.size / 10;
   var vssw = vss.width;
   var vssh = vss.height;
 
-  //pre-load resources
+  //pre-load resources (images + audios)
   Promise.all([
+
     //imgs
-    RasterImport_size1('./imgs/phonehand.png'),
+    RasterImport_size1('./imgs/logo.png'),
     SVGImport_size1('./imgs/arrow-circle-right.svg'),
     SVGImport_size1('./imgs/arrow-circle-left.svg'),
     SVGImport_size1('./imgs/hand-point-right-regular.svg'),
@@ -24,28 +30,23 @@ $(document).ready(function() {
     SVGImport_size1('./imgs/minus.svg'),
     SVGImport_size1('./imgs/faster.svg'),
     SVGImport_size1('./imgs/slower.svg'),
+
     //clap
     AudioImport_p5("./audio/clap@2/" + ("0" + getRandomInt(1, 2)).slice(-2) + ".mp3"),
-    //beach_sounds page 1 ==> 7
+
-    AudioImport("./audio/검은산_다급.mp3"),
+    //sounds page ==> 7
-    AudioImport("./audio/검은산_뚜루.mp3"),
+    AudioImport("./audio/01.mp3"),
-    AudioImport("./audio/검은산_부엉.mp3"),
+    AudioImport("./audio/02.mp3"),
-    AudioImport("./audio/검은산_불안.mp3"),
+    AudioImport("./audio/03.mp3"),
-    AudioImport("./audio/검은산_쏟아짐.mp3"),
+    AudioImport("./audio/04.mp3"),
-    AudioImport("./audio/고요6.mp3"),
+    AudioImport("./audio/05.mp3"),
-    AudioImport("./audio/고요7.mp3"),
+    AudioImport("./audio/06.mp3"),
-    //beach_sounds page 2 ==> 7
+    AudioImport("./audio/07.mp3"),
-    AudioImport("./audio/기정_과자봉지소리.mp3"),
-    AudioImport("./audio/기정_라디오.mp3"),
-    AudioImport("./audio/기정_물소리(붓).mp3"),
-    AudioImport("./audio/기정_악기.mp3"),
-    AudioImport("./audio/고요12.mp3"),
-    AudioImport("./audio/고요13.mp3"),
-    AudioImport("./audio/고요14.mp3"),
     //
   ]).then(function(imports) {
+
     //imgs
-    var phonehand = imports[0];
+    var logo = imports[0];
     var anext = imports[1];
     var aprev = imports[2];
     var hand = imports[3];
@@ -54,52 +55,40 @@ $(document).ready(function() {
     var minus = imports[6];
     var faster = imports[7];
     var slower = imports[8];
+
     //clap
     var clap = imports[9];
-    //beach list
+
-    //NOTE: beware! same key is not allowed!! every keys should have different name!!
+    //audio-files dictionary {key: value}
-    var beach_sounds = {
+    //N.B.: Duplicate keys are not allowed!
-      '검은산_다급': imports[10],
+    //      i.e. if '01' appearing twice will be a problem.
-      '검은산_뚜루': imports[11],
+    var sounds = {
-      '검은산_부엉': imports[12],
+      '01': imports[10],
-      '검은산_불안': imports[13],
+      '02': imports[11],
-      '검은산_쏟아짐': imports[14],
+      '03': imports[12],
-      '고요6': imports[15],
+      '04': imports[13],
-      '_소리의_퍼짐______소리의_움직임_1': imports[16],
+      '05': imports[14],
-      '기정_과자봉지소리': imports[17],
+      '06': imports[15],
-      '기정_라디오': imports[18],
+      '07': imports[16],
-      '기정_물소리(붓)': imports[19],
-      '기정_악기': imports[20],
-      '고요12': imports[21],
-      '고요13': imports[22],
-      '_소리의_퍼짐______소리의_움직임_2': imports[23],
     };
-    //NOTE: beware! same key is not allowed!! every keys should have different name!!
+    //audio-players' bank
-    var beach_players = {
+    var players = {
-      '검은산_다급': [],
+      '01': [],
-      '검은산_뚜루': [],
+      '02': [],
-      '검은산_부엉': [],
+      '03': [],
-      '검은산_불안': [],
+      '04': [],
-      '검은산_쏟아짐': [],
+      '05': [],
-      '고요6': [],
+      '06': [],
-      '_소리의_퍼짐______소리의_움직임_1': [],
+      '07': [],
-      '기정_과자봉지소리': [],
-      '기정_라디오': [],
-      '기정_물소리(붓)': [],
-      '기정_악기': [],
-      '고요12': [],
-      '고요13': [],
-      '_소리의_퍼짐______소리의_움직임_2': [],
     };
 
     //screen changer
-    var nscreen = 4;
+    var nscreen = 3;
     var screens = [];
     var screen_names = {};
     screen_names['start'] = 1;
     screen_names['check'] = 2;
-    screen_names['beach1'] = 3;
+    screen_names['sound'] = 3;
-    screen_names['beach2'] = 4;
     var curscreen;
     for (var idx = 0; idx < nscreen; idx++) {
       screens.push(new Layer());
@@ -118,12 +107,10 @@ $(document).ready(function() {
         if (idx == page - 1) {
           screens[idx].bringToFront();
           top.bringToFront();
-          $('.objstring').eq(idx).css('z-index', 1);
           //
           screens[idx].activate();
         } else {
           screens[idx].sendToBack();
-          $('.objstring').eq(idx).css('z-index', -1);
         }
       }
       //pagination buttons
@@ -172,11 +159,6 @@ $(document).ready(function() {
     //top layer
     var top = new Layer(); // new Layer() will be automatically activated at the moment.
 
-    //networking - socket.io
-    //var socket = io('http://192.168.42.20:8080');
-    //var socket = io('http://sound-mix.herokuapp.com:8080');
-    var socket = io('https://sound-mix.herokuapp.com');
-
     //net. connection marker
     var netstat = new Path.Circle({
       center: view.bounds.topRight + [-vssw / 2, +vssw / 2],
@@ -263,7 +245,7 @@ $(document).ready(function() {
     //title - text
     new PointText({
       point: titlebox.bounds.center,
-      content: '  사운드-랩 § soundLab  ',
+      content: '✧*｡٩(ˊᗜˋ*)و✧*｡',
       fillColor: 'white',
       fontFamily: 'AppleGothic, Sans-serif',
       fontWeight: 'bold',
@@ -271,10 +253,10 @@ $(document).ready(function() {
     }).fitBounds(titlebox.bounds);
 
     //hello, screen.
-    phonehand.addTo(project);
+    logo.addTo(project);
-    phonehand.scale(vsw / 1.5);
+    logo.scale(vsw / 1.5);
-    phonehand.position = view.center;
+    logo.position = view.center;
-    //phonehand.position.y -= vssh;
+    //logo.position.y -= vssh;
 
     //screen #2 - check
     changeScreen(2);
@@ -331,7 +313,7 @@ $(document).ready(function() {
     var cur_pan_width = 0;
     var cur_pan_speed = 0;
 
-    //screen #3 - beach page #1
+    //screen #3 - sound page
     changeScreen(3);
     new Path.Rectangle([0, 0], vs).fillColor = '#555';
 
@@ -371,19 +353,6 @@ $(document).ready(function() {
               ],
               onMouseDown: function(event) {
                 var par = this.parent;
-                //NOTE: this DOES NOT sync between web-clients! <-- TBD, yet NOT-IMPLEMENTED !
-                if (par._key == '_소리의_퍼짐______소리의_움직임_1' || par._key == '_소리의_퍼짐______소리의_움직임_2') {
-                  //pan_width: (+)
-                  if (cur_pan_width_idx < (pan_width_pool.length - 1)) {
-                    cur_pan_width_idx++;
-                  }
-                  cur_pan_width = pan_width_pool[cur_pan_width_idx];
-                  par._socket.emit('pan', {
-                    width: cur_pan_width,
-                    speed: cur_pan_speed
-                  });
-                  par.children.playcounter.content = '' + (cur_pan_width_idx + 1);
-                } else {
                 par._players.push(par._player.start()._source); // start playbacks and collect their '_source's..
                 par._playcount++;
                 par.children.playcounter.content = '' + par._playcount;
@@ -392,10 +361,9 @@ $(document).ready(function() {
                 par._socket.emit('sound', {
                   name: par._key,
                   action: 'start',
-                    group: 'beach'
+                  group: 'mix-bowl'
                 });
               }
-              }
             }),
             //playcounterbox
             new Path.Rectangle({
@@ -429,19 +397,6 @@ $(document).ready(function() {
               ],
               onMouseDown: function() {
                 var par = this.parent;
-                //NOTE: this DOES NOT sync between web-clients! <-- TBD, yet NOT-IMPLEMENTED !
-                if (par._key == '_소리의_퍼짐______소리의_움직임_1' || par._key == '_소리의_퍼짐______소리의_움직임_2') {
-                  //pan_width : (-)
-                  if (cur_pan_width_idx > 0) {
-                    cur_pan_width_idx--;
-                  }
-                  cur_pan_width = pan_width_pool[cur_pan_width_idx];
-                  par._socket.emit('pan', {
-                    width: cur_pan_width,
-                    speed: cur_pan_speed
-                  });
-                  par.children.playcounter.content = '' + (cur_pan_width_idx + 1);
-                } else {
                 if (par._players.length > 0) {
                   (par._players.shift()).stop();
                   par._playcount--;
@@ -454,10 +409,9 @@ $(document).ready(function() {
                 par._socket.emit('sound', {
                   name: par._key,
                   action: 'stop',
-                    group: 'beach'
+                  group: 'mix-bowl'
                 });
               }
-              }
             }),
             //faster button
             new Group({
@@ -479,19 +433,6 @@ $(document).ready(function() {
               ],
               onMouseDown: function() {
                 var par = this.parent;
-                //NOTE: this DOES NOT sync between web-clients! <-- TBD, yet NOT-IMPLEMENTED !
-                if (par._key == '_소리의_퍼짐______소리의_움직임_1' || par._key == '_소리의_퍼짐______소리의_움직임_2') {
-                  //pan_speed: (+)
-                  if (cur_pan_speed_idx < (pan_speed_pool.length - 1)) {
-                    cur_pan_speed_idx++;
-                  }
-                  cur_pan_speed = pan_speed_pool[cur_pan_speed_idx];
-                  par._socket.emit('pan', {
-                    width: cur_pan_width,
-                    speed: cur_pan_speed
-                  });
-                  par.children.speedcounter.content = '' + cur_pan_speed_idx;
-                } else {
                 if (par._players.length > 0) {
                   par._players[par._players.length - 1].playbackRate.value += 0.2;
                   par.children.speedcounter.content = Number.parseFloat(par._players[par._players.length - 1].playbackRate.value).toFixed(1);
@@ -500,10 +441,9 @@ $(document).ready(function() {
                 par._socket.emit('sound', {
                   name: par._key,
                   action: 'faster',
-                    group: 'beach'
+                  group: 'mix-bowl'
                 });
               }
-              }
             }),
             //speedcounterbox
             new Path.Rectangle({
@@ -539,19 +479,6 @@ $(document).ready(function() {
               ],
               onMouseDown: function() {
                 var par = this.parent;
-                //NOTE: this DOES NOT sync between web-clients! <-- TBD, yet NOT-IMPLEMENTED !
-                if (par._key == '_소리의_퍼짐______소리의_움직임_1' || par._key == '_소리의_퍼짐______소리의_움직임_2') {
-                  //pan_speed: (-)
-                  if (cur_pan_speed_idx > 0) {
-                    cur_pan_speed_idx--;
-                  }
-                  cur_pan_speed = pan_speed_pool[cur_pan_speed_idx];
-                  par._socket.emit('pan', {
-                    width: cur_pan_width,
-                    speed: cur_pan_speed
-                  });
-                  par.children.speedcounter.content = '' + cur_pan_speed_idx;
-                } else {
                 if (par._players.length > 0) {
                   var val = par._players[par._players.length - 1].playbackRate.value;
                   if (val > 0.2) {
@@ -563,16 +490,15 @@ $(document).ready(function() {
                 par._socket.emit('sound', {
                   name: par._key,
                   action: 'slower',
-                    group: 'beach'
+                  group: 'mix-bowl'
                 });
               }
-              }
             })
           ],
           _socket: socket,
-          _key: Object.keys(beach_sounds)[idx],
+          _key: Object.keys(sounds)[idx],
-          _player: beach_sounds[Object.keys(beach_sounds)[idx]],
+          _player: sounds[Object.keys(sounds)[idx]],
-          _players: beach_players[Object.keys(beach_players)[idx]],
+          _players: players[Object.keys(players)[idx]],
           _playcount: 0,
           _init: function() {
             this._player.loop = true;
@@ -593,7 +519,7 @@ $(document).ready(function() {
             //socket io event handling..
             var that = this;
             this._socket.on('sound', function(msg) {
-              if (msg.group == 'beach' && msg.name == that._key) {
+              if (msg.group == 'mix-bowl' && msg.name == that._key) {
                 if (msg.action == 'start') {
                   that._players.push(that._player.start()._source); // start playbacks and collect their '_source's..
                   that._playcount++;
@@ -630,314 +556,7 @@ $(document).ready(function() {
         //label
         new PointText({
           point: c.firstChild.bounds.topLeft + [0, -5],
-          content: Object.keys(beach_sounds)[idx],
+          content: Object.keys(sounds)[idx],
-          fontSize: vssw * 0.55,
-          fontWeight: 'bold',
-          fillColor: 'white'
-        });
-      }
-    }
-
-    //screen #4 - beach page #2
-    changeScreen(4);
-    new Path.Rectangle([0, 0], vs).fillColor = '#555';
-
-    //title - text
-    new PointText({
-      point: [vssw * 2, vssw * 1],
-      content: '           믹스 #2           ',
-      fillColor: 'white',
-      fontFamily: 'AppleGothic, Sans-serif',
-      fontWeight: 'bold',
-      fontSize: '3em'
-    }).fitBounds(titlebox.bounds);
-
-    //
-    for (var row = 0; row < 7; row++) {
-      for (var col = 0; col < 1; col++) {
-        var idx = row * 1 + col + 7;
-
-        //play/stop/playcount/faster/slower button (networked between groups)
-        var c = new Group({
-          children: [
-            //play button
-            new Group({
-              name: 'play_btn',
-              children: [
-                new Path.Rectangle({
-                  point: [vssw * 0.8, row * vssw * 1.4 + vssw * 3.5],
-                  radius: vssw * 0.4,
-                  size: [vssw * 1.5, vssw * 0.7],
-                  fillColor: new Color({
-                    hue: getRandom(20, 60),
-                    saturation: 1,
-                    brightness: 1
-                  }),
-                }),
-                plus.clone()
-              ],
-              onMouseDown: function(event) {
-                var par = this.parent;
-                //NOTE: this DOES NOT sync between web-clients! <-- TBD, yet NOT-IMPLEMENTED !
-                if (par._key == '_소리의_퍼짐______소리의_움직임_1' || par._key == '_소리의_퍼짐______소리의_움직임_2') {
-                  //pan_width: (+)
-                  if (cur_pan_width_idx < (pan_width_pool.length - 1)) {
-                    cur_pan_width_idx++;
-                  }
-                  cur_pan_width = pan_width_pool[cur_pan_width_idx];
-                  par._socket.emit('pan', {
-                    width: cur_pan_width,
-                    speed: cur_pan_speed
-                  });
-                  par.children.playcounter.content = '' + (cur_pan_width_idx + 1);
-                } else {
-                  par._players.push(par._player.start()._source); // start playbacks and collect their '_source's..
-                  par._playcount++;
-                  par.children.playcounter.content = '' + par._playcount;
-                  par.children.speedcounter.content = Number.parseFloat(1).toFixed(1);
-                  //
-                  par._socket.emit('sound', {
-                    name: par._key,
-                    action: 'start',
-                    group: 'beach'
-                  });
-                }
-              }
-            }),
-            //playcounterbox
-            new Path.Rectangle({
-              name: 'playcounterbox',
-              point: [vssw * 2.3, row * vssw * 1.4 + vssw * 3.5],
-              size: [vssw * 0.6, vssw * 0.8],
-            }),
-            //playcounter
-            new PointText({
-              name: 'playcounter',
-              content: '' + 0,
-              fillColor: 'white',
-              fontSize: '2em',
-              fontWeight: 'bold'
-            }),
-            //stop button
-            new Group({
-              name: 'stop_btn',
-              children: [
-                new Path.Rectangle({
-                  point: [vssw * 2.9, row * vssw * 1.4 + vssw * 3.5],
-                  radius: vssw * 0.4,
-                  size: [vssw * 1.6, vssw * 0.7],
-                  fillColor: new Color({
-                    hue: getRandom(120, 180),
-                    saturation: 1,
-                    brightness: 1
-                  }),
-                }),
-                minus.clone()
-              ],
-              onMouseDown: function() {
-                var par = this.parent;
-                //NOTE: this DOES NOT sync between web-clients! <-- TBD, yet NOT-IMPLEMENTED !
-                if (par._key == '_소리의_퍼짐______소리의_움직임_1' || par._key == '_소리의_퍼짐______소리의_움직임_2') {
-                  //pan_width : (-)
-                  if (cur_pan_width_idx > 0) {
-                    cur_pan_width_idx--;
-                  }
-                  cur_pan_width = pan_width_pool[cur_pan_width_idx];
-                  par._socket.emit('pan', {
-                    width: cur_pan_width,
-                    speed: cur_pan_speed
-                  });
-                  par.children.playcounter.content = '' + (cur_pan_width_idx + 1);
-                } else {
-                  if (par._players.length > 0) {
-                    (par._players.shift()).stop();
-                    par._playcount--;
-                    par.children.playcounter.content = '' + par._playcount;
-                  }
-                  if (par._players.length == 0) {
-                    par.children.speedcounter.content = Number.parseFloat(1).toFixed(1);
-                  }
-                  //
-                  par._socket.emit('sound', {
-                    name: par._key,
-                    action: 'stop',
-                    group: 'beach'
-                  });
-                }
-              }
-            }),
-            //faster button
-            new Group({
-              name: 'faster_btn',
-              children: [
-                new Path.Rectangle({
-                  point: [vssw * 5.0, row * vssw * 1.4 + vssw * 3.5],
-                  radius: vssw * 0.4,
-                  size: [vssw * 1.6, vssw * 0.7],
-                  strokeColor: new Color({
-                    hue: getRandom(20, 60),
-                    saturation: 1,
-                    brightness: 1
-                  }),
-                  strokeWidth: vssw * 0.03,
-                  fillColor: "#555"
-                }),
-                faster.clone()
-              ],
-              onMouseDown: function() {
-                var par = this.parent;
-                //NOTE: this DOES NOT sync between web-clients! <-- TBD, yet NOT-IMPLEMENTED !
-                if (par._key == '_소리의_퍼짐______소리의_움직임_1' || par._key == '_소리의_퍼짐______소리의_움직임_2') {
-                  //pan_speed: (+)
-                  if (cur_pan_speed_idx < (pan_speed_pool.length - 1)) {
-                    cur_pan_speed_idx++;
-                  }
-                  cur_pan_speed = pan_speed_pool[cur_pan_speed_idx];
-                  par._socket.emit('pan', {
-                    width: cur_pan_width,
-                    speed: cur_pan_speed
-                  });
-                  par.children.speedcounter.content = '' + cur_pan_speed_idx;
-                } else {
-                  if (par._players.length > 0) {
-                    par._players[par._players.length - 1].playbackRate.value += 0.2;
-                    par.children.speedcounter.content = Number.parseFloat(par._players[par._players.length - 1].playbackRate.value).toFixed(1);
-                  }
-                  //
-                  par._socket.emit('sound', {
-                    name: par._key,
-                    action: 'faster',
-                    group: 'beach'
-                  });
-                }
-              }
-            }),
-            //speedcounterbox
-            new Path.Rectangle({
-              name: 'speedcounterbox',
-              point: [vssw * 6.6, row * vssw * 1.4 + vssw * 3.5],
-              size: [vssw * 0.6, vssw * 0.8],
-            }),
-            //speedcounter
-            new PointText({
-              name: 'speedcounter',
-              content: '' + 0,
-              fillColor: 'white',
-              fontSize: '2em',
-              fontWeight: 'bold'
-            }),
-            //slower button
-            new Group({
-              name: 'slower_btn',
-              children: [
-                new Path.Rectangle({
-                  point: [vssw * 7.8, row * vssw * 1.4 + vssw * 3.5],
-                  radius: vssw * 0.4,
-                  size: [vssw * 1.6, vssw * 0.7],
-                  strokeColor: new Color({
-                    hue: getRandom(120, 180),
-                    saturation: 1,
-                    brightness: 1
-                  }),
-                  strokeWidth: vssw * 0.03,
-                  fillColor: "#555"
-                }),
-                slower.clone()
-              ],
-              onMouseDown: function() {
-                var par = this.parent;
-                //NOTE: this DOES NOT sync between web-clients! <-- TBD, yet NOT-IMPLEMENTED !
-                if (par._key == '_소리의_퍼짐______소리의_움직임_1' || par._key == '_소리의_퍼짐______소리의_움직임_2') {
-                  //pan_speed: (-)
-                  if (cur_pan_speed_idx > 0) {
-                    cur_pan_speed_idx--;
-                  }
-                  cur_pan_speed = pan_speed_pool[cur_pan_speed_idx];
-                  par._socket.emit('pan', {
-                    width: cur_pan_width,
-                    speed: cur_pan_speed
-                  });
-                  par.children.speedcounter.content = '' + cur_pan_speed_idx;
-                } else {
-                  if (par._players.length > 0) {
-                    var val = par._players[par._players.length - 1].playbackRate.value;
-                    if (val > 0.2) {
-                      par._players[par._players.length - 1].playbackRate.value = val - 0.2;
-                    }
-                    par.children.speedcounter.content = Number.parseFloat(par._players[par._players.length - 1].playbackRate.value).toFixed(1);
-                  }
-                  //
-                  par._socket.emit('sound', {
-                    name: par._key,
-                    action: 'slower',
-                    group: 'beach'
-                  });
-                }
-              }
-            })
-          ],
-          _socket: socket,
-          _key: Object.keys(beach_sounds)[idx],
-          _player: beach_sounds[Object.keys(beach_sounds)[idx]],
-          _players: beach_players[Object.keys(beach_players)[idx]],
-          _playcount: 0,
-          _init: function() {
-            this._player.loop = true;
-            this._player.retrigger = true;
-            // set icons
-            this.children.play_btn.children[1].fitBounds(this.children.play_btn.children[0].bounds);
-            this.children.play_btn.children[1].fillColor = "#555";
-            this.children.stop_btn.children[1].fitBounds(this.children.stop_btn.children[0].bounds);
-            this.children.stop_btn.children[1].fillColor = "#555";
-            this.children.faster_btn.children[1].fitBounds(this.children.faster_btn.children[0].bounds);
-            this.children.faster_btn.children[1].fillColor = "orange";
-            this.children.slower_btn.children[1].fitBounds(this.children.slower_btn.children[0].bounds);
-            this.children.slower_btn.children[1].fillColor = "lime";
-            // positioning numberboxes...
-            this.children.playcounter.fitBounds(this.children.playcounterbox.bounds);
-            this.children.speedcounter.fitBounds(this.children.speedcounterbox.bounds);
-            this.children.speedcounter.content = Number.parseFloat(1).toFixed(1);
-            //socket io event handling..
-            var that = this;
-            this._socket.on('sound', function(msg) {
-              if (msg.group == 'beach' && msg.name == that._key) {
-                if (msg.action == 'start') {
-                  that._players.push(that._player.start()._source); // start playbacks and collect their '_source's..
-                  that._playcount++;
-                  that.children.playcounter.content = '' + that._playcount;
-                  that.children.speedcounter.content = Number.parseFloat(1).toFixed(1);
-                } else if (msg.action == 'stop') {
-                  if (that._players.length > 0) {
-                    (that._players.shift()).stop();
-                    that._playcount--;
-                    that.children.playcounter.content = '' + that._playcount;
-                  }
-                  if (that._players.length == 0) {
-                    that.children.speedcounter.content = Number.parseFloat(1).toFixed(1);
-                  }
-                } else if (msg.action == 'faster') {
-                  if (that._players.length > 0) {
-                    that._players[that._players.length - 1].playbackRate.value += 0.2;
-                    that.children.speedcounter.content = Number.parseFloat(that._players[that._players.length - 1].playbackRate.value).toFixed(1);
-                  }
-                } else if (msg.action == 'slower') {
-                  if (that._players.length > 0) {
-                    var val = that._players[that._players.length - 1].playbackRate.value;
-                    if (val > 0.2) {
-                      that._players[that._players.length - 1].playbackRate.value -= 0.2;
-                    }
-                    that.children.speedcounter.content = Number.parseFloat(that._players[that._players.length - 1].playbackRate.value).toFixed(1);
-                  }
-                }
-              }
-            });
-          }
-        });
-        c._init();
-        //label
-        new PointText({
-          point: c.firstChild.bounds.topLeft + [0, -5],
-          content: Object.keys(beach_sounds)[idx],
           fontSize: vssw * 0.55,
           fontWeight: 'bold',
           fillColor: 'white'

receiver/package.json

@@ -1,21 +0,0 @@
-{
-  "name": "scroll-link-server",
-  "version": "1.0.0",
-  "description": "",
-  "main": "app.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "dependencies": {
-    "express": "^4.16.3",
-    "fs": "0.0.1-security",
-    "http-proxy": "^1.17.0",
-    "https": "^1.0.0",
-    "osc": "^2.2.3",
-    "socket.io": "^2.1.1",
-    "socket.io-client": "^2.1.1"
-  }
-}

receiver/receiver.js

@@ -1,169 +0,0 @@
-//// socket.io client
-var socket = require('socket.io-client')('https://choir.run');
-//var socket = require('socket.io-client')('http://192.168.1.105:8080');
-
-//// osc.js configuration (UDP)
-var osc = require("osc");
-
-//// NOTE: apps cannot share port.. (pd & sc)
-
-// --> for puredata
-//       tx: 57000
-//       rx: 57001
-
-var udp_pd = new osc.UDPPort({
-  localAddress: '0.0.0.0',
-  //NOTE: '127.0.0.1' doesn't work!! for comm. between different machines
-  localPort: 57001,
-  remoteAddress: '0.0.0.0',
-  remotePort: 57000,
-  metadata: true
-});
-
-// --> for supercollider
-//       tx: 57120
-//       rx: 57121
-
-var udp_sc = new osc.UDPPort({
-  localAddress: '0.0.0.0',
-  //NOTE: '127.0.0.1' doesn't work!! for comm. between different machines
-  localPort: 57121,
-  remoteAddress: '0.0.0.0',
-  remotePort: 57120,
-  metadata: true
-});
-
-//firstly establish/prepare osc conn. - supercollider & puredata
-Promise.all([
-  new Promise(function(resolve, reject) {
-    udp_pd.on("ready", function() {
-      resolve(0);
-      console.log('udp_pd ready..');
-    });
-  }),
-  new Promise(function(resolve, reject) {
-    udp_sc.on("ready", function() {
-      resolve(0);
-      console.log('udp_sc ready..');
-    });
-  }),
-]).then(function(results) {
-
-  //
-  socket.on('connect', function() {
-    console.log("[osc-receiver] i'm connected.");
-  });
-
-  // //
-  // socket.on('sound', function(msg) {
-  //
-  //   //DEBUG
-  //   //console.log('sound :');
-  //   console.log(msg);
-  //
-  //   //// simply relaying messages to apps.
-  //
-  //   // to puredata
-  //   udp_pd.send({
-  //     address: "/sound",
-  //     args: [{
-  //       type: "f",
-  //       value: msg.id
-  //     }, {
-  //       type: "f",
-  //       value: msg.key
-  //     }]
-  //   });
-  //
-  //   // to supercollider
-  //   udp_sc.send({
-  //     address: "/sound",
-  //     args: [{
-  //       type: "f",
-  //       value: msg.id
-  //     }, {
-  //       type: "f",
-  //       value: msg.key
-  //     }]
-  //   });
-  //
-  // });
-  //
-  //
-  socket.on('pan', function(msg) {
-
-    //DEBUG
-    //console.log('pan :');
-    console.log(msg);
-
-    //// simply relaying messages to apps.
-
-    // to puredata
-    udp_pd.send({
-      address: "/pan",
-      args: [{
-        type: "f",
-        value: msg.width
-      }, {
-        type: "f",
-        value: msg.speed
-      }]
-    });
-
-    // // to supercollider
-    // udp_sc.send({
-    //   address: "/pan",
-    //   args: [{
-    //     type: "f",
-    //     value: msg.width
-    //   }, {
-    //     type: "f",
-    //     value: msg.speed
-    //   }]
-    // });
-
-  });
-
-  //
-  socket.on('disconnect', function() {
-    console.log("[osc-receiver] i'm disconnected.");
-  });
-
-});
-
-// //message handler
-// udp_sc.on("message", function(oscmsg, timetag, info) {
-//   console.log("[udp] got osc message:", oscmsg);
-//
-//   //EX)
-//   // //method [1] : just relay as a whole
-//   // io.emit('osc-msg', oscmsg); //broadcast
-//
-//   //EX)
-//   // //method [2] : each fields
-//   // io.emit('osc-address', oscmsg.address); //broadcast
-//   // io.emit('osc-type', oscmsg.type); //broadcast
-//   // io.emit('osc-args', oscmsg.args); //broadcast
-//   // io.emit('osc-value0', oscmsg.args[0].value); //broadcast
-//
-//   //just grab i need.. note!
-//   io.emit('sing-note', oscmsg.address); //broadcast
-// });
-
-//osc.js - start service
-udp_pd.open();
-udp_pd.on("ready", function() {
-  console.log(
-    "[udp] ready (udp_pd) : \n" +
-    "\tlistening on --> " + udp_pd.options.localAddress + ":" + udp_pd.options.localPort + "\n" +
-    "\tspeaking to -> " + udp_pd.options.remoteAddress + ":" + udp_pd.options.remotePort + "\n"
-  );
-});
-udp_sc.open();
-udp_sc.on("ready", function() {
-  console.log(
-    "[udp] ready (udp_sc) : \n" +
-    "\tlistening on --> " + udp_sc.options.localAddress + ":" + udp_sc.options.localPort + "\n" +
-    "\tspeaking to -> " + udp_sc.options.remoteAddress + ":" + udp_sc.options.remotePort + "\n"
-  );
-});