twister animation (fixes #60)

src/components/twister.js

@@ -1,5 +1,6 @@
 AFRAME.registerComponent('twister', {
   schema: {
+    enabled: {default: false},
     twist: {default: 0},
     vertices: {default: 4, type: 'int'},
     count: {default: 20, type: 'int'},
@@ -11,6 +12,12 @@ AFRAME.registerComponent('twister', {
   init: function () {
     this.currentTwist = 0;
     this.animate = false;
+    this.el.addEventListener('audioanalyser-beat', this.pulse.bind(this));
+  },
+
+  pulse: function () {
+    if (!this.data.enabled) { return; }
+    this.el.setAttribute('twister', {twist: Math.random() * 0.5 - 0.25});
   },
 
   update: function (oldData) {
@@ -20,6 +27,7 @@ AFRAME.registerComponent('twister', {
 
     if (Math.abs(this.data.twist - this.currentTwist) > 0.001){
       this.animate = true;
+      return;
     }
 
     this.clearSegments();

src/templates/stage.html

@@ -3,12 +3,12 @@
 <a-entity
   id="audioAnalyser"
   audioanalyser="src: #introSong; fftSize: 64; enableBeatDetection: true; enableLevels: false; enableWaveform: false; beatDetectionThrottle: 5000; unique: true"
-  proxy-event="event: audioanalyser-beat; to: #logolight, #floor"></a-entity>
+  proxy-event="event: audioanalyser-beat; to: #logolight, #floor, #twister"></a-entity>
 
 <a-entity id="stage">
   <a-entity id="backglow" obj-model="obj: #backglowObj" position="0 0 -50" scale="20 20 20" material="shader: flat; transparent: true; fog: false; color: #f00; src:#backglowTexture; opacity: 0.8"></a-entity>
 
-  <a-entity id="twister" twister position="0 0 -60" rotation="90 0 0"></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="audioColumns"