tela.js 1.0.0

package/src/DomBuilder/DomBuilder.js

@@ -0,0 +1,126 @@
+const SVG_URL = "http://www.w3.org/2000/svg";
+const SVG_TAGS = [
+  "svg",
+  "g",
+  "circle",
+  "ellipse",
+  "line",
+  "path",
+  "polygon",
+  "polyline",
+  "rect",
+];
+
+class DomBuilder {
+  constructor(element) {
+    this.element = element;
+  }
+
+  attr(name, value) {
+    this.element.setAttribute(name, value);
+    return this;
+  }
+
+  style(styleStr) {
+    this.element.setAttribute("style", styleStr);
+    return this;
+  }
+  /**
+   *
+   * @param {Array<DOM | DOMBuilder>} element
+   */
+  appendChild(...elements) {
+    elements.forEach(e => {
+      if (isElement(e)) {
+        this.element.appendChild(e);
+      } else if (isPromise(e)) {
+        e.then(actualElem => this.appendChild(actualElem));
+      } else {
+        this.element.appendChild(e.build());
+      }
+    })
+    return this;
+  }
+
+  /**
+   * 
+   * @param {String || Promise<String>} value 
+   * @returns DOMBuilder
+   */
+  inner(value) {
+    if (isPromise(value)) {
+      value.then(v => this.element.innerHTML = v);
+    } else {
+      this.element.innerHTML = value;
+    }
+    return this;
+  }
+
+  removeChildren() {
+    while (this.element.firstChild) {
+      this.element.removeChild(this.element.lastChild);
+    }
+    return this;
+  }
+
+  html(value) {
+    return this.inner(value);
+  }
+
+  event(eventName, lambda) {
+    this.element.addEventListener(eventName, lambda);
+    return this;
+  }
+
+  build() {
+    return this.element;
+  }
+
+  addClass(className) {
+    if (!className || className === "") return this;
+    this.element.classList.add(...className.split(" "));
+    return this;
+  }
+
+  removeClass(className) {
+    this.element.classList.remove(className);
+    return this;
+  }
+
+
+  /**
+   * @param {String | DOM} elem
+   */
+  static of(elem) {
+    if (isElement(elem)) {
+      return new DomBuilder(elem);
+    }
+    const isSvg = SVG_TAGS.includes(elem);
+    const element = isSvg ?
+      document.createElementNS(SVG_URL, elem) :
+      document.createElement(elem);
+    // if (isSvg) element.setAttribute("xmlns", SVG_URL);
+    return new DomBuilder(element);
+  }
+
+  static ofId(id) {
+    return new DomBuilder(document.getElementById(id));
+  }
+}
+
+//Returns true if it is a DOM element
+function isElement(o) {
+  return typeof HTMLElement === "object"
+    ? o instanceof HTMLElement //DOM2
+    : o &&
+    typeof o === "object" &&
+    o !== null &&
+    o.nodeType === 1 &&
+    typeof o.nodeName === "string";
+}
+
+function isPromise(o) {
+  return o instanceof Promise;
+}
+
+export default DomBuilder;

package/src/IO/IO.js

