stage event synchronization (wip)

src/components/beat-loader.js

@@ -93,11 +93,19 @@ AFRAME.registerComponent('beat-loader', {
     // Beats spawn ahead of the song and get to the user in sync with the music.
     this.beatsTimeOffset = this.data.beatAnticipationTime * 1000;
     this.beatsTime = 0;
-
     this.beatData = beatData;
+    this.beatData._events.sort(lessThan);
     this.beatData._obstacles.sort(lessThan);
     this.beatData._notes.sort(lessThan);
     this.bpm = this.beatData._beatsPerMinute;
+
+    // some events have negative time stamp to inicialize the stage
+    var events = this.beatData._events;
+    if (events.length && events[0]._time < 0) {
+      for (let i = 0; events[i]._time < 0; i++) {
+        this.generateEvent(events[i]);
+      }
+    }
     console.log('Finished loading challenge data.');
   },
 
@@ -109,6 +117,7 @@ AFRAME.registerComponent('beat-loader', {
     var i;
     var notes;
     var obstacles;
+    var events;
     var beatsTime = this.beatsTime;
     var msPerBeat;
     var noteTime;
@@ -123,6 +132,7 @@ AFRAME.registerComponent('beat-loader', {
 
     notes = this.beatData._notes;
     obstacles = this.beatData._obstacles;
+    events = this.beatData._events;
     bpm = this.beatData._beatsPerMinute;
     msPerBeat = 1000 * 60 / this.beatData._beatsPerMinute;
     for (i = 0; i < notes.length; ++i) {
@@ -140,6 +150,14 @@ AFRAME.registerComponent('beat-loader', {
       }
     }
 
+    for (i=0; i < events.length; ++i) {
+      noteTime = events[i]._time * msPerBeat;
+      if (noteTime > beatsTime && noteTime <= beatsTime + delta) {
+        this.generateEvent(events[i]);
+      }
+    }
+
+
     if (this.beatsTimeOffset !== undefined) {
       if (this.beatsTimeOffset <= 0) {
         this.el.sceneEl.emit('beatloaderpreloadfinish', null, false);
@@ -204,6 +222,34 @@ AFRAME.registerComponent('beat-loader', {
     el.play();
   },
 
+  generateEvent: function (event) {
+    console.log(event);
+    switch(event._type) {
+      case 0: // lasers color
+      case 1: // tunnel neon color
+              document.getElementById('tunnelNeon').setAttribute('colorPreset', event._value);
+              document.getElementById('tunnelNeon').emit('pulse');
+      break;
+      case 2: document.getElementById('leftStageLasers').setAttribute('colorPreset', event._value);
+      break;
+      case 3: document.getElementById('rightStageLasers').setAttribute('colorPreset', event._value);
+      break;
+      case 4:
+        document.getElementById('floor').emit('pulse');
+        document.getElementById('stageNeon').emit('pulse');
+      break;
+      case 8:
+      case 9: document.getElementById('twister').components.twister.pulse(event._value);
+      break;
+      case 12: document.getElementById('leftStageLasers').components['stage-lasers'].pulse(event._value);
+      console.log('left laser', event._value);
+      break;
+      case 13: document.getElementById('rightStageLasers').components['stage-lasers'].pulse(event._value);
+      console.log('right laser', event._value);
+      break;
+    }
+  },
+
   requestBeat: function (type, color) {
     var beatPoolName = 'pool__beat-' + type;
     var pool;

src/components/stage-lasers.js

@@ -0,0 +1,33 @@
+AFRAME.registerComponent('stage-lasers', {
+  schema: {
+    enabled: {default: true}
+  },
+
+  init: function () {
+    this.speed = 0;
+    this.lasers = [
+      this.el.children[0].object3D,
+      this.el.children[1].object3D,
+      this.el.children[2].object3D
+    ];
+  },
+
+  pulse: function (speed) {
+    this.speed = speed / 3;
+  },
+
+  tick: function (time, delta) {
+    if (this.speed === 0) { return; }
+    delta /= 1000;
+    if (!this.data.enabled) {
+      this.speed *= 0.96;
+      if (Math.abs(this.speed) < 0.01) {
+        this.speed = 0;
+        return;
+      }
+    }
+    this.lasers[0].rotation.z += this.speed * delta;
+    this.lasers[1].rotation.z -= this.speed * delta * 1.04;
+    this.lasers[2].rotation.z += this.speed * delta * 1.1;
+  }
+})

src/components/twister.js

@@ -12,12 +12,14 @@ AFRAME.registerComponent('twister', {
   init: function () {
     this.currentTwist = 0;
     this.animate = false;
-    this.el.addEventListener('audioanalyserbeat', this.pulse.bind(this));
   },
 
-  pulse: function () {
+  pulse: function (twist) {
     if (!this.data.enabled) { return; }
-    this.el.setAttribute('twister', {twist: Math.random() * 0.5 - 0.25});
+    if (twist == 0) { twist = 0.1 + Math.random() * 0.25; }
+    else twist = Math.min(twist, 0.5);
+    twist *= Math.random() < 0.5 ? -1 : 1; // random direction
+    this.el.setAttribute('twister', {twist: twist});
   },
 
   update: function (oldData) {