tela.js 1.2.2 → 1.2.4

package/README.md

@@ -150,6 +150,14 @@ You can find more examples of usage in:
 
 - Serialize meshes not only triangles
 - Optimize data serialization in parallel ray tracer
+- Refactor geometric objects to have shader function
+- Refactor parallel raytracing to parallel canvas map
+
+- Add lorentz attractors demo
+- Add Iterated map fractals demo
+- Add Volumetric fluid sim
+- Megaman rag doll physics
+- Black hole demo
 
 
 [ffmpeg]: https://ffmpeg.org/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tela.js",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "author": "Pedroth",
   "repository": {
     "type": "git",
@@ -23,6 +23,9 @@
   "trustedDependencies": [
     "@kmamal/sdl"
   ],
+  "peerDependencies": {
+    "@kmamal/sdl": "^0.10.2"
+  },
   "bugs": {
     "url": "https://github.com/pedroth/tela.js/issues"
   },

package/src/Camera/parallel.js

@@ -10,11 +10,13 @@ import { MyWorker } from "../Utils/Utils.js";
 
 let RAY_TRACE_WORKERS = [];
 let RAY_MAP_WORKERS = [];
+
 let prevSceneHash = undefined;
-let isFirstTimeCounter = NUMBER_OF_CORES;
+let prevScene = undefined;
 let serializedScene = undefined;
+let isFirstTimeCounter = NUMBER_OF_CORES;
 
-const MAGIC_SETUP_TIME = 800;
+const ERROR_MSG_TIMEOUT = 1000;
 //========================================================================================
 /*                                                                                      *
  *                                         MAIN                                         *
@@ -25,7 +27,7 @@ export function rayTraceWorkers(camera, scene, canvas, params = {}) {
     // lazy loading workers
     if (RAY_TRACE_WORKERS.length === 0) {
         RAY_TRACE_WORKERS = [...Array(NUMBER_OF_CORES)]
-            .map(() => new MyWorker(`Camera/rayTraceWorker.js`));
+            .map(() => new MyWorker(`./Camera/rayTraceWorker.js`));
     }
     const w = canvas.width;
     const h = canvas.height;
@@ -33,14 +35,18 @@ export function rayTraceWorkers(camera, scene, canvas, params = {}) {
     const isNewScene = prevSceneHash !== newHash;
     if (isNewScene) {
         prevSceneHash = newHash;
-        serializedScene = scene.serialize()
+        serializedScene = scene?.serialize()
+        prevScene = serializedScene;
     } else {
         serializedScene = undefined;
     }
     return RAY_TRACE_WORKERS.map((worker, k) => {
+        let timerId = undefined;
         return new Promise((resolve) => {
             worker.onMessage(message => {
-                const { image, startRow, endRow, } = message;
+                const { image, startRow, endRow, hasScene } = message;
+                prevScene = hasScene ? undefined : prevScene;
+                if (!IS_NODE) clearTimeout(timerId);
                 let index = 0;
                 const startIndex = CHANNELS * w * startRow;
                 const endIndex = CHANNELS * w * endRow;
@@ -58,24 +64,28 @@ export function rayTraceWorkers(camera, scene, canvas, params = {}) {
                 startRow: k * ratio,
                 endRow: Math.min(h, (k + 1) * ratio),
                 camera: camera.serialize(),
-                scene: serializedScene
+                scene: isNewScene ? serializedScene : prevScene !== undefined ? prevScene : undefined
             };
+            worker.postMessage(message);
             if (isFirstTimeCounter > 0 && !IS_NODE) {
                 // hack to work in the browser, don't know why it works
                 isFirstTimeCounter--;
-                setTimeout(() => worker.postMessage(message), MAGIC_SETUP_TIME);
-            } else {
-                worker.postMessage(message)
+                timerId = setTimeout(() => {
+                    console.log("TIMEOUT!!")
+                    // doesn't block promise 
+                    resolve();
+                }, ERROR_MSG_TIMEOUT);
             }
         });
     })
 }
 
+
 export function rayMapWorkers(camera, scene, canvas, lambda, vars = [], dependencies = []) {
     // lazy loading workers
     if (RAY_MAP_WORKERS.length === 0) {
         RAY_MAP_WORKERS = [...Array(NUMBER_OF_CORES)]
-            .map(() => new MyWorker(`Camera/rayMapWorker.js`));
+            .map(() => new MyWorker(`./Camera/rayMapWorker.js`));
     }
     const w = canvas.width;
     const h = canvas.height;
@@ -83,14 +93,18 @@ export function rayMapWorkers(camera, scene, canvas, lambda, vars = [], dependen
     const isNewScene = prevSceneHash !== newHash;
     if (isNewScene) {
         prevSceneHash = newHash;
-        serializedScene = scene.serialize()
+        serializedScene = scene?.serialize()
+        prevScene = serializedScene;
     } else {
         serializedScene = undefined;
     }
     return RAY_MAP_WORKERS.map((worker, k) => {
         return new Promise((resolve) => {
+            let timerId = undefined;
             worker.onMessage(message => {
-                const { image, startRow, endRow, } = message;
+                const { image, startRow, endRow, hasScene } = message;
+                prevScene = hasScene ? undefined : prevScene;
+                if (!IS_NODE) clearTimeout(timerId);
                 let index = 0;
                 const startIndex = CHANNELS * w * startRow;
                 const endIndex = CHANNELS * w * endRow;
@@ -110,16 +124,18 @@ export function rayMapWorkers(camera, scene, canvas, lambda, vars = [], dependen
                 endRow: Math.min(h, (k + 1) * ratio),
                 camera: camera.serialize(),
                 dependencies: dependencies.map(d => d.toString()),
-                scene: serializedScene
+                scene: isNewScene ? serializedScene : prevScene !== undefined ? prevScene : undefined
             };
+            worker.postMessage(message);
             if (isFirstTimeCounter > 0 && !IS_NODE) {
                 // hack to work in the browser, don't know why it works
                 isFirstTimeCounter--;
-                setTimeout(() => worker.postMessage(message), MAGIC_SETUP_TIME);
-            } else {
-                worker.postMessage(message)
+                timerId = setTimeout(() => {
+                    console.log("TIMEOUT!!")
+                    // doesn't block promise 
+                    resolve();
+                }, ERROR_MSG_TIMEOUT);
             }
-
         });
     })
 }

package/src/Camera/raster.js

@@ -46,7 +46,6 @@ export function rasterGraphics(scene, camera, params = {}) {
                 });
             }
         }
-        canvas.paint();
         return canvas;
     }
 }
@@ -80,8 +79,8 @@ function rasterSphere({ canvas, camera, elem, w, h, zBuffer }) {
         const texColor = getTexColor(texCoord, texture);
         finalColor = finalColor.add(texColor).scale(1 / 2);
     }
-    for (let k = -intRadius; k < intRadius; k++) {
-        for (let l = -intRadius; l < intRadius; l++) {
+    for (let l = -intRadius; l < intRadius; l++) {
+        for (let k = -intRadius; k < intRadius; k++) {
             const xl = Math.max(0, Math.min(w - 1, x + k));
             const yl = Math.floor(y + l);
             const squareLength = k * k + l * l;

package/src/Camera/rayMapWorker.js

@@ -64,18 +64,12 @@ if (IS_NODE) {
     parentPort.on("message", async message => {
         const input = message;
         const output = await main(input);
-        parentPort.postMessage(output);
+        parentPort.postMessage({...output, hasScene: scene !== undefined});
     });
 } else {
     self.onmessage = async message => {
         const input = message.data;
         const output = await main(input);
-        postMessage(output);
+        postMessage({...output, hasScene: scene !== undefined});
     };
-
-    self.onerror = e => {
-        console.log(`Caught error inside ray map worker ${e}`)
-    };
-
-
 }

package/src/Camera/rayTraceWorker.js

@@ -47,13 +47,13 @@ if (IS_NODE) {
     parentPort.on("message", async message => {
         const input = message;
         const output = await main(input);
-        parentPort.postMessage(output);
+        parentPort.postMessage({ ...output, hasScene: scene !== undefined });
     });
 } else {
     onmessage = async message => {
         const input = message.data;
         const output = await main(input);
-        postMessage(output);
+        postMessage({ ...output, hasScene: scene !== undefined });
     };
 
     onerror = e => console.log("Caught error on rayTrace worker", e);

package/src/Camera2D/Camera2D.js

@@ -0,0 +1,114 @@
+import { Vec2 } from "../Vector/Vector.js"
+import Box from "../Geometry/Box.js";
+import Sphere from "../Geometry/Sphere.js";
+import Line from "../Geometry/Line.js";
+import Triangle from "../Geometry/Triangle.js";
+
+export default class Camera2D {
+  constructor(box = new Box(Vec2(), Vec2(1, 1))) {
+    this.box = box;
+  }
+
+  map(lambda) {
+    return {
+      to: canvas => {
+        const w = canvas.width;
+        const invW = 1 / w;
+        const h = canvas.height;
+        const invH = 1 / h;
+        const ans = canvas.map((x, y) => {
+          let p = Vec2(x, y).mul(Vec2(invW, invH));
+          p = p.mul(this.box.diagonal).add(this.box.min);
+          return lambda(p);
+        });
+        return ans;
+      }
+    }
+  }
+
+  mapBox(lambda, boxInWorld) {
+    return {
+      to: canvas => {
+        const cameraBoxInCanvasCoords = new Box(this.toCanvasCoord(boxInWorld.min, canvas), this.toCanvasCoord(boxInWorld.max, canvas));
+        return canvas.mapBox((x, y) => {
+          // (x,y) \in [0,cameraBox.width] x [0, cameraBox.height]
+          let p = Vec2(x, y).div(cameraBoxInCanvasCoords.diagonal).mul(boxInWorld.diagonal).add(boxInWorld.min);
+          return lambda(p);
+        }, cameraBoxInCanvasCoords);
+      }
+    }
+  }
+
+  raster(scene) {
+    const type2render = {
+      [Sphere.name]: rasterCircle,
+      [Line.name]: rasterLine,
+      [Triangle.name]: rasterTriangle,
+    }
+    return {
+      to: tela => {
+        const elements = scene.getElements();
+        for (let i = 0; i < elements.length; i++) {
+          const element = elements[i];
+          const rasterizer = type2render[element.constructor.name];
+          if (rasterizer) {
+            rasterizer(element, this, tela);
+          }
+        }
+        return tela;
+      }
+    }
+  }
+
+  serialize() {
+    return {
+      box: this.box.serialize(),
+    }
+  }
+
+  toCanvasCoord(p, canvas) {
+    return p.sub(this.box.min).div(this.box.diagonal).mul(Vec2(canvas.width, canvas.height));
+  }
+
+  toWorldCoord(x, canvas) {
+    const size = Vec2(canvas.width, canvas.height);
+    return x.div(size).mul(this.box.diagonal)
+  }
+
+  static deserialize(json) {
+    return new Camera2D(Box.deserialize(json.box));
+  }
+}
+
+
+function rasterCircle(circle, camera, canvas) {
+  const centerInCanvas = camera.toCanvasCoord(circle.position, canvas);
+  const radius = camera.toCanvasCoord(circle.position.add(Vec2(circle.radius, 0)), canvas).x - centerInCanvas.x;
+  return canvas.drawCircle(centerInCanvas, radius, () => {
+    return circle.color;
+  });
+}
+
+function rasterLine(line, camera, canvas) {
+  const positionsInCanvas = line.positions.map(p => camera.toCanvasCoord(p, canvas));
+  return canvas.drawLine(
+    positionsInCanvas[0],
+    positionsInCanvas[1],
+    () => {
+      return line.colors[0]
+    }
+  );
+}
+
+function rasterTriangle(triangle, camera, canvas) {
+  const positionsInCanvas = triangle.positions.map(p => camera.toCanvasCoord(p, canvas).map(Math.floor));
+  return canvas.drawTriangle(
+    positionsInCanvas[0],
+    positionsInCanvas[1],
+    positionsInCanvas[2],
+    () => {
+      return triangle.colors[0];
+    }
+  );
+
+}

package/src/Geometry/Box.js

@@ -31,7 +31,9 @@ export default class Box {
         for (let i = 0; i < n; i++) {
             grad.push(this.distanceToPoint(pointVec.add(Vec.e(n)(i).scale(epsilon))) - d)
         }
-        return Vec.fromArray(grad).scale(Math.sign(d)).normalize();
+        let sign = Math.sign(d);
+        sign = sign === 0 ? 1 : sign;
+        return Vec.fromArray(grad).scale(sign).normalize();
     }
 
     interceptWithRay(ray) {
@@ -107,7 +109,7 @@ export default class Box {
 
     equals(box) {
         if (!(box instanceof Box)) return false;
-        if (this == Box.EMPTY) return true;
+        if (this.isEmpty !== box.isEmpty) return false;
         return this.min.equals(box.min) && this.max.equals(box.max);
     }
 
@@ -130,6 +132,11 @@ export default class Box {
         return false;
     }
 
+    contains(box, precision = 1e-6) {
+        const v = box.volume();
+        return Math.abs(v - this.sub(box).volume()) < precision;
+    }
+
     toString() {
         return `{
         min:${this.min.toString()},
@@ -141,6 +148,11 @@ export default class Box {
         return this.min.add(Vec.RANDOM(this.dim).mul(this.diagonal));
     }
 
+    volume() {
+        if(this.isEmpty) return 0;
+        return this.diagonal.fold((e, x) => e * x, 1);
+    }
+
     serialize() {
         return {
             type: Box.name,

package/src/Geometry/Line.js

@@ -3,6 +3,7 @@ import Color from "../Color/Color.js";
 import { Diffuse, MATERIALS } from "../Material/Material.js";
 import { clamp } from "../Utils/Math.js";
 import Vec, { Vec2, Vec3 } from "../Vector/Vector.js";
+import { randomUUID } from "crypto";
 
 export default class Line {
     constructor({ name, positions, colors, texCoords, normals, texture, radius, emissive, material }) {
@@ -111,7 +112,7 @@ export default class Line {
 const indx = [1, 2];
 class LineBuilder {
     constructor() {
-        this._name;
+        this._name = randomUUID();
         this._texture;
         this._radius = 1;
         this._normals = indx.map(() => Vec3());

package/src/Geometry/Sphere.js

@@ -4,6 +4,7 @@ import { Diffuse, MATERIALS } from "../Material/Material.js";
 import { randomPointInSphere } from "../Utils/Math.js";
 import Vec, { Vec2, Vec3 } from "../Vector/Vector.js";
 import { deserialize as deserializeImage } from "../Tela/utils.js";
+import { randomUUID } from "crypto";
 
 class Sphere {
     constructor({ name, position, color, texCoord, normal, radius, texture, emissive, material }) {
@@ -89,7 +90,7 @@ class Sphere {
 
 class SphereBuilder {
     constructor() {
-        this._name;
+        this._name = randomUUID();
         this._texture;
         this._radius = 1;
         this._normal = Vec3();
@@ -118,7 +119,7 @@ class SphereBuilder {
     }
 
     radius(radius) {
-        if (!radius) return this;
+        if (radius === undefined) return this;
         this._radius = radius;
         return this;
     }

package/src/Geometry/Triangle.js

@@ -3,6 +3,7 @@ import Color from "../Color/Color.js";
 import { Diffuse, MATERIALS } from "../Material/Material.js";
 import Vec, { Vec2, Vec3 } from "../Vector/Vector.js";
 import { deserialize as deserializeImage } from "../Tela/utils.js";
+import { randomUUID } from "crypto";
 
 export default class Triangle {
     constructor({ name, positions, colors, texCoords, normals, texture, emissive, material }) {
@@ -22,7 +23,8 @@ export default class Triangle {
         this.tangents = [this.edges[0], this.edges.at(-1).scale(-1)];
         const u = this.tangents[0];
         const v = this.tangents[1];
-        this.faceNormal = u.cross(v).normalize();
+        const cross = u.cross(v);
+        this.faceNormal = Number.isFinite(cross) ? Vec3(0, 0, cross) : cross.normalize();
     }
 
     getBoundingBox() {
@@ -104,7 +106,7 @@ export default class Triangle {
 const indx = [1, 2, 3];
 class TriangleBuilder {
     constructor() {
-        this._name;
+        this._name = randomUUID();
         this._texture;
         this._normals = indx.map(() => Vec3());
         this._colors = indx.map(() => Color.BLACK);

package/src/IO/IO.js

@@ -90,7 +90,7 @@ export function saveImageStreamToVideo(fileAddress, streamWithImages, { imageGet
                 s = await s.tail;
             }
             if (!fps) fps = ite / time;
-            execSync(`ffmpeg -framerate ${fps} -i ${fileName}_%d.ppm -y ${fileName}.${extension}`);
+            execSync(`ffmpeg -framerate ${fps} -i ${fileName}_%d.ppm -y -c:v libx264 -crf 20 -preset medium -profile:v baseline -level 3.0 -pix_fmt yuv420p -movflags +faststart ${fileName}.${extension}`);
             for (let i = 0; i < ite; i++) {
                 unlinkSync(`${fileName}_${i}.ppm`);
             }
@@ -114,6 +114,7 @@ export function saveParallelImageStreamToVideo(fileAddress, parallelStreamOfImag
                 Vec,
                 Vec2,
                 Vec3,
+                Ray,
                 Mesh,
                 Color,
                 Image,

package/src/Scene/KScene.js

@@ -32,14 +32,9 @@ export default class KScene extends NaiveScene {
         this.boundingBoxScene = new Node(this.k);
     }
 
-    distanceToPoint(p) {
+    distanceToPoint(p, combineLeafs = Math.min) {
         if (this.boundingBoxScene.leafs.length > 0) {
-            let distance = Number.MAX_VALUE;
-            const leafs = this.boundingBoxScene.leafs
-            for (let i = 0; i < leafs.length; i++) {
-                distance = Math.min(distance, leafs[i].element.distanceToPoint(p));
-            }
-            return distance;
+            return distanceFromLeafs(this.boundingBoxScene.leafs, p, combineLeafs);
         }
         return this.getElementNear(p).distanceToPoint(p);
     }
@@ -57,7 +52,7 @@ export default class KScene extends NaiveScene {
             normal = normal.add(n.scale(d));
             weight += d;
         }
-        return normal.length() > 0 ? normal.scale(1 / weight).normalize() : normal;
+        return normal.length() > 0 ? normal.scale(1 / weight).normalize() : super.normalToPoint(p);
     }
 
     interceptWithRay(ray) {
@@ -225,6 +220,7 @@ class Node {
     }
 
     distanceToPoint(p) {
+        if(!this.left && !this.right) return Number.MAX_VALUE;
         return this.getElementNear(p).distanceToPoint(p);
     }
 
@@ -234,7 +230,7 @@ class Node {
         }
         const leftT = this.left?.box?.interceptWithRay(ray)?.[0] ?? Number.MAX_VALUE;
         const rightT = this.right?.box?.interceptWithRay(ray)?.[0] ?? Number.MAX_VALUE;
-        if (leftT === Number.MAX_VALUE && rightT === Number.MAX_VALUE) return Number.MAX_VALUE;
+        if (leftT === Number.MAX_VALUE && rightT === Number.MAX_VALUE) return this.distanceToPoint(ray.init);
         const first = leftT <= rightT ? this.left : this.right;
         const second = leftT > rightT ? this.left : this.right;
         const firstT = Math.min(leftT, rightT);

package/src/Scene/NaiveScene.js

@@ -9,6 +9,10 @@ export default class NaiveScene {
     this.sceneElements = [];
   }
 
+  get(id) {
+    return this.id2ElemMap(id);
+  }
+
   getHash() {
     const elements = this.getElements();
     let combinedHash = 0;

package/src/Scene/VoxelScene.js

@@ -52,13 +52,17 @@ export default class VoxelScene extends NaiveScene {
     }
 
     normalToPoint(p) {
+        let weight = 0;
         let normal = Vec3();
         const elements = Object.values(this.gridMap[hash(p, this.gridSpace)] || {});
-        for (let i = 0; i < elements.length; i++) {
-            const elem = elements[i];
-            normal = normal.add(elem.normalToPoint(p));
+        const size = elements.length;
+        for (let i = 0; i < size; i++) {
+            const n = elements[i].normalToPoint(p);
+            const d = 1 / elements[i].distanceToPoint(p);
+            normal = normal.add(n.scale(d));
+            weight += d;
         }
-        return normal.length() > 0 ? normal.normalize() : normal;
+        return normal.length() > 0 ? normal.scale(1 / weight).normalize() : super.normalToPoint(p);
     }
 
     interceptWithRay(ray) {

package/src/Tela/Tela.js

@@ -118,7 +118,7 @@ export default class Tela {
         if (line.length <= 1) return;
         const [pi, pf] = line;
         const v = pf.sub(pi);
-        const n = v.map(Math.abs).fold((e, x) => e + x);
+        const n = v.map(Math.abs).fold((e, x) => e + x) + 5;
         for (let k = 0; k < n; k++) {
             const s = k / n;
             const lineP = pi.add(v.scale(s)).map(Math.floor);

package/src/Tela/Window.js

@@ -114,7 +114,8 @@ export default class Window extends Tela {
 //========================================================================================
 
 function handleMouse(canvas, lambda) {
-    return ({ x, y }) => {
-        return lambda(x, canvas.height - 1 - y);
+    return (e) => {
+        const { x, y } = e;
+        return lambda(x, canvas.height - 1 - y, e);
     }
 }

package/src/Tela/parallel.js

@@ -8,8 +8,9 @@ import { MyWorker } from "../Utils/Utils.js";
 //========================================================================================
 
 let WORKERS = [];
+const ERROR_MSG_TIMEOUT = 1000;
 let isFirstTimeCounter = NUMBER_OF_CORES;
-const MAGIC_SETUP_TIME = 700;
+
 //========================================================================================
 /*                                                                                      *
  *                                         MAIN                                         *
@@ -20,14 +21,16 @@ export function parallelWorkers(tela, lambda, dependencies = [], vars = []) {
     // lazy loading workers
     if (WORKERS.length === 0) {
         WORKERS = [...Array(NUMBER_OF_CORES)]
-            .map(() => new MyWorker(`Tela/telaWorker.js`));
+            .map(() => new MyWorker(`./Tela/telaWorker.js`));
     }
     const w = tela.width;
     const h = tela.height;
     return WORKERS.map((worker, k) => {
+        let timerId = undefined;
         return new Promise((resolve) => {
             worker.onMessage(message => {
                 const { image, startRow, endRow, } = message;
+                if (!IS_NODE) clearTimeout(timerId);
                 let index = 0;
                 const startIndex = CHANNELS * w * startRow;
                 const endIndex = CHANNELS * w * endRow;
@@ -46,12 +49,15 @@ export function parallelWorkers(tela, lambda, dependencies = [], vars = []) {
                 __endRow: Math.min(h, (k + 1) * ratio),
                 __dependencies: dependencies.map(d => d.toString()),
             };
+            worker.postMessage(message);
             if (isFirstTimeCounter > 0 && !IS_NODE) {
                 // hack to work in the browser, don't know why it works
                 isFirstTimeCounter--;
-                setTimeout(() => worker.postMessage(message), MAGIC_SETUP_TIME);
-            } else {
-                worker.postMessage(message)
+                timerId = setTimeout(() => {
+                    console.log("TIMEOUT!!")
+                    // doesn't block promise 
+                    resolve();
+                }, ERROR_MSG_TIMEOUT);
             }
         });
     })

package/src/Utils/Anima.js

@@ -0,0 +1,55 @@
+export default class Anima {
+    constructor(sequenceOfBehaviors = []) {
+        let acc = 0;
+        this.sequence = sequenceOfBehaviors.map(b => {
+            const ans = { ...b, start: acc, end: acc + b.duration };
+            acc = ans.end;
+            return ans;
+        });
+    }
+
+    anime(t, dt) {
+        let s = 0;
+        let i = 0;
+        while (s < t && i < this.sequence.length) {
+            s += this.sequence[i].duration;
+            i++;
+        }
+        const index = Math.max(0, i - 1);
+        const prevBehavior = this.sequence[index];
+        let tau = t - prevBehavior.start;
+        if (i >= this.sequence.length) tau = Math.min(tau, prevBehavior.duration); // end animation
+        if (Math.abs(tau - prevBehavior.duration) < dt) {
+            tau = prevBehavior.duration
+        }
+        return prevBehavior.behavior(tau, dt);
+    }
+
+    loop(t, dt) {
+        if (this.sequence.length === 0) return;
+        const maxT = this.sequence.at(-1).end;
+        return this.anime(t % maxT, dt);
+    }
+
+    animeTime() {
+        return this.sequence.at(-1).end;
+    }
+
+    /**
+     * 
+     * @param {(t, dt) => any} lambda 
+     * @param {time in seconds} duration 
+     */
+    static behavior(lambda, duration) {
+        return { behavior: lambda, duration };
+    }
+
+    static wait(duration) {
+        return { behavior: () => { }, duration };
+    }
+
+    static list(...args) {
+        return new Anima(args);
+    }
+}
+

