tela.js 1.0.0

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "tela.js",
+  "version": "1.0.0",
+  "description": "Graphic library from scratch",
+  "module": "./src/index.js",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pedroth/tela.js.git"
+  },
+  "keywords": [
+    "javascript",
+    "computer graphics",
+    "algorithms",
+    "mathematics",
+    "minimal dependencies"
+  ],
+  "author": "Pedroth",
+  "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/pedroth/tela.js/issues"
+  },
+  "homepage": "https://github.com/pedroth/tela.js#readme",
+  "scripts": {
+    "build": "bun run clean; bun i; bun bundle.js",
+    "buildDev": "bun bundle.js --watch",
+    "serve": "bunx http-server",
+    "clean": "rm -fr node_modules; rm -fr dist/; rm *.png *.jpeg *.ppm *.webm *.mp4",
+    "pub": "npm version patch; bun run build; npm publish"
+  },
+  "devDependencies": {
+    "bun-types": "latest",
+    "child_process": "^1.0.2",
+    "eslint": "^8.55.0",
+    "node-watch": "^0.7.4"
+  },
+  "dependencies": {
+    "jimp": "^0.22.10"
+  }
+}

package/src/Animation/Animation.js

@@ -0,0 +1,61 @@
+import Stream from "../Stream/Stream.js";
+
+export default class Animation {
+  constructor(state, next, doWhile) {
+    this.animation = new Stream(state, next);
+    this.while = doWhile;
+    this.requestAnimeId = null;
+  }
+
+  play(stream = this.animation) {
+    this.requestAnimeId = requestAnimationFrame(() => {
+      if (!this.while(stream.head)) return this.stop();
+      this.play(stream.tail);
+    });
+    Animation.globalAnimationIds.push(this.requestAnimeId);
+    return this;
+  }
+
+  stop() {
+    cancelAnimationFrame(this.requestAnimeId);
+    return this;
+  }
+
+  static globalAnimationIds = [];
+
+  static builder() {
+    return new AnimationBuilder();
+  }
+}
+
+class AnimationBuilder {
+  constructor() {
+    this._state = null;
+    this._next = null;
+    this._end = null;
+  }
+
+  initialState(state) {
+    this._state = state;
+    return this;
+  }
+
+  // next: currentState => NextState
+  nextState(next) {
+    this._next = next;
+    return this;
+  }
+
+  while(end) {
+    this._end = end;
+    return this;
+  }
+
+  build() {
+    const someAreEmpty = [this._state, this._next, this._end].some(
+      (x) => x === null || x === undefined
+    );
+    if (someAreEmpty) throw new Error("Animation properties are missing");
+    return new Animation(this._state, this._next, this._end);
+  }
+}

package/src/Box/Box.js

@@ -0,0 +1,105 @@
+import { none, some } from "../Monads/Monads";
+import Vec from "../Vector/Vector";
+
+
+export default class Box {
+    constructor(min, max) {
+        this.isEmpty = min === undefined || max === undefined;
+        if (this.isEmpty) return this;
+        this.min = min.op(max, Math.min);
+        this.max = max.op(min, Math.max);
+        this.center = min.add(max).scale(1 / 2);
+        this.diagonal = max.sub(min);
+    }
+
+    add(box) {
+        if (this.isEmpty) return box;
+        const { min, max } = this;
+        return new Box(min.op(box.min, Math.min), max.op(box.max, Math.max));
+    }
+
+    union = this.add;
+
+    sub(box) {
+        if (this.isEmpty) return Box.EMPTY;
+        const { min, max } = this;
+        const newMin = min.op(box.min, Math.max);
+        const newMax = max.op(box.max, Math.min);
+        const newDiag = newMax.sub(newMin);
+        const isAllPositive = newDiag.data.every((x) => x >= 0);
+        return !isAllPositive ? Box.EMPTY : new Box(newMin, newMax);
+    }
+
+    intersection = this.sub;
+
+    interceptWith(ray) {
+        const maxIte = 100;
+        const epsilon = 1e-3;
+        let p = ray.init;
+        let t = this.distanceToPoint(p);
+        let minT = t;
+        for (let i = 0; i < maxIte; i++) {
+            p = ray.trace(t);
+            const d = this.distanceToPoint(p);
+            t += d;
+            if (d < epsilon) {
+                return some(p);
+            }
+            if (d > minT) {
+                break;
+            };
+            minT = d;
+        }
+        return none();
+    }
+
+    scale(r) {
+        return new Box(this.min.sub(this.center).scale(r), this.max.sub(this.center).scale(r)).move(this.center);
+    }
+
+    move(v) {
+        return new Box(this.min.add(v), this.max.add(v));
+    }
+
+    equals(box) {
+        if (!(box instanceof Box)) return false;
+        if (this == Box.EMPTY) return true;
+        return this.min.equals(box.min) && this.max.equals(box.max);
+    }
+
+    distanceToBox(box) {
+        // return this.center.sub(box.center).length;
+        return this.min.sub(box.min).length() + this.max.sub(box.max).length();
+    }
+
+    distanceToPoint(pointVec) {
+        const p = pointVec.sub(this.center);
+        const r = this.max.sub(this.center);
+        const q = p.map(Math.abs).sub(r);
+        return q.map(x => Math.max(x, 0)).length() + Math.min(0, maxComp(q));
+    }
+
+    estimateNormal(pointVec) {
+        const epsilon = 1e-3;
+        const n = pointVec.dim;
+        const grad = [];
+        const d = this.distanceToPoint(pointVec);
+        for (let i = 0; i < n; i++) {
+            grad.push(this.distanceToPoint(pointVec.add(Vec.e(n)(i).scale(epsilon))) - d)
+        }
+        return Vec.fromArray(grad).scale(Math.sign(d)).normalize();
+    }
+
+    toString() {
+        return `{
+        min:${this.min.toString()},
+        max:${this.max.toString()}
+    }`
+    }
+
+    static EMPTY = new Box();
+}
+
+function maxComp(u) {
+    return u.fold((e, x) => Math.max(e, x), -Number.MAX_VALUE);
+}

