npm - tela.js - Versions diffs - 1.0.5 → 1.1.2 - Mend

tela.js 1.0.5 → 1.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (40) hide show

package/README.md +29 -30
package/package.json +3 -5
package/src/Camera/Camera.js +55 -26
package/src/Camera/parallel.js +77 -0
package/src/Camera/raster.js +8 -5
package/src/Camera/{raytrace.js → rayTrace.js} +14 -13
package/src/Camera/rayTraceWorker.js +59 -0
package/src/Color/Color.js +1 -1
package/src/Geometry/Box.js +8 -0
package/src/Geometry/Geometry.js +16 -0
package/src/Geometry/Line.js +19 -2
package/src/Geometry/Mesh.js +13 -4
package/src/Geometry/Path.js +3 -0
package/src/Geometry/{Point.js → Sphere.js} +39 -8
package/src/Geometry/Triangle.js +31 -2
package/src/IO/IO.js +21 -37
package/src/Material/Material.js +18 -1
package/src/Scene/BScene.js +9 -23
package/src/Scene/KScene.js +11 -12
package/src/Scene/NaiveScene.js +17 -2
package/src/Scene/RandomScene.js +3 -4
package/src/Scene/VoxelScene.js +32 -29
package/src/Scene/utils.js +27 -0
package/src/Tela/Canvas.js +76 -236
package/src/Tela/Image.js +88 -187
package/src/Tela/Tela.js +365 -0
package/src/Tela/Window.js +111 -190
package/src/Tela/utils.js +17 -0
package/src/Utils/Constants.js +4 -31
package/src/Utils/Math.js +1 -122
package/src/Utils/Stream.js +7 -5
package/src/Utils/Utils.js +39 -11
package/src/Utils/Utils3D.js +21 -3
package/src/Vector/Vector.js +2 -3
package/src/index.js +5 -9
package/src/index.node.js +2 -3
package/dist/node/index.js +0 -5038
package/dist/web/index.js +0 -4575
package/src/Scene/Scene.js +0 -402
package/src/Utils/Animation.js +0 -88

package/README.md CHANGED Viewed

@@ -21,37 +21,31 @@ Playground usage:
 ```html
 <!DOCTYPE html>
 <html lang="en">
 <head>
 </head>
 <body>
 </body>
 <script type="module">
-    import { Canvas, Animation, Color } from "https://cdn.jsdelivr.net/npm/tela.js/dist/web/index.js";
+    import { Canvas, Color, loop } from "https://cdn.jsdelivr.net/npm/tela.js/src/index.js";
     // You can also import from local file
-    // import { Canvas, Animation, Color} from "./node_modules/tela.js/dist/web/index.js";
+    // import { Canvas, Color, loop } from "./node_modules/tela.js/src/index.js";
     const width = 640;
     const height = 480;
     const canvas = Canvas.ofSize(640, 480);
-    Animation
-        .loop(({ time, dt }) => {
-            document.title = `FPS: ${(Math.floor(1 / dt))}`;
-            canvas.map((x, y) => {
-                return Color.ofRGB(
-                    ((x * time) / width) % 1,
-                    ((y * time) / height) % 1
-                )
-            })
+    loop(({ time, dt }) => {
+        document.title = `FPS: ${(Math.floor(1 / dt))}`;
+        canvas.map((x, y) => {
+            return Color.ofRGB(
+                ((x * time) / width) % 1,
+                ((y * time) / height) % 1
+            )
         })
-        .play();
+    }).play();
     document.body.appendChild(canvas.DOM);
 </script>
 </html>
 ```
@@ -59,23 +53,21 @@ Playground usage:
 Install `tela.js` it using `npm install tela.js` / `bun add tela.js`.
 ```js
-import { Animation, Color } from "tela.js/dist/node/index.js";
-import Window from "tela.js/src/Tela/Window.js";
+import { loop, Color, Window} from "tela.js/src/index.node.js";
 const width = 640;
 const height = 480;
 const window = Window.ofSize(640, 480);
-Animation
-    .loop(({ time, dt }) => {
-        window.setTitle(`FPS: ${Math.floor(1 / dt)}`);
-        window.map((x, y) => {
-            return Color.ofRGB(
-                ((x * time) / width) % 1,
-                ((y * time) / height) % 1
-            )
-        })
+loop(({ time, dt }) => {
+    window.setTitle(`FPS: ${Math.floor(1 / dt)}`);
+    window.map((x, y) => {
+        return Color.ofRGB(
+            ((x * time) / width) % 1,
+            ((y * time) / height) % 1
+        )
     })
-    .play();
+})
+.play();
 ```
 And run it: `node index.mjs` / `bun index.js`
