tela.js 1.0.0

package/test/node/bunny_parallel.js

@@ -0,0 +1,102 @@
+import { writeFileSync, unlinkSync } from "fs";
+import { IO } from "../../dist/node/index.js";
+import { exec, execSync, spawn } from "child_process";
+import path from "path";
+const { createPPMFromFromImage } = IO;
+
+export async function measureTime(lambda) {
+    const t = performance.now();
+    await lambda()
+    return 1e-3 * (performance.now() - t);
+}
+
+
+const fileName = "bunny_parallel";
+const deltaT = 0.04; //seconds per frame
+const maxT = 10; // seconds
+const numOfFrames = Math.floor(maxT / deltaT);
+const FPS = Math.floor(1 / deltaT);
+const parallelStreams = 20;
+const partitions = [...Array(numOfFrames)].map((_,i) => i).reduce((e,x) => {
+    const index = x % parallelStreams;
+    if(!e[index]) e[index] = [];
+    e[index].push(x);
+    return e;
+}, {}) 
+const imageProducers = Object.values(partitions).map(partition => {
+    return (
+        `
+        import { Color, Image, Stream, IO, Utils, Mesh, Vec3, Scene, Camera } from "./dist/node/index.js";
+        import { readFileSync, writeFileSync } from "fs"
+
+        ${createPPMFromFromImage.toString().replaceAll("function", "function createPPMFromFromImage")}
+        
+        (() => {
+            const width = 640;
+            const height = 480;
+
+            const scene = new Scene()
+            const camera = new Camera({ sphericalCoords: Vec3(5, 0, 0) });
+            const stanfordBunnyObj = readFileSync("./assets/bunny.obj", { encoding: "utf-8" });
+            let bunnyMesh = Mesh.readObj(stanfordBunnyObj);
+            const bunnyBox = bunnyMesh.getBoundingBox();
+            bunnyMesh = bunnyMesh
+                .mapVertices(v => v.sub(bunnyBox.min).div(bunnyBox.diagonal).scale(2).sub(Vec3(1, 1, 1)))
+                .mapVertices(v => Vec3(-v.y, v.x, v.z))
+                .mapVertices(v => Vec3(v.z, v.y, -v.x))
+                .mapColors(v => Color.ofRGB(...v.map(x => Math.max(0, Math.min(1, 0.5 * (x + 1)))).toArray()));
+            scene.add(...bunnyMesh.asPoints("bunny", 0.05));
+            const deltaT = ${deltaT};
+            const partitionIndices = [${partition.toString()}];
+            for(let i = 0; i < partitionIndices.length; i++) {
+                const j = partitionIndices[i];
+                const time = deltaT * j;
+                const theta = Math.PI / 4 * time;
+                camera.sphericalCoords = Vec3(camera.sphericalCoords.get(0), theta, 0);
+                camera.orbit();
+                const image = camera.sceneShot(scene).to(Image.ofSize(width, height));
+                writeFileSync(\`${fileName}_\${j}.ppm\`, createPPMFromFromImage(image));
+                console.log("Image created", j);
+            }
+            return 0;
+        })();
+    `
+    );
+});
+
+(async () => {
+    const time = await measureTime(
+        () => {
+            const promises = [...Array(parallelStreams)].map((_, i) => {
+                const spawnFile = "ParallelRender_" + i + ".js";
+                const spawnFilePath = path.join("./", spawnFile);
+                writeFileSync(spawnFilePath, imageProducers[i]);
+                return new Promise(resolve => {
+                    exec(`bun ${spawnFilePath.toString()}`, () => {
+                        resolve();
+                    });
+                });
+            });
+            return Promise
+                .all(promises)
+                .then(() => {
+                    return new Promise(resolve => exec(
+                        `ffmpeg -framerate ${FPS} -i ${fileName}_%d.ppm ${fileName}.mp4`,
+                        () => resolve()
+                    )
+                    );
+                })
+                .then(() => {
+                    for (let i = 0; i < numOfFrames; i++) {
+                        unlinkSync(`${fileName}_${i}.ppm`);
+                    }
+                    for (let i = 0; i < parallelStreams; i++) {
+                        unlinkSync(`ParallelRender_${i}.js`);
+                    }
+                });
+        });
+    console.log(
+        "Video created in: ",
+        time
+    )
+})()

