tela.js 1.0.0

package/test/web/rotating_grid.js

@@ -0,0 +1,62 @@
+(canvas, fps) => {
+    // resize incoming canvas:Canvas object.
+    const width = 640;
+    const height = 480;
+    canvas.resize(width, height);
+    // utils
+    const T = 20;
+    const step = (threshold) => (x) => x < threshold ? 0 : 1;
+    const mod = (x) => (n) => ((x % n) + n) % n;
+
+    // record video
+    const recorder = canvas.startVideoRecorder();
+    setTimeout(async () => {
+        const blob = await recorder.stop();
+        const src = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.download = 'Rotating Shader.webm';
+        a.href = src;
+        a.textContent = 'download the video';
+        document.body.appendChild(a);
+    }, T * 1000)
+
+    // setting 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);
+            canvas
+                .map((x, y) => {
+                    let u = x / (width - 1);
+                    let v = y / (height - 1);
+                    const grid = 10;
+                    u *= grid;
+                    v *= grid;
+                    const t = 0.1 * time;
+                    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);
+                })
+            return {
+                it: it + 1,
+                oldT: newT,
+                time: time + dt,
+            };
+        })
+        .while(({ time }) => time <= T)
+        .build()
+        .play();
+}

package/test/web/signed_bunny.js

@@ -0,0 +1,139 @@
+/* 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();
+    scene
+    .add(
+        Point
+            .builder()
+            .position(Vec3(0, -1, 0))
+            .name("test6-1")
+            .radius(0.1)
+            .build()
+        ,
+        Point
+            .builder()
+            .position(Vec3(0, 1, 0))
+            .name("test6-2")
+            .radius(0.1)
+            .build()
+        ,
+        Point
+            .builder()
+            .position(Vec3(0, 0, -1))
+            .name("test6-3")
+            .radius(0.1)
+            .build()
+        ,
+        Point
+            .builder()
+            .position(Vec3(0, 0, 1))
+            .name("test6-4")
+            .radius(0.1)
+            .build()
+        ,
+        Point
+            .builder()
+            .position(Vec3(-1, 0, 0))
+            .name("test6-5")
+            .radius(0.1)
+            .build()
+        ,
+        Point
+            .builder()
+            .position(Vec3(1, 0, 0))
+            .name("test6-6")
+            .radius(0.1)
+            .build()
+    )
+    // 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));
+
+    const rayScene = (ray) => {
+        const maxIte = 100;
+        const maxDist = 10;
+        const epsilon = 1e-3;
+        const { init } = ray;
+        let p = init;
+        let t = scene.distanceToPoint(p);
+        for (let i = 0; i < maxIte; i++) {
+            p = ray.trace(t);
+            const d = scene.distanceToPoint(p);
+            t += d;
+            if (d < epsilon) {
+                const normal = scene.estimateNormal(p).map(x => (x+1)/2);
+                return Color.ofRGB(normal.x, normal.y, normal.z);
+            }
+            if (d > maxDist) return Color.ofRGB(0, 0, i / maxIte);
+        }
+        return Color.BLACK;
+    }
+
+
+    // 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.rayShot(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/signed_distance.js

@@ -0,0 +1,95 @@
+/* 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 camera = new Camera();
+    const light = { pos: Vec3(2, 0, 0) };
+    const maxIte = 100;
+    const maxDist = 10;
+    const epsilon = 1e-3;
+
+    const box = new Box(Vec.ONES(3).scale(-0.5), Vec.ONES(3).scale(0.5));
+    const sphere = { pos: Vec3(0.0, 0.0, 0.0), radius: 0.65 };
+    const distanceFunction = p => Math.max(box.distanceToPoint(p), -(sphere.pos.sub(p).length() - sphere.radius))
+
+    const rayScene = (ray) => {
+        const { init } = ray;
+        let p = init;
+        let t = distanceFunction(p);
+        for (let i = 0; i < maxIte; i++) {
+            p = ray.trace(t);
+            const d = distanceFunction(p);
+            t += d;
+            if (d < epsilon) {
+                const shade = Math.max(
+                    0,
+                    box
+                        .estimateNormal(p)
+                        .dot(
+                            light
+                                .pos
+                                .sub(p)
+                                .normalize()
+                        )
+                )
+                return Color.ofRGB(shade, 0, 0);
+            }
+            if (d > maxDist) return Color.ofRGB(0, 0, i / maxIte);
+        }
+        return Color.BLACK;
+    }
+    // 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;
+            light.pos = Vec3(Math.cos(t), Math.sin(t), 1).scale(2);
+            camera.rayShot(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/simple_animation.js

@@ -0,0 +1,39 @@
+(canvas, fps) => {
+    // resize incoming canvas:Canvas object.
+    const width = 640;
+    const height = 480;
+    canvas.resize(width, height);
+    // util variables
+    const T = 20;
+    // 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 px = (x * time) / width;
+                    let py = (y * time) / height;
+                    return Color.ofRGB(px % 1, py % 1, 0);
+                })
+            return {
+                it: it + 1,
+                oldT: newT,
+                time: time + dt,
+            };
+        })
+        .while(({ time }) => time <= T)
+        .build()
+        .play();
+}

package/test/web/simple_shader.js

@@ -0,0 +1,14 @@
+(canvas) => {
+    // resize incoming canvas:Canvas object.
+    const width = 640;
+    const height = 480;
+    canvas.resize(width, height);
+    // using canvas map
+    canvas
+        .map((x, y) => {
+            let px = x / width;
+            let py = y / height;
+            return Color.ofRGB(px, py, 0);
+        })
+
+}

package/test/web/six_spheres.js

@@ -0,0 +1,102 @@
+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();
+    // 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
+    scene
+        .add(
+            Point
+                .builder()
+                .position(Vec3(0, -1, 0))
+                .name("test6-1")
+                .radius(0.1)
+                .build()
+            ,
+            Point
+                .builder()
+                .position(Vec3(0, 1, 0))
+                .name("test6-2")
+                .radius(0.1)
+                .build()
+            ,
+            Point
+                .builder()
+                .position(Vec3(0, 0, -1))
+                .name("test6-3")
+                .radius(0.1)
+                .build()
+            ,
+            Point
+                .builder()
+                .position(Vec3(0, 0, 1))
+                .name("test6-4")
+                .radius(0.1)
+                .build()
+            ,
+            Point
+                .builder()
+                .position(Vec3(-1, 0, 0))
+                .name("test6-5")
+                .radius(0.1)
+                .build()
+            ,
+            Point
+                .builder()
+                .position(Vec3(1, 0, 0))
+                .name("test6-6")
+                .radius(0.1)
+                .build()
+        )
+
+    // boilerplate for fps
+    Animation
+        .builder()
+        .initialState({ it: 1, oldTime: new Date().getTime() })
+        .nextState(({ it, oldTime }) => {
+            camera.sceneShot(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/wave_equation.js

@@ -0,0 +1,93 @@
+(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 spread = 200;
+    const friction = 0.1;
+    const waveScalarSpeed = 10;
+    const mod = (n, m) => ((n % m) + m) % m;
+    const wave = [...new Array(height)].map((_, i) =>
+        new Float64Array(width).map((_, j) => {
+            const x = (j - width / 2) / width;
+            const y = (i - height / 2) / height;
+            return (
+                amp * Math.exp(-spread * ((x - 0.25) * (x - 0.25) + y * y)) +
+                amp * Math.exp(-spread * ((x + 0.25) * (x + 0.25) + y * y)) +
+                amp * Math.exp(-spread * (x * x + (y - 0.25) * (y - 0.25)))
+            );
+        })
+    );
+    const waveSpeed = [...new Array(height)].map(
+        () => new Float64Array(width)
+    );
+    // 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(({ time }) => time <= T)
+        .build()
+        .play();
+}

package/vs-monaco/package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 - present Microsoft Corporation
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.