package/src/Camera/Camera.js

@@ -0,0 +1,133 @@
+import { Vec3 } from "../Vector/Vector.js"
+import Color from "../Color/Color.js"
+import Ray from "../Ray/Ray.js";
+
+export default class Camera {
+  constructor(props = {
+    sphericalCoords: Vec3(2, 0, 0),
+    focalPoint: Vec3(0, 0, 0),
+    distanceToPlane: 1
+  }) {
+    const { sphericalCoords, focalPoint, distanceToPlane } = props;
+    this.sphericalCoords = sphericalCoords || Vec3(2, 0, 0);
+    this.focalPoint = focalPoint || Vec3(0, 0, 0);
+    this.distanceToPlane = distanceToPlane || 1;
+    this.orbit();
+  }
+
+  orbit() {
+    const [rho, theta, phi] = this.sphericalCoords.toArray();
+    const cosT = Math.cos(theta);
+    const sinT = Math.sin(theta);
+    const cosP = Math.cos(phi);
+    const sinP = Math.sin(phi);
+
+    this.basis = [];
+    // z - axis
+    this.basis[2] = Vec3(-cosP * cosT, -cosP * sinT, -sinP);
+    // y - axis
+    this.basis[1] = Vec3(-sinP * cosT, -sinP * sinT, cosP);
+    // x -axis
+    this.basis[0] = Vec3(-sinT, cosT, 0);
+
+    const sphereCoordinates = Vec3(
+      rho * cosP * cosT,
+      rho * cosP * sinT,
+      rho * sinP
+    );
+    this.eye = sphereCoordinates.add(this.focalPoint);
+    return this;
+  }
+
+  rayShot(lambdaWithRays) {
+    return {
+      to: canvas => {
+        const w = canvas.width;
+        const h = canvas.height;
+        return canvas.map((x, y) => {
+          const dirInLocal = [
+            2 * (x / w) - 1,
+            2 * (y / h) - 1,
+            1
+          ]
+          const dir = this.basis[0].scale(dirInLocal[0])
+            .add(this.basis[1].scale(dirInLocal[1]))
+            .add(this.basis[2].scale(dirInLocal[2]))
+            .normalize()
+          return lambdaWithRays(Ray(this.eye, dir));
+        });
+      }
+    }
+  }
+
+  sceneShot(scene) {
+    const lambda = ray => {
+      return scene.interceptWith(ray)
+        .map(([pos, normal]) => {
+          return Color.ofRGB(
+            (normal.get(0) + 1) / 2,
+            (normal.get(1) + 1) / 2,
+            (normal.get(2) + 1) / 2
+          )
+        })
+        .orElse(() => {
+          return Color.BLACK;
+        })
+    }
+    return this.rayShot(lambda);
+  }
+
+  reverseShot(scene) {
+    return {
+      to: canvas => {
+        canvas.fill(Color.BLACK);
+        const w = canvas.width;
+        const h = canvas.height;
+        const zBuffer = new Float64Array(w * h)
+          .fill(Number.MAX_VALUE);
+        scene.getElements().forEach((point) => {
+          let pointInCamCoord = point.position.sub(this.eye);
+          pointInCamCoord = Vec3(
+            this.basis[0].dot(pointInCamCoord),
+            this.basis[1].dot(pointInCamCoord),
+            this.basis[2].dot(pointInCamCoord)
+          )
+          //frustum culling
+          const z = pointInCamCoord.get(2);
+          if (z < this.distanceToPlane) return;
+
+          //project
+          const projectedPoint = pointInCamCoord
+            .scale(this.distanceToPlane / z);
+
+          // canvas coords
+          let x = w / 2 + projectedPoint.get(0) * w;
+          let y = h / 2 + projectedPoint.get(1) * h;
+          x = Math.floor(x);
+          y = Math.floor(y);
+          if (x < 0 || x >= w || y < 0 || y >= h) return;
+          const radius = Math.floor(Math.max(1, Math.min(10, 10 - z)));
+          for (let k = -radius; k < radius; k++) {
+            for (let l = -radius; l < radius; l++) {
+              const xl = Math.max(0, Math.min(w - 1, x + k));
+              const yl = Math.floor(y + l);
+              const j = xl;
+              const i = h - 1 - yl;
+              const zBufferIndex = Math.floor(w * i + j);
+              if (z < zBuffer[zBufferIndex]) {
+                zBuffer[zBufferIndex] = z;
+                canvas.setPxl(
+                  xl,
+                  yl,
+                  point.color
+                )
+              }
+            }
+          }
+        });
+        canvas.paint();
+        return canvas;
+      }
+    }
+  }
+}

