more examples + some renaming

node/node-osc/pd/osc-send-receive.pd

+#N canvas 545 287 655 437 10;
+#X text 172 167 Send messages to "foo" on remote machine;
+#X msg 74 86 disconnect;
+#X floatatom 136 167 0 0 0 0 - - -;
+#X obj 121 286 netsend -u -b;
+#X obj 136 212 list prepend send;
+#X obj 136 237 list trim;
+#X obj 136 190 oscformat foo;
+#X obj 520 97 oscparse;
+#X obj 520 121 list trim;
+#X obj 520 69 netreceive -u -b;
+#X msg 74 64 connect localhost 7400;
+#X msg 520 41 listen 7500;
+#X obj 421 235 phasor~ 440;
+#X obj 421 258 *~ 0.2;
+#X obj 459 292 *~;
+#X obj 497 258 line~;
+#X obj 520 143 route slider;
+#X msg 497 235 \$1 10;
+#X obj 436 331 dac~ 1 2;
+#X connect 1 0 3 0;
+#X connect 2 0 6 0;
+#X connect 4 0 5 0;
+#X connect 5 0 3 0;
+#X connect 6 0 4 0;
+#X connect 7 0 8 0;
+#X connect 8 0 16 0;
+#X connect 9 0 7 0;
+#X connect 10 0 3 0;
+#X connect 11 0 9 0;
+#X connect 12 0 13 0;
+#X connect 13 0 14 0;
+#X connect 14 0 18 0;
+#X connect 14 0 18 1;
+#X connect 15 0 14 1;
+#X connect 16 0 17 0;
+#X connect 17 0 15 0;

utils/node-osc/public/index.html → node/node-osc/public/index.html