@@ -0,0 +1,120 @@
+import { writeFileSync, unlinkSync } from "fs";
+import { execSync, spawn } from "child_process";
+import Jimp from "jimp";
+import Image from "../Image/Image";
+import Color from "../Color/Color";
+
+
+export function saveImageToFile(fileAddress, image) {
+    const { fileName, extension } = getFileNameAndExtensionFromAddress(fileAddress);
+    const ppmName = `${fileName}.ppm`;
+    writeFileSync(ppmName, createPPMFromFromImage(image));
+    if (extension !== "ppm") {
+        execSync(`ffmpeg -i ${ppmName} ${fileName}.${extension}`);
+        unlinkSync(ppmName)
+    }
+}
+
+function getFileNameAndExtensionFromAddress(address) {
+    const lastDotIndex = address.lastIndexOf(".");
+    const fileName = address.slice(0, lastDotIndex);
+    const extension = address.slice(lastDotIndex + 1);
+    return { fileName, extension };
+}
+
+export function readImageFrom(src) {
+    const { fileName, extension } = getFileNameAndExtensionFromAddress(src);
+    execSync(`ffmpeg -i ${src} ${fileName}.${extension}`);
+    readFileSync()
+    return new Promise((resolve, reject) => {
+        Jimp.read(src, (error, image) => {
+            if (error) {
+                return reject(error);
+            }
+            const width = image.bitmap.width;
+            const height = image.bitmap.height;
+
+            const img = Image.ofSize(width, height);
+
+            img.map((i, j) => {
+
+                const color = Jimp.intToRGBA(image.getPixelColor(x, y));
+                return Color.ofRGB(color.r, color.g, color.b);
+            })
+            resolve(img);
+        })
+    });
+}
+
+export function createPPMFromFromImage(image) {
+    const width = image.width;
+    const height = image.height;
+    const pixelData = image.toArray();
+    const MAX_8_BIT = 255;
+    let file = `P3\n${width} ${height}\n${MAX_8_BIT}\n`;
+    for (let i = 0; i < pixelData.length; i += 4) {
+        file += `${pixelData[i]} ${pixelData[i + 1]} ${pixelData[i + 2]}\n`;
+    }
+    return file;
+}
+
+export function saveStreamToFile(fileAddress, streamWithImages, { imageGetter = s => s.image, fps }) {
+    const { fileName, extension } = getFileNameAndExtensionFromAddress(fileAddress);
+    let ite = 0;
+    let time = 0;
+    let timeCheck = performance.now();
+    return {
+        until: streamStatePredicate => {
+            let s = streamWithImages;
+            while (streamStatePredicate(s.head)) {
+                const image = imageGetter(s.head);
+                writeFileSync(`${fileName}_${ite++}.ppm`, createPPMFromFromImage(image));
+                const newTimeCheck = performance.now();
+                time += (newTimeCheck - timeCheck) * 1e-3;
+                timeCheck = performance.now();
+                s = s.tail;
+            }
+            if (!fps) fps = ite / time;
+            execSync(`ffmpeg -framerate ${fps} -i ${fileName}_%d.ppm ${fileName}.${extension}`);
+            for (let i = 0; i < ite; i++) {
+                unlinkSync(`${fileName}_${i}.ppm`);
+            }
+        }
+    }
+}
+
+export function saveParallelToFile(fileAddress, arrayWithImageProducers, { fps }) {
+    const { fileName, extension } = getFileNameAndExtensionFromAddress(fileAddress);
+    const times = [];
+    const promises = arrayWithImageProducers.map((imageProducers, i) => {
+        const spawnFile = "IO_parallel" + i + ".js";
+        writeFileSync(spawnFile, `
+            import { writeFileSync, unlinkSync } from "fs";
+            ${createPPMFromFromImage.toString()}
+            ${imageProducers}
+            images.forEach()
+
+        `);
+        return new Promise(resolve => {
+            const process = spawn(`bun ${spawnFile}`)
+            process.on("exit", () => {
+                resolve();
+            })
+        });
+    })
+    Promise.all(promises)
+        .then(groupOfImages => {
+            let n = 0;
+            groupOfImages.forEach(images =>
+                images.forEach(image => {
+                    console.log("Image generated", n)
+                    writeFileSync(`${fileName}_${n++}.ppm`, createPPMFromFromImage(image));
+                })
+            )
+            if (!fps) fps = Math.floor(1 / (times.reduce((e, t) => e + t, 0) / n));
+            execSync(`ffmpeg -framerate ${fps} -i ${fileName}_%d.ppm ${fileName}.${extension}`);
+            for (let i = 0; i < n; i++) {
+                unlinkSync(`${fileName}_${i}.ppm`);
+            }
+        })
+}

package/src/Image/Image.js