package/src/Utils/Constants.js

@@ -5,6 +5,3 @@ export const IS_NODE = typeof process !== 'undefined' && Boolean(process.version
 export const NUMBER_OF_CORES = IS_NODE ?
     (await import("node:os")).cpus().length :
     navigator.hardwareConcurrency;
-
-export const IS_GITHUB = typeof window !== "undefined" && (window.location.host || window.LOCATION_HOST) === "pedroth.github.io";
-export const SOURCE = IS_GITHUB ? "/tela.js" : "";

package/src/Utils/Math.js

@@ -45,4 +45,18 @@ export function randomPointInSphere(dim) {
         break;
     }
     return randomInSphere;
+}
+
+
+export function orthoBasisFrom(...vectors) {
+    const basis = [];
+    const n = vectors.length;
+    for (let i = 0; i < n; i++) {
+        let v = vectors[i];
+        for (let j = 0; j < basis.length; j++) {
+            v = v.sub(basis[j].scale(v.dot(basis[j])))
+        }
+        basis.push(v.normalize());
+    }
+    return basis;
 }

package/src/Utils/SVG.js

@@ -334,7 +334,7 @@ const eatAllSpacesChars = eatWhile(p => p.type === " " || p.type === "\t" || p.t
  * number -> -D.D / D.D / -D / D
  * D -> [0-9]D / ε
  */
-export function parseSvgPath(svgPath) {
+function parseSvgPath(svgPath) {
     const { left: path, } = parsePath(stream(svgPath));
     return path;
 }
@@ -471,8 +471,8 @@ function finishPath(keyPointPath, svg, id, path) {
             svg.defPaths[id] = [];
             svg.defKeyPointPaths[id] = [];
         }
-        svg.defPaths[id].push(path);
-        svg.defKeyPointPaths[id].push(keyPointPath);
+        svg.defPaths[id].push(cleanPath(path));
+        svg.defKeyPointPaths[id].push(cleanPath(keyPointPath));
         path = [];
         keyPointPath = [];
     }
@@ -728,11 +728,33 @@ function readPath(svg, tagNode) {
             svg.defPaths[id] = [];
             svg.defKeyPointPaths[id] = [];
         }
-        svg.defPaths[id].push(path);
-        svg.defKeyPointPaths[id].push(keyPointPath);
+        svg.defPaths[id].push(cleanPath(path));
+        svg.defKeyPointPaths[id].push(cleanPath(keyPointPath));
     }
 }
 
