diff options
Diffstat (limited to 'assets')
| -rw-r--r-- | assets/js/index4.js | 178 | ||||
| -rw-r--r-- | assets/js/pedometer4.js | 93 |
2 files changed, 271 insertions, 0 deletions
diff --git a/assets/js/index4.js b/assets/js/index4.js new file mode 100644 index 0000000..150d838 --- /dev/null +++ b/assets/js/index4.js @@ -0,0 +1,178 @@ +// Available teams +const teams = [ 'wingl', 'musclel', 'stringl', 'cavity', 'stringr', 'muscler', 'wingr' ] + +// Steps to finish +const max_steps = 42 + +// Animation duration in ms +const move_duration = 15000 + + +let prev_step = 0 +let step = 0; +let map = Snap('#left-bits'); +let wingr = map.select('#wingr'); +let wingrbbox = wingr.getBBox(); +let wingl = map.select('#wingl'); +let winglbbox = wingl.getBBox(); +let musclel = map.select('#musclel'); +let musclelbbox = musclel.getBBox(); +let muscler = map.select('#muscler'); +let musclerbbox = muscler.getBBox(); +let stringl = map.select('#stringl'); +let stringlbbox = stringl.getBBox(); +let stringr = map.select('#stringr'); +let stringrbbox = stringr.getBBox(); +let cavity = map.select('#cavity'); +let cavitybbox = cavity.getBBox(); + +// Assign a team for this browser +let team = teams[rInt(0, teams.length - 1)] + +// Score keeps number of steps per team +let Score = {} + +let resetScore = function() { + Score = {} + teams.forEach(function(t, i) { + Score[t] = { pas: 0 } + }) +} +resetScore() // Populate Score hash + +let reportScore = function() { + teams.forEach(function(t, i) { + $('#pas-' + t).text(Score[t]['pas']) + }) +} + +let updateScore = function(team, step) { + Score[team]['pas'] = Score[team]['pas'] + step; +} + +// Handle devicemotion: move team along path +let moveRequested = function() { + + // Each team gets a path and moves on it + teams.forEach(function(t, i) { + t_path = map.select('#path' + parseInt(1 + i)) + console.log('## team', t, 'takes', t_path.attr('id')) + + // How many steps to play? The more steps the slower. + // Note that more steps than available pixels on the path will break... + pas = parseInt($('#pas-' + t).text()) + if (pas > max_steps) { + pas = 0 + console.log('!! team', t, 'finished!') + } + // Calculate moving distance + length = Snap.path.getTotalLength(t_path) + step_l = Math.floor(length / max_steps) + console.log(' each step is', step_l, 'pixels') + if (pas == 0 || Score[t]['pas'] > pas) { + Score[t]['pas'] = pas + 1 + // Advance one step + move(step_l * pas, step_l * Score[t]['pas'], t, t_path) + reportScore() + console.log(' pas', Score[t]['pas'], '/', max_steps) +// $('#pas-max-' + t).text((step_l * Score[t]['pas']) + ' / ' + length) + $('#pas-max-' + t).css('width', (step_l * Score[t]['pas'] * 100) / length + '%').css('background', '#cccc').text(length + 'px') + } + }) + +// console.log('Score:', Score) +} + + +function angle(n) { + return rInt(-n, n); +} + +function rInt(min, max) { + return Math.floor(Math.random() * (max - min) + min); +} + +// SVG transform for each team +function teamTransform(team, point) { + var transform; + switch(team) { + case 'wingr': + transform = 'translate(' + point.x + ',' + point.y + ') ' + break; + case 'muscler': + transform = 'translate(' + point.x + ',' + point.y + ') rotate(' + (point.alpha - 360)+ ', ' + musclerbbox.cx + ', ' + musclerbbox.cy + ')' + break; + case 'stringr': + transform = 'translate(' + x + ',' + y + ') rotate('+ (point.alpha - 360)+', '+stringrbbox.cx+', '+stringrbbox.cy+')' + break; + case 'cavity': + transform = 'translate(' + x + ',' + y + ') rotate('+ (point.alpha - 360)+', '+cavitybbox.cx+', '+cavitybbox.cy+')' + break; + case 'stringl': + transform = 'translate(' + x + ',' + y + ') rotate('+ (point.alpha - 360)+', '+stringlbbox.cx+', '+stringlbbox.cy+')' + break; + case 'musclel': + transform = 'translate(' + x + ',' + y + ') rotate('+ (point.alpha - 360)+', '+musclelbbox.cx+', '+musclelbbox.cy+')' + break; + case 'wingl': + transform = 'translate(' + x + ',' + y + ')' + break; + } +// console.log(team, 'transform', transform) + return transform +} + +// Execute a move +function move(from, to, team, path) { + Snap.animate(from, to, function(val) { + // Move to this point on path + toPoint = Snap.path.getPointAtLength(path, val) + x = toPoint.x; y = toPoint.y + // Execute SVG transform according to team + eval(team).transform(teamTransform(team, toPoint)) + }, move_duration, mina.easeout) +} + +$(document).ready(function() { + // Each team gets a path and moves on it + teams.forEach(function(t, i) { +// if (t == team) { + t_path = map.select('#path' + parseInt(1 + i)) + console.log('## team', t, 'takes', t_path.attr('id')) + + pas = parseInt($('#pas-' + t).text()) + if (pas > max_steps) { + pas = 0 + console.log('!! team', t, 'finished!') + } + Score[t]['pas'] = pas + reportScore() + console.log(' pas', pas, '/', max_steps) + + length = Snap.path.getTotalLength(t_path) + steps = Math.floor(length / max_steps) + console.log(' each step is', steps, 'pixels') +// $('#pas-max-' + t).text(steps * pas + ' / ' + length) + $('#pas-max-' + t).text((steps * pas * 100) / length + '%') + + move(steps * pas, length, t, t_path) +// } + }) + + console.log('------------------------------------------------------------') + console.log('-*- ', teams.length, 'playing. Your team is ', team) + + // Keep score + resetScore() + teams.forEach(function(t) { + var dt = $('<dt>').text(t) + var dd = $('<dd>').attr('id', 'pas-' + t).text(Score[t]['pas']) + var de = $('<dd>').attr('id', 'pas-max-' + t).css('display', 'block') + $('#score').append(dt).append(dd).append(de) + }) + + // Listen to moves + document.addEventListener("requestMove", moveRequested, false); + +}) + diff --git a/assets/js/pedometer4.js b/assets/js/pedometer4.js new file mode 100644 index 0000000..6b59963 --- /dev/null +++ b/assets/js/pedometer4.js @@ -0,0 +1,93 @@ +// Interval milliseconds between accelerometer readings +const poll_interval = 200 + + +$(document).ready(function(){ + + // We may not have an accelerometer + var has_accel = false + + // Make the SVG occupy all the screen + $('body').css({ width: '100vw', height: '100vh', margin: 0, padding: 0, overflow: 'hidden' }) + $('#left-bits').css({ width: '100%', height: '100%', background: '#931', margin: 0 }) + .removeAttr('viewBox') + .each(function() { $(this)[0].setAttribute('viewBox', '0 0 ' + parseInt($('body').css('width')) + ' ' + parseInt($('body').css('height'))) }) + + console.log("-- ready --"); + + // on déclare l'ensemble des variables ax et ay sont les données + // d'acceleration, n c'est la norme, maxn et minn les valeurs max + // et min de la norme, et pas le nombre de pas + var n=0, maxn = 0, minn = 0, pas = 0, + ax = 0, ay = 0, az = 0, pass=0; + + function odmHandler(e) { + // we do have an accelerometer + has_accel = true + // read from it + ax = event.accelerationIncludingGravity.x ; + ay = event.accelerationIncludingGravity.y ; + az = event.accelerationIncludingGravity.z ; + } + + // fake an accelerometer + // min/max at -12/12 mean reasonably fast pace + // grow to accelerate + // < 10 might not bring any result + function fakeAccel() { + var min = -12, max = 12 + return Math.random() * (max - min) + min; + } + + function mockAccelerometer() { + // we're on a desktop, yep + has_accel = false + // make up values + ax = fakeAccel() + ay = fakeAccel() + az = fakeAccel() + } + + //programme d'alberto desarullo qui va chercher les données de l'accelerometre + // Why do you have the interface if you don't have the device? + if (window.DeviceMotionEvent != undefined) { + window.ondevicemotion = odmHandler + + var ev = new Event("requestMove"); + + function pollAccelerometer() { + setInterval(makeStep, poll_interval) + } + + function makeStep() { + if (!has_accel) { + // no accelerometer: fake values + mockAccelerometer() + } + // on calcule la norme c'est à dire la taille du + // vecteur qui est défini par les points + // d'accélération ax ay et az + n0 = n; + n = Math.sqrt (ax*ax + ay*ay + az*az); + + // on calcule un min et max pour la norme + if (n < n0) { + minn = n ; + } else if (n > n0) { + maxn = n ; + } + + // on définit un seuil qui correspond à un pas + if ((maxn - minn) > 10) { + // on simule multi-joueur en assignant une team au pas + //pas = pas+1; + var this_team = teams[rInt(0, teams.length - 1)] + updateScore(this_team, 1) + document.dispatchEvent(ev); + } + } + + pollAccelerometer(); + } + +}) |