Finish first demo scene

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "decla.red",
+  "name": "sdf-2d-demo",
   "version": "0.0.0",
   "description": "![logo](media/declared.png)",
   "private": true,

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);
+  }
 }

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)],
+    [vec3.fromValues(0.4, 1, 0.6), vec3.fromValues(1, 1, 0), vec3.fromValues(0.3, 1, 1)],
-    { tileMultiplier: 8, enableStopwatch: false }
+    {
+      tileMultiplier: 10,
+      enableStopwatch: false,
+      shaderMacros: { softShadowTraceCount: '128', hardShadowTraceCount: '48' },
+    }
   );
 
   let triggerIsOver: () => void;

src/scenes/rain-scene.ts

@@ -1,47 +1,66 @@
-import { vec2 } from 'gl-matrix';
+import { vec2, vec3 } from 'gl-matrix';
-import { CircleLight, Drawable, DrawableDescriptor, Flashlight, Tunnel } from 'sdf-2d';
+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<Droplet> = [];
 
+  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<DrawableDescriptor> {
-    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<Drawable> {
-    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 speed = Random.getRandom() * 0.2 + 0.2;
-  private position = vec2.fromValues(Random.getRandom(), Random.getRandom());
+  private position = vec2.fromValues(
-  private length = Random.getRandom() * 30 + 8;
+    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));