+function readRect(svg, tagNode, transform = transformBuilder()) {
+    const attrs = tagNode?.Attrs?.attributes;
+    const [idObj] = attrs.filter(a => a.attributeName === "id");
+    const id = idObj?.attributeValue ?? generateUniqueID(5);
+    let width = undefined;
+    let height = undefined;
+    let x = undefined;
+    let y = undefined;
+    attrs.forEach(({ attributeName, attributeValue }) => {
+        if ("width" === attributeName) width = Number.parseFloat(attributeValue)
+        if ("height" === attributeName) height = Number.parseFloat(attributeValue)
+        if ("x" === attributeName) x = Number.parseFloat(attributeValue)
+        if ("y" === attributeName) y = Number.parseFloat(attributeValue)
+    })
+    const p = Vec2(x, y)
+    let path = [p, p.add(Vec2(width, 0)), p.add(Vec2(width, height)), p.add(Vec2(0, height)), p];
+    path = path.map(transform)
+    finishPath(path, svg, id, path)
+    svg.paths.push([path])
+    svg.keyPointPaths.push([path])
+}
+
 const transformBuilder = (a = 1, b = 0, c = 0, d = 1, e = 0, f = 0) => x => Vec2(a, b).scale(x.x).add(Vec2(c, d).scale(x.y)).add(Vec2(e, f));
 const dot = (f, g) => x => f(g(x));
 
