From 77d5938b4bf065403770c3d8e808e3a326ebbec9 Mon Sep 17 00:00:00 2001 From: schmelczerandras Date: Wed, 16 Sep 2020 22:05:49 +0200 Subject: [PATCH] Finish first demo scene --- package.json | 2 +- src/helper/random.ts | 4 ++++ src/index.ts | 8 ++++++-- src/scenes/rain-scene.ts | 44 +++++++++++++++++++++++++++++----------- 4 files changed, 43 insertions(+), 15 deletions(-) diff --git a/package.json b/package.json index 3141753..36a771d 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "decla.red", + "name": "sdf-2d-demo", "version": "0.0.0", "description": "![logo](media/declared.png)", "private": true, diff --git a/src/helper/random.ts b/src/helper/random.ts index 6a59c67..7426460 100644 --- a/src/helper/random.ts +++ b/src/helper/random.ts @@ -15,4 +15,8 @@ export abstract class Random { t ^= t + Math.imul(t ^ (t >>> 7), t | 61); return ((t ^ (t >>> 14)) >>> 0) / 4294967296; } + + public static getRandomInRange(from: number, to: number): number { + return from + Random.getRandom() * (to - from); + } } diff --git a/src/index.ts b/src/index.ts index aaeb6db..4dc7d66 100644 --- a/src/index.ts +++ b/src/index.ts @@ -37,8 +37,12 @@ const handleScene = async (scene: Scene) => { const renderer = compile( canvas, scene.descriptors, - [vec3.fromValues(0.4, 0.35, 0.6), vec3.fromValues(0, 1, 0), vec3.fromValues(1, 1, 0)], - { tileMultiplier: 8, enableStopwatch: false } + [vec3.fromValues(0.4, 1, 0.6), vec3.fromValues(1, 1, 0), vec3.fromValues(0.3, 1, 1)], + { + tileMultiplier: 10, + enableStopwatch: false, + shaderMacros: { softShadowTraceCount: '128', hardShadowTraceCount: '48' }, + } ); let triggerIsOver: () => void; diff --git a/src/scenes/rain-scene.ts b/src/scenes/rain-scene.ts index 616abd0..d44e7b7 100644 --- a/src/scenes/rain-scene.ts +++ b/src/scenes/rain-scene.ts @@ -1,47 +1,66 @@ -import { vec2 } from 'gl-matrix'; -import { CircleLight, Drawable, DrawableDescriptor, Flashlight, Tunnel } from 'sdf-2d'; +import { vec2, vec3 } from 'gl-matrix'; +import { CircleLight, Drawable, DrawableDescriptor, Tunnel } from 'sdf-2d'; import { Random } from '../helper/random'; import { Scene } from './scene'; export class RainScene implements Scene { public droplets: Array = []; + private light1: CircleLight = new CircleLight( + vec2.create(), + 1, + vec3.fromValues(1, 0, 1), + 1 + ); + + private light2: CircleLight = new CircleLight( + vec2.create(), + 1, + vec3.fromValues(1, 0, 0.5), + 1 + ); + public constructor() { - for (let i = 0; i < 100; i++) { + for (let i = 0; i < 20; i++) { this.droplets.push(new Droplet()); } } public get descriptors(): Array { - return [Tunnel.descriptor, CircleLight.descriptor, Flashlight.descriptor]; + return [Tunnel.descriptor, CircleLight.descriptor]; } public animate( currentTime: number, viewAreaSize: { width: number; height: number } ): void { + vec2.set(this.light1.center, 0, viewAreaSize.height / 2); + vec2.set(this.light2.center, viewAreaSize.width, viewAreaSize.height / 2); this.droplets.forEach((d) => d.animate(currentTime, viewAreaSize)); } public get drawables(): Array { - return this.droplets.map((d) => d.drawable); + return [...this.droplets.map((d) => d.drawable), this.light1, this.light2]; } } class Droplet { public readonly drawable: Tunnel; - private speed = Random.getRandom() * 0.2 + 0.1; - private position = vec2.fromValues(Random.getRandom(), Random.getRandom()); - private length = Random.getRandom() * 30 + 8; + private speed = Random.getRandom() * 0.2 + 0.2; + private position = vec2.fromValues( + Random.getRandomInRange(0.1, 0.9), + Random.getRandom() + ); + private length = Random.getRandom() * 20 + 4; constructor() { - const size = Random.getRandom() * 10 + 5; + const size = Random.getRandom() * 2 + 2; this.drawable = new Tunnel( vec2.create(), vec2.create(), - size + Random.getRandom() * 5 + 5, + size + Random.getRandom() * 2 + 2, size ); } @@ -50,11 +69,12 @@ class Droplet { currentTime: number, { width, height }: { width: number; height: number } ) { - const heightOffset = 300; + const heightOffset = 100; vec2.set( this.drawable.from, this.position[0] * width, - height - ((this.speed * currentTime) % (height + heightOffset)) + height - + ((this.position[1] * height + this.speed * currentTime) % (height + heightOffset)) ); vec2.add(this.drawable.to, this.drawable.from, vec2.fromValues(0, this.length));