beam effect on new blocks

package-lock.json

@@ -95,9 +95,9 @@
       "integrity": "sha512-mVxIH5qjik3qnbmeuXnYWFyKkcdLdZEQIFIFky1Z3QY8gZFsbCgocImwAx9UV9DTsIywa/lt3nXyNrpgOQgNCg=="
     },
     "aframe-audioanalyser-component": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/aframe-audioanalyser-component/-/aframe-audioanalyser-component-4.0.0.tgz",
-      "integrity": "sha512-piyQ6Ui8AmojGEWUx1LpsX2K7R0WiUzeehea699mAf3oE+BxGyDPNlFvi0ti3t9cdhj6ybvySu7xKRZ3f4llyA=="
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/aframe-audioanalyser-component/-/aframe-audioanalyser-component-4.0.1.tgz",
+      "integrity": "sha512-jTkt9umD4SoRmW6vlJfm2zG9fV8pzecNzTdJYn12w8hpZ0lp3BtFSKqTDy0RE3dqAsDJo9AU72niZAu8w3NeeA=="
     },
     "aframe-cubemap-component": {
       "version": "0.1.4",

src/components/beams.js

@@ -0,0 +1,62 @@
+AFRAME.registerComponent('beams', {
+  schema: {
+    poolSize: {default: 10}
+  },
+  init: function () {
+    var redMaterial;
+    var blueMaterial;
+    var materialOptions;
+    var geo;
+    var beam;
+
+    this.redBeams = [];
+    this.blueBeams = [];
+    this.currentRed = 0;
+    this.currentBlue = 0;
+
+    materialOptions = {
+      color: 0xaa3333,
+      map: new THREE.TextureLoader().load('assets/img/beam.png'),
+      transparent: true,
+      blending: THREE.AdditiveBlending
+    };
+    redMaterial = new THREE.MeshBasicMaterial(materialOptions);
+    materialOptions.color = 0x4444cc;
+    blueMaterial = new THREE.MeshBasicMaterial(materialOptions);
+    geo = new THREE.PlaneBufferGeometry(0.4, 50).translate(0, 25, 0);
+
+    for (var j = 0; j < 2; j++) {
+      for (var i = 0; i < this.data.poolSize; i++) {
+        beam = new THREE.Mesh(geo, j === 0 ? redMaterial : blueMaterial);
+        beam.visible = false;
+        this.el.object3D.add(beam);
+        this[j === 0 ? 'redBeams' : 'blueBeams'].push(beam);
+      }
+    }
+  },
+
+  newBeam: function (color, position) {
+    var beam;
+    if (color === 'red') {
+      beam = this.redBeams[this.currentRed];
+      this.currentRed = (this.currentRed + 1) % this.redBeams.length;
+      beam.position.set(position.x, position.y, position.z + this.currentRed / 50.0); // z offset to avoid z-fighting
+    } else {
+      beam = this.blueBeams[this.currentBlue];
+      this.currentBlue = (this.currentBlue + 1) % this.blueBeams.length;
+      beam.position.set(position.x, position.y, position.z + this.currentBlue / 50.0);
+    }
+
+    beam.visible = true;
+    beam.scale.x = 1;
+
+    AFRAME.anime({
+      targets: beam.scale,
+      x: 0,
+      duration: 300,
+      easing: 'easeInCubic',
+      complete: (anim) => { beam.visible = false; }
+    });
+  }
+
+});

src/components/beat-loader.js

@@ -15,6 +15,10 @@ AFRAME.registerComponent('beat-loader', {
   horizontalPositions: [-0.60, -0.25, 0.25, 0.60],
   verticalPositions: [1.00, 1.35, 1.70],
 
+  init: function () {
+    this.beams = document.getElementById('beams').components['beams'];
+  },
+
   update: function () {
     if (!this.data.challengeId || !this.data.difficulty) { return; }
     this.loadBeats();
@@ -122,6 +126,8 @@ AFRAME.registerComponent('beat-loader', {
       el.object3D.rotation.z = THREE.Math.degToRad(this.orientations[noteInfo._cutDirection]);
       el.play();
 
+      this.beams.newBeam(color, el.object3D.position);
+
       if (this.first) { return; }
 
       this.first = {

src/index.html

@@ -18,9 +18,9 @@
       effect-bloom="strength: 1"
       intro-song
       overlay="objects: #menu, #keyboard, #rightHand, #leftHand, [mixin~='cursorMesh']"
-      pool__beat-arrow-blue="mixin: beat arrow-blue-beat; size: 5; container: #beatContainer" 
-      pool__beat-arrow-red="mixin: beat arrow-red-beat; size: 10; container: #beatContainer" 
-      pool__beat-dot-blue="mixin: beat dot-blue-beat; size: 10; container: #beatContainer" 
+      pool__beat-arrow-blue="mixin: beat arrow-blue-beat; size: 5; container: #beatContainer"
+      pool__beat-arrow-red="mixin: beat arrow-red-beat; size: 10; container: #beatContainer"
+      pool__beat-dot-blue="mixin: beat dot-blue-beat; size: 10; container: #beatContainer"
       pool__beat-dot-red="mixin: beat dot-red-beat; size: 10; container: #beatContainer"
       proxy-event="event: menuchallengeselect; to: #searchResultsContainer, #menuDifficultiesGroup"
       search
@@ -49,6 +49,7 @@
         <img id="playImg" src="assets/img/play.png">
         <img id="skyTexture" src="assets/img/stage/sky.jpg">
         <img id="sliceImg" src="assets/img/slice.png">
+        <img id="beamImg" src="assets/img/beam.png">
         <img id="smokeTexture" src="assets/img/stage/smoke.png">
 
         <a-mixin id="slice" slice9="color: #050505; transparent: true; opacity: 0.7; src: #sliceImg; left: 50; right: 52; top: 50; bottom: 52; padding: 0.18"></a-mixin>

src/templates/stage.html

@@ -49,6 +49,8 @@
 
   <a-entity id="smoke2" geometry="primitive: cylinder; radius: 20; height: 15; openEnded: true; segmentsHeight: 1; segmentsRadial: 9" additive material="repeat: 2 1; side: double; fog: true; src: #smokeTexture; shader: flat; transparent: true; color: #111" position="0 1.8 0" animation="property: rotation; from: 0 0 0; to: 0 360 0; dur: 243000; easing: linear; loop: true"></a-entity>
 
+  <a-entity id="beams" beams></a-entity>
+
   <a-entity light="type: directional; intensity: 3" position="0 10 10"></a-entity>
 
   <a-entity id="logolight"