@@ -742,16 +764,19 @@ function readTransform(svg, transformNode, transform = transformBuilder()) {
         .attributes
         .filter(x => x.attributeName === "transform")
         .forEach(({ attributeValue }) => {
-            const params = attributeValue.match(/-?\d+\.?\d*/g).map(Number);
-            if (attributeValue.includes("matrix")) {
-                transform = dot(transform, transformBuilder(...params));
-            }
-            if (attributeValue.includes("translate")) {
-                transform = dot(transform, transformBuilder(1, 0, 0, 1, ...params))
-            }
-            if (attributeValue.includes("scale")) {
-                transform = dot(transform, transformBuilder(params[0], 0, 0, params[1] ?? params[0], 0, 0))
-            }
+            const multiTransforms = attributeValue.includes("matrix") ? [attributeValue] : attributeValue.split(" ");
+            multiTransforms.forEach(T => {
+                const params = T.match(/-?\d+\.?\d*/g).map(Number);
+                if (T.includes("matrix")) {
+                    transform = dot(transform, transformBuilder(...params));
+                }
+                if (T.includes("scale")) {
+                    transform = dot(transform, transformBuilder(params[0], 0, 0, (params[1] ?? params[0]), 0, 0))
+                }
+                if (T.includes("translate")) {
+                    transform = dot(transform, transformBuilder(1, 0, 0, 1, ...params))
+                }
+            })
         })
     const nodeStack = [...(transformNode?.InnerSVG?.innerSvgs?.map(x => x.SVG) ?? [])];
     while (nodeStack.length > 0) {
@@ -795,6 +820,12 @@ function readTransform(svg, transformNode, transform = transformBuilder()) {
                 svg.keyPointPaths.push(svg.defKeyPointPaths[useParams.id].map(paths => paths.map(useParams.transform)));
             }
         }
+        if (tag === "path") {
+            readPath(svg, currentNode.EmptyTag ?? currentNode.StartTag, transform);
+        }
+        if (tag === "rect") {
+            readRect(svg, currentNode.EmptyTag ?? currentNode.StartTag, transform)
+        }
         nodeStack.push(...(currentNode?.InnerSVG?.innerSvgs?.map(x => x.SVG) ?? []));
     }
 