package/test/node/image2rgb.js

@@ -0,0 +1,57 @@
+import { Color, Image, Stream, IO, Utils, Mesh, Vec3, Scene, NaiveScene, Camera, Point } from "../../dist/node/index.js";
+const { saveStreamToFile } = IO;
+const { measureTimeWithResult, measureTime } = Utils;
+
+(async () => {
+    const width = 640;
+    const height = 480;
+
+    // scene
+    const scene = new NaiveScene();
+    const camera = new Camera({ sphericalCoords: Vec3(4, 0, 0) });
+    const img = await Image.ofUrl("./assets/kakashi.jpg");
+    const grid = [...Array(img.width * img.height)]
+        .map((_, k) => {
+            const i = Math.floor(k / img.width);
+            const j = k % img.width;
+            const x = j;
+            const y = i;
+            return Point
+                .builder()
+                .name(`pxl_${k}`)
+                .radius(0.01)
+                .position(
+                    Vec3(0, x / img.width, y / img.height)
+                )
+                .color(img.getPxl(x, y))
+                .build();
+        });
+
+    console.log("Add objects to scene", measureTime(() => scene.addList(grid)));
+    const imageStream = new Stream(
+        { time: 0, image: camera.reverseShot(scene).to(Image.ofSize(width, height)) },
+        ({ time, image }) => {
+            const dt = 0.04; // 25 FPS
+            const theta = Math.PI / 4 * time;
+            camera.sphericalCoords = Vec3(camera.sphericalCoords.get(0), theta, Math.PI / 4);
+            camera.orbit();
+            const { result: newImage, time: t } = measureTimeWithResult(() => camera.reverseShot(scene).to(image));
+            console.log(`Image took ${t}s`);
+            return {
+                time: time + dt,
+                image: newImage
+            };
+        }
+    )
+
+    console.log(
+        "Video created in: ",
+        measureTime(() => {
+            saveStreamToFile(
+                "./kakashi.mp4",
+                imageStream,
+                { fps: 25 }
+            ).until(({ time }) => time < 10);
+        })
+    )
+})()

package/test/node/image_test.js

@@ -0,0 +1,38 @@
+import { Color, Image, Stream, IO, Utils } from "../../dist/node/index.js";
+
+const { measureTime } = Utils;
+const { saveImageToFile, saveStreamToFile } = IO;
+
+const width = 640;
+const height = 480;
+const step = (threshold) => (x) => x < threshold ? 0 : 1;
+const mod = (x) => (n) => ((x % n) + n) % n;
+
+saveImageToFile(
+    "./test0.png",
+    Image.ofSize(width, height)
+        .map((x, y) => {
+            let u = x / width;
+            let v = y / height;
+            return Color.ofRGB((2 * u) % 1, (2 * v) % 1, 0);
+        })
+)
+
+saveImageToFile(
+    "./test1.jpeg",
+    Image.ofSize(width, height)
+        .map((x, y) => {
+            let u = x / (width - 1);
+            let v = y / (height - 1);
+            const grid = 10;
+            u *= grid;
+            v *= grid;
+            const t = 1;
+            const u_t = Math.cos(t) * u + Math.sin(t) * v;
+            const v_t = -Math.sin(t) * u + Math.cos(t) * v;
+            const color =
+                (1 - step(0.95)(mod(u_t)(1))) * (1 - step(0.95)(mod(v_t)(1)));
+            return Color.ofRGB(color, color, color);
+        })
+)
+

package/test/web/amazing_shader.js