@@ -90,7 +82,7 @@ Install `tela.js` it using `npm install tela.js` / `bun add tela.js`.
 Create a file:
 ```js
 // index.js
-import { Color, video } from "tela.js/dist/node/index.js";
+import { Color, video } from "tela.js/src/index.node.js";
 const width = 640;
 const height = 480;
@@ -111,7 +103,7 @@ video(
     animation,
     { width, height, FPS }
 )
-    .until(({ time }) => time < maxVideoTime);
+    .while(({ time }) => time < maxVideoTime);
 ```
 And run it: `node index.mjs` / `bun index.js`
@@ -143,6 +135,13 @@ You can find more examples of usage in:
 [Node][node] is preferred when running the demos (it is faster, [opened a bug in bun](https://github.com/oven-sh/bun/issues/9218)), [bun][bun] is needed to build the library.
+# TODOs
+- Fix parallel ray trace refresh bug
+- Parallel ray map
+- Serialize meshes not only triangles
+- Optimize data serialization in parallel ray tracer
 [ffmpeg]: https://ffmpeg.org/
 [bun]: https://bun.sh/

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "tela.js",
-  "version": "1.0.5",
+  "version": "1.1.2",
   "author": "Pedroth",
   "repository": {
     "type": "git",
@@ -37,11 +37,9 @@
   ],
   "license": "Apache-2.0",
   "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"
+    "clean": "rm -fr node_modules; rm *.png *.jpeg *.ppm *.webm *.mp4",
+    "pub": "npm version patch; npm publish"
   },
   "type": "module"
 }

package/src/Camera/Camera.js CHANGED Viewed

@@ -1,29 +1,22 @@
-import { Vec2, Vec3 } from "../Vector/Vector.js"
+import Vec, { Vec2, Vec3 } from "../Vector/Vector.js"
 import Ray from "../Ray/Ray.js";
-import { rayTrace } from "./raytrace.js";
+import { getRayTracer } from "./rayTrace.js";
 import { rasterGraphics } from "./raster.js";
 import { sdfTrace } from "./sdf.js";
 import { normalTrace } from "./normal.js";