package/src/Canvas/Canvas.js

@@ -0,0 +1,203 @@
+import Color from "../Color/Color";
+import { MAX_8BIT } from "../Utils/Constants";
+import { clipLine } from "../Utils/Math";
+
+export default class Canvas {
+
+  constructor(canvas) {
+    this._canvas = canvas;
+    this._width = canvas.width;
+    this._height = canvas.height;
+    this._ctx = this._canvas.getContext("2d", { willReadFrequently: true });
+    this._imageData = this._ctx.getImageData(0, 0, this._width, this._height);
+    this._image = this._imageData.data;
+  }
+
+  get width() {
+    return this._canvas.width;
+  }
+
+  get height() {
+    return this._canvas.height;
+  }
+
+  get DOM() {
+    return this._canvas;
+  }
+
+  /**
+    * color: Color 
+    */
+  fill(color) {
+    return this.map(() => color);
+  }
+
+  /**
+   * lambda: (x: Number, y: Number, c: color) => Color 
+   */
+  map(lambda) {
+    const n = this._image.length;
+    const w = this._width;
+    const h = this._height;
+    for (let k = 0; k < n; k += 4) {
+      const i = Math.floor(k / (4 * w));
+      const j = Math.floor((k / 4) % w);
+      const x = j;
+      const y = h - 1 - i;
+      const color = lambda(x, y);
+      this._image[k] = color.red * MAX_8BIT;
+      this._image[k + 1] = color.green * MAX_8BIT;
+      this._image[k + 2] = color.blue * MAX_8BIT;
+      this._image[k + 3] = MAX_8BIT;
+    }
+    return this.paint();
+  }
+
+  setPxl(x, y, color) {
+    const w = this._width;
+    const h = this._height;
+    const i = h - 1 - y;
+    const j = x;
+    let index = 4 * (w * i + j);
+    this._image[index] = color.red * MAX_8BIT;
+    this._image[index + 1] = color.green * MAX_8BIT;
+    this._image[index + 2] = color.blue * MAX_8BIT;
+    this._image[index + 3] = MAX_8BIT;
+    return this;
+  }
+
+  getPxl(x, y) {
+    const w = this._width;
+    const h = this._height;
+    const i = h - 1 - y;
+    const j = x;
+    let index = 4 * (w * i + j);
+    return Color.ofRGBRaw(this._image[index], this._image[index + 1], this._image[index + 2]);
+  }
+
+  // drawLine(p1, p2, shader) {
+  //   const { width, height } = this.canvas;
+  //   const line = clipLine(p1, p2, new Box(Vec2(0, 0), Vec2(width, height)));
+  //   if (line.length === 0) return;
+  //   const [p0, p1] = line;
+  //   const v = p1.sub(p0);
+  //   const n = v.map(Math.abs).fold((e, x) => e + x);
+  //   for (let k = 0; k < n; k++) {
+  //     const s = k / n;
+  //     const x = p0.add(v.scale(s)).map(Math.floor);
+  //     const [i, j] = x.toArray();
+  //     const index = 4 * (i * width + j);
+  //     const color = shader(i, j);
+  //     this.data[index] = color.red;
+  //     this.data[index + 1] = color.green;
+  //     this.data[index + 2] = color.blue;
+  //     this.data[index + 3] = 255;
+  //   }
+  //   return this;
+  // }
+
+  paint() {
+    this._ctx.putImageData(this._imageData, 0, 0);
+    return this;
+  }
+
+  onMouseDown(lambda) {
+    this._canvas.addEventListener("mousedown", handleMouse(this, lambda), false);
+    this._canvas.addEventListener("touchstart", handleMouse(this, lambda), false);
+    return this;
+  }
+
+  onMouseUp(lambda) {
+    this._canvas.addEventListener("mouseup", handleMouse(this, lambda), false);
+    this._canvas.addEventListener("touchend", handleMouse(this, lambda), false);
+    return this;
+  }
+
+  onMouseMove(lambda) {
+    this._canvas.addEventListener("mousemove", handleMouse(this, lambda), false);
+    this._canvas.addEventListener("touchmove", handleMouse(this, lambda), false);
+    return this;
+  }
+
+  onMouseWheel(lambda) {
+    this._canvas.addEventListener("wheel", lambda, false)
+  }
+
+  resize(width, height) {
+    this._canvas.width = width;
+    this._canvas.height = height;
+    this._width = this._canvas.width;
+    this._height = this._canvas.height;
+    this._ctx = this._canvas.getContext("2d", { willReadFrequently: true });
+    this._imageData = this._ctx.getImageData(0, 0, this._width, this._height);
+    this._image = this._imageData.data;
+  }
+
+  startVideoRecorder() {
+    let responseBlob;
+    const canvasSnapshots = [];
+    const stream = this._canvas.captureStream();
+    const recorder = new MediaRecorder(stream);
+    recorder.addEventListener("dataavailable", e => canvasSnapshots.push(e.data));
+    recorder.start();
+    recorder.onstop = () => (responseBlob = new Blob(canvasSnapshots, { type: 'video/webm' }));
+    return {
+      stop: () => new Promise((re) => {
+        recorder.stop();
+        setTimeout(() => re(responseBlob));
+      })
+    };
+  }
+
+  static ofSize(width, height) {
+    const canvas = document.createElement('canvas');
+    canvas.setAttribute('width', width);
+    canvas.setAttribute('height', height);
+    return new Canvas(canvas);
+  }
+
+  static ofDOM(canvasDOM) {
+    return new Canvas(canvasDOM);
+  }
+
+  static ofCanvas(canvas) {
+    return new Canvas(canvas._canvas);
+  }
+
+  static ofUrl(url) {
+    return new Promise((resolve) => {
+      const img = document.createElement("img");
+      img.src = url;
+      img.onload = function () {
+        const canvas = document.createElement("canvas");
+        canvas.width = img.width;
+        canvas.height = img.height;
+        const ctx = canvas.getContext("2d");
+        ctx.drawImage(img, 0, 0);
+        resolve(Canvas.ofDOM(canvas));
+      };
+    });
+  }
+
+  static ofImage(image) {
+    const w = image.width;
+    const h = image.height;
+    return Canvas.ofSize(w, h)
+      .map((x, y) => {
+        return image.get(x, y);
+      })
+  }
+}
+
+function handleMouse(canvas, lambda) {
+  return event => {
+    const h = canvas.height;
+    const w = canvas.width;
+    const rect = canvas._canvas.getBoundingClientRect();
+    // different coordinates from canvas DOM image data
+    const mx = (event.clientX - rect.left) / rect.width, my = (event.clientY - rect.top) / rect.height;
+    const x = Math.floor(mx * w);
+    const y = Math.floor(h - 1 - my * h);
+    return lambda(x, y);
+  }
+}