@@ -850,15 +881,49 @@ function readSVGNode(svgNode) {
         if (tag === "path") {
             readPath(svg, currentNode.EmptyTag ?? currentNode.StartTag);
         }
+        if (tag === "rect") {
+            readRect(svg, currentNode.EmptyTag ?? currentNode.StartTag)
+        }
         nodeStack.push(...(currentNode?.InnerSVG?.innerSvgs?.map(x => x.SVG) ?? []));
     }
     if (svg.paths.length === 0) {
         Object.values(svg.defPaths).forEach(paths => svg.paths.push(paths));
         Object.values(svg.defKeyPointPaths).forEach(paths => svg.keyPointPaths.push(paths));
     }
+
+    function normalize(path) {
+        return path.map(x => {
+            const { min, max } = svg.viewBox;
+            const diagonal = max.sub(min);
+            let p = x.sub(min).div(diagonal);
+            p = Vec2(p.x, -p.y).add(Vec2(0, 1));
+            return p;
+        });
+    }
+    svg.normalize = () => {
+        const ans = {
+            width: svg.width,
+            height: svg.height,
+            viewBox: { min: Vec2(), max: Vec2(1, 1) },
+            paths: svg.paths.map(paths => paths.map(path => normalize(path))),
+            keyPointPaths: svg.keyPointPaths.map(paths => paths.map(path => normalize(path)))
+        }
+        return ans;
+    }
     return svg;
 }
 
