Add Walls

src/components/beat-loader.js

@@ -136,7 +136,7 @@ AFRAME.registerComponent('beat-loader', {
     for (i=0; i < obstacles.length; ++i) {
       noteTime = obstacles[i]._time * msPerBeat;
       if (noteTime > beatsTime && noteTime <= beatsTime + delta) {
-        //this.generateWall(obstacles[i]);
+        this.generateWall(obstacles[i]);
       }
     }
 
@@ -188,23 +188,23 @@ AFRAME.registerComponent('beat-loader', {
     };
   })(),
 
-  // generateWall: function (wallInfo) {
-  //   var el = this.el.sceneEl.components.pool__wall.requestEntity();
-  //   var speed = this.data.beatSpeed;
-  //   var durationMs;
-  //   if (!el) { return; }
-  //   durationSeconds = 60 * (wallInfo._duration / this.bpm);
-  //   el.setAttribute('wall', {
-  //     speed: speed
-  //   });
-  //   el.object3D.position.set(
-  //     this.horizontalPositions[wallInfo._lineIndex],
-  //     1.30,
-  //     -(this.data.beatAnticipationTime * speed)
-  //   );
-  //   el.object3D.scale.set(wallInfo._width * 0.30, 2.5, durationSeconds * speed);
-  //   el.play();
-  // },
+  generateWall: function (wallInfo) {
+    var el = this.el.sceneEl.components.pool__wall.requestEntity();
+    var speed = this.data.beatSpeed;
+    var durationMs;
+    if (!el) { return; }
+    durationSeconds = 60 * (wallInfo._duration / this.bpm);
+    el.setAttribute('wall', {
+      speed: speed
+    });
+    el.object3D.position.set(
+      this.horizontalPositions[wallInfo._lineIndex],
+      1.30,
+      -(this.data.beatAnticipationTime * speed)
+    );
+    el.object3D.scale.set(wallInfo._width * 0.30, 2.5, durationSeconds * speed);
+    el.play();
+  },
 
   requestBeat: function (type, color) {
     var beatPoolName = 'pool__beat-' + type;

src/components/wall-shader.js

@@ -0,0 +1,67 @@
+AFRAME.registerShader('wall-shader', {
+  schema: {
+    iTime: {type: 'time', is: 'uniform'},
+    tex: {type: 'map', is: 'uniform'}
+  },
+  vertexShader: `
+    varying vec2 uvs;
+    void main() {
+      uvs.xy = uv.xy;
+      gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+    }
+  `,
+  fragmentShader: `
+    // based on https://www.shadertoy.com/view/ldlXRS
+    varying vec2 uvs;
+    uniform float iTime;
+    uniform sampler2D tex;
+
+    #define time iTime/1000.0*0.15
+    #define tau 6.2831853
+
+    mat2 makem2(in float theta){float c = cos(theta);float s = sin(theta);return mat2(c,-s,s,c);}
+    float noise( in vec2 x ){return texture2D(tex, x*.01).x;}
+
+    float fbm(in vec2 p) {
+      float z=2.;
+      float rz = 0.;
+      vec2 bp = p;
+      for (float i= 1.;i < 6.;i++)
+      {
+        rz+= abs((noise(p)-0.5)*2.)/z;
+        z = z*2.;
+        p = p*2.;
+      }
+      return rz;
+    }
+
+    float dualfbm(in vec2 p) {
+      vec2 p2 = p*.4;
+      vec2 basis = vec2(fbm(p2-time*1.6),fbm(p2+time*1.7));
+      basis = (basis-.5)*.2;
+      p += basis;
+      
+      return fbm(p*makem2(time*0.2));
+    }
+
+    void main() {
+      vec2 p = uvs.xy-0.5;// / iResolution.xy-0.5;
+      vec2 pp = p;
+      p*= 4.0;
+      
+      float rz = dualfbm(p)*5.0;
+      
+      p += time * 20.0;
+      rz *= pow(abs(cos(p.x*.2) + sin(p.y*1.4)*0.1), .4);
+      
+      vec3 col = vec3(0.2,0.0,0.0) / rz;
+      col.g = smoothstep(0.6, 1.0, col.r);
+      col.b = smoothstep(0.6, 1.0, col.r);
+        
+      col += smoothstep(0.49, 0.495, abs(pp.x));
+      col += smoothstep(0.49, 0.495, abs(pp.y));
+        
+      gl_FragColor = vec4(col, 0.2 + smoothstep(0.0, 0.6, col.x));
+    }
+  ` 
+});

src/components/wall.js

@@ -0,0 +1,20 @@
+AFRAME.registerComponent('wall', {
+  schema: {
+    speed: {default: 1.0}
+  },
+
+  init: function () {
+    this.maxZ = 10;
+  },
+
+  tock: function (time, delta) {
+    this.el.object3D.position.z += this.data.speed * (delta / 1000);
+    this.returnToPool();
+  },
+
+  returnToPool: function () {
+    if (this.el.object3D.position.z < this.maxZ) { return; }
+    this.el.sceneEl.components.pool__wall.returnEntity(this.el);
+    this.el.pause();
+  },
+});

src/index.html

@@ -32,6 +32,7 @@
       pool__beat-dot-blue="mixin: dotBlueBeat; size: 10; container: #beatContainer"
       pool__beat-dot-red="mixin: dotRedBeat; size: 10; container: #beatContainer"
       pool__beat-mine="mixin: mine; size: 10; container: #beatContainer"
+      pool__wall="mixin: wall; size: 10; container: #beatContainer"  
       proxy-event__menuleft="event: menuchallengeunselect; to: .menuAnimation"
       proxy-event__menuright="event: menuchallengeselect; to: .menuAnimation"
       proxy-event__cleargame1="event: pausemenuexit; as: cleargame; to: a-scene"
@@ -87,7 +88,8 @@
         <a-mixin id="dotRedBeat" mixin="beat" beat="color: red; type: dot"></a-mixin>
         <a-mixin id="gameoverAnimation" animation__gameover="dur: 1000; easing: easeOutQuad"></a-mixin>
         <a-mixin id="mine" mixin="beat" beat="type: mine"></a-mixin>
-
+        <a-mixin id="wall" geometry wall material="shader: wall-shader; tex: #noiseTexture; repeat: 2 2; transparent: true; side: double">
+          
         <a-mixin id="badBeat"
           geometry="primitive: plane"
           material="shader: flat; transparent: true"