package/src/Canvas/README.md

@@ -0,0 +1,83 @@
+# Canvas
+
+Abstraction for DOM canvas element. Canvas, can be though as a function from $\text{canvas}: \text{position} \rightarrow \text{color}$. 
+
+- $\text{position}$ is a product of two sets: $[0, W-1] \times [0, H-1]$
+- $\text{color}$ is a product of three sets: $\text{red} \times \text{green} \times \text{blue} \times \text{alpha} = [0,1]^C$
+- Where $W$ is the width, $H$ is the height and $C$ is the number of color channels.  
+
+``` 
+ y H-1
+ ^ 
+ |
+ | 
+ |
+ |
+ |               W-1
+ +-------------> x
+ 0
+
+```
+
+## Details
+
+While the Canvas API, tries to be user friendly, the reality of the DOM Canvas is different. 
+
+``` 
+ 0                  W-1
+ +-------------> y
+ |
+ |
+ |       *
+ |
+ |
+ v x
+
+ H-1
+
+```
+
+In reality the DOM canvas stores its data in a simple 1-dimensional array of length: $ \text{width}(W) \times  \text{height}(H) \times \text{colors}(C)$. Hence, DOM canvas is more of a function $\text{index}: [0,W \times H \times C - 1] \rightarrow \text{(red | green | blue): }[0, 255]$.
+
+
+Having the coordinate $\mathbf{x} = xe_1 + ye_2 + z e_3$. Where $x \in [0, H-1]$ and $y \in [0, W-1]$ represent the position and $z\in[0, C-1]$ represents the channel color, we can find its $\text{index}$, by computing the following equation:
+
+$$\text{index}(x, y, z) = C W  x + Cy + z = C(Wx + y) + z$$
+
+> Note that $\text{index}(H - 1, W - 1, C - 1) = C * W * H - 1$.
+
+Code to retrieve the color from the canvas
+
+```js
+function retrieveColor(canvasDataArray, x, y) {
+    const index = C * (W * x + y);
+    const red =   canvasDataArray[index];
+    const green = canvasDataArray[index + 1];
+    const blue =  canvasDataArray[index + 2];
+    const alpha = canvasDataArray[index + 3];
+    return  [red, green, blue, alpha]
+}
+```
+
+Code to retrieve coordinates $(x,y,z)$ based of $\text{index}$, we need to solve:
+
+$$\text{index} = C(Wx + y) + z$$
+
+Seems impossible to solve this because there is only one equation and we have 3 variables, but looking more closely we found the solution:
+
+Finding $z \in [0, C-1]$:
+$$\text{index} \mod C = (C(Wx+y)+z) \mod C $$
+$$\text{index} \mod C = z $$
+
+Finding $y \in [0, W-1]$
+
+$$\lfloor \text{index} / C \rfloor = \lfloor(C(Wx+y)+z) / C \rfloor$$
+$$\lfloor \text{index} / C \rfloor \mod W = Wx+y \mod W$$
+$$\lfloor \text{index} / C \rfloor \mod W = y$$
+
+Finding $x \in [0, H-1]$
+
+$$\lfloor \text{index} / CW \rfloor = \lfloor(C(Wx+y)+z) / CW \rfloor$$
+
+$$\lfloor \text{index} / CW \rfloor = x$$
+

