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) {

src/index.html

@@ -55,6 +55,9 @@
         <a-asset-item id="logoSparks" src="assets/models/logosparks.json"></a-asset-item>
         <a-asset-item id="mineObj" src="assets/models/mine.obj"></a-asset-item>
         <a-asset-item id="sabercutParticles" src="assets/models/sabercut.json"></a-asset-item>
+        <a-asset-item id="stageNeonObj" src="assets/models/neons.obj"></a-asset-item>
+        <a-asset-item id="tunnelObj" src="assets/models/tunnel.obj"></a-asset-item>
+        <a-asset-item id="tunnelNeonObj" src="assets/models/tunnelneon.obj"></a-asset-item>
 
         <audio id="hoverSound" src="assets/sounds/hover.ogg"></audio>
 

src/templates/stage.html

@@ -11,7 +11,7 @@
   id="audioAnalyser"
   bind__audioanalyser="beatDetectionThrottle: menu.active && 5000 || 1000"
   audioanalyser="src: #introSong; fftSize: 64; enableBeatDetection: true; enableLevels: false; enableWaveform: false; beatDetectionThrottle: 5000; unique: true"
-  proxy-event="event: audioanalyserbeat; to: #logolight, #floor, #twister"></a-entity>
+  proxy-event="event: audioanalyserbeat; to: #logolight"></a-entity>
 
 <a-entity id="stage">
   <a-entity id="backglow"
@@ -22,7 +22,7 @@
     position="0 0 -50"
     scale="20 20 20"></a-entity>
 
-  <a-entity id="twister" twister position="0 0 -60" rotation="90 0 0" bind__twister="enabled: !menu.active"></a-entity>
+  <a-entity id="twister" position="0 0 -60" rotation="90 0 0" bind__twister="enabled: !menu.active"></a-entity>
 
   <a-entity
     id="audioColumns"
@@ -42,24 +42,24 @@
     <a-entity mixin="corridor" geometry="height: 21.5; depth: 0.2; width: 0.2" position="-3.5 -10 -7"></a-entity>
   </a-entity>
 
-  <a-mixin id="neon" geometry="skipCache: true" vertex-colors-buffer="baseColor: #9999ff" visible="false"></a-mixin>
-  <a-entity id="stageNeon" buffer-geometry-merger material="shader: flat; fog: false; vertexColors: vertex">
-    <a-entity mixin="neon" geometry="height: 0.05; depth: 50; width: 0.05" position="3.5 0.65 -32"></a-entity>
-    <a-entity mixin="neon" geometry="height: 0.05; depth: 50; width: 0.05" position="-3.5 0.65 -32"></a-entity>
-    <!-- Neons on sides. -->
-    <a-entity mixin="neon" geometry="height: 0.05; depth: 100; width: 0.05" position="4.5 0.65 -32"></a-entity>
-    <a-entity mixin="neon" geometry="height: 0.05; depth: 100; width: 0.05" position="-4.5 0.65 -32"></a-entity>
-  </a-entity>
+  <a-entity id="tunnel" obj-model="obj:#tunnelObj" material="shader: flat; flatShading: true; color: #010101"></a-entity>
+  <a-entity id="tunnelNeon" obj-model="obj:#tunnelNeonObj" material="shader: flat; fog: false; color: #9999ff" animation="property: components.material.material.color; type: color; from: #FFF to: #6666ff; dur: 200; easing: linear; startEvents: pulse"></a-entity>
+
+  <a-entity id="stageNeon" obj-model="obj:#stageNeonObj" material="shader: flat; fog: false; color: #9999ff" animation="property: components.material.material.color; type: color; from: #FFF to: #6666ff; dur: 200; easing: linear; startEvents: pulse"></a-entity>
 
   <!-- Lasers left. -->
-  <a-entity class="stageLaser" mixin="stageLaser" position=" -6 2.3 -40"></a-entity>
-  <a-entity class="stageLaser" mixin="stageLaser" position="-10 0 -38"></a-entity>
-  <a-entity class="stageLaser" mixin="stageLaser" position="-14 -3 -36"></a-entity>
+  <a-entity bind__stage-lasers="enabled: !menu.active" id="leftStageLasers">
+    <a-entity class="stageLaser" mixin="stageLaser" position=" -6 2.3 -40"></a-entity>
+    <a-entity class="stageLaser" mixin="stageLaser" position="-10 0 -38"></a-entity>
+    <a-entity class="stageLaser" mixin="stageLaser" position="-14 -3 -36"></a-entity>
+  </a-entity>
 
   <!-- Lasers right. -->
-  <a-entity class="stageLaser" mixin="stageLaser" position=" 6 4 -40"></a-entity>
-  <a-entity class="stageLaser" mixin="stageLaser" position="10 2 -38"></a-entity>
-  <a-entity class="stageLaser" mixin="stageLaser" position="14 -1.5 -36"></a-entity>
+  <a-entity bind__stage-lasers="enabled: !menu.active" id="rightStageLasers">
+    <a-entity class="stageLaser" mixin="stageLaser" position=" 6 4 -40"></a-entity>
+    <a-entity class="stageLaser" mixin="stageLaser" position="10 2 -38"></a-entity>
+    <a-entity class="stageLaser" mixin="stageLaser" position="14 -1.5 -36"></a-entity>
+  </a-entity>
 
   <a-mixin
     id="smoke"
@@ -110,9 +110,8 @@
 
   <a-entity
     id="floor"
-    animation__beat="property: components.material.material.color; type: color; to: #FFF; dur: 250; easing: linear; startEvents: audioanalyserbeat"
-    animation="property: components.material.material.color; type: color; to: #BBB; dur: 250; easing: linear; startEvents: animationcomplete__beat"
+    animation="property: components.material.material.color; type: color; from: #FFF to: #888; dur: 200; easing: linear; startEvents: pulse"
     geometry="primitive: plane; width: 3; height: 3"
-    material="color: #BBB; shader: flat; src: #floorImg"
+    material="color: #888; shader: flat; src: #floorImg"
     rotation="-90 0 0"></a-entity>
 </a-entity>