diff --git a/src/helper/to-percent.ts b/src/helper/to-percent.ts deleted file mode 100644 index 0047591..0000000 --- a/src/helper/to-percent.ts +++ /dev/null @@ -1 +0,0 @@ -export const toPercent = (value: number) => `${Math.round(value * 100)}%`; diff --git a/src/index.ts b/src/index.ts index f5199e6..36e37a7 100644 --- a/src/index.ts +++ b/src/index.ts @@ -24,7 +24,7 @@ const handleScene = async (SceneConstructor: new () => Scene) => { scene.drawNextFrame(currentTime, deltaTime); - if ((timeSinceStart += deltaTime) > 2 * 1000) { + if ((timeSinceStart += deltaTime) > 8 * 1000) { triggerIsOver(); } else { requestAnimationFrame(handleFrame); @@ -39,7 +39,7 @@ const handleScene = async (SceneConstructor: new () => Scene) => { const main = async () => { try { - const scenes = [TunnelScene, RainScene]; + const scenes = [RainScene, TunnelScene]; let i = 0; for (;;) { diff --git a/src/scenes/rain/rain-scene.ts b/src/scenes/rain/rain-scene.ts index 387b205..70af93d 100644 --- a/src/scenes/rain/rain-scene.ts +++ b/src/scenes/rain/rain-scene.ts @@ -21,7 +21,7 @@ export class RainScene implements Scene { private overlay: HTMLDivElement; public constructor() { - for (let i = 0; i < 20; i++) { + for (let i = 0; i < 40; i++) { this.droplets.push(new Droplet()); } } @@ -37,7 +37,7 @@ export class RainScene implements Scene { [ { ...Tunnel.descriptor, - shaderCombinationSteps: [0, 1, 2, 4, 8, 12], + shaderCombinationSteps: [0, 1, 2, 4, 8, 12, 16, 24], }, { ...CircleLight.descriptor, @@ -51,10 +51,15 @@ export class RainScene implements Scene { ], { enableStopwatch: false, - softShadowTraceCount: '128', - hardShadowTraceCount: '48', + softShadowTraceCount: '64', + hardShadowTraceCount: '32', } ); + + this.renderer.setRuntimeSettings({ + ambientLight: vec3.fromValues(0.45, 0.25, 0.45), + tileMultiplier: 10, + }); } public drawNextFrame( diff --git a/src/scenes/tunnel-scene.ts b/src/scenes/tunnel-scene.ts index ee2a304..b157c32 100644 --- a/src/scenes/tunnel-scene.ts +++ b/src/scenes/tunnel-scene.ts @@ -1,5 +1,8 @@ import { vec2, vec3 } from 'gl-matrix'; -import { CircleLight, compile, Renderer, Tunnel } from 'sdf-2d'; +import { CircleLight, compile, InvertedTunnel, Renderer } from 'sdf-2d'; +import { clamp } from '../helper/clamp'; +import { last } from '../helper/last'; +import { Random } from '../helper/random'; import { Scene } from './scene'; export class TunnelScene implements Scene { @@ -7,7 +10,40 @@ export class TunnelScene implements Scene { private canvas: HTMLCanvasElement; private overlay: HTMLDivElement; - public constructor() {} + private tunnels: Array = []; + private lights: Array = []; + + private generateTunnel() { + const canvasSize = this.canvas.getBoundingClientRect(); + + let previousEnd = vec2.fromValues(0, 200); + let previousRadius = 75; + + if (this.tunnels.length > 0) { + previousEnd = last(this.tunnels).to; + previousRadius = last(this.tunnels).toRadius; + } + + let height = previousEnd.y + Random.getRandomInRange(-400, 400); + height = clamp(height, 200, canvasSize.height - 200); + + const currentEnd = vec2.fromValues(this.tunnels.length * 200, height); + const currentToRadius = Random.getRandom() * 100 + 50; + + this.tunnels.push( + new InvertedTunnel(previousEnd, currentEnd, previousRadius, currentToRadius) + ); + + if (this.tunnels.length % 5 == 0) { + this.lights.push( + new CircleLight( + previousEnd, + [Random.getRandom(), Random.getRandom(), Random.getRandom()], + 0.25 + ) + ); + } + } public async initialize( canvas: HTMLCanvasElement, @@ -19,12 +55,12 @@ export class TunnelScene implements Scene { canvas, [ { - ...Tunnel.descriptor, + ...InvertedTunnel.descriptor, shaderCombinationSteps: [0, 1, 2, 4, 8, 12], }, { ...CircleLight.descriptor, - shaderCombinationSteps: [2], + shaderCombinationSteps: [1, 2, 3, 4, 5, 6, 7], }, ], [ @@ -34,18 +70,32 @@ export class TunnelScene implements Scene { ], { enableStopwatch: false, - softShadowTraceCount: '128', - hardShadowTraceCount: '48', + softShadowTraceCount: '64', + hardShadowTraceCount: '32', } ); + + this.renderer.setRuntimeSettings({ + isWorldInverted: true, + ambientLight: vec3.fromValues(0.45, 0.25, 0.45), + }); + + for (let i = 0; i < 100; i++) { + this.generateTunnel(); + } } + private deltaSinceStart = 0; public drawNextFrame( currentTime: DOMHighResTimeStamp, deltaTime: DOMHighResTimeStamp ): void { const { width, height } = this.canvas.getBoundingClientRect(); - this.renderer.setViewArea(vec2.fromValues(0, height), vec2.fromValues(width, height)); + this.deltaSinceStart += deltaTime; + this.renderer.setViewArea( + vec2.fromValues(this.deltaSinceStart / 2, height), + vec2.fromValues(width, height) + ); this.renderer.autoscaleQuality(deltaTime); this.overlay.innerText = JSON.stringify( @@ -54,11 +104,7 @@ export class TunnelScene implements Scene { ' ' ); - const viewAreaSize = this.renderer.viewAreaSize; - - [ - new Tunnel(vec2.fromValues(200, 200), vec2.fromValues(600, 600), 30, 200), - ].forEach((d) => this.renderer.addDrawable(d)); + [...this.tunnels, ...this.lights].forEach((d) => this.renderer.addDrawable(d)); this.renderer.renderDrawables(); }