@@ -0,0 +1,60 @@
+// Port from https://www.shadertoy.com/view/mtyGWy
+(canvas, fps) => {
+    // resize incoming canvas:Canvas object.
+    const width = 640 / 2;
+    const height = 480 / 2;
+    canvas.resize(width, height);
+    // utils
+    const T = 20;
+    function palette(t) {
+        let a = [0.5, 0.5, 0.5];
+        let b = [0.5, 0.5, 0.5];
+        let c = [1.0, 1.0, 1.0];
+        let d = [0.263, 0.416, 0.557];
+        return [a[0] + b[0] * Math.cos(6.28318 * (c[0] * t + d[0])), a[1] + b[1] * Math.cos(6.28318 * (c[1] * t + d[1])), a[2] + b[2] * Math.cos(6.28318 * (c[2] * t + d[2]))];
+    }
+    Animation
+        .builder()
+        .initialState({
+            it: 1,
+            time: 0,
+            oldT: new Date().getTime(),
+        })
+        .nextState(({
+            it,
+            time,
+            oldT,
+        }) => {
+            const newT = new Date().getTime();
+            const dt = (newT - oldT) * 1e-3;
+            fps(dt, it);
+            canvas.map((x, y) => {
+                let u = (2 * x - width) / height
+                let v = (2 * y - height) / height;
+                const u0 = u;
+                const v0 = v;
+                let finalColor = [0, 0, 0]
+                for (let i = 0; i < 4; i++) {
+                    u = (u * 1.5 - Math.floor(u * 1.5)) - 0.5;
+                    v = (v * 1.5 - Math.floor(v * 1.5)) - 0.5;
+                    const d0 = -Math.sqrt(u0 * u0 + v0 * v0);
+                    let d = Math.sqrt(u * u + v * v) * Math.exp(d0);
+                    const col = palette(d0 + i * 0.4 + time * 0.4);
+                    d = Math.sin(d * 8 + time) / 8;
+                    d = Math.abs(d);
+                    d = Math.pow(0.01 / d, 1.2);
+
+                    finalColor = [finalColor[0] + col[0] * d, finalColor[1] + col[1] * d, finalColor[2] + col[2] * d]
+                }
+                return Color.ofRGB(finalColor[0], finalColor[1], finalColor[2]);
+            })
+            return {
+                it: it + 1,
+                oldT: newT,
+                time: time + dt,
+            };
+        })
+        .while(({ time }) => time <= T)
+        .build()
+        .play();
+}

package/test/web/amazing_shader_2.js

@@ -0,0 +1,54 @@
+// Port from https://www.shadertoy.com/view/XsXXDn
+(canvas, fps) => {
+    // resize incoming canvas:Canvas object.
+    const width = 640 / 2;
+    const height = 480 / 2;
+    canvas.resize(width, height);
+
+    // util variables
+    const T = Number.MAX_VALUE;
+    const r = Vec2(width, height);
+    const mod = (x) => (n) => ((x % n) + n) % n;
+    // Using Animation from tela.js
+    Animation
+        .builder()
+        .initialState({
+            it: 1,
+            time: 0,
+            oldT: new Date().getTime(),
+        })
+        .nextState(({
+            it,
+            time,
+            oldT,
+        }) => {
+            const newT = new Date().getTime();
+            const dt = (newT - oldT) * 1e-3;
+            fps(dt, it);
+            canvas
+                .map((x, y) => {
+                    let z = time;
+                    const c = [];
+                    let l;
+                    for (let i = 0; i < 3; i++) {
+                        let p = Vec2(x, y).div(r);
+                        let uv = p.clone();
+                        p = p.map(x => x - 0.5);
+                        p = Vec2(p.x * (r.x / r.y), p.y);
+                        z += 0.07;
+                        l = p.length();
+                        uv = uv.add(p.scale(((Math.sin(z) + 1) * Math.abs(Math.sin(l * 9 - z - z)))).scale(1 / l))
+                        c[i] = 0.01 / uv.map(x => mod(x)(1) - 0.5).length();
+                    }
+                    return Color.ofRGB(...c).scale(1 / l);
+                })
+            return {
+                it: it + 1,
+                oldT: newT,
+                time: time + dt,
+            };
+        })
+        .while(({ time }) => time <= T)
+        .build()
+        .play();
+}

package/test/web/bunny.js

@@ -0,0 +1,72 @@
+/* eslint-disable no-undef */
+async (canvas, fps, logger) => {
+    // resize incoming canvas:Canvas object.
+    const width = 640;
+    const height = 480;
+    canvas.resize(width, height);
+    // scene
+    const scene = new Scene()
+    const camera = new Camera({ sphericalCoords: Vec3(5, 0, 0) });
+    // mouse handling
+    let mousedown = false;
+    let mouse = Vec2();
+    canvas.onMouseDown((x, y) => {
+        mousedown = true;
+        mouse = Vec2(x, y);
+    })
+    canvas.onMouseUp(() => {
+        mousedown = false;
+        mouse = Vec2();
+    })
+    canvas.onMouseMove((x, y) => {
+        const newMouse = Vec2(x, y);
+        if (!mousedown || newMouse.equals(mouse)) {
+            return;
+        }
+        const [dx, dy] = newMouse.sub(mouse).toArray();
+        camera.sphericalCoords = camera.sphericalCoords.add(
+            Vec3(
+                0,
+                -2 * Math.PI * (dx / canvas.width),
+                -2 * Math.PI * (dy / canvas.height)
+            )
+        );
+        mouse = newMouse;
+        camera.orbit();
+    })
+    canvas.onMouseWheel(({ deltaY }) => {
+        camera.sphericalCoords = camera.sphericalCoords.add(Vec3(deltaY * 0.001, 0, 0));
+        camera.orbit();
+    })
+    // scene
+    const stanfordBunnyObj = await fetch("/assets/bunny.obj").then(x => x.text());
+    let bunnyMesh = Mesh.readObj(stanfordBunnyObj);
+    const bunnyBox = bunnyMesh.getBoundingBox();
+    bunnyMesh = bunnyMesh
+        .mapVertices(v =>
+            v.sub(bunnyBox.min).div(bunnyBox.diagonal).scale(2).sub(Vec3(1, 1, 1))
+        )
+        .mapVertices(v => Vec3(-v.y, v.x, v.z))
+        .mapVertices(v => Vec3(v.z, v.y, -v.x))
+        .mapColors(v =>
+            Color.ofRGB(...v.map(x => Math.max(0, Math.min(1, 0.5 * (x + 1)))).toArray())
+        )
+    scene.add(...bunnyMesh.asPoints("bunny", 0.05));
+
+    // boilerplate for fps
+    Animation
+        .builder()
+        .initialState({ it: 1, oldTime: new Date().getTime() })
+        .nextState(({ it, oldTime }) => {
+            camera.reverseShot(scene).to(canvas);
+            const dt = (new Date().getTime() - oldTime) * 1e-3;
+            logger.print(Math.floor(1 / dt));
+            return {
+                it: it + 1,
+                oldTime: new Date().getTime()
+            };
+        })
+        .while(() => true)
+        .build()
+        .play();
+}

package/test/web/image2rgb.js

@@ -0,0 +1,77 @@
+/* eslint-disable no-undef */
+async (canvas, fps, logger) => {
+    // resize incoming canvas:Canvas object.
+    const width = 640;
+    const height = 480;
+    canvas.resize(width, height);
+    // scene
+    const scene = new NaiveScene();
+    const camera = new Camera({ sphericalCoords: Vec3(5, 0, 0) });
+    // mouse handling
+    let mousedown = false;
+    let mouse = Vec2();
+    canvas.onMouseDown((x, y) => {
+        mousedown = true;
+        mouse = Vec2(x, y);
+    })
+    canvas.onMouseUp(() => {
+        mousedown = false;
+        mouse = Vec2();
+    })
+    canvas.onMouseMove((x, y) => {
+        const newMouse = Vec2(x, y);
+        if (!mousedown || newMouse.equals(mouse)) {
+            return;
+        }
+        const [dx, dy] = newMouse.sub(mouse).toArray();
+        camera.sphericalCoords = camera.sphericalCoords.add(
+            Vec3(
+                0,
+                -2 * Math.PI * (dx / canvas.width),
+                -2 * Math.PI * (dy / canvas.height)
+            )
+        );
+        mouse = newMouse;
+        camera.orbit();
+    })
+    canvas.onMouseWheel(({ deltaY }) => {
+        camera.sphericalCoords = camera.sphericalCoords.add(Vec3(deltaY * 0.001, 0, 0));
+        camera.orbit();
+    })
+    // scene
+    const img = await Canvas.ofUrl("./assets/kakashi.jpg");
+    const grid = [...Array(img.width * img.height)]
+        .map((_, k) => {
+            const i = Math.floor(k / img.width);
+            const j = k % img.width;
+            const x = j;
+            const y = i;
+            return Point
+                .builder()
+                .name(`pxl_${k}`)
+                .radius(0.01)
+                .position(
+                    Vec3(0, x / img.width, y / img.height)
+                )
+                .color(img.getPxl(x, y))
+                .build();
+        });
+    scene.addList(grid);
+
+    // boilerplate for fps
+    Animation
+        .builder()
+        .initialState({ it: 1, oldTime: new Date().getTime() })
+        .nextState(({ it, oldTime }) => {
+            camera.reverseShot(scene).to(canvas);
+            const dt = (new Date().getTime() - oldTime) * 1e-3;
+            logger.print(Math.floor(1 / dt));
+            return {
+                it: it + 1,
+                oldTime: new Date().getTime()
+            };
+        })
+        .while(() => true)
+        .build()
+        .play();
+}

package/test/web/interactive_wave.js

@@ -0,0 +1,108 @@
+(canvas, fps) => {
+    // resize incoming canvas:Canvas object.
+    const width = 100;
+    const height = 100;
+    canvas.resize(width, height);
+
+    // utils
+    const T = 100;
+    const amp = 10;
+    const friction = 1;
+    const waveScalarSpeed = 50;
+    const mod = (n, m) => ((n % m) + m) % m;
+    const wave = [...new Array(height)].map(
+        () => new Float64Array(width)
+    );
+    const waveSpeed = [...new Array(height)].map(
+        () => new Float64Array(width)
+    );
+
+    let mousedown = false;
+    canvas.onMouseDown(() => {
+        mousedown = true;
+    })
+    canvas.onMouseUp(() => {
+        mousedown = false;
+    })
+    canvas.onMouseMove((x, y) => {
+        if (!mousedown) return;
+        const i = mod(y - height + 1, height);
+        const j = mod(x, width);
+        let steps = [-1, 0, 1];
+        //steps = [-2,-1,0,1,2]; // uncomment this line for bigger paint brush
+        const n = steps.length;
+        const nn = n * n;
+        for (let k = 0; k < nn; k++) {
+            const u = Math.floor(k / n)
+            const v = k % n
+            wave[mod(i + steps[u], height)][mod(j + steps[v], width)] = amp;
+        }
+    })
+
+    // start animation
+    Animation
+        .builder()
+        .initialState({
+            it: 1,
+            time: 0,
+            oldT: new Date().getTime(),
+        })
+        .nextState(({
+            it,
+            time,
+            oldT,
+        }) => {
+            const newT = new Date().getTime();
+            const dt = (newT - oldT) * 1e-3;
+            fps(dt, it)
+
+            let maxWave = Number.MIN_VALUE;
+            let minWave = Number.MAX_VALUE;
+            let maxAbsSpeed = Number.MIN_VALUE;
+            // update wave
+            for (let i = 0; i < height; i++) {
+                for (let j = 0; j < width; j++) {
+                    /**
+                     * Sympletic integration
+                     */
+                    // compute acceleration
+                    const laplacian =
+                        wave[i][mod(j + 1, width)] +
+                        wave[i][mod(j - 1, width)] +
+                        wave[mod(i + 1, height)][j] +
+                        wave[mod(i - 1, height)][j] -
+                        4 * wave[i][j];
+                    const acceleration = waveScalarSpeed * laplacian - friction * waveSpeed[i][j];
+
+                    //update speed
+                    waveSpeed[i][j] = waveSpeed[i][j] + dt * acceleration;
+
+                    // update position
+                    wave[i][j] = wave[i][j] + dt * waveSpeed[i][j];
+
+                    // get max min values of wave
+                    maxWave = maxWave <= wave[i][j] ? wave[i][j] : maxWave;
+                    minWave = minWave > wave[i][j] ? wave[i][j] : minWave;
+                    const absSpeed = Math.abs(waveSpeed[i][j]);
+                    maxAbsSpeed = maxAbsSpeed <= absSpeed ? absSpeed : maxAbsSpeed;
+                }
+            }
+
+            canvas.map((x, y) => {
+                let xi = x;
+                let yi = y;
+                const redColor = (wave[yi][xi] - minWave) / (maxWave - minWave);
+                const blueColor = 1 - (wave[yi][xi] - minWave) / (maxWave - minWave);
+                const greenColor = Math.abs(waveSpeed[yi][xi]) / maxAbsSpeed;
+                return Color.ofRGB(redColor, greenColor, blueColor);
+            })
+            return {
+                it: it + 1,
+                oldT: newT,
+                time: time + dt,
+            };
+        })
+        .while(() => true)
+        .build()
+        .play();
+}

package/test/web/lorenz.js

