MInor updates

src/index.html

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

src/scenes/blob/blob-scene.ts

@@ -51,11 +51,12 @@ export class BlobScene implements Scene {
   private drawNextFrame(
     renderer: Renderer,
     currentTime: DOMHighResTimeStamp,
-    deltaTime: DOMHighResTimeStamp
+    _: DOMHighResTimeStamp
   ): boolean {
     this.insights = renderer.insights;
 
-    const { width, height } = this.canvas.getBoundingClientRect();
+    const width = renderer.canvasSize.x;
+    const height = renderer.canvasSize.y;
     renderer.setViewArea([0, height], [width, height]);
 
     this.overlay.innerText = prettyPrint(renderer.insights);

src/scenes/metaball/metaball-scene.ts

@@ -9,12 +9,10 @@ import { Metaball, MetaCircle } from './metaball';
 export class MetaballScene implements Scene {
   private circles: Array<Metaball> = [];
 
-  private canvas: HTMLCanvasElement;
   private overlay: HTMLDivElement;
   public insights?: any;
 
   public async run(canvas: HTMLCanvasElement, overlay: HTMLDivElement): Promise<void> {
-    this.canvas = canvas;
     this.overlay = overlay;
 
     for (let i = 0; i < 16; i++) {
@@ -56,11 +54,13 @@ export class MetaballScene implements Scene {
   private drawNextFrame(
     renderer: Renderer,
     currentTime: DOMHighResTimeStamp,
-    deltaTime: DOMHighResTimeStamp
+    _: DOMHighResTimeStamp
   ): boolean {
     this.insights = renderer.insights;
 
-    const { width, height } = this.canvas.getBoundingClientRect();
+    const width = renderer.canvasSize.x;
+    const height = renderer.canvasSize.y;
+
     const viewAreaWidth = width / Math.max(width, height);
     const viewAreaHeight = height / Math.max(width, height);
     renderer.setViewArea(

src/scenes/rain/rain-scene.ts

@@ -10,12 +10,10 @@ 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 canvas: HTMLCanvasElement;
   private overlay: HTMLDivElement;
   public insights?: any;
 
   public async run(canvas: HTMLCanvasElement, overlay: HTMLDivElement): Promise<void> {
-    this.canvas = canvas;
     this.overlay = overlay;
     for (let i = 0; i < (canvas.getBoundingClientRect().width / 800) * 20; i++) {
       this.droplets.push(new DropletWrapper());
@@ -45,11 +43,13 @@ export class RainScene implements Scene {
   private drawNextFrame(
     renderer: Renderer,
     currentTime: DOMHighResTimeStamp,
-    deltaTime: DOMHighResTimeStamp
+    _: DOMHighResTimeStamp
   ): boolean {
     this.insights = renderer.insights;
 
-    const { width, height } = this.canvas.getBoundingClientRect();
+    const width = renderer.canvasSize.x;
+    const height = renderer.canvasSize.y;
+
     renderer.setViewArea(vec2.fromValues(0, height), vec2.fromValues(width, height));
     this.overlay.innerText = prettyPrint(renderer.insights);
 

src/scenes/tunnel-scene.ts

@@ -119,7 +119,9 @@ export class TunnelScene implements Scene {
   ): boolean {
     this.insights = renderer.insights;
 
-    const { width, height } = this.canvas.getBoundingClientRect();
+    const width = renderer.canvasSize.x;
+    const height = renderer.canvasSize.y;
+
     this.deltaSinceStart += deltaTime;
     const startX = this.deltaSinceStart / 3;
     const endX = startX + width;