diff --git a/src/components/beat-loader.js b/src/components/beat-loader.js index 270a648..bc1da2c 100644 --- a/src/components/beat-loader.js +++ b/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; diff --git a/src/components/wall-shader.js b/src/components/wall-shader.js new file mode 100644 index 0000000..869b0ea --- /dev/null +++ b/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)); + } + ` +}); diff --git a/src/components/wall.js b/src/components/wall.js new file mode 100644 index 0000000..4c593df --- /dev/null +++ b/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(); + }, +}); diff --git a/src/index.html b/src/index.html index 6607548..fbb38c2 100644 --- a/src/index.html +++ b/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 @@ - + +