Commit 19100e71 authored by Joseph Larralde's avatar Joseph Larralde
Browse files

more examples + some renaming

parent c7ee829d
#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;
......@@ -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) ],
});
});
//<<<<<<<<<<<<<<<<<<<<<<<<<<
......
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
});
});
......@@ -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),
......
#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;
......@@ -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,
......
<!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
<!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
<!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
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment