Use new library

package.json

@@ -45,7 +45,7 @@
     "resolve-url-loader": "^3.1.1",
     "sass": "^1.26.3",
     "sass-loader": "^9.0.3",
-    "sdf-2d": "^0.2.0-fix",
+    "sdf-2d": "^0.3.0",
     "source-map-loader": "^1.1.0",
     "svg-url-loader": "^6.0.0",
     "terser-webpack-plugin": "^2.3.8",

src/index.ts

@@ -14,7 +14,7 @@ import { TunnelScene } from './scenes/tunnel-scene';
 import './styles/index.scss';
 
 const scenes = [TunnelScene, RainScene, BlobScene];
-const sceneIntervalInSeconds = 8;
+const sceneIntervalInSeconds = 800;
 
 glMatrix.setMatrixArrayType(Array);
 removeUnnecessaryOutlines();

src/scenes/blob/blob-scene.ts

@@ -1,6 +1,7 @@
-import { vec2, vec3 } from 'gl-matrix';
-import { Circle, CircleLight, compile, InvertedTunnel, Renderer } from 'sdf-2d';
+import { vec2 } from 'gl-matrix';
+import { Circle, CircleLight, compile, Renderer } from 'sdf-2d';
 import { prettyPrint } from '../../helper/pretty-print';
+import { rgb } from '../../helper/rgb';
 import { rgb255 } from '../../helper/rgb255';
 import { Scene } from '../scene';
 import { Blob } from './blob';
@@ -10,9 +11,6 @@ export class BlobScene implements Scene {
   private canvas: HTMLCanvasElement;
   private overlay: HTMLDivElement;
 
-  private tunnels: Array<InvertedTunnel> = [];
-  private lights: Array<CircleLight> = [];
-
   public async initialize(
     canvas: HTMLCanvasElement,
     overlay: HTMLDivElement
@@ -23,18 +21,17 @@ export class BlobScene implements Scene {
       Circle.descriptor,
       {
         ...CircleLight.descriptor,
-        shaderCombinationSteps: [1, 2],
+        shaderCombinationSteps: [0, 1, 2],
       },
       Blob.descriptor,
     ]);
 
     this.renderer.setRuntimeSettings({
-      ambientLight: vec3.fromValues(0.35, 0.1, 0.45),
-      shadowLength: 800,
+      ambientLight: rgb255(89, 25, 115),
       colorPalette: [
         rgb255(0, 0, 0),
-        rgb255(119, 173, 120),
-        rgb255(224, 96, 126),
+        rgb255(0, 0, 0),
+        rgb255(119, 143, 120),
         rgb255(224, 96, 126),
       ],
     });
@@ -71,7 +68,7 @@ export class BlobScene implements Scene {
           (Math.cos((1 - q) * Math.PI) * length) / 2 + width / 2,
           (Math.sin((1 - q) * Math.PI) * length) / 2,
         ],
-        [1, 0.8, 0],
+        rgb(1, 0.8, 0),
         1
       ),
       new CircleLight(
@@ -79,7 +76,7 @@ export class BlobScene implements Scene {
           (Math.cos(-q * Math.PI) * length) / 2 + width / 2,
           (Math.sin(-q * Math.PI) * length) / 2,
         ],
-        [0, 0.8, 1],
+        rgb(0, 0.8, 1),
         1
       ),
     ].forEach((d) => this.renderer.addDrawable(d));

src/scenes/blob/blob.ts

@@ -19,15 +19,18 @@ export class Blob extends Drawable {
           return -log2( res )/k;
         }
 
-        float circleDistance(vec2 circleCenter, float radius) {
-          return distance(position, circleCenter) - radius;
+        float circleDistance(vec2 circleCenter, float radius, vec2 target) {
+          return distance(target, circleCenter) - radius;
         }
 
-        void blobMinDistance(inout float minDistance, inout float color) {
+        float blobMinDistance(vec2 target, out float colorIndex) {
+          float minDistance = 1000.0;
+          colorIndex = 3.0;
+
           for (int i = 0; i < BLOB_COUNT; i++) {
-            float headDistance = circleDistance(headCenters[i], headRadii[i]);
-            float leftFootDistance = circleDistance(leftFootCenters[i], footRadii[i]);
-            float rightFootDistance = circleDistance(rightFootCenters[i], footRadii[i]);
+            float headDistance = circleDistance(headCenters[i], headRadii[i], target);
+            float leftFootDistance = circleDistance(leftFootCenters[i], footRadii[i], target);
+            float rightFootDistance = circleDistance(rightFootCenters[i], footRadii[i], target);
 
             float res = min(
               smoothMin(headDistance, leftFootDistance),
@@ -35,8 +38,9 @@ export class Blob extends Drawable {
             );
 
             minDistance = min(minDistance, res);
-            color = mix(3.0 / {paletteSize}, color, step(distanceNdcPixelSize + SURFACE_OFFSET, res));
           }
+
+          return minDistance;
         }
       `,
       distanceFunctionName: 'blobMinDistance',

src/scenes/rain/rain-scene.ts

@@ -1,4 +1,4 @@
-import { vec2 } from 'gl-matrix';
+import { vec2, vec3 } from 'gl-matrix';
 import { CircleLight, compile, Renderer, Tunnel } from 'sdf-2d';
 import { prettyPrint } from '../../helper/pretty-print';
 import { rgb } from '../../helper/rgb';
@@ -34,7 +34,13 @@ export class RainScene implements Scene {
 
     this.renderer.setRuntimeSettings({
       ambientLight: rgb(0.2, 0.2, 0.2),
-      colorPalette: [rgb(1, 1, 0), rgb(1, 1, 0), rgb(0.3, 1, 1), rgb(0.3, 1, 1)],
+      backgroundColor: vec3.fromValues(1, 1, 1),
+      colorPalette: [
+        rgb(1, 1, 1),
+        vec3.fromValues(0.3, 1, 1),
+        rgb(1, 1, 0),
+        rgb(0.3, 1, 1),
+      ],
     });
 
     for (let i = 0; i < (canvas.getBoundingClientRect().width / 800) * 20; i++) {

src/scenes/tunnel-scene.ts

@@ -43,7 +43,7 @@ export class TunnelScene implements Scene {
       new InvertedTunnel(previousEnd, currentEnd, previousRadius, currentToRadius)
     );
 
-    if (this.tunnels.length % 3 == 0) {
+    if (this.tunnels.length % 4 == 0) {
       this.lights.push(
         new CircleLight(
           previousEnd,
@@ -52,7 +52,7 @@ export class TunnelScene implements Scene {
             Random.getRandom(),
             Random.getRandom(),
           ]),
-          0.35
+          0.25
         )
       );
     }
@@ -78,8 +78,8 @@ export class TunnelScene implements Scene {
     this.renderer.setRuntimeSettings({
       isWorldInverted: true,
       ambientLight: rgb(0.35, 0.1, 0.45),
-      shadowLength: 550,
-      colorPalette: [rgb(0.4, 1, 0.6), rgb(1, 1, 0), rgb(0.3, 1, 1)],
+      backgroundColor: rgb(1, 1, 1),
+      colorPalette: [rgb(0.4, 0.5, 0.6), rgb(0, 0, 0), rgb(0, 0, 0), rgb(0, 0, 0)],
     });
 
     for (let i = 0; i < 200; i++) {