package/src/Color/Color.js

@@ -0,0 +1,77 @@
+/**
+ * Class that abstracts colors.
+ * 
+ * Here colors are represented as [0,1]^3 vector.
+ */
+
+const MAX_8BIT = 255;
+export default class Color {
+  constructor(rbg) {
+    this.rgb = rbg;
+  }
+
+  getRGB() {
+    return this.rgb;
+  }
+
+  get red() {
+    return this.rgb[0];
+  }
+
+  get green() {
+    return this.rgb[1];
+  }
+
+  get blue() {
+    return this.rgb[2];
+  }
+
+  add(color) {
+    return Color.ofRGB(this.rgb[0] + color.red, this.rgb[1] + color.green, this.rgb[2] + color.blue );
+  }
+
+  scale(r) {
+    const ans = this.rgb.map(c => Math.min(1, Math.max(0, c * r)));
+    return new Color(ans);
+  }
+
+  /**
+   *
+   * @param {Color} color
+   * @returns {Boolean}
+   */
+  equals(color) {
+    return (
+      this.rgb[0] === color.rgb[0] &&
+      this.rgb[1] === color.rgb[1] &&
+      this.rgb[2] === color.rgb[2]
+    );
+  }
+
+  static ofRGB(red = 0, green = 0, blue = 0) {
+    const rgb = new Float64Array(3);
+    rgb[0] = red;
+    rgb[1] = green;
+    rgb[2] = blue;
+    return new Color(rgb);
+  }
+
+  static ofRGBRaw(red = 0, green = 0, blue = 0) {
+    const rgb = new Float64Array(3);
+    rgb[0] = red / MAX_8BIT;
+    rgb[1] = green / MAX_8BIT;
+    rgb[2] = blue / MAX_8BIT;
+    return new Color(rgb);
+  }
+
+  static random() {
+    const r = () => Math.random();
+    return Color.ofRGB(r(), r(), r());
+  }
+
+  static RED = Color.ofRGB(1, 0, 0);
+  static GREEN = Color.ofRGB(0, 1, 0);
+  static BLUE = Color.ofRGB(0, 0, 1);
+  static BLACK = Color.ofRGB(0, 0, 0);
+  static WHITE = Color.ofRGB(1, 1, 1);
+}