diff --git a/package.json b/package.json
index e48c9b1..a172397 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,5 @@
{
"name": "sdf-2d-demo",
- "version": "0.0.0",
"description": "Some simple demos to showcase the possibilities of this library.",
"private": true,
"main": "index.html",
@@ -45,7 +44,7 @@
"resolve-url-loader": "^3.1.1",
"sass": "^1.26.3",
"sass-loader": "^9.0.3",
- "sdf-2d": "^0.6.0",
+ "sdf-2d": "^0.6.2",
"source-map-loader": "^1.1.0",
"svg-url-loader": "^6.0.0",
"terser-webpack-plugin": "^2.3.8",
diff --git a/src/index.html b/src/index.html
index 92cd285..cbafc27 100644
--- a/src/index.html
+++ b/src/index.html
@@ -35,7 +35,7 @@
SDF-2D
-
+
diff --git a/src/scenes/blob/blob-scene.ts b/src/scenes/blob/blob-scene.ts
index b3090ac..3848700 100644
--- a/src/scenes/blob/blob-scene.ts
+++ b/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);
diff --git a/src/scenes/metaball/metaball-scene.ts b/src/scenes/metaball/metaball-scene.ts
index 28f552a..afddd39 100644
--- a/src/scenes/metaball/metaball-scene.ts
+++ b/src/scenes/metaball/metaball-scene.ts
@@ -9,12 +9,10 @@ import { Metaball, MetaCircle } from './metaball';
export class MetaballScene implements Scene {
private circles: Array = [];
- private canvas: HTMLCanvasElement;
private overlay: HTMLDivElement;
public insights?: any;
public async run(canvas: HTMLCanvasElement, overlay: HTMLDivElement): Promise {
- 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(
diff --git a/src/scenes/rain/rain-scene.ts b/src/scenes/rain/rain-scene.ts
index 30dbf0a..7542cd7 100644
--- a/src/scenes/rain/rain-scene.ts
+++ b/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 {
- 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);
diff --git a/src/scenes/tunnel-scene.ts b/src/scenes/tunnel-scene.ts
index 126c9b9..a1f5f81 100644
--- a/src/scenes/tunnel-scene.ts
+++ b/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;
diff --git a/webpack.config.js b/webpack.config.js
index 3892fd6..59b6e06 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -115,7 +115,7 @@ module.exports = {
use: {
loader: 'file-loader',
query: {
- outputPath: '/static',
+ outputPath: '/',
name: '[name].[ext]',
},
},