tela.js 1.1.8 → 1.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tela.js",
-  "version": "1.1.8",
+  "version": "1.1.9",
   "author": "Pedroth",
   "repository": {
     "type": "git",

package/src/Camera/parallel.js

@@ -1,6 +1,5 @@
-import { IS_NODE, NUMBER_OF_CORES } from "../Utils/Constants.js";
+import { CHANNELS, IS_NODE, NUMBER_OF_CORES } from "../Utils/Constants.js";
 import Color from "../Color/Color.js";
-import { CHANNELS } from "../Tela/Tela.js";
 
 //========================================================================================
 /*                                                                                      *

package/src/Camera/rayTraceWorker.js

@@ -1,7 +1,6 @@
 import Camera from "./Camera.js";
 import { rayTrace } from "./rayTrace.js";
-import { CHANNELS } from "../Tela/Tela.js";
-import { IS_NODE } from "../Utils/Constants.js";
+import { CHANNELS, IS_NODE } from "../Utils/Constants.js";
 import { deserializeScene } from "../Scene/utils.js";
 import Color from "../Color/Color.js";
 

package/src/IO/IO.js

@@ -7,7 +7,7 @@ export function saveImageToFile(fileAddress, image) {
     const ppmName = `${fileName}.ppm`;
     writeFileSync(ppmName, createPPMFromImage(image));
     if (extension !== "ppm") {
-        execSync(`ffmpeg -i ${ppmName} ${fileName}.${extension}`);
+        execSync(`ffmpeg -i ${ppmName} -y ${fileName}.${extension}`);
         unlinkSync(ppmName)
     }
 }
@@ -89,7 +89,7 @@ export function saveImageStreamToVideo(fileAddress, streamWithImages, { imageGet
                 s = await s.tail;
             }
             if (!fps) fps = ite / time;
-            execSync(`ffmpeg -framerate ${fps} -i ${fileName}_%d.ppm ${fileName}.${extension}`);
+            execSync(`ffmpeg -framerate ${fps} -i ${fileName}_%d.ppm -y ${fileName}.${extension}`);
             for (let i = 0; i < ite; i++) {
                 unlinkSync(`${fileName}_${i}.ppm`);
             }
@@ -106,8 +106,8 @@ export function saveParallelImageStreamToVideo(fileAddress, parallelStreamOfImag
     const promises = inputParamsPartitions.map((inputParams, i) => {
         const spawnFile = "IO_parallel" + i + ".js";
         writeFileSync(spawnFile, `
-            import * as _module from "./src/index.node.js"
             import fs from "node:fs";
+            import * as _module from "./src/index.node.js"
             const {
                 Box,
                 Vec,

package/src/Tela/Canvas.js

@@ -1,7 +1,7 @@
 import Color from "../Color/Color.js";
-import { MAX_8BIT } from "../Utils/Constants.js";
+import { CHANNELS, MAX_8BIT } from "../Utils/Constants.js";
 import { memoize } from "../Utils/Utils.js";
-import Tela, { CHANNELS } from "./Tela.js";
+import Tela from "./Tela.js";
 
 export default class Canvas extends Tela {
 
@@ -228,10 +228,10 @@ const createWorker = (main, lambda, dependencies) => {
   const lambda = ${lambda.toString()};
   const __main__ = ${main.toString()};
   onmessage = e => {
-      const input = e.data
+      const input = e.data;
       const output = __main__(input);
       self.postMessage(output);
   };
   `;
-  return new Worker(URL.createObjectURL(new Blob([workerFile])));
+  return new Worker(URL.createObjectURL(new Blob([workerFile], { type: 'application/javascript' })), { type: "module" });
 };

package/src/Tela/Image.js

@@ -1,7 +1,8 @@
+import Tela from "./Tela.js";
 import Color from "../Color/Color.js";
 import { readImageFrom } from "../IO/IO.js";
 import { memoize } from "../Utils/Utils.js";
-import Tela, { CHANNELS } from "./Tela.js";
+import { CHANNELS } from "../Utils/Constants.js";
 import { Worker } from "node:worker_threads";
 import os from "node:os";
 
@@ -116,14 +117,31 @@ export default class Image extends Tela {
 const createWorker = (main, lambda, dependencies) => {
     const workerFile = `
     const { parentPort } = require("node:worker_threads");
-    const CHANNELS = ${CHANNELS};
-    ${dependencies.concat([Color]).map(d => d.toString()).join("\n")}
-    const lambda = ${lambda.toString()};
-    const __main__ = ${main.toString()};
-    parentPort.on("message", message => {
-        const output = __main__(message);
-        parentPort.postMessage(output);
-    });
+    import("./src/index.js").then(_module => {
+        const {
+            Box,
+            Vec,
+            Vec2,
+            Vec3,
+            Mesh,
+            Color,
+            Image,
+            BScene,
+            Camera,
+            KScene,
+            Sphere,
+            CHANNELS
+            MAX_8BIT,
+            NaiveScene,
+        } = _module;
+        ${dependencies.map(d => d.toString()).join("\n")}
+        const lambda = ${lambda.toString()};
+        const __main__ = ${main.toString()};
+        parentPort.on("message", message => {
+            const output = __main__(message);
+            parentPort.postMessage(output);
+        });
+    })
     `;
     const worker = new Worker(workerFile, { eval: true });
     return worker;

package/src/Tela/Tela.js

@@ -1,10 +1,9 @@
 import Color from "../Color/Color.js";
 import Box from "../Geometry/Box.js";
+import { CHANNELS } from "../Utils/Constants.js";
 import { mod } from "../Utils/Math.js";
 import { Vec2 } from "../Vector/Vector.js";
 
-export const CHANNELS = 4;
-
 // Abstract Image
 export default class Tela {
     constructor(width, height) {
@@ -42,6 +41,19 @@ export default class Tela {
         return this.paint();
     }
 
+    mapBox = (lambda, box) => {
+        const init = box.min;
+        const end = box.max;
+        for (let x = init.x; x < end.x; x++) {
+            for (let y = init.y; y < end.y; y++) {
+                const color = lambda(x - init.x, y - init.y);
+                if (!color) continue;
+                this.setPxl(x, y, color);
+            }
+        }
+        return this;
+    }
+
     fill(color) {
         if (!color) return;
         const n = this.image.length;

package/src/Tela/Window.js

@@ -1,11 +1,11 @@
 import { memoize } from "../Utils/Utils.js";
 import Color from "../Color/Color.js";
-import { MAX_8BIT } from "../Utils/Constants.js";
+import { CHANNELS, MAX_8BIT } from "../Utils/Constants.js";
 import { clamp } from "../Utils/Math.js";
 import sdl from "@kmamal/sdl";
 import os from 'node:os';
 import { Worker } from "node:worker_threads";
-import Tela, { CHANNELS } from "./Tela.js";
+import Tela from "./Tela.js";
 import { Buffer } from "node:buffer";
 
 
@@ -127,6 +127,11 @@ export default class Window extends Tela {
         return this;
     }
 
+    onResizeWindow(lambda) {
+        this.window.on("resize", (e) => lambda(e));
+        return this;
+    }
+
     setWindowSize(w, h) {
         this.window.setSize(w, h);
         return this;

package/src/Utils/Constants.js

@@ -1,4 +1,5 @@
 export const MAX_8BIT = 255;
+export const CHANNELS = 4;
 export const RAD2DEG = 180 / Math.PI;
 export const IS_NODE = typeof process !== 'undefined' && process.versions && process.versions.node;
 export const NUMBER_OF_CORES = IS_NODE ?

package/src/Utils/Math.js

@@ -19,6 +19,23 @@ export function lerp(a, b) {
     return t => a.scale(1 - t).add(b.scale(t));
 }
 
+export function qBezier(p1, p2, p3) {
+    const q1 = lerp(p1, p2);
+    const q2 = lerp(p2, p3);
+    return t => lerp(q1(t), q2(t))(t);
+}
+
+export function cBezier(p1, p2, p3, p4) {
+    const b1 = lerp(p1, p2);
+    const b2 = lerp(p2, p3);
+    const b3 = lerp(p3, p4);
+    return t => {
+        const c1 = lerp(b1(t), b2(t));
+        const c2 = lerp(b2(t), b3(t));
+        return lerp(c1(t), c2(t))(t);
+    }
+}
+
 export function randomPointInSphere(dim) {
     let randomInSphere;
     while (true) {

package/src/Utils/SVG.js

@@ -1,21 +1,13 @@
-/*
- SVG -> StartTag InnerSVG EndTag / EmptyTag / CommentTag
- InnerSVG -> SVGTypes InnerSVG / ε
- SVGTypes -> SVG / Value
- Value -> AnyBut(<)
- StartTag ->  < (" ")* AlphaNumName (" " || "\n")* Attrs (" " || "\n")*>
- EmptyTag -> <(" ")* AlphaNumName (" " || "\n")* Attrs (" " || "\n")* />
- Attrs -> Attr (" " || "\n")* Attrs / ε
- Attr -> AlphaNumName="AnyBut(")" / AlphaNumName='AnyBut(')'
- EndTag -> </(" ")*AlphaNumName(" ")*>
- AlphaNumName -> [a-zA-z][a-zA-Z0-9]*
-*/
+import { Vec2 } from "../Vector/Vector.js";
+import { cBezier, qBezier } from "./Math.js";
+
 export default function parse(text) {
-    const { left: SVG } = parseSVG(eatSpacesTabsAndNewLines(tokens(stream(text))));
-    // TODO create triangulation
-    return SVG;
+    const tokensStream = tokens(stream(text));
+    const { left: SVG } = parseSVG(eatAllSpacesChars(tokensStream));
+    return readSVGNode(SVG);
 }
 
+
 //========================================================================================
 /*                                                                                      *
  *                                       TOKENIZER                                      *
@@ -25,8 +17,11 @@ const TOKEN_SYMBOLS = [
     "<!--",
     "-->",
     "\n",
+    "\r",
     "\t",
     " ",
+    "<?",
+    "?>",
     "</",
     "/>",
     "<",
@@ -97,13 +92,26 @@ function symbolParser(symbol) {
  *                                                                                      */
 //========================================================================================
 
-
+/*
+ SVG -> StartTag InnerSVG EndTag / EmptyTag / CommentTag (" " || "\n")* SVG / XMLTag (" " || "\n")* SVG
+ InnerSVG -> SVGTypes InnerSVG / ε
+ SVGTypes -> SVG / CommentTag / Value
+ Value -> AnyBut(<)
+ StartTag ->  < (" ")* AlphaNumName (" " || "\n")* Attrs (" " || "\n")*>
+ EmptyTag -> <(" ")* AlphaNumName (" " || "\n")* Attrs (" " || "\n")* />
+ Attrs -> Attr (" " || "\n")* Attrs / ε
+ Attr -> AlphaNumName="AnyBut(")" / AlphaNumName='AnyBut(')'
+ EndTag -> </(" ")*AlphaNumName(" ")*>
+ AlphaNumName -> [a-zA-z][a-zA-Z0-9]*
+ CommentTag -> <!--AnyBut("-->")-->
+ XMLTag -> <?AnyBut("?>")?>
+*/
 function parseSVG(stream) {
     return or(
         () => {
             const { left: StartTag, right: nextStream1 } = parseStartTag(stream);
             const { left: InnerSVG, right: nextStream2 } = parseInnerSVG(nextStream1);
-            const { left: EndTag, right: nextStream3 } = parseEndTag(eatSpacesTabsAndNewLines(nextStream2));
+            const { left: EndTag, right: nextStream3 } = parseEndTag(eatAllSpacesChars(nextStream2));
             return pair({ type: "svg", StartTag, InnerSVG, EndTag }, nextStream3);
         },
         () => {
@@ -111,24 +119,35 @@ function parseSVG(stream) {
             return pair({ type: "svg", EmptyTag }, nextStream);
         },
         () => {
-            const { left: CommentTag, right: nextStream } = parseCommentTag(stream);
-            return pair({ type: "svg", CommentTag }, nextStream);
+            const { right: nextStream } = parseCommentTag(stream);
+            const { left: SVG, right: nextStream1 } = parseSVG(eatAllSpacesChars(nextStream));
+            return pair({ type: "svg", ...SVG }, nextStream1);
+        },
+        () => {
+            const { right: nextStream } = parseXMLTag(stream);
+            const { left: SVG, right: nextStream1 } = parseSVG(eatAllSpacesChars(nextStream));
+            return pair({ type: "svg", ...SVG }, nextStream1);
         }
     );
 }
 
 function parseValue(stream) {
-    const { left: AnyBut, right: nextStream } = parseAnyBut(t => t.type === "<" || t.type === "</")(eatSpacesTabsAndNewLines(stream));
+    const { left: AnyBut, right: nextStream } = parseAnyBut(t => t.type === "<" || t.type === "</")(eatAllSpacesChars(stream));
     return pair({ type: "value", text: AnyBut.text }, nextStream);
 }
 
 function parseSVGTypes(stream) {
     return or(
         () => {
-            const cleanStream = eatSpacesTabsAndNewLines(stream);
+            const cleanStream = eatAllSpacesChars(stream);
             const { left: SVG, right: nextStream } = parseSVG(cleanStream);
             return pair({ type: "svgTypes", SVG }, nextStream);
         },
+        () => {
+            const cleanStream = eatAllSpacesChars(stream);
+            const { left: CommentTag, right: nextStream } = parseCommentTag(cleanStream);
+            return pair({ type: "svgTypes", CommentTag }, nextStream);
+        },
         () => {
             const { left: Value, right: nextStream } = parseValue(stream);
             if (Value.text === "") throw Error("Fail to parse SVGType")
@@ -172,7 +191,7 @@ function parseAnyBut(tokenPredicate) {
 }
 
 function parseEndTag(stream) {
-    const filteredStream = eatSpacesTabsAndNewLines(stream);
+    const filteredStream = eatAllSpacesChars(stream);
     const token = filteredStream.head();
     if ("</" === token.type) {
         const nextStream1 = eatSpaces(filteredStream.tail());
@@ -190,9 +209,9 @@ function parseEmptyTag(stream) {
     if ("<" === token.type) {
         const nextStream1 = eatSpaces(stream.tail());
         const { left: tagName, right: nextStream2 } = parseAlphaNumName(nextStream1)
-        const nextStream3 = eatSpacesTabsAndNewLines(nextStream2);
+        const nextStream3 = eatAllSpacesChars(nextStream2);
         const { left: Attrs, right: nextStream4 } = parseAttrs(nextStream3);
-        const nextStream5 = eatSpacesTabsAndNewLines(nextStream4);
+        const nextStream5 = eatAllSpacesChars(nextStream4);
         if ("/>" === nextStream5.head().type) {
             return pair({ type: "emptyTag", tag: tagName.text, Attrs }, nextStream5.tail());
         }
@@ -209,14 +228,23 @@ function parseCommentTag(stream) {
     throw new Error("Fail to parse CommentTag")
 }
 
+function parseXMLTag(stream) {
+    if ("<?" === stream.head().type) {
+        const nextStream = stream.tail();
+        const { right: nextStream1 } = parseAnyBut(token => '?>' === token.type)(nextStream);
+        return pair({ type: "xmlTag" }, eatAllSpacesChars(nextStream1.tail()));
+    }
+    throw new Error("Fail to parse XMLTag")
+}
+
 function parseStartTag(stream) {
     const token = stream.head();
     if ("<" === token.type) {
         const nextStream1 = eatSpaces(stream.tail());
         const { left: tagName, right: nextStream2 } = parseAlphaNumName(nextStream1)
-        const nextStream3 = eatSpacesTabsAndNewLines(nextStream2);
+        const nextStream3 = eatAllSpacesChars(nextStream2);
         const { left: Attrs, right: nextStream4 } = parseAttrs(nextStream3);
-        const nextStream5 = eatSpacesTabsAndNewLines(nextStream4);
+        const nextStream5 = eatAllSpacesChars(nextStream4);
         if (">" === nextStream5.head().type) {
             return pair({ type: "startTag", tag: tagName.text, Attrs }, nextStream5.tail());
         }
@@ -271,7 +299,7 @@ function parseAttrs(stream) {
     return or(
         () => {
             const { left: Attr, right: nextStream } = parseAttr(stream);
-            const nextStreamNoSpaces = eatSpacesTabsAndNewLines(nextStream);
+            const nextStreamNoSpaces = eatAllSpacesChars(nextStream);
             const { left: Attrs, right: nextStream1 } = parseAttrs(nextStreamNoSpaces);
             return pair({
                 type: "attrs",
@@ -287,24 +315,496 @@ function parseAttrs(stream) {
     )
 }
 
-function eatSpaces(stream) {
-    let s = stream;
-    while (!s.isEmpty()) {
-        if (s.head().type !== " ") break;
-        s = s.tail();
+const eatSpaces = eatWhile(p => p.type === " ");
+const eatAllSpacesChars = eatWhile(p => p.type === " " || p.type === "\t" || p.type === "\r" || p.type === "\n")
+
+//========================================================================================
+/*                                                                                      *
+ *                                    PARSE SVG PATH                                    *
+ *                                                                                      */
+//========================================================================================
+
+
+/**
+ * 
+ * path -> action path/ ε
+ * action -> (" "* | "\n"* )letter(" "* | "\n"*)numbers / letter
+ * letter -> [a...zA...Z]
+ * numbers -> number(" "* | "\n"*  | ",")numbers / ε
+ * number -> -D.D / D.D / -D / D
+ * D -> [0-9]D / ε
+ */
+export function parseSvgPath(svgPath) {
+    const { left: path, } = parsePath(stream(svgPath));
+    return path;
+}
+
+function parsePath(iStream) {
+    return or(
+        () => {
+            const { left: action, right: nStream } = parseAction(iStream);
+            const { left: path, right: nStream2 } = parsePath(nStream);
+            return pair({ type: "path", actions: [{ ...action }, ...path.actions] }, nStream2);
+        },
+        () => {
+            return pair({ type: "path", actions: [] }, iStream)
+        }
+    )
+}
+
+function parseAction(iStream) {
+    const nStream0 = eatWhile(p => p === " " || p === "\n")(iStream);
+    const { left: letter, right: nStream } = parseLetter(nStream0);
+    const nStream1 = eatWhile(p => p === " " || p === "\n")(nStream);
+    const { left: numbers, right: nStream2 } = parseNumbers(nStream1);
+    return pair({ type: "action", letter: letter.letter, numbers: numbers.numbers }, nStream2);
+}
+
+
+function parseLetter(iStream) {
+    const char = iStream.head();
+    if (/^[a-zA-Z]$/.test(char)) {
+        return pair({ type: "letter", letter: char }, iStream.tail())
     }
-    return s;
+    throw new Error("Caught exception in parsing letter");
 }
-function eatSpacesTabsAndNewLines(stream) {
-    let s = stream;
-    while (!s.isEmpty()) {
-        const symbol = s.head().type;
-        if (symbol !== " " && symbol !== "\t" && symbol !== "\n") break;
-        s = s.tail();
+
+function parseNumbers(iStream) {
+    return or(
+        () => {
+            const { left: number, right: nStream } = parseNumber(iStream);
+            const nStream2 = eatWhile(p => p === " " || p === "\n" || p === ",")(nStream);
+            const { left: numbers, right: nStream3 } = parseNumbers(nStream2);
+            return pair({ type: "numbers", numbers: [number.number, ...numbers.numbers] }, nStream3);
+        },
+        () => {
+            return pair({ type: "numbers", numbers: [] }, iStream);
+        }
+    )
+
+}
+
+function parseNumber(iStream) {
+    return or(
+        () => {
+            let nStream = iStream;
+            if (nStream.head() === "-") {
+                nStream = nStream.tail();
+                const { left: D, right: nStream2 } = parseD(nStream);
+                if (nStream2.head() === ".") {
+                    const { left: D2, right: nStream3 } = parseD(nStream2.tail()); // remove .
+                    return pair({ type: "number", number: Number.parseFloat(`-${D.d}.${D2.d}`) }, nStream3);
+                }
+            }
+            throw new Error("fail to parse -D.D");
+        },
+        () => {
+            const { left: D, right: nStream } = parseD(iStream);
+            if (nStream.head() === ".") {
+                const { left: D2, right: nStream2 } = parseD(nStream.tail()); // remove .
+                return pair({ type: "number", number: Number.parseFloat(`${D.d}.${D2.d}`) }, nStream2);
+            }
+            throw new Error("fail to parse D.D");
+        },
+        () => {
+            let nStream = iStream;
+            if (nStream.head() === "-") {
+                nStream = nStream.tail();
+                const { left: D, right: nStream2 } = parseD(nStream);
+                return pair({ type: "number", number: Number.parseFloat(`-${D.d}`) }, nStream2);
+            }
+            throw new Error("fail to parse -D");
+        },
+        () => {
+            const { left: D, right: nStream } = parseD(iStream);
+            if (D.d === "") throw new Error("fail to parse D");
+            return pair({ type: "number", number: Number.parseFloat(`${D.d}`) }, nStream)
+        }
+    )
+}
+
+function parseD(iStream) {
+    return or(
+        () => {
+            const char = iStream.head();
+            if (/^[0-9]$/.test(char)) {
+                const nStream = iStream.tail();
+                const { left: D, right: nStream2 } = parseD(nStream);
+                return pair({ type: "D", d: `${char}${D.d}` }, nStream2);
+            }
+            throw new Error("Caught exception in parsing D");
+        },
+        () => {
+            return pair({ type: "D", d: "" }, iStream);
+        }
+    )
+
+}
+
+function eatWhile(predicate) {
+    return iStream => {
+        let s = iStream;
+        while (!s.isEmpty() && predicate(s.head())) {
+            s = s.tail();
+        }
+        return s;
     }
-    return s;
 }
 
+//========================================================================================
+/*                                                                                      *
+ *                                      SVG READER                                      *
+ *                                                                                      */
+//========================================================================================
+
+function addFirstPointIfNeeded(currentPos, path, keyPointPath) {
+    if (keyPointPath.length === 0) {
+        path.push(currentPos);
+        keyPointPath.push(currentPos);
+    }
+}
+
+function readPath(svg, tagNode) {
+    let path = [];
+    let keyPointPath = [];
+    const samples = 10;
+    let currentPos = Vec2();
+    const [svgPath] = tagNode.Attrs.attributes.filter(a => a.attributeName === "d");
+    const [idObj] = tagNode.Attrs.attributes.filter(a => a.attributeName === "id");
+    const id = idObj?.attributeValue ?? generateUniqueID(5);
+    const letter2action = {
+        "M": (vecs) => {
+            const [p] = vecs;
+            currentPos = p;
+        },
+        "m": (vecs) => {
+            const [p] = vecs;
+            currentPos = currentPos.add(p);
+        },
+        "L": (vecs) => {
+            addFirstPointIfNeeded(currentPos, path, keyPointPath);
+            for (let j = 0; j < vecs.length; j += 1) {
+                path.push(vecs[j]);
+                keyPointPath.push(vecs[j]);
+                currentPos = path.at(-1);
+            }
+        },
+        "l": (vecs) => {
+            addFirstPointIfNeeded(currentPos, path, keyPointPath);
+            for (let j = 0; j < vecs.length; j += 1) {
+                path.push(currentPos.add(vecs[j]));
+                keyPointPath.push(currentPos.add(vecs[j]));
+                currentPos = path.at(-1);
+            }
+        },
+        "V": (vecs) => {
+            addFirstPointIfNeeded(currentPos, path, keyPointPath);
+            for (let j = 0; j < vecs.length; j += 1) {
+                const newP = Vec2(currentPos.x, vecs[j].y);
+                path.push(newP);
+                keyPointPath.push(newP);
+                currentPos = path.at(-1);
+            }
+        },
+        "v": (vecs) => {
+            addFirstPointIfNeeded(currentPos, path, keyPointPath);
+            for (let j = 0; j < vecs.length; j += 1) {
+                path.push(currentPos.add(vecs[j]));
+                keyPointPath.push(currentPos.add(vecs[j]));
+                currentPos = path.at(-1);
+            }
+        },
+        "H": (vecs) => {
+            addFirstPointIfNeeded(currentPos, path, keyPointPath);
+            for (let j = 0; j < vecs.length; j += 1) {
+                const newP = Vec2(vecs[j].x, currentPos.y);
+                path.push(newP);
+                keyPointPath.push(newP);
+                currentPos = path.at(-1);
+            }
+        },
+        "h": (vecs) => {
+            addFirstPointIfNeeded(currentPos, path, keyPointPath);
+            for (let j = 0; j < vecs.length; j += 1) {
+                path.push(currentPos.add(vecs[j]));
+                keyPointPath.push(currentPos.add(vecs[j]));
+                currentPos = path.at(-1);
+            }
+        },
+        "Q": (vecs) => {
+            addFirstPointIfNeeded(currentPos, path, keyPointPath);
+            for (let j = 0; j < vecs.length; j += 2) {
+                const qb = qBezier(currentPos, vecs[j], vecs[j + 1]);
+                for (let i = 0; i < samples; i++) {
+                    path.push(qb(i / (samples - 1)));
+                }
+                keyPointPath.push(currentPos, vecs[j], vecs[j + 1]);
+                currentPos = path.at(-1);
+            }
+        },
+        "q": (vecs) => {
+            addFirstPointIfNeeded(currentPos, path, keyPointPath);
+            for (let j = 0; j < vecs.length; j += 2) {
+                const qb = qBezier(currentPos, currentPos.add(vecs[j]), currentPos.add(vecs[j + 1]));
+                for (let i = 0; i < samples; i++) {
+                    path.push(qb(i / (samples - 1)));
+                }
+                keyPointPath.push(currentPos, currentPos.add(vecs[j]), currentPos.add(vecs[j + 1]));
+                currentPos = path.at(-1);
+            }
+        },
+        "T": (vecs) => {
+            addFirstPointIfNeeded(currentPos, path, keyPointPath);
+            const [end] = vecs;
+            const prevKeyPoint = keyPointPath.at(-2) ? keyPointPath.at(-2) : keyPointPath.at(-1);
+            const control = currentPos.scale(2).sub(prevKeyPoint); // reflection bla bla
+            const qb = qBezier(currentPos, control, end);
+            for (let i = 0; i < samples; i++) {
+                path.push(qb(i / (samples - 1)));
+            }
+            keyPointPath.push(
+                currentPos,
+                control,
+                end
+            )
+            currentPos = path.at(-1);
+        },
+        "t": (vecs) => {
+            addFirstPointIfNeeded(currentPos, path, keyPointPath);
+            const [end] = vecs;
+            const prevKeyPoint = keyPointPath.at(-2) ? keyPointPath.at(-2) : keyPointPath.at(-1);
+            const control = currentPos.scale(2).sub(prevKeyPoint); // reflection bla bla
+            const qb = qBezier(currentPos, control, currentPos.add(end));
+            for (let i = 0; i < samples; i++) {
+                path.push(qb(i / (samples - 1)));
+            }
+            keyPointPath.push(
+                currentPos,
+                control,
+                currentPos.add(end)
+            )
+            currentPos = path.at(-1);
+        },
+        "C": (vecs) => {
+            addFirstPointIfNeeded(currentPos, path, keyPointPath);
+            for (let j = 0; j < vecs.length; j += 3) {
+                const cb = cBezier(
+                    currentPos,
+                    vecs[j],
+                    vecs[j + 1],
+                    vecs[j + 2]
+                );
+                for (let i = 0; i < samples; i++) {
+                    path.push(cb(i / (samples - 1)));
+                }
+                keyPointPath.push(
+                    currentPos,
+                    vecs[j],
+                    vecs[j + 1],
+                    vecs[j + 2]
+                )
+                currentPos = path.at(-1);
+            }
+        },
+        "c": (vecs) => {
+            addFirstPointIfNeeded(currentPos, path, keyPointPath);
+            for (let j = 0; j < vecs.length; j += 3) {
+                const cb = cBezier(
+                    currentPos,
+                    currentPos.add(vecs[j]),
+                    currentPos.add(vecs[j + 1]),
+                    currentPos.add(vecs[j + 2])
+                );
+                for (let i = 0; i < samples; i++) {
+                    path.push(cb(i / (samples - 1)));
+                }
+                keyPointPath.push(
+                    currentPos,
+                    currentPos.add(vecs[j]),
+                    currentPos.add(vecs[j + 1]),
+                    currentPos.add(vecs[j + 2])
+                )
+                currentPos = path.at(-1);
+            }
+        },
+        "Z": () => {
+            if (keyPointPath.length === 0) return;
+            path.push(keyPointPath[0]);
+            keyPointPath.push(keyPointPath[0]);
+            if (!svg.defPaths[id]) {
+                svg.defPaths[id] = [];
+                svg.defKeyPointPaths[id] = [];
+            }
+            svg.defPaths[id].push(path);
+            svg.defKeyPointPaths[id].push(keyPointPath);
+            path = [];
+            keyPointPath = [];
+        },
+        "z": () => {
+            if (keyPointPath.length === 0) return;
+            path.push(keyPointPath[0]);
+            keyPointPath.push(keyPointPath[0]);
+            if (!svg.defPaths[id]) {
+                svg.defPaths[id] = [];
+                svg.defKeyPointPaths[id] = [];
+            }
+            svg.defPaths[id].push(path);
+            svg.defKeyPointPaths[id].push(keyPointPath);
+            path = [];
+            keyPointPath = [];
+        }
+    }
+    const { actions } = parseSvgPath(svgPath.attributeValue);
+    const vectorizedActions = actions
+        .map(({ letter, numbers }) => {
+            const vectors = [];
+            const l = letter.toLowerCase();
+            if (l === "v" || l === "h") {
+                for (let i = 0; i < numbers.length; i += 1) {
+                    if (l === "v") vectors.push(Vec2(0, numbers[i]));
+                    if (l === "h") vectors.push(Vec2(numbers[i], 0));
+                }
+            } else {
+                for (let i = 0; i < numbers.length; i += 2) {
+                    vectors.push(Vec2(numbers[i], numbers[i + 1]));
+                }
+            }
+            return { letter, vectors };
+        })
+    vectorizedActions.forEach(({ letter, vectors }) => {
+        return (letter2action?.[letter] ?? (() => { }))(vectors);
+    });
+    if (path.length > 0) {
+        if (!svg.defPaths[id]) {
+            svg.defPaths[id] = [];
+            svg.defKeyPointPaths[id] = [];
+        }
+        svg.defPaths[id].push(path);
+        svg.defKeyPointPaths[id].push(keyPointPath);
+    }
+}
+
+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));
+
+function readTransform(svg, transformNode, transform = transformBuilder()) {
+    (transformNode?.StartTag ?? transformNode?.EmptyTag)
+        ?.Attrs
+        .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, params[1], 0, 0, 0))
+            }
+        })
+    const nodeStack = [...(transformNode?.InnerSVG?.innerSvgs?.map(x => x.SVG) ?? [])];
+    while (nodeStack.length > 0) {
+        const currentNode = nodeStack.shift(); // dequeue
+        const node = currentNode?.StartTag ?? currentNode?.EmptyTag;
+        const tag = node?.tag;
+        if (tag === "g") {
+            readTransform(svg, currentNode, transform);
+            continue;
+        }
+        if (tag === "use") {
+            const useParams = {
+                id: undefined,
+                transform
+            }
+            node.Attrs?.attributes.forEach(({ attributeName, attributeValue }) => {
+                if (attributeName === "xlink:href") {
+                    useParams.id = attributeValue.slice(1);
+                }
+                if (attributeName === "transform") {
+                    const params = attributeValue.match(/-?\d+\.?\d*/g).map(Number);
+                    if (attributeValue.includes("scale")) {
+                        useParams.transform = dot(useParams.transform, transformBuilder(params[0], 0, 0, params[0], 0, 0));
+                    }
+                }
+                if (attributeName === "x") {
+                    useParams.transform = dot(useParams.transform, transformBuilder(1, 0, 0, 1, Number(attributeValue), 0));
+                }
+                if (attributeName === "y") {
+                    useParams.transform = dot(useParams.transform, transformBuilder(1, 0, 0, 1, 0, Number(attributeValue)));
+                }
+            });
+            if (useParams.id && svg.defPaths[useParams.id]) {
+                svg.paths.push(svg.defPaths[useParams.id].map(paths => paths.map(useParams.transform)));
+                svg.keyPointPaths.push(svg.defKeyPointPaths[useParams.id].map(paths => paths.map(useParams.transform)));
+            }
+        }
+        nodeStack.push(...(currentNode?.InnerSVG?.innerSvgs?.map(x => x.SVG) ?? []));
+    }
+
+}
+
+function readSVGNode(svgNode) {
+    const svg = {
+        width: undefined,
+        height: undefined,
+        viewBox: {},
+        defPaths: {},
+        defKeyPointPaths: {},
+        paths: [],
+        keyPointPaths: []
+    }
+    const nodeStack = [svgNode];
+    while (nodeStack.length > 0) {
+        const currentNode = nodeStack.shift(); // dequeue
+        const tag = currentNode?.StartTag?.tag ?? currentNode?.EmptyTag?.tag;
+        if (tag === "svg") {
+            currentNode
+                .StartTag
+                .Attrs
+                .attributes
+                .forEach(attr => {
+                    if (attr.attributeName === "viewBox") {
+                        const vb = attr.attributeValue;
+                        const [x, y, w, h] = vb.split(" ").map(x => Number.parseFloat(x));
+                        svg.viewBox.min = Vec2(x, y);
+                        svg.viewBox.max = Vec2(x + w, y + h);
+                    }
+                    if (attr.attributeName === "width") {
+                        svg.width = Number.parseInt(attr.attributeValue);
+                    }
+                    if (attr.attributeName === "height") {
+                        svg.height = Number.parseInt(attr.attributeValue);
+                    }
+                })
+        }
+        if (tag === "defs") {
+            const defNodes = (currentNode?.InnerSVG?.innerSvgs?.map(x => x.SVG) ?? []);
+            defNodes.forEach(defNode => {
+                const defTag = defNode?.StartTag?.tag ?? currentNode?.EmptyTag?.tag;
+                if (defTag !== "path") return;
+                readPath(svg, defNode.EmptyTag ?? defNode.StartTag);
+            })
+            continue;
+        }
+        if (tag === "g") {
+            readTransform(svg, currentNode);
+            continue;
+        }
+        if (tag === "path") {
+            readPath(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));
+    }
+    return svg;
+}
+
+
 //========================================================================================
 /*                                                                                      *
  *                                         UTILS                                        *
@@ -348,3 +848,16 @@ function stream(stringOrArray) {
         }
     };
 }
+
+function generateUniqueID(length) {
+    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+    const charactersLength = characters.length;
+
+    let randomID = '';
+
+    for (let i = 0; i < length; i++) {
+        randomID += characters[Math.floor(Math.random() * charactersLength)];
+    }
+
+    return randomID;
+}

package/src/Utils/Utils.js

@@ -57,26 +57,27 @@ const setTimeOut = typeof window === "undefined" ? setTimeout : requestAnimation
 if(typeof window !== "undefined") window.globalAnimationIDs = [];
 export function loop(lambda) {
     let isFinished = false;
+    const loopControl = {
+        stop: () => {
+            isFinished = true;
+        },
+        play: () => play({ oldT: new Date().getTime(), time: 0 })
+    };
     const play = async ({ time, oldT }) => {
         const newT = new Date().getTime();
         const dt = (newT - oldT) * 1e-3;
 
         await lambda({ time, dt });
 
-        if (isFinished) return;
+        if (isFinished) return loopControl;
         const id = setTimeOut(() => play({
             oldT: newT,
             time: time + dt,
         }));
         if(typeof window !== "undefined") window.globalAnimationIDs.push(id);
-    }
-    const loopControl = {
-        stop: () => {
-            isFinished = true;
-        },
-        play: () => play({ oldT: new Date().getTime(), time: 0 })
-    };
 
+        return loopControl;
+    }
     return loopControl;
 }
 

package/src/index.js

@@ -16,7 +16,7 @@ import Path from "./Geometry/Path.js"
 import Triangle from "./Geometry/Triangle.js"
 import Mesh from "./Geometry/Mesh.js"
 import Ray from "./Ray/Ray.js"
-import parseSVG from "./Utils/SVG.js"
+import parseSVG, {parseSvgPath} from "./Utils/SVG.js"
 
 export {
     Box,
@@ -40,6 +40,7 @@ export {
     NaiveScene,
     VoxelScene,
     RandomScene,
+    parseSvgPath,
 }
 
 export * from "./Utils/Math.js"