+function cleanPath(path) {
+    const epsilon = 1e-6;
+    const cleanPath = [];
+    for (let i = 0; i < path.length - 1; i++) {
+        if (!cleanPath.some(x => x.sub(path[i]).length() < epsilon)) {
+            cleanPath.push(path[i]);
+        }
+    }
+    cleanPath.push(path.at(-1));
+    return cleanPath;
+}
 
 //========================================================================================
 /*                                                                                      *

package/src/Utils/Triangulate.js

@@ -0,0 +1,134 @@
+import Box from "../Geometry/Box.js";
+
+export function triangulate(paths) {
+    if (paths.length === 0) return [];
+    const boxes = paths.map(path => path.reduce((e, x) => e.add(new Box(x, x)), new Box()));
+    const boxTrees = createBoxHierarchy(boxes, paths);
+    const triangles = []
+    boxTrees.forEach((boxTree) => {
+        triangles.push(...triangulateBoxTree(boxTree));
+    })
+    return triangles;
+}
+
+/**
+ * boxes and paths must have same size
+ */
+function createBoxHierarchy(boxes, paths) {
+    const trees = boxes.map((b, i) => ({ box: b, path: paths[i], children: [] }));
+    const ans = [];
+    for (let i = 0; i < trees.length; i++) {
+        let left = trees[i];
+        for (let j = i + 1; j < trees.length; j++) {
+            const right = trees[j];
+            const intersect = left.box.intersection(right.box);
+            if (intersect.equals(right.box)) {
+                left.children.push(right);
+            }
+            if (intersect.equals(left.box)) {
+                right.children.push(left)
+                left = right;
+            }
+        }
+        if (!ans.some(x => x.box.contains(left.box))) ans.push(left);
+    }
+    if (ans.length === 0) ans.push(trees[0])
+    return ans;
+}
+
+function triangulateBoxTree(boxTree) {
+    const triangles = [];
+    let path = [...joinBoxTreePaths(boxTree)];
+    let i = 0;
+    let samePath = 1e6;
+    while (path.length > 3 && samePath > 0) {
+        i = Math.floor(Math.random() * path.length);
+        const prevIndex = mod(i - 1, path.length);
+        const nextIndex = mod(i + 1, path.length);
+        const prev = path[prevIndex];
+        const next = path[nextIndex];
+        const c = path[i];
+        const u = next.sub(c);
+        const v = prev.sub(c);
+        const uWedgeV = u.cross(v);
+        if (uWedgeV > 0) {
+            samePath--;
+            // i = (i + 1) % path.length;
+            continue;
+        }
+
+        let havePointsInside = false;
+        for (let j = 0; j < path.length; j++) {
+            if (j === i || j === prevIndex || j === nextIndex) continue;
+            const p = path[j].sub(c);
+            const pWedgeV = p.cross(v);
+            const uWedgeP = u.cross(p);
+            if(uWedgeV === 0) continue;
+            const alpha = pWedgeV / uWedgeV;
+            const beta = uWedgeP / uWedgeV;
+            if (alpha < 1 && alpha > 0 && beta < 1 && beta > 0) {
+                havePointsInside = true;
+                break;
+            }
+        }
+        if (!havePointsInside) {
+            if (uWedgeV > 0) triangles.push([prev, c, next])
+            if (uWedgeV < 0) triangles.push([c, prev, next])
+            path.splice(i, 1);
+        }
+        // i = (i + 1) % path.length;
+    }
+    const prev = path[2];
+    const next = path[1];
+    const c = path[0];
+    const u = next.sub(c);
+    const v = prev.sub(c);
+    const uWedgeV = u.cross(v);
+    if (uWedgeV > 0) triangles.push([path[2], path[0], path[1]])
+    if (uWedgeV < 0) triangles.push([path[0], path[2], path[1]])
+    return triangles;
+}
+
+function joinBoxTreePaths(boxTree) {
+    const childPaths = boxTree.children.map(bT => bT.path);
+    let grandPath = [...boxTree.path];
+    childPaths.forEach(childPath => {
+        let min = Number.MAX_VALUE;
+        let minIndexI = -1;
+        let minIndexJ = -1;
+        for (let i = 0; i < grandPath.length; i++) {
+            for (let j = 0; j < childPath.length; j++) {
+                const d = childPath[j].sub(grandPath[i]).squareLength();
+                // some deterministic salt in cost function
+                if (d + j < min) {
+                    min = d;
+                    minIndexI = i;
+                    minIndexJ = j;
+                }
+            }
+        }
+        const gradLeft = grandPath.slice(0, minIndexI + 1);
+        const gradRight = grandPath.slice(minIndexI);
+        const innerLeft = childPath.slice(0, minIndexJ + 1);
+        const innerRight = childPath.slice(minIndexJ);
+        grandPath = gradLeft.concat(cleanPath(innerRight.concat(innerLeft))).concat(gradRight);
+    })
+    return grandPath;
+}
+
+
+function mod(a, b) {
+    return ((a % b) + b) % b;
+}
+
+function cleanPath(path) {
+    const epsilon = 1e-6;
+    const cleanPath = [];
+    for (let i = 0; i < path.length - 1; i++) {
+        if (!cleanPath.some(x => x.sub(path[i]).length() < epsilon)) {
+            cleanPath.push(path[i]);
+        }
+    }
+    cleanPath.push(path.at(-1));
+    return cleanPath;
+}