@@ -0,0 +1,138 @@
+import Color from "../Color/Color.js";
+import Jimp from "jimp";
+
+export default class Image {
+
+    constructor(width, height) {
+        this._width = width;
+        this._height = height;
+        this._image = new Array(this._width * this._height)
+            .fill(() => Color.ofRGB());
+    }
+
+    get width() {
+        return this._width;
+    }
+
+    get height() {
+        return this._height;
+    }
+
+    /**
+     * color: Color 
+     */
+    fill(color) {
+        return this._image.map(() => color);
+    }
+
+    paint() {
+        // to implement the same interface as canvas
+        return this;
+    }
+
+    /**
+     * lambda: (x: Number, y: Number) => Color 
+     */
+    map(lambda) {
+        const n = this._image.length;
+        const w = this._width;
+        const h = this._height;
+        for (let k = 0; k < n; k++) {
+            const i = Math.floor(k / w);
+            const j = k % w;
+            const x = j;
+            const y = h - 1 - i;
+            this._image[k] = lambda(x, y);
+        }
+        return this;
+    }
+
+    setPxl(x, y, color) {
+        const w = this._width;
+        const h = this._height;
+        const i = h - 1 - y;
+        const j = x;
+        let index = w * i + j;
+        this._image[index] = color;
+        return this;
+    }
+
+    getPxl(x, y) {
+        const w = this._width;
+        const h = this._height;
+        const i = h - 1 - y;
+        const j = x;
+        let index = w * i + j;
+        return this._image[index];
+    }
+
+    array() {
+        return this.toArray();
+    }
+
+    toArray() {
+        const w = this._width;
+        const h = this._height;
+        const imageData = new Uint8Array(this._width * this._height * 4);
+
+        for (let i = 0; i < h; i++) {
+            for (let j = 0; j < w; j++) {
+                let index = (w * i + j);
+                const color = this._image[index];
+                index <<= 2; // multiply by 4
+                imageData[index] = color.red * 255;
+                imageData[index + 1] = color.green * 255;
+                imageData[index + 2] = color.blue * 255;
+                imageData[index + 3] = 255;
+            }
+        }
+        return imageData;
+    }
+
+    static ofUrl(url) {
+        return new Promise((resolve, reject) => {
+            Jimp.read(src, (error, image) => {
+                if (error) {
+                    return reject(error);
+                }
+                const width = image.bitmap.width;
+                const height = image.bitmap.height;
+
+                const img = Image.ofSize(width, height);
+
+                img.map((i, j) => {
+
+                    const color = Jimp.intToRGBA(image.getPixelColor(x, y));
+                    return Color.ofRGB(color.r, color.g, color.b);
+                })
+                resolve(img);
+            })
+        });
+    }
+
+    static ofSize(width, height) {
+        return new Image(width, height);
+    }
+
+    static ofDOM(canvasDOM) {
+        const ctx = canvasDOM.getContext("2d", { willReadFrequently: true });
+        const w = canvasDOM.width;
+        const h = canvasDOM.height;
+        const imageData = ctx.getImageData(0, 0, w, h);
+        const data = imageData.data;
+        const image = Image.ofSize(w, h)
+        for (let i = 0; i < data.length; i += 4) {
+            const color = Color.ofRGB(data[i] / 255, data[i + 1] / 255, data[i + 2] / 255);
+            image._image[Math.floor(i / 4)] = color;
+        }
+    }
+
+    static ofCanvas(canvas) {
+        const w = canvas.width;
+        const h = canvas.height;
+        return Image.ofSize(w, h)
+            .map((x, y) => {
+                return canvas.get(x, y);
+            })
+    }
+}

package/src/Image/README.md

@@ -0,0 +1,33 @@
+# Image.js
+Image is a object that represents a single image
+
+```
+ Image: Array<Color>
+```
+Image original coordinates:
+
+```
+ 0                  W-1
+ +-------------> y
+ |
+ |
+ |       *
+ |
+ |
+ v x
+
+ H-1
+
+```
+
+The client side coordinates are:
+
+```
+^ y H-1
+|
+|         *
+|
+|
+|
+0-------------> x W-1
+```

package/src/Monads/Monads.js

@@ -0,0 +1,28 @@
+export function some(x) {
+    const object = {
+        map: f => maybe(f(x)),
+        orElse: () => x,
+        forEach: (f) => f(x),
+        flatMap: f => f(x),
+        isSome: () => true,
+    };
+    return object;
+}
+
+export function none() {
+    const object = {
+        map: () => object,
+        orElse: (f = () => { }) => f(),
+        forEach: () => { },
+        flatMap: () => object,
+        isSome: () => false,
+    };
+    return object
+}
+
+export function maybe(x) {
+    if (x) {
+        return some(x);
+    }
+    return none(x)
+}

package/src/Ray/Ray.js

@@ -0,0 +1,7 @@
+export default function Ray(init, dir) {
+    const ans = {};
+    ans.init = init;
+    ans.dir = dir;
+    ans.trace = t => init.add(dir.scale(t));
+    return ans;
+}

package/src/Scene/Mesh.js