@@ -0,0 +1,60 @@
+/* eslint-disable no-undef */
+async (canvas, fps, logger) => {
+    // resize incoming canvas:Canvas object.
+    const width = 640 / 2;
+    const height = 480 / 2;
+    canvas.resize(width, height);
+    // scene
+    const scene = new Scene();
+    const camera = new Camera({ sphericalCoords: Vec3(20, 0, 0) });
+    // mouse handling
+    let mousedown = false;
+    let mouse = Vec2();
+    canvas.onMouseDown((x, y) => {
+        mousedown = true;
+        mouse = Vec2(x, y);
+    })
+    canvas.onMouseUp(() => {
+        mousedown = false;
+        mouse = Vec2();
+    })
+    canvas.onMouseMove((x, y) => {
+        const newMouse = Vec2(x, y);
+        if (!mousedown || newMouse.equals(mouse)) {
+            return;
+        }
+        const [dx, dy] = newMouse.sub(mouse).toArray();
+        camera.sphericalCoords = camera.sphericalCoords.add(
+            Vec3(
+                0,
+                -2 * Math.PI * (dx / canvas.width),
+                -2 * Math.PI * (dy / canvas.height)
+            )
+        );
+        mouse = newMouse;
+        camera.orbit();
+    })
+    canvas.onMouseWheel(({ deltaY }) => {
+        camera.sphericalCoords = camera.sphericalCoords.add(Vec3(deltaY * 0.001, 0, 0));
+        camera.orbit();
+    })
+
+    Animation
+        .builder()
+        .initialState({ it: 1, time: 0, oldTime: new Date().getTime() })
+        .nextState(({ it, time, oldTime }) => {
+            const dt = (new Date().getTime() - oldTime) * 1e-3;
+            oldTime = new Date().getTime()
+            const t = time;
+            camera.sceneShot(rayScene).to(canvas);
+            logger.print(`FPS: ${Math.floor(1 / dt)}`);
+            return {
+                it: it + 1,
+                time: time + dt,
+                oldTime
+            };
+        })
+        .while(() => true)
+        .build()
+        .play();
+}

package/test/web/mandelbrot.js

@@ -0,0 +1,59 @@
+(canvas, fps, logger) => {
+    // resize incoming canvas:Canvas object.
+    const width = 640/2;
+    const height = 480/2;
+    canvas.resize(width, height);
+    // utils
+    const size = Vec2(width, height);
+    const complexMul = (z, w) => Vec2(z.x * w.x - z.y * w.y, z.x * w.y + z.y * w.x);
+    let box = new Box(Vec2(-1, -1), Vec2(1, 1));
+    // mouse handling
+    let mousedown = false;
+    let mouse = Vec2();
+    canvas.onMouseDown((x, y) => {
+        mousedown = true;
+        mouse = Vec2(x, y);
+    })
+    canvas.onMouseUp(() => {
+        mousedown = false;
+        mouse = Vec2();
+    })
+    canvas.onMouseMove((x, y) => {
+        const newMouse = Vec2(x, y);
+        if (!mousedown || newMouse.equals(mouse)) {
+            return;
+        }
+        const [dx, dy] = newMouse.sub(mouse).toArray();
+        const v = Vec2(dx, dy).scale(-1).div(size).mul(box.diagonal);
+        box = box.move(v);
+        mouse = newMouse;
+        update();
+    })
+    canvas.onMouseWheel(({ deltaY }) => {
+        const scale = Math.sign(deltaY) * 1e-1;
+        box = box.scale(1+scale);
+        update();
+    })
+
+    function update() {
+        const ite = 100;
+        canvas.map((x, y) => {
+            let p = Vec2(x, y).div(size);
+            p = p.map(z => 2 * z - 1);
+            p = Vec2(p.x * (size.x / size.y) - 0.5, p.y);
+            p = box.min.add(
+                box.diagonal.mul(
+                    p.add(Vec2(1, 1)).scale(1 / 2)
+                )
+            )
+            let z = Vec2();
+            for (let i = 0; i < ite; i++) {
+                z = complexMul(z, z).add(p);
+            }
+            const l = z.length();
+            const ll = Math.min(1, Math.max(0, l));
+            return Color.ofRGB(1 - ll, ll, 0);
+        })
+    }
+    update();
+}