+import { parallelWorkers } from "./parallel.js";
 export default class Camera {
   constructor(props = {}) {
-    const { lookAt, distanceToPlane, position } = props;
+    const { lookAt, distanceToPlane, position, orientCoords, orbitCoords } = props;
     this.lookAt = lookAt ?? Vec3(0, 0, 0);
     this.distanceToPlane = distanceToPlane ?? 1;
     this.position = position ?? Vec3(3, 0, 0);
-    this._orientCoords = Vec2();
-    this._orbitCoords = Vec3(this.position.length(), 0, 0);
-    this.orient();
-  }
-  clone() {
-    return new Camera({
-      lookAt: this.lookAt,
-      position: this.position,
-      distanceToPlane: this.distanceToPlane,
-    })
+    this._orientCoords = orientCoords ?? Vec2();
+    this._orbitCoords = orbitCoords;
+    if (this._orbitCoords) this.orbit(...this._orbitCoords.toArray());
+    else this.orient(...this._orientCoords.toArray());
+    this._orbitCoords = this._orbitCoords ?? Vec3(this.position.length());
   }
   look(at, up = Vec3(0, 0, 1)) {
@@ -91,11 +84,13 @@ export default class Camera {
     return {
       to: canvas => {
         const w = canvas.width;
+        const invW = 1 / w;
         const h = canvas.height;
+        const invH = 1 / h;
         const ans = canvas.map((x, y) => {
           const dirInLocal = [
-            (x / w - 0.5),
-            (y / h - 0.5),
+            (x * invW - 0.5),
+            (y * invH - 0.5),
             this.distanceToPlane
           ]
           const dir = Vec3(
@@ -112,11 +107,11 @@ export default class Camera {
     }
   }
-  sceneShot(scene, params = {}) {
-    return this.rayMap(rayTrace(scene, params));
+  sceneShot(scene, params) {
+    return this.rayMap(getRayTracer(scene, params));
   }
-  reverseShot(scene, params = {}) {
+  reverseShot(scene, params) {
     return {
       to: rasterGraphics(scene, this, params)
     }
@@ -130,6 +125,18 @@ export default class Camera {
     return this.rayMap(normalTrace(scene));
   }
+  parallelShot(scene, params) {
+    return {
+      to: canvas => {
+        return Promise
+          .all(parallelWorkers(this, scene, canvas, params))
+          .then(() => {
+            canvas.paint();
+          })
+      }
+    }
+  }
   toCameraCoord(x) {
     let pointInCamCoord = x.sub(this.position);
     pointInCamCoord = Vec3(
@@ -148,13 +155,15 @@ export default class Camera {
     return x;
   }
-  getRaysFromCanvas(canvas) {
-    const w = canvas.width;
-    const h = canvas.height;
+  rayFromImage(width, height) {
+    const w = width;
+    const invW = 1 / w;
+    const h = height;
+    const invH = 1 / h;
     return (x, y) => {
       const dirInLocal = [
-        (x / w - 0.5),
-        (y / h - 0.5),
+        (x * invW - 0.5),
+        (y * invH - 0.5),
         this.distanceToPlane
       ]
       const dir = Vec3(
@@ -166,4 +175,24 @@ export default class Camera {
       return Ray(this.position, dir);
     }
   }
+  serialize() {
+    return {
+      lookAt: this.lookAt.toArray(),
+      distanceToPlane: this.distanceToPlane,
+      position: this.position.toArray(),
+      orientCoords: this._orientCoords.toArray(),
+      orbitCoords: this._orbitCoords.toArray(),
+    }
+  }
+  static deserialize(json) {
+    return new Camera({
+      lookAt: Vec.fromArray(json.lookAt),
+      distanceToPlane: json.distanceToPlane,
+      position: Vec.fromArray(json.position),
+      orientCoords: Vec.fromArray(json.orientCoords),
+      orbitCoords: Vec.fromArray(json.orbitCoords)
+    })
+  }
 }

package/src/Camera/parallel.js ADDED Viewed

@@ -0,0 +1,77 @@
+import { IS_NODE, NUMBER_OF_CORES } from "../Utils/Constants.js";
+import Color from "../Color/Color.js";
+import { CHANNELS } from "../Tela/Tela.js";
+//========================================================================================
+/*                                                                                      *
+ *                                         UTILS                                        *
+ *                                                                                      */
+//========================================================================================
+const __Worker = IS_NODE ? (await import("node:worker_threads")).Worker : Worker;
+class MyWorker {
+    constructor(path) {
+        this.path = path;
+        this.worker = new __Worker(path, { type: 'module' });
+    }
+    onMessage(lambda) {
+        if (IS_NODE) {
+            this.worker.removeAllListeners('message');
+            this.worker.on("message", lambda);
+        } else {
+            this.worker.onmessage = message => lambda(message.data);
+        }
+    }
+    postMessage(message) {
+        return this.worker.postMessage(message);
+    }
+}
+let WORKERS = [];
+let prevSceneHash = undefined;
+//========================================================================================
+/*                                                                                      *
+ *                                         MAIN                                         *
+ *                                                                                      */
+//========================================================================================
+export function parallelWorkers(camera, scene, canvas, params = {}) {
+    // lazy loading workers
+    if (WORKERS.length === 0) {
+        WORKERS = [...Array(NUMBER_OF_CORES)]
+            .map(() => new MyWorker(`${IS_NODE ? "." : ""}/src/Camera/rayTraceWorker.js`));
+    }
+    const w = canvas.width;
+    const h = canvas.height;
+    const isNewScene = prevSceneHash !== scene.hash;
+    if (isNewScene) prevSceneHash = scene.hash;
+    return WORKERS.map((worker, k) => {
+        return new Promise((resolve) => {
+            worker.onMessage(message => {
+                const { image, startRow, endRow, } = message;
+                let index = 0;
+                const startIndex = CHANNELS * w * startRow;
+                const endIndex = CHANNELS * w * endRow;
+                for (let i = startIndex; i < endIndex; i += CHANNELS) {
+                    canvas.setPxlData(i, Color.ofRGB(image[index++], image[index++], image[index++], image[index++]));
+                }
+                resolve();
+            })
+            const ratio = Math.floor(h / WORKERS.length);
+            const message = {
+                width: w,
+                height: h,
+                params: params,
+                startRow: k * ratio,
+                endRow: Math.min(h, (k + 1) * ratio),
+                camera: camera.serialize(),
+                scene: isNewScene ? scene.serialize() : undefined
+            };
+            worker.postMessage(message);
+        });
+    })
+}

package/src/Camera/raster.js CHANGED Viewed

@@ -1,14 +1,14 @@
 import Color from "../Color/Color.js";
 import Line from "../Geometry/Line.js";
-import Point from "../Geometry/Point.js";
+import Sphere from "../Geometry/Sphere.js";
 import Mesh from "../Geometry/Mesh.js";
 import Triangle from "../Geometry/Triangle.js";
 import { Vec2 } from "../Vector/Vector.js";
 import { getBiLinearTexColor, getDefaultTexColor, getTexColor } from "./common.js";
-export function rasterGraphics(scene, camera, params) {
+export function rasterGraphics(scene, camera, params = {}) {
     const type2render = {
-        [Point.name]: rasterPoint,
+        [Sphere.name]: rasterSphere,
         [Line.name]: rasterLine,
         [Triangle.name]: rasterTriangle,
         [Mesh.name]: rasterMesh,
@@ -52,7 +52,7 @@ export function rasterGraphics(scene, camera, params) {
 }
-function rasterPoint({ canvas, camera, elem, w, h, zBuffer }) {
+function rasterSphere({ canvas, camera, elem, w, h, zBuffer }) {
     const point = elem;
     const { distanceToPlane } = camera;
     const { texCoord, texture, position, color, radius } = point;
@@ -71,6 +71,7 @@ function rasterPoint({ canvas, camera, elem, w, h, zBuffer }) {
     y = Math.floor(y);
     if (x < 0 || x >= w || y < 0 || y >= h) return;
     const intRadius = Math.ceil((radius) * (distanceToPlane / z) * w);
+    const intRadiusSquare = intRadius * intRadius;
     let finalColor = color;
     if (
         texture &&
@@ -83,6 +84,8 @@ function rasterPoint({ canvas, camera, elem, w, h, zBuffer }) {
         for (let l = -intRadius; l < intRadius; l++) {
             const xl = Math.max(0, Math.min(w - 1, x + k));
             const yl = Math.floor(y + l);
+            const squareLength = k * k + l * l;
+            if (squareLength > intRadiusSquare) continue;
             const [i, j] = canvas.canvas2grid(xl, yl);
             const zBufferIndex = Math.floor(w * i + j);
             if (z < zBuffer[zBufferIndex]) {
@@ -227,7 +230,7 @@ function rasterTriangle({ canvas, camera, elem, w, h, zBuffer, params }) {
                 params.bilinearTexture ?
                     getBiLinearTexColor(texUV, texture) :
                     getTexColor(texUV, texture) :
-                getDefaultTexColor(texUV);
+                c ? c : getDefaultTexColor(texUV); // TODO: review this
             c = texColor;
         }
         const [i, j] = canvas.canvas2grid(x, y);

package/src/Camera/{raytrace.js → rayTrace.js} RENAMED Viewed

@@ -4,29 +4,30 @@ import Ray from "../Ray/Ray.js";
 import Vec from "../Vector/Vector.js";
 import { getBiLinearTexColor, getDefaultTexColor, getTexColor } from "./common.js";
-export function rayTrace(scene, params = {}) {
+export function rayTrace(ray, scene, params) {
     let { samplesPerPxl, bounces, variance, gamma, bilinearTexture } = params;
     bounces = bounces ?? 10;
     variance = variance ?? 0.001;
     samplesPerPxl = samplesPerPxl ?? 1;
     gamma = gamma ?? 0.5;
     bilinearTexture = bilinearTexture ?? false;
-    const invSamples = bounces / samplesPerPxl;
-    const lambda = ray => {
-        let c = Color.BLACK;
-        for (let i = 0; i < samplesPerPxl; i++) {
-            const epsilon = Vec.RANDOM(3).scale(variance);
-            const epsilonOrto = epsilon.sub(ray.dir.scale(epsilon.dot(ray.dir)));
-            const r = Ray(ray.init, ray.dir.add(epsilonOrto).normalize());
-            c = c.add(trace(r, scene, { bounces, bilinearTexture }));
-        }
-        return c.scale(invSamples).toGamma(gamma);
+    const invSamples = (bounces ?? 1) / samplesPerPxl
+    let c = Color.BLACK;
+    for (let i = 0; i < samplesPerPxl; i++) {
+        const epsilon = Vec.RANDOM(3).scale(variance);
+        const epsilonOrtho = epsilon.sub(ray.dir.scale(epsilon.dot(ray.dir)));
+        const r = Ray(ray.init, ray.dir.add(epsilonOrtho).normalize());
+        c = c.add(trace(r, scene, { bounces, bilinearTexture }));
     }
+    return c.scale(invSamples).toGamma(gamma);
+}
+export function getRayTracer(scene, params = {}) {
+    const lambda = ray => rayTrace(ray, scene, params);
     return lambda;
 }
-function trace(ray, scene, options) {
+export function trace(ray, scene, options) {
     const { bounces, bilinearTexture } = options;
     if (bounces < 0) return Color.BLACK;
     const hit = scene.interceptWithRay(ray);

package/src/Camera/rayTraceWorker.js ADDED Viewed

@@ -0,0 +1,59 @@
+import Camera from "./Camera.js";
+import { rayTrace } from "./rayTrace.js";
+import { CHANNELS } from "../Tela/Tela.js";
+import { IS_NODE } from "../Utils/Constants.js";
+import { deserializeScene } from "../Scene/utils.js";
+import Color from "../Color/Color.js";
+const parentPort = IS_NODE ? (await import("node:worker_threads")).parentPort : undefined;
+let scene = undefined;
+function getScene(serializedScene) {
+    return deserializeScene(serializedScene).then(s => s.rebuild());
+}
+async function main(inputs) {
+    const {
+        startRow,
+        endRow,
+        width,
+        height,
+        params,
+        scene: serializedScene,
+        camera: serializedCamera,
+    } = inputs;
+    scene = serializedScene ? await getScene(serializedScene) : scene;
+    const camera = Camera.deserialize(serializedCamera);
+    const rayGen = camera.rayFromImage(width, height);
+    const bufferSize = width * (endRow - startRow + 1) * CHANNELS;
+    const image = new Float32Array(bufferSize);
+    let index = 0;
+    // the order does matter
+    for (let y = startRow; y < endRow; y++) {
+        for (let x = 0; x < width; x++) {
+            const ray = rayGen(x, height - 1 - y);
+            const color = scene ? rayTrace(ray, scene, params) : Color.random();
+            image[index++] = color.red;
+            image[index++] = color.green;
+            image[index++] = color.blue;
+            image[index++] = color.alpha;
+        }
+    }
+    return { image, startRow, endRow };
+}
+if (IS_NODE) {
+    parentPort.on("message", async message => {
+        const input = message;
+        const output = await main(input);
+        parentPort.postMessage(output);
+    });
+} else {
+    onmessage = async message => {
+        const input = message.data;
+        const output = await main(input);
+        postMessage(output);
+    };
+}

package/src/Color/Color.js CHANGED Viewed

@@ -12,7 +12,7 @@ export default class Color {
   }
   toArray() {
-    return [this.red, this.green, this.blue, this.alpha];
+    return [this.rgb[0], this.rgb[1], this.rgb[2], this.alpha];
   }
   get red() {

package/src/Geometry/Box.js CHANGED Viewed

@@ -141,6 +141,14 @@ export default class Box {
         return this.min.add(Vec.RANDOM(this.dim).mul(this.diagonal));
     }
+    serialize() {
+        // TODO
+    }
+    deserialize() {
+        // TODO
+    }
     static EMPTY = new Box();
 }

package/src/Geometry/Geometry.js CHANGED Viewed

@@ -35,4 +35,20 @@ export default class Geometry {
     interceptWithRay(ray) {
         throw Error("Not implemented");
     }
+    sample() {
+        throw Error("Not implemented");
+    }
+    equals(obj) {
+        return this === obj;
+    }
+    serialize() {
+        throw Error("Not implemented");
+    }
+    static deserialize(json) {
+        throw Error("Not implemented");
+    }
 }

package/src/Geometry/Line.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import Box from "./Box.js";
 import Color from "../Color/Color.js";
-import { Diffuse } from "../Material/Material.js";
+import { Diffuse, MATERIALS } from "../Material/Material.js";
 import { clamp } from "../Utils/Math.js";
-import { Vec2, Vec3 } from "../Vector/Vector.js";
+import Vec, { Vec2, Vec3 } from "../Vector/Vector.js";
 export default class Line {
     constructor({ name, positions, colors, texCoords, normals, texture, radius, emissive, material }) {
@@ -76,6 +76,23 @@ export default class Line {
         return this.distanceToPoint(p) < 0;
     }
+    serialize() {
+        //TODO's
+    }
+    static deserialize(json) {
+        const { type, args } = json.material;
+        return Line
+            .builder()
+            .name(json.name)
+            .radius(json.radius)
+            .positions(...json.positions.map(x => Vec.fromArray(x)))
+            .colors(...json.colors.map(x => new Color(x)))
+            .emissive(json.emissive)
+            .material(MATERIALS[type](...args))
+            .build()
+    }
     static builder() {
         return new LineBuilder();
     }

package/src/Geometry/Mesh.js CHANGED Viewed

@@ -1,10 +1,11 @@
 import { Vec3, Vec2 } from "../Vector/Vector.js";
-import Point from "./Point.js"
+import Sphere from "./Sphere.js"
 import Line from "./Line.js";
 import Triangle from "./Triangle.js";
 import { groupBy } from "../Utils/Utils.js";
 import { Diffuse } from "../Material/Material.js";
 import KScene from "../Scene/KScene.js"
+import { UNIT_BOX_LINES, UNIT_BOX_VERTEX } from "../Utils/Utils3D.js";
 //========================================================================================
 /*                                                                                      *
  *                                       CONSTANTS                                      *
@@ -32,7 +33,7 @@ export default class Mesh {
     }
     _init() {
-        if(this._meshScene) return this;
+        if (this._meshScene) return this;
         this._meshScene = new KScene();
         this._meshScene.addList(this.asTriangles());
         this._meshScene.rebuild();
@@ -144,7 +145,7 @@ export default class Mesh {
             for (let j = 0; j < 3; j++) {
                 const pointName = `${this.name}_${verticesIndexes[j]}`
                 if (!(pointName in points)) {
-                    points[pointName] = Point
+                    points[pointName] = Sphere
                         .builder()
                         .name(pointName)
                         .radius(radius)
@@ -215,6 +216,14 @@ export default class Mesh {
         return triangles;
     }
+    serialize() {
+        // TODO
+    }
+    deserialize(jsonMesh) {
+        // TODO
+    }
     static readObj(objFile, name = `Mesh_${MESH_COUNTER++}`) {
         const vertices = [];
         const normals = [];
@@ -263,7 +272,7 @@ export default class Mesh {
     static ofBox(box, name) {
         const vertices = UNIT_BOX_VERTEX.map(v => v.mul(box.diagonal).add(box.min))
-        return new Mesh({ name: name, vertices, faces: UNIT_BOX_FACES.map(indx => ({ vertices: indx })) });
+        return new Mesh({ name: name, vertices, faces: UNIT_BOX_LINES.map(indx => ({ vertices: indx })) });
     }
 }

package/src/Geometry/Path.js CHANGED Viewed

@@ -15,14 +15,17 @@ export default class Path {
     }
     distanceToPoint() {
+        // TODO
         throw Error("No implementation");
     }
     normalToPoint() {
+        // TODO
         throw Error("No implementation");
     }
     interceptWithRay(ray) {
+        // TODO
         throw Error("No implementation");
     }