Add improvements

src/scenes/blob/blob-scene.ts

@@ -32,7 +32,6 @@ export class BlobScene implements Scene {
         Blob.descriptor,
       ],
       this.drawNextFrame.bind(this),
-      {},
       {
         ambientLight: rgb255(89, 25, 115),
         enableHighDpiRendering: true,
@@ -65,6 +64,8 @@ export class BlobScene implements Scene {
 
     const q = (currentTime % 8000) / 4300;
     this.blob.animate(currentTime);
+    this.blob.position = [width / 2, -length / 4 + length / 2];
+
     [
       new Circle([width / 2, -length / 4], length / 2),
       this.blob,

src/scenes/blob/blob.ts

@@ -120,8 +120,6 @@ export class Blob extends Drawable {
         Math.sin((q > 1 ? q - 1 : 0) * Math.PI) * 10
       )
     );
-
-    this.position = this.center;
   }
 
   public minDistance(target: vec2): number {

src/scenes/metaball/metaball-scene.ts

@@ -43,7 +43,6 @@ export class MetaballScene implements Scene {
         },
       ],
       this.drawNextFrame.bind(this),
-      {},
       {
         ambientLight: rgb(0.1, 0.1, 0.3),
         enableHighDpiRendering: true,

src/scenes/rain/droplet.ts

@@ -1,8 +1,8 @@
 import { ReadonlyVec2, vec2 } from 'gl-matrix';
-import { DropletFactory, rgb } from 'sdf-2d';
+import { DropletFactory, rgb255 } from 'sdf-2d';
 import { Random } from '../../helper/random';
 
-export const Droplet = DropletFactory(rgb(0.3, 1, 1));
+export const Droplet = DropletFactory(rgb255(122, 122, 255));
 export class DropletWrapper {
   public readonly drawable: InstanceType<typeof Droplet>;
 

src/scenes/rain/rain-scene.ts

@@ -7,8 +7,8 @@ import { Droplet, DropletWrapper } from './droplet';
 
 export class RainScene implements Scene {
   private droplets: Array<DropletWrapper> = [];
-  private light1: CircleLight = new CircleLight(vec2.create(), rgb255(184, 41, 255), 2);
-  private light2: CircleLight = new CircleLight(vec2.create(), rgb255(255, 31, 109), 2);
+  private light1: CircleLight = new CircleLight(vec2.create(), rgb255(184, 41, 255), 1.5);
+  private light2: CircleLight = new CircleLight(vec2.create(), rgb255(255, 31, 109), 1.5);
 
   private overlay: HTMLDivElement;
   public insights?: any;
@@ -32,8 +32,8 @@ export class RainScene implements Scene {
         },
       ],
       this.drawNextFrame.bind(this),
-      {},
       {
+        backgroundColor: rgb(0.5, 0.5, 0.5),
         ambientLight: rgb(0.2, 0.2, 0.2),
         enableHighDpiRendering: true,
       }

src/scenes/tunnel-scene.ts

@@ -70,12 +70,12 @@ export class TunnelScene implements Scene {
   }
 
   public async run(canvas: HTMLCanvasElement, overlay: HTMLDivElement): Promise<void> {
-    const noiseTexture = await renderNoise([1024, 1], 15, 1);
+    const noiseTexture = await renderNoise([1024, 1], 15, 0.5);
 
     this.canvas = canvas;
     this.overlay = overlay;
 
-    for (let i = 0; i < 200; i++) {
+    for (let i = 0; i < 30; i++) {
       this.generateTunnel();
     }
 
@@ -92,8 +92,8 @@ export class TunnelScene implements Scene {
         },
       ],
       this.drawNextFrame.bind(this),
-      { lightPenetrationRatio: 0.5 },
       {
+        lightPenetrationRatio: 0.5,
         isWorldInverted: true,
         enableHighDpiRendering: true,
         ambientLight: rgb(0.35, 0.1, 0.45),
@@ -123,7 +123,7 @@ export class TunnelScene implements Scene {
     const height = renderer.canvasSize.y;
 
     this.deltaSinceStart += deltaTime;
-    const startX = this.deltaSinceStart / 3;
+    const startX = this.deltaSinceStart / 4;
     const endX = startX + width;
     renderer.setViewArea(vec2.fromValues(startX, height), vec2.fromValues(width, height));