Update to use new SDF2D 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.5.0",
+    "sdf-2d": "^0.6.0",
     "source-map-loader": "^1.1.0",
     "svg-url-loader": "^6.0.0",
     "terser-webpack-plugin": "^2.3.8",

src/helper/pretty-print.ts

@@ -1,4 +1,4 @@
 export const prettyPrint = (o: any): string =>
-  JSON.stringify(o, (_, v) => (v.toFixed ? Number(v.toFixed(3)) : v), '  ')
+  JSON.stringify(o, (_, v) => (v?.toFixed ? Number(v.toFixed(3)) : v), '  ')
     .replace(/("|,|{|^\n)/g, '')
     .replace(/(\W*}\n?)+/g, '\n\n');

src/index.html

@@ -25,7 +25,7 @@
 
     <a id="info" href="https://github.com/schmelczerandras/sdf-2d" target="_BLANK">
       <p>SDF-2D</p>
-      <img src="static/logo-white.svg" alt="logo" />
+      <img width="64" height="64" src="static/logo-white.svg" alt="logo" />
     </a>
     <code id="overlay"></code>
     <button id="toggle-text">Loading…</button>

src/index.ts

@@ -7,22 +7,18 @@ import '../static/logo-white.svg';
 import '../static/no-change/404.html';
 import '../static/no-change/robots.txt';
 import '../static/og-image.png';
-import { DeltaTimeCalculator } from './helper/delta-time-calculator';
 import { removeUnnecessaryOutlines } from './helper/remove-unnecessary-outlines';
 import { BlobScene } from './scenes/blob/blob-scene';
 import { MetaballScene } from './scenes/metaball/metaball-scene';
 import { RainScene } from './scenes/rain/rain-scene';
-import { Scene } from './scenes/scene';
 import { TunnelScene } from './scenes/tunnel-scene';
 import './styles/index.scss';
 
 const scenes = [TunnelScene, MetaballScene, RainScene, BlobScene];
-const sceneIntervalInSeconds = 8;
 
 glMatrix.setMatrixArrayType(Array);
 removeUnnecessaryOutlines();
 
-const deltaTimeCalculator = new DeltaTimeCalculator();
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
 const errorText = document.querySelector('#error-text') as HTMLParamElement;
 const errorsContainer = document.querySelector('#errors-container') as HTMLDivElement;
@@ -43,44 +39,13 @@ const handleTextToggle = () => {
 toggleButton.addEventListener('click', handleTextToggle);
 handleTextToggle();
 
-const handleScene = async (
-  currentScene: Scene,
-  NextSceneConstructor: new () => Scene
-): Promise<Scene> => {
-  let triggerIsOver: () => void;
-  const isOver = new Promise((resolve) => (triggerIsOver = resolve));
-  let timeSinceStart = 0;
-
-  const handleFrame = (currentTime: DOMHighResTimeStamp) => {
-    const deltaTime = deltaTimeCalculator.getNextDeltaTime(currentTime);
-
-    currentScene.drawNextFrame(currentTime, deltaTime);
-
-    if ((timeSinceStart += deltaTime) > sceneIntervalInSeconds * 1000) {
-      triggerIsOver();
-    } else {
-      requestAnimationFrame(handleFrame);
-    }
-  };
-
-  requestAnimationFrame(handleFrame);
-
-  await isOver;
-  currentScene.destroy();
-
-  const nextScene = new NextSceneConstructor();
-  await nextScene.initialize(canvas, overlay);
-
-  return nextScene;
-};
-
 const main = async () => {
   try {
     let i = 0;
-    let currentScene: Scene = new scenes[i++]();
-    await currentScene.initialize(canvas, overlay);
     for (;;) {
-      currentScene = await handleScene(currentScene, scenes[i++ % scenes.length]);
+      const currentScene = new scenes[i++ % scenes.length]();
+
+      await currentScene.run(canvas, overlay);
     }
   } catch (e) {
     console.error(e);

src/scenes/blob/blob-scene.ts

@@ -1,65 +1,66 @@
 import { vec2 } from 'gl-matrix';
-import { CircleFactory, CircleLight, compile, Renderer, rgb, rgb255 } from 'sdf-2d';
+import { CircleFactory, CircleLight, Renderer, rgb, rgb255, runAnimation } from 'sdf-2d';
 import { prettyPrint } from '../../helper/pretty-print';
+import { settings } from '../../settings';
 import { Scene } from '../scene';
 import { Blob } from './blob';
 
 const Circle = CircleFactory(rgb255(119, 143, 120));
 
 export class BlobScene implements Scene {
-  private renderer: Renderer;
   private canvas: HTMLCanvasElement;
   private overlay: HTMLDivElement;
 
-  public async initialize(
+  public async run(canvas: HTMLCanvasElement, overlay: HTMLDivElement): Promise<void> {
-    canvas: HTMLCanvasElement,
-    overlay: HTMLDivElement
-  ): Promise<void> {
     this.canvas = canvas;
     this.overlay = overlay;
-    this.renderer = await compile(canvas, [
-      Circle.descriptor,
-      {
-        ...CircleLight.descriptor,
-        shaderCombinationSteps: [0, 1, 2],
-      },
-      Blob.descriptor,
-    ]);
-
-    this.renderer.setRuntimeSettings({
-      ambientLight: rgb255(89, 25, 115),
-      colorPalette: [
-        rgb255(0, 0, 0),
-        rgb255(119, 143, 120),
-        rgb255(119, 143, 120),
-        rgb255(224, 96, 126),
-      ],
-    });
 
     const { width, height } = this.canvas.getBoundingClientRect();
     const length = vec2.length([width, height]);
 
     this.blob = new Blob([width / 2, -length / 4 + length / 2]);
+
+    await runAnimation(
+      canvas,
+      [
+        Circle.descriptor,
+        {
+          ...CircleLight.descriptor,
+          shaderCombinationSteps: [0, 1, 2],
+        },
+        Blob.descriptor,
+      ],
+      this.drawNextFrame.bind(this),
+      {},
+      {
+        ambientLight: rgb255(89, 25, 115),
+        enableHighDpiRendering: true,
+        colorPalette: [
+          rgb255(0, 0, 0),
+          rgb255(119, 143, 120),
+          rgb255(119, 143, 120),
+          rgb255(224, 96, 126),
+        ],
+      }
+    );
   }
 
   private blob: Blob;
 
-  private deltaSinceStart = 0;
+  private drawNextFrame(
-  public drawNextFrame(
+    renderer: Renderer,
     currentTime: DOMHighResTimeStamp,
     deltaTime: DOMHighResTimeStamp
-  ): void {
+  ): boolean {
     const { width, height } = this.canvas.getBoundingClientRect();
-    this.deltaSinceStart += deltaTime;
+    renderer.setViewArea([0, height], [width, height]);
-    this.renderer.setViewArea([0, height], [width, height]);
 
-    this.renderer.autoscaleQuality(deltaTime);
+    this.overlay.innerText = prettyPrint(renderer.insights);
-    this.overlay.innerText = prettyPrint(this.renderer.insights);
 
     const length = vec2.length([width, height]);
 
-    const q = (this.deltaSinceStart % 8000) / 4300;
+    const q = (currentTime % 8000) / 4300;
-    this.blob.animate(this.deltaSinceStart);
+    this.blob.animate(currentTime);
     [
       new Circle([width / 2, -length / 4], length / 2),
       this.blob,
@@ -79,12 +80,8 @@ export class BlobScene implements Scene {
         rgb(0, 0.8, 1),
         1
       ),
-    ].forEach((d) => this.renderer.addDrawable(d));
+    ].forEach((d) => renderer.addDrawable(d));
 
-    this.renderer.renderDrawables();
+    return currentTime < settings.sceneTimeInMilliseconds;
-  }
-
-  public destroy(): void {
-    this.renderer.destroy();
   }
 }

src/scenes/metaball/metaball-scene.ts

@@ -1,45 +1,20 @@
 import { vec2 } from 'gl-matrix';
-import { compile, Flashlight, Renderer, rgb, rgb255 } from 'sdf-2d';
+import { Flashlight, Renderer, rgb, rgb255, runAnimation } from 'sdf-2d';
 import { prettyPrint } from '../../helper/pretty-print';
 import { Random } from '../../helper/random';
+import { settings } from '../../settings';
 import { Scene } from '../scene';
 import { Metaball, MetaCircle } from './metaball';
 
 export class MetaballScene implements Scene {
   private circles: Array<Metaball> = [];
 
-  private renderer: Renderer;
   private canvas: HTMLCanvasElement;
   private overlay: HTMLDivElement;
 
-  public async initialize(
+  public async run(canvas: HTMLCanvasElement, overlay: HTMLDivElement): Promise<void> {
-    canvas: HTMLCanvasElement,
-    overlay: HTMLDivElement
-  ): Promise<void> {
     this.canvas = canvas;
     this.overlay = overlay;
-    this.renderer = await compile(canvas, [
-      {
-        ...Flashlight.descriptor,
-        shaderCombinationSteps: [0, 2],
-      },
-      {
-        ...MetaCircle.descriptor,
-        shaderCombinationSteps: [0, 1, 2, 4, 8, 12, 16],
-      },
-    ]);
-
-    this.renderer.setRuntimeSettings({
-      ambientLight: rgb(0.1, 0.1, 0.3),
-      colorPalette: [
-        rgb(1, 1, 1),
-        rgb(1, 1, 1),
-        rgb(1, 1, 1),
-        rgb(1, 1, 1),
-        rgb(1, 1, 0),
-        rgb255(186, 59, 70),
-      ],
-    });
 
     for (let i = 0; i < 16; i++) {
       this.circles.push(
@@ -55,26 +30,46 @@ export class MetaballScene implements Scene {
         )
       );
     }
+
+    await runAnimation(
+      canvas,
+      [
+        {
+          ...Flashlight.descriptor,
+          shaderCombinationSteps: [0, 2],
+        },
+        {
+          ...MetaCircle.descriptor,
+          shaderCombinationSteps: [0, 1, 2, 4, 8, 12, 16],
+        },
+      ],
+      this.drawNextFrame.bind(this),
+      {},
+      {
+        ambientLight: rgb(0.1, 0.1, 0.3),
+        enableHighDpiRendering: true,
+      }
+    );
   }
 
-  public drawNextFrame(
+  private drawNextFrame(
+    renderer: Renderer,
     currentTime: DOMHighResTimeStamp,
     deltaTime: DOMHighResTimeStamp
-  ): void {
+  ): boolean {
     const { width, height } = this.canvas.getBoundingClientRect();
     const viewAreaWidth = width / Math.max(width, height);
     const viewAreaHeight = height / Math.max(width, height);
-    this.renderer.setViewArea(
+    renderer.setViewArea(
       vec2.fromValues(0, viewAreaHeight),
       vec2.fromValues(viewAreaWidth, viewAreaHeight)
     );
-    this.renderer.autoscaleQuality(deltaTime);
 
-    this.overlay.innerText = prettyPrint(this.renderer.insights);
+    this.overlay.innerText = prettyPrint(renderer.insights);
 
     this.circles.forEach((c) => {
       c.animate(currentTime / 2000, viewAreaWidth, viewAreaHeight);
-      this.renderer.addDrawable(c.shape);
+      renderer.addDrawable(c.shape);
     });
 
     const light1 = new Flashlight(
@@ -90,13 +85,9 @@ export class MetaballScene implements Scene {
       vec2.fromValues(-1, 1)
     );
 
-    this.renderer.addDrawable(light1);
+    renderer.addDrawable(light1);
-    this.renderer.addDrawable(light2);
+    renderer.addDrawable(light2);
 
-    this.renderer.renderDrawables();
+    return currentTime < settings.sceneTimeInMilliseconds;
-  }
-
-  public destroy(): void {
-    this.renderer.destroy();
   }
 }

src/scenes/metaball/metaball.ts

@@ -1,8 +1,8 @@
 import { vec2 } from 'gl-matrix';
-import { MetaCircleFactory } from 'sdf-2d';
+import { MetaCircleFactory, rgb255 } from 'sdf-2d';
 import { Random } from '../../helper/random';
 
-export const MetaCircle = MetaCircleFactory(5);
+export const MetaCircle = MetaCircleFactory(rgb255(186, 59, 70));
 
 export class Metaball {
   public shape = new MetaCircle(vec2.create(), Random.getRandomInRange(0.025, 0.075));

src/scenes/rain/droplet.ts

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

src/scenes/rain/rain-scene.ts

@@ -1,6 +1,7 @@
 import { vec2 } from 'gl-matrix';
-import { CircleLight, compile, Renderer, rgb, rgb255 } from 'sdf-2d';
+import { CircleLight, Renderer, rgb, rgb255, runAnimation } from 'sdf-2d';
 import { prettyPrint } from '../../helper/pretty-print';
+import { settings } from '../../settings';
 import { Scene } from '../scene';
 import { Droplet, DropletWrapper } from './droplet';
 
@@ -9,47 +10,47 @@ export class RainScene implements Scene {
   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 renderer: Renderer;
   private canvas: HTMLCanvasElement;
   private overlay: HTMLDivElement;
 
-  public async initialize(
+  public async run(canvas: HTMLCanvasElement, overlay: HTMLDivElement): Promise<void> {
-    canvas: HTMLCanvasElement,
-    overlay: HTMLDivElement
-  ): Promise<void> {
     this.canvas = canvas;
     this.overlay = overlay;
-    this.renderer = await compile(canvas, [
-      {
-        ...Droplet.descriptor,
-        shaderCombinationSteps: [0, 1, 2, 4, 8, 12, 16, 24],
-      },
-      {
-        ...CircleLight.descriptor,
-        shaderCombinationSteps: [0, 2],
-      },
-    ]);
-
-    this.renderer.setRuntimeSettings({
-      ambientLight: rgb(0.2, 0.2, 0.2),
-      colorPalette: [rgb(1, 1, 1), rgb(0.3, 1, 1), rgb(1, 1, 0), rgb(0.3, 1, 1)],
-    });
-
     for (let i = 0; i < (canvas.getBoundingClientRect().width / 800) * 20; i++) {
       this.droplets.push(new DropletWrapper());
     }
+
+    await runAnimation(
+      canvas,
+      [
+        {
+          ...Droplet.descriptor,
+          shaderCombinationSteps: [0, 1, 2, 4, 8, 12, 16, 24],
+        },
+        {
+          ...CircleLight.descriptor,
+          shaderCombinationSteps: [0, 2],
+        },
+      ],
+      this.drawNextFrame.bind(this),
+      {},
+      {
+        ambientLight: rgb(0.2, 0.2, 0.2),
+        enableHighDpiRendering: true,
+      }
+    );
   }
 
-  public drawNextFrame(
+  private drawNextFrame(
+    renderer: Renderer,
     currentTime: DOMHighResTimeStamp,
     deltaTime: DOMHighResTimeStamp
-  ): void {
+  ): boolean {
     const { width, height } = this.canvas.getBoundingClientRect();
-    this.renderer.setViewArea(vec2.fromValues(0, height), vec2.fromValues(width, height));
+    renderer.setViewArea(vec2.fromValues(0, height), vec2.fromValues(width, height));
-    this.renderer.autoscaleQuality(deltaTime);
+    this.overlay.innerText = prettyPrint(renderer.insights);
-    this.overlay.innerText = prettyPrint(this.renderer.insights);
 
-    const viewAreaSize = this.renderer.viewAreaSize;
+    const viewAreaSize = renderer.viewAreaSize;
 
     vec2.set(this.light1.center, 0, viewAreaSize.y / 2);
     vec2.set(this.light2.center, viewAreaSize.x, viewAreaSize.y / 2);
@@ -57,13 +58,9 @@ export class RainScene implements Scene {
     this.droplets.forEach((d) => d.animate(currentTime, viewAreaSize));
 
     [...this.droplets.map((d) => d.drawable), this.light1, this.light2].forEach((d) =>
-      this.renderer.addDrawable(d)
+      renderer.addDrawable(d)
     );
 
-    this.renderer.renderDrawables();
+    return currentTime < settings.sceneTimeInMilliseconds;
-  }
-
-  public destroy(): void {
-    this.renderer.destroy();
   }
 }

src/scenes/scene.ts

@@ -1,5 +1,3 @@
 export interface Scene {
-  initialize(canvas: HTMLCanvasElement, overlay: HTMLDivElement): Promise<void>;
+  run(canvas: HTMLCanvasElement, overlay: HTMLDivElement): Promise<void>;
-  drawNextFrame(currentTime: DOMHighResTimeStamp, deltaTime: DOMHighResTimeStamp): void;
-  destroy(): void;
 }

src/scenes/tunnel-scene.ts

@@ -1,24 +1,24 @@
 import { vec2, vec3 } from 'gl-matrix';
 import {
   CircleLight,
-  compile,
   FilteringOptions,
   InvertedTunnelFactory,
   Renderer,
   renderNoise,
   rgb,
+  runAnimation,
   WrapOptions,
 } from 'sdf-2d';
 import { clamp } from '../helper/clamp';
 import { last } from '../helper/last';
 import { prettyPrint } from '../helper/pretty-print';
 import { Random } from '../helper/random';
+import { settings } from '../settings';
 import { Scene } from './scene';
 
 const InvertedTunnel = InvertedTunnelFactory(3);
 
 export class TunnelScene implements Scene {
-  private renderer: Renderer;
   private canvas: HTMLCanvasElement;
   private overlay: HTMLDivElement;
 
@@ -68,73 +68,69 @@ export class TunnelScene implements Scene {
     }
   }
 
-  public async initialize(
+  public async run(canvas: HTMLCanvasElement, overlay: HTMLDivElement): Promise<void> {
-    canvas: HTMLCanvasElement,
-    overlay: HTMLDivElement
-  ): Promise<void> {
     const noiseTexture = await renderNoise([1024, 1], 15, 1);
 
     this.canvas = canvas;
     this.overlay = overlay;
-    this.renderer = await compile(canvas, [
-      {
-        ...InvertedTunnel.descriptor,
-        shaderCombinationSteps: [0, 1, 2, 4, 8, 12],
-      },
-      {
-        ...CircleLight.descriptor,
-        shaderCombinationSteps: [0, 1, 2, 3, 4, 5, 6, 7],
-      },
-    ]);
-
-    this.renderer.setRuntimeSettings({
-      isWorldInverted: true,
-      ambientLight: rgb(0.35, 0.1, 0.45),
-      colorPalette: [rgb(0.4, 0.5, 0.6), rgb(0, 0, 0), rgb(0, 0, 0), rgb(0, 0, 0)],
-      textures: {
-        noiseTexture: {
-          source: noiseTexture,
-          overrides: {
-            maxFilter: FilteringOptions.LINEAR,
-            wrapS: WrapOptions.MIRRORED_REPEAT,
-          },
-        },
-      },
-    });
 
     for (let i = 0; i < 200; i++) {
       this.generateTunnel();
     }
+
+    await runAnimation(
+      canvas,
+      [
+        {
+          ...InvertedTunnel.descriptor,
+          shaderCombinationSteps: [0, 1, 2, 4, 8, 12],
+        },
+        {
+          ...CircleLight.descriptor,
+          shaderCombinationSteps: [0, 1, 2, 3, 4, 5, 6, 7],
+        },
+      ],
+      this.drawNextFrame.bind(this),
+      { lightPenetrationRatio: 0.5 },
+      {
+        isWorldInverted: true,
+        enableHighDpiRendering: true,
+        ambientLight: rgb(0.35, 0.1, 0.45),
+        colorPalette: [rgb(0.4, 0.5, 0.6), rgb(0, 0, 0), rgb(0, 0, 0), rgb(0, 0, 0)],
+        textures: {
+          noiseTexture: {
+            source: noiseTexture,
+            overrides: {
+              maxFilter: FilteringOptions.LINEAR,
+              wrapS: WrapOptions.MIRRORED_REPEAT,
+            },
+          },
+        },
+      }
+    );
   }
 
   private deltaSinceStart = 0;
-  public drawNextFrame(
+  private drawNextFrame(
+    renderer: Renderer,
     currentTime: DOMHighResTimeStamp,
     deltaTime: DOMHighResTimeStamp
-  ): void {
+  ): boolean {
     const { width, height } = this.canvas.getBoundingClientRect();
     this.deltaSinceStart += deltaTime;
     const startX = this.deltaSinceStart / 3;
     const endX = startX + width;
-    this.renderer.setViewArea(
+    renderer.setViewArea(vec2.fromValues(startX, height), vec2.fromValues(width, height));
-      vec2.fromValues(startX, height),
-      vec2.fromValues(width, height)
-    );
 
-    this.renderer.autoscaleQuality(deltaTime);
+    this.overlay.innerText = prettyPrint(renderer.insights);
-    this.overlay.innerText = prettyPrint(this.renderer.insights);
 
     [
       ...this.tunnels.filter(
         (t) => startX < t.to.x + t.toRadius && t.from.x - t.fromRadius <= endX
       ),
       ...this.lights,
-    ].forEach((d) => this.renderer.addDrawable(d));
+    ].forEach((d) => renderer.addDrawable(d));
 
-    this.renderer.renderDrawables();
+    return currentTime < settings.sceneTimeInMilliseconds;
-  }
-
-  public destroy(): void {
-    this.renderer.destroy();
   }
 }

src/settings.ts

@@ -0,0 +1,3 @@
+export const settings = {
+  sceneTimeInMilliseconds: 7000,
+};

src/styles/index.scss

@@ -66,12 +66,15 @@ body {
 
   #overlay {
     right: 0;
-    font-size: 0.75rem;
+    white-space: pre-wrap;
-    white-space: pre;
+    overflow-wrap: break-word;
     font-family: 'Lucida Console', Monaco, monospace;
 
+    font-size: 0.75rem;
+    max-width: 400px;
     @media (max-width: $breakpoint) {
       font-size: 0.6rem;
+      max-width: 200px;
     }
   }
 

src/styles/mixins.scss

@@ -1,5 +1,6 @@
 @mixin card {
   backdrop-filter: blur(16px);
+  background-color: rgba(0, 0, 0, 0.15);
   border: 2px solid white;
   border-radius: 12px;