aboutsummaryrefslogtreecommitdiff
path: root/assets/js
diff options
context:
space:
mode:
Diffstat (limited to 'assets/js')
-rw-r--r--assets/js/index4.js178
-rw-r--r--assets/js/pedometer4.js93
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();
+ }
+
+})