Use new library version

package.json

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

src/index.html

@@ -11,7 +11,7 @@
     <meta name="theme-color" content="#103783" />
     <meta
       name="description"
-      content="Some simple demos to showcase the possibilities of the sdf-2d library library. Click on the title to find out more."
+      content="Some simple demos to showcase the possibilities of the sdf-2d library. Click on the title to find out more."
     />
 
     <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png" />

src/index.ts

@@ -21,21 +21,16 @@ removeUnnecessaryOutlines();
 
 const deltaTimeCalculator = new DeltaTimeCalculator();
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
-const info = document.querySelector('#info') as HTMLDivElement;
 const errorText = document.querySelector('#error-text') as HTMLParamElement;
-const errors = document.querySelector('#errors') as HTMLDivElement;
 const errorsContainer = document.querySelector('#errors-container') as HTMLDivElement;
 const toggleButton = document.querySelector('#toggle-text');
 const overlay = document.querySelector('#overlay') as HTMLDivElement;
 
-let textVisible = false;
+let textVisible = true;
 const handleTextToggle = () => {
   textVisible = !textVisible;
-
+  overlay.style.visibility = textVisible ? 'visible' : 'hidden';
-  [info, overlay, errors].forEach(
+  toggleButton.innerHTML = textVisible ? 'Hide insights' : 'Show insights';
-    (e) => (e.style.visibility = textVisible ? 'inherit' : 'hidden')
-  );
-  toggleButton.innerHTML = textVisible ? 'Hide text' : 'Show text';
   if (textVisible) {
     toggleButton.classList.remove('off');
   } else {

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 { prettyPrint } from '../../helper/pretty-print';
+import { rgb255 } from '../../helper/rgb255';
 import { Scene } from '../scene';
 import { Blob } from './blob';
 
@@ -18,26 +19,24 @@ export class BlobScene implements Scene {
   ): Promise<void> {
     this.canvas = canvas;
     this.overlay = overlay;
-    this.renderer = await compile(
+    this.renderer = await compile(canvas, [
-      canvas,
+      Circle.descriptor,
-      [
+      {
-        Circle.descriptor,
+        ...CircleLight.descriptor,
-        {
+        shaderCombinationSteps: [1, 2],
-          ...CircleLight.descriptor,
+      },
-          shaderCombinationSteps: [1, 2],
+      Blob.descriptor,
-        },
+    ]);
-        Blob.descriptor,
-      ],
-      [
-        vec3.fromValues(0, 0, 0),
-        vec3.fromValues(224 / 255, 96 / 255, 126 / 255),
-        vec3.fromValues(119 / 255, 173 / 255, 120 / 255),
-      ]
-    );
 
     this.renderer.setRuntimeSettings({
       ambientLight: vec3.fromValues(0.35, 0.1, 0.45),
       shadowLength: 800,
+      colorPalette: [
+        rgb255(0, 0, 0),
+        rgb255(119, 173, 120),
+        rgb255(224, 96, 126),
+        rgb255(224, 96, 126),
+      ],
     });
 
     const { width, height } = this.canvas.getBoundingClientRect();

src/scenes/blob/blob.ts

@@ -35,7 +35,7 @@ export class Blob extends Drawable {
             );
 
             minDistance = min(minDistance, res);
-            color = mix(1.0, color, step(distanceNdcPixelSize + SURFACE_OFFSET, res));
+            color = mix(3.0 / {paletteSize}, color, step(distanceNdcPixelSize + SURFACE_OFFSET, res));
           }
         }
       `,

src/scenes/rain/rain-scene.ts

@@ -1,6 +1,7 @@
-import { vec2, vec3 } from 'gl-matrix';
+import { vec2 } from 'gl-matrix';
 import { CircleLight, compile, Renderer, Tunnel } from 'sdf-2d';
 import { prettyPrint } from '../../helper/pretty-print';
+import { rgb } from '../../helper/rgb';
 import { rgb255 } from '../../helper/rgb255';
 import { Scene } from '../scene';
 import { Droplet } from './droplet';
@@ -20,27 +21,23 @@ export class RainScene implements Scene {
   ): Promise<void> {
     this.canvas = canvas;
     this.overlay = overlay;
-    this.renderer = await compile(
+    this.renderer = await compile(canvas, [
-      canvas,
+      {
-      [
+        ...Tunnel.descriptor,
-        {
+        shaderCombinationSteps: [0, 1, 2, 4, 8, 12, 16, 24],
-          ...Tunnel.descriptor,
+      },
-          shaderCombinationSteps: [0, 1, 2, 4, 8, 12, 16, 24],
+      {
-        },
+        ...CircleLight.descriptor,
-        {
+        shaderCombinationSteps: [2],
-          ...CircleLight.descriptor,
+      },
-          shaderCombinationSteps: [2],
+    ]);
-        },
-      ],
-      [vec3.fromValues(0.4, 1, 0.6), vec3.fromValues(1, 1, 0), vec3.fromValues(0.3, 1, 1)]
-    );
 
     this.renderer.setRuntimeSettings({
-      ambientLight: vec3.fromValues(0.2, 0.2, 0.2),
+      ambientLight: rgb(0.2, 0.2, 0.2),
-      tileMultiplier: 8,
+      colorPalette: [rgb(1, 1, 0), rgb(1, 1, 0), rgb(0.3, 1, 1), rgb(0.3, 1, 1)],
     });
 
-    for (let i = 0; i < (canvas.getBoundingClientRect().width / 1000) * 20; i++) {
+    for (let i = 0; i < (canvas.getBoundingClientRect().width / 800) * 20; i++) {
       this.droplets.push(new Droplet());
     }
   }

src/scenes/tunnel-scene.ts

@@ -64,25 +64,22 @@ export class TunnelScene implements Scene {
   ): Promise<void> {
     this.canvas = canvas;
     this.overlay = overlay;
-    this.renderer = await compile(
+    this.renderer = await compile(canvas, [
-      canvas,
+      {
-      [
+        ...InvertedTunnel.descriptor,
-        {
+        shaderCombinationSteps: [0, 1, 2, 4, 8, 12],
-          ...InvertedTunnel.descriptor,
+      },
-          shaderCombinationSteps: [0, 1, 2, 4, 8, 12],
+      {
-        },
+        ...CircleLight.descriptor,
-        {
+        shaderCombinationSteps: [1, 2, 3, 4, 5, 6, 7],
-          ...CircleLight.descriptor,
+      },
-          shaderCombinationSteps: [1, 2, 3, 4, 5, 6, 7],
+    ]);
-        },
-      ],
-      [rgb(0.4, 1, 0.6), rgb(1, 1, 0), rgb(0.3, 1, 1)]
-    );
 
     this.renderer.setRuntimeSettings({
       isWorldInverted: true,
-      ambientLight: vec3.fromValues(0.35, 0.1, 0.45),
+      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)],
     });
 
     for (let i = 0; i < 200; i++) {

src/styles/index.scss

@@ -80,7 +80,7 @@ body {
     @include card();
 
     font-size: 1.25rem;
-    width: 120px;
+    width: 150px;
     cursor: pointer;
     padding: 0.2em 0.5rem;
     background: none;
@@ -92,7 +92,7 @@ body {
     transition: opacity 200ms;
 
     @media (max-width: $breakpoint) {
-      width: 90px;
+      width: 110px;
     }
   }
 

tsconfig.json

@@ -3,7 +3,7 @@
     "outDir": "./dist/",
     "sourceMap": true,
     "noImplicitAny": false,
-    "target": "es6",
+    "target": "es5",
     "downlevelIteration": true,
     "allowJs": true,
     "experimentalDecorators": true,