@@ -0,0 +1,103 @@
+import { Vec3, Vec2 } from "../Vector/Vector.js";
+import Point from "./Point.js"
+import Box from "../Box/Box.js";
+import Color from "../Color/Color.js";
+
+const RADIUS = 0.001;
+export default class Mesh {
+    constructor({ vertices, normals, textureCoords, faces, colors }) {
+        this.vertices = vertices || [];
+        this.normals = normals || [];
+        this.textureCoords = textureCoords || [];
+        this.faces = faces || [];
+        this.colors = colors || [];
+    }
+
+    mapVertices(lambda) {
+        const newVertices = [];
+        for (let i = 0; i < this.vertices.length; i++) {
+            newVertices.push(lambda(this.vertices[i]));
+        }
+        return new Mesh({
+            vertices: newVertices,
+            normals: this.normals,
+            textureCoords: this.textureCoords,
+            faces: this.faces
+        })
+    }
+
+    mapColors(lambda) {
+        const newColors = [];
+        for (let i = 0; i < this.vertices.length; i++) {
+            newColors.push(lambda(this.vertices[i]));
+        }
+        return new Mesh({
+            vertices: this.vertices,
+            normals: this.normals,
+            textureCoords: this.textureCoords,
+            faces: this.faces,
+            colors: newColors
+        })
+    }
+
+    getBoundingBox() {
+        if (this.boundingBox) return this.boundingBox;
+        this.boundingBox = new Box();
+        for (let i = 0; i < this.vertices.length; i++) {
+            this.boundingBox = this.boundingBox.add(new Box(
+                this.vertices[i].add(Vec3(1, 1, 1).scale(RADIUS)),
+                this.vertices[i].add(Vec3(1, 1, 1).scale(RADIUS))
+            ));
+        }
+        return this.boundingBox;
+    }
+
+    asPoints(name, radius = RADIUS) {
+        const points = [];
+        for (let i = 0; i < this.vertices.length; i++) {
+            points.push(
+                Point
+                    .builder()
+                    .radius(radius)
+                    .name(`${name}_${i}`)
+                    .color(this.colors[i])
+                    .position(this.vertices[i])
+                    .normal(this.normals[i] || Vec3(1, 0, 0))
+                    .build()
+            )
+        }
+        return points;
+    }
+
+
+    static readObj(objFile) {
+        const vertices = [];
+        const normals = [];
+        const texture = [];
+        const faces = [];
+        objFile.split("\n")
+            .forEach((lines) => {
+                const spaces = lines.split(" ")
+                const type = spaces[0];
+                if (type === "v") {
+                    const v = spaces.slice(1, 4)
+                        .map(x => Number.parseFloat(x));
+                    vertices.push(Vec3(...v));
+                }
+                if (type === "vn") {
+                    const v = spaces.slice(1, 4)
+                        .map(x => Number.parseFloat(x));
+                    normals.push(Vec3(...v));
+                }
+                if (type === "vt") {
+                    const v = spaces.slice(1, 3)
+                        .map(x => Number.parseFloat(x));
+                    texture.push(Vec2(...v));
+                }
+                if (type === "f") {
+                    // TODO
+                }
+            })
+        return new Mesh({ vertices, normals, texture, faces })
+    }
+}

package/src/Scene/NaiveScene.js

@@ -0,0 +1,77 @@
+
+import { none, some } from "../Monads/Monads.js";
+import Point from "./Point.js";
+import Vec from "../Vector/Vector.js";
+import { smin } from "../Utils/Math.js";
+
+export default class NaiveScene {
+  constructor() {
+    this.id2ElemMap = {};
+    this.sceneElements = [];
+  }
+
+  add(...elements) {
+    return this.addList(elements);
+  }
+
+  addList(elements) {
+    for (let i = 0; i < elements.length; i++) {
+      const elem = elements[i];
+      const classes = [Point];
+      if (!classes.some((c) => elem instanceof c)) return this;
+      const { name } = elem;
+      this.id2ElemMap[name] = elem;
+      this.sceneElements.push(elem);
+    }
+    return this;
+  }
+
+  clear() {
+    this.id2ElemMap = {};
+    this.sceneElements = [];
+  }
+
+  getElements() {
+    return this.sceneElements;
+  }
+
+  distanceToPoint(p) {
+    const elements = this.sceneElements;
+    let distance = Number.MAX_VALUE;
+    for (let i = 0; i < elements.length; i++) {
+      distance = smin(distance, elements[i].distanceToPoint(p));
+    }
+    return
+  }
+
+  estimateNormal(p) {
+    const epsilon = 1e-3;
+    const n = p.dim;
+    const grad = [];
+    const d = this.distanceToPoint(p);
+    for (let i = 0; i < n; i++) {
+      grad.push(this.distanceToPoint(p.add(Vec.e(n)(i).scale(epsilon))) - d);
+    }
+    return Vec.fromArray(grad).scale(Math.sign(d)).normalize();
+  }
+
+  interceptWith(ray) {
+    const points = this.sceneElements;
+    let closestDistance = Number.MAX_VALUE;
+    let closest = none();
+    for (let i = 0; i < points.length; i++) {
+      points[i].interceptWith(ray)
+        .map(([pos, normal]) => {
+          const distance = ray
+            .init
+            .sub(pos)
+            .length();
+          if (distance < closestDistance) {
+            closest = some([pos, normal]);
+            closestDistance = distance;
+          }
+        })
+    }
+    return closest;
+  }
+}