package/src/Utils/Utils.js

@@ -1,4 +1,4 @@
-import { IS_NODE, SOURCE } from "./Constants.js";
+import { IS_NODE } from "./Constants.js";
 
 export async function measureTime(lambda) {
     const t = performance.now();
@@ -94,6 +94,8 @@ export function hashStr(string) {
 const __Worker = IS_NODE ? (await import("node:worker_threads")).Worker : Worker;
 export class MyWorker {
     constructor(path) {
+        const IS_GITHUB = typeof window !== "undefined" && (window.location.host || window.LOCATION_HOST) === "pedroth.github.io";
+        const SOURCE = IS_GITHUB ? "/tela.js" : "";
         try {
             if (IS_NODE) {
                 let workerPath = "/" + (import.meta.dirname).split('/').slice(1, -1).join('/');
@@ -102,6 +104,10 @@ export class MyWorker {
             } else {
                 const workerPath = `${SOURCE}/src/${path}`;
                 this.worker = new __Worker(`${workerPath}`, { type: "module" });
+                this.worker.onerror = () => {
+                    this.worker = new __Worker(`/node_modules/tela.js/src/${path}`, { type: "module" });
+                    console.log(`Caught error while import from ${SOURCE} web, trying node_modules`);
+                }
             }
         } catch (e) {
             console.log("Caught error while importing worker", e);

package/src/Utils/Video.js

@@ -29,7 +29,7 @@ export function videoAsync(file, lambda, { width = 640, height = 480, FPS = 25 }
         async ({ time, image }) => {
             return {
                 time: time + dt,
-                image: await lambda({ time, image })
+                image: await lambda({ time, image, dt })
             }
         }
     );

package/src/index.js

@@ -1,22 +1,25 @@
+import Anima from "./Utils/Anima.js"
+import BScene from "./Scene/BScene.js"
+import Box from "./Geometry/Box.js"
+import Camera from "./Camera/Camera.js"
+import Camera2D from "./Camera2D/Camera2D.js"
 import Canvas from "./Tela/Canvas.js"
 import Color from "./Color/Color.js"
 import DOM from "./Utils/DomBuilder.js"
-import Stream from "./Utils/Stream.js"
-import Camera from "./Camera/Camera.js"
-import BScene from "./Scene/BScene.js"
 import KScene from "./Scene/KScene.js"
+import Line from "./Geometry/Line.js"
+import Mesh from "./Geometry/Mesh.js"
 import NaiveScene from "./Scene/NaiveScene.js"
-import VoxelScene from "./Scene/VoxelScene.js"
+import Path from "./Geometry/Path.js"
+import parseSVG from "./Utils/SVG.js"
 import RandomScene from "./Scene/RandomScene.js"
-import Vec, { Vec2, Vec3 } from "./Vector/Vector.js"
-import Box from "./Geometry/Box.js"
+import Ray from "./Ray/Ray.js"
 import Sphere from "./Geometry/Sphere.js"
-import Line from "./Geometry/Line.js"
-import Path from "./Geometry/Path.js"
+import Stream from "./Utils/Stream.js"
 import Triangle from "./Geometry/Triangle.js"
-import Mesh from "./Geometry/Mesh.js"
-import Ray from "./Ray/Ray.js"
-import parseSVG, {parseSvgPath} from "./Utils/SVG.js"
+import Vec, { Vec2, Vec3 } from "./Vector/Vector.js"
+import VoxelScene from "./Scene/VoxelScene.js"
+import PQueue from "./Utils/PQueue.js"
 
 export {
     Box,
@@ -28,19 +31,21 @@ export {
     Path,
     Vec2,
     Vec3,
+    Anima,
     Color,
     BScene,
     Canvas,
     Camera,
     KScene,
+    PQueue,
     Sphere,
     Stream,
+    Camera2D,
     parseSVG,
     Triangle,
     NaiveScene,
     VoxelScene,
     RandomScene,
-    parseSvgPath,
 }
 
 export * from "./Utils/Math.js"
@@ -48,4 +53,5 @@ export * from "./Material/Material.js";
 export * from "./Utils/Utils.js";
 export * from "./Utils/Monads.js";
 export * from "./Utils/Constants.js"
-export * from "./Utils/Fonts.js"
+export * from "./Utils/Fonts.js"
+export * from "./Utils/Triangulate.js"