@@ -48,7 +48,7 @@ window.onload = function() {
   r.addEventListener('input', function(e) {
     oscPort.send({
       address: '/slider',
-      args: [ e.target.value ],
+      args: [ parseFloat(e.target.value) ],
     });
   });
 //<<<<<<<<<<<<<<<<<<<<<<<<<<

node/node-osc/src/local-host.js

+var osc = require("osc"),
+    express = require("express"),
+    WebSocket = require("ws");
+
+var cwd = process.cwd();
+
+// Bind to a UDP socket to listen for incoming OSC events.
+var udpPort = new osc.UDPPort({
+    // localAddress: "0.0.0.0",
+    localAddress: "127.0.0.1",
+    localPort: 7400,
+    remoteAddress: "127.0.0.1",
+    remotePort: 7500,
+});
+
+udpPort.open();
+
+// Create an Express-based Web Socket server to which OSC messages will be relayed.
+var appResources = cwd + "/public",
+    app = express(),
+    server = app.listen(8081),
+    wss = new WebSocket.Server({
+        server: server
+    });
+
+app.use("/", express.static(appResources));
+wss.on("connection", function (socket) {
+    console.log("A Web Socket connection has been established!");
+    var socketPort = new osc.WebSocketPort({
+        socket: socket
+    });
+
+    var relay = new osc.Relay(udpPort, socketPort, {
+        raw: true
+    });
+});

utils/node-osc/src/index.js → node/node-osc/src/remote-hosts.js

@@ -25,7 +25,9 @@ var getIPAddresses = function () {
 // Bind to a UDP socket to listen for incoming OSC events.
 var udpPort = new osc.UDPPort({
     localAddress: "0.0.0.0",
-    localPort: 57121
+    localPort: 7400,
+    remoteAddress: "127.0.0.1",
+    remotePort: 7500,
 });
 
 udpPort.on("ready", function () {
@@ -40,7 +42,6 @@ udpPort.on("ready", function () {
 udpPort.open();
 
 // Create an Express-based Web Socket server to which OSC messages will be relayed.
-// var appResources = __dirname + "/web",
 var appResources = cwd + "/public",
     app = express(),
     server = app.listen(8081),

utils/node-osc/pd/osc-send-receive.pd

-#N canvas 370 138 655 437 10;
-#X text 129 140 Send messages to "foo" on remote machine;
-#X msg 31 59 disconnect;
-#X floatatom 93 140 0 0 0 0 - - -;
-#X obj 78 259 netsend -u -b;
-#X msg 31 37 connect localhost 57121;
-#X obj 93 185 list prepend send;
-#X obj 93 210 list trim;
-#X obj 93 163 oscformat foo;
-#X obj 454 90 oscparse;
-#X obj 454 198 print;
-#X obj 454 120 list trim;
-#X obj 454 62 netreceive -b -u 8081;
-#X connect 1 0 3 0;
-#X connect 2 0 7 0;
-#X connect 4 0 3 0;
-#X connect 5 0 6 0;
-#X connect 6 0 3 0;
-#X connect 7 0 5 0;
-#X connect 8 0 10 0;
-#X connect 10 0 9 0;
-#X connect 11 0 8 0;

wavesjs/01_segment-random-beatbox.html → wavesjs-etc/01_segment-random-beatbox.html

@@ -28,7 +28,7 @@
     var scheduler = wavesAudio.getScheduler();
     var segEngine = new wavesAudio.SegmentEngine({
       buffer: loaded,
-      periodAbs: loaded.duration / 8,
+      periodAbs: frac,
       periodRel: 0,
       positionArray: posArray,
       durationArray: durArray,

wavesjs-etc/03_mobile-kick.html

+<!DOCTYPE html>
+<html>
+<head>
+    <title>COMO mouse gestures</title>
+    <meta charset="utf-8">
+    <script type="text/javascript" src="https://como.ircam.fr/motion-features.min.js"></script>
+    <script type="text/javascript" src="https://como.ircam.fr/waves-loaders.min.js"></script>
+    <style>
+    div {
+        margin: 0 auto;
+    }
+
+    button {
+        display: inline-block;
+        width: 100%;
+        height: 50px;
+        padding: 20px;
+        margin-bottom: 10px;
+    }
+    </style>
+</head>
+<body>
+    <button id="unlock"> unlock audio </button>
+    <script type="text/javascript">
+    /* globals motionFeatures */
+    /* globals wavesLoaders */
+    
+    var audioContext;
+    try {
+        audioContext = new webkitAudioContext();
+    } catch (e) {
+        audioContext = new AudioContext();
+    }
+    
+    var audioFiles = [
+        './assets/1_808-kick_long.wav',
+        './assets/2_808-hh_closed.wav',
+        './assets/3_808-SD1.wav',
+        './assets/4_808-hh_open.wav'
+    ];
+            
+    // this is for iOS !!!! (need user action to enable audio playback)
+    var locked = true;
+    var b = document.querySelector('#unlock');
+    b.addEventListener('click', function(e) {
+        // console.log('click');
+        if(locked) {
+            var buffer = audioContext.createBuffer(1, 1, 22050);
+            var source = audioContext.createBufferSource();
+            source.buffer = buffer;
+            source.connect(audioContext.destination);
+            source.start();
+            locked = false;
+            console.log('audio unlocked !');
+            b.style.backgroundColor = '#0f0';
+        }        
+    });
+    
+    var loader = new wavesLoaders.AudioBufferLoader();
+    
+    loader.load(audioFiles).then(function(loaded) {
+        
+        var counter = 0;
+
+        var mf = new motionFeatures.MotionFeatures({
+            descriptors: [ 'accIntensity', 'kick' ],
+            kickThresh: 20,
+            kickCallback: kick,
+        });
+
+        window.addEventListener('devicemotion', function(e) {
+            var x = e.accelerationIncludingGravity.x;
+            var y = e.accelerationIncludingGravity.y;
+            var z = e.accelerationIncludingGravity.z;
+            
+            mf.setAccelerometer(x, y, z);
+            mf.update();
+        });
+        
+        function kick(res) {
+            var indexArray = [0, 1, 2, 1];
+            var index = indexArray[counter];
+            var buf = audioContext.createBufferSource();
+            buf.buffer = loaded[index];
+            buf.connect(audioContext.destination);
+            buf.start();
+            counter = (counter + 1) % 4;
+        }
+    });
+    </script>
+</body>
+</html>
\ No newline at end of file

wavesjs-etc/04_mobile-zerox.html

+<!DOCTYPE html>
+<html>
+<head>
+  <title>mobile zero crossing example</title>
+  <meta charset="utf-8">
+</head>
+<body>
+  TODO ...
+</body>
+</html>
\ No newline at end of file

wavesjs-etc/05_xmm-mouse-gestures.html

+<!DOCTYPE html>
+<html>
+<head>
+    <title>COMO mouse gestures</title>
+    <style>
+        canvas {
+            display: block;
+            margin: 10px;
+            background: rgb(20,20,20);
+        }
+    </style>
+    <meta charset="utf-8">
+    <script type="text/javascript" src="https://como.ircam.fr/xmm-client.min.js"></script>
+</head>
+<body>
+    <canvas id="trainCanvas" width="350" height="350"></canvas>
+    <canvas id="runCanvas" width="350" height="350"></canvas>
+    
+    <script type="text/javascript">
+      /* globals xmmClient */
+      // NB : this is experimental for now and frequently goes down ...
+      var comoUrl = 'https://como.ircam.fr/api/v1/train';
+
+      var recorder = new xmmClient.PhraseMaker();
+      recorder.setConfig({
+        bimodal: false,
+        dimension: 2,
+        dimensionInput: 0,
+        columnNames: ['dx', 'dy'],
+        label: '',
+      });
+        var setMaker = new xmmClient.SetMaker();
+        
+        var modelConfig = {
+            modelType: 'hhmm',
+            gaussians: 2,
+            absoluteRegularization: 0.01,
+            relativeRegularization: 0.1,
+            covarianceMode: 'full',
+            states: 10,
+            transitionMode: 'ergodic',
+            //transitionMode: 'leftright',
+        };
+        var hhmmDecoder = new xmmClient.HhmmDecoder(5);
+        
+        //======================== labels ========================//
+        var currentLabel = '';
+        var recognizedLabel = '';
+        window.addEventListener('keyup', function(e) {
+            currentLabel = e.key;
+        });
+        
+        //======================= variables =======================//
+        var distThresh = 10;
+
+        var tm = { on: false, x: 0, y: 0, prevx: 0, prevy: 0, dx: 0, dy: 0 };
+        var tc = document.querySelector('#trainCanvas');
+        var tcCtx = tc.getContext("2d");
+        var tShape = [];
+
+        var rm = { on: false, x: 0, y: 0, prevx: 0, prevy: 0, dx: 0, dy: 0 };
+        var rc = document.querySelector('#runCanvas');
+        var rcCtx = rc.getContext("2d");
+        var rShape = [];
+        
+        //======================= utilities =======================//
+        function getMousePosition(ctx, e, m) {
+            var rect = ctx.getBoundingClientRect();
+            m.x = Math.floor((e.clientX - rect.left) / (rect.right - rect.left) * rect.width);
+            m.y = Math.floor((e.clientY - rect.top) / (rect.bottom - rect.top) * rect.height);
+        }
+        
+        function getMouseDistance(m) {
+            return Math.sqrt((m.x - m.prevx) * (m.x - m.prevx) +
+                             (m.y - m.prevy) * (m.y - m.prevy));
+        }
+        
+        // todo : avoid code duplication here
+        // todo : normalize dx / dy according to distance ?
+        //======================= listeners =======================//
+        
+        //========== training
+        tc.addEventListener('mousedown', function(e) {
+            getMousePosition(tc, e, tm);
+            tm.on = true;
+            tShape = [[ tm.x, tm.y ]];
+            recorder.reset();
+        });
+        
+        tc.addEventListener('mousemove', function(e) {
+            if (tm.on) {
+                getMousePosition(tc, e, tm);
+                if (getMouseDistance(tm) > distThresh) {
+                    tm.dx = tm.x - tm.prevx;
+                    tm.dy = tm.y - tm.prevy;
+                    tm.prevx = tm.x;
+                    tm.prevy = tm.y;
+                    tShape.push([ tm.x, tm.y ]);
+                    recorder.addObservation([ tm.dx, tm.dy ]);
+                }
+            }
+        });
+
+        //========== recognition
+        rc.addEventListener('mousedown', function(e) {
+            recognizedLabel = '';
+            getMousePosition(rc, e, rm);
+            rm.on = true;
+            rShape = [[ rm.x, rm.y ]];
+            hhmmDecoder.reset();
+        });
+        
+        rc.addEventListener('mousemove', function(e) {
+            if (rm.on) {
+                getMousePosition(rc, e, rm);
+                if (getMouseDistance(rm) > distThresh) {
+                    rm.dx = rm.x - rm.prevx;
+                    rm.dy = rm.y - rm.prevy;
+                    rm.prevx = rm.x;
+                    rm.prevy = rm.y;
+                    rShape.push([ rm.x, rm.y ]);
+                    var res = hhmmDecoder.filter([ rm.dx, rm.dy ]);
+                    recognizedLabel = res.likeliest;
+                }            
+            }
+        });
+
+        //========== both
+        window.addEventListener('mouseup', function() {
+            if (tm.on) {
+                // if we have an empty phrase we might crash the API !
+                if (currentLabel !== '' && recorder.getPhrase().data.length > 0) {
+                    recorder.setConfig({ label: currentLabel });
+                    var p = recorder.getPhrase();
+                    setMaker.addPhrase(p);
+                
+                    // this sends a post AJAX request to the COMO API endpoint
+                    // https://como.ircam.fr/api/v1/train, or any substitution url
+                    //*
+                    xmmClient.train({
+                        url: comoUrl,
+                        configuration: modelConfig,
+                        dataset: setMaker.getTrainingSet(),
+                    }, function(code, res) {
+                        if (code === 200) {
+                            hhmmDecoder.setModel(res.data);
+                        } else {
+                            console.log('something went wrong');
+                        }
+                    });
+                    //*/
+
+                    // this is actually what the xmmClient.train method does :
+                    /*
+                    // document.domain = 'ircam.fr';
+                    // var url = 'https://como.ircam.fr/api/v1/train';
+                    // var url = 'http://localhost:8000/train';
+                    var url = 'https://60b8ddae.ngrok.io/train';
+                    var xhr = new XMLHttpRequest();
+                    xhr.open('post', url, true);
+                    xhr.responseType = 'json';
+                    xhr.setRequestHeader('Access-Control-Allow-Origin', window.location.origin);
+                    xhr.setRequestHeader('Content-Type', 'application/json');
+
+                    xhr.onload = function() {
+                        if (xhr.status === 200) {
+                            hhmmDecoder.setModel(xhr.response.data);
+                        } else {
+                            console.log('something went wrong');
+                        }
+                    };
+                    xhr.onerror = function() {
+                        console.log('something went wrong');
+                    };
+
+                    xhr.send(JSON.stringify({
+                        configuration: modelConfig,
+                        dataset: setMaker.getTrainingSet(),
+                    }));
+                    //*/
+                }
+                tm.on = false;
+            }
+            
+            if (rm.on) {
+                rm.on = false;
+            }
+        });
+
+        function drawCommon(ctx) {
+            ctx.clearRect(0, 0, 350, 350);
+            ctx.font = '16px Helvetica';
+            ctx.fillStyle = '#ddd';
+        }
+        
+        function drawShape(ctx, shape) {
+            if (shape.length === 0) return;
+            
+            ctx.strokeStyle = '#ffffff';
+            ctx.lineWidth = 2;
+            ctx.beginPath();
+            ctx.moveTo(shape[0][0], shape[0][1]);
+            for (var i = 1; i < shape.length; i++) {
+                ctx.lineTo(shape[i][0], shape[i][1]);
+            }
+            ctx.stroke();
+            ctx.closePath();
+        }
+
+        function drawTest() {
+            drawCommon(tcCtx);
+            drawShape(tcCtx, tShape);
+            tcCtx.fillText('current label : ' + currentLabel, 10, 340);
+        }
+        
+        function drawRun() {
+            drawCommon(rcCtx);
+            drawShape(rcCtx, rShape);
+            rcCtx.fillText('recognized label : ' + recognizedLabel, 10, 340);
+        }
+        
+        function draw() {
+            drawTest();
+            drawRun();
+            window.requestAnimationFrame(draw);
+        }
+        window.requestAnimationFrame(draw);
+        
+    </script>
+</body>
+</html>
\ No newline at end of file