Matrix operators and transformations

Author: Sekqies

devlog.md

@@ -1,15 +0,0 @@
-To start, let me explain what this project is about: we want to render images without the `<img>` and `<canvas>` tags, _and_ without CSS. Because it's hilarious to do so.
-
-The immediate idea that came to mind is transforming an W x H image into a correspoding W x H `<table>` element, where each `<td>` is a 1x1 pixel (or larger, if we want to do make-believe responsivity). A little research showed that this was technically possible, and that's good enough.
-Basically, we just have to set the `cellpadding` and `cellspacing` properties of the table element to 0, and all of its `td` elements with whatever we want, and boom: we've got an image! 
-
-Now, of course this method will have terrible performance (the DOM wasn't made for rendering thousands of elements, and all drawing is done in the CPU), so we have to do our best to make it usable. My solution, for the time being, is creating the table as a string, and then sending it to the DOM to be parsed and rendered only once. There are alternatives, but we're scraping pennies: actually _drawing_ this to the DOM is the main timesink.
-
-On a sidenote, I forgot how much I disliked doing javascript. Starting out I didn't want to use node or any other "build system", since the project is simple enough, but using raw javascript is a drag (no types, it's hard to link modules to the main file, _lots_ of issue with WebGPU support in vscode, etc). So we're over-engineering this and using node and typescript. I'm all for bad UI, but I'm a little sensitive about my developer experience.
-
-Attached, an [old friend](https://flavortown.hackclub.com/projects/7848), rendered with this method in a 300x300 table.
-(Obs: About an hour of work time was lost because I was doing the project in the wrong git repository)
-
-**Commits**
-[Commit 49a515b](https://url.jam06452.uk/1jvo9mo): Proof of concept done
-[Commit bd885d1](https://url.jam06452.uk/1efmviq): Proof of concept with image data

src/cpu/image.ts src/image.tssrc/cpu/image.ts renamed to src/image.ts

@@ -1,5 +1,5 @@
-import { build_color_table, build_color_text } from "./cpu/transformer";
-import { generate_trash_data } from "./cpu/image";
+import { build_color_table, build_color_text } from "./transformer";
+import { generate_trash_data } from "./image";
 
 
 export function main(){

src/main.ts

@@ -0,0 +1,221 @@
+import { ArrayType, mat2, mat3, mat4, vec2, vec3, vec4 } from "./types";
+
+export function dot(u:ArrayType, v:ArrayType):number{
+    let result = 0;
+    for(let i = 0; i < u.length; ++i){
+        result += u[i] * v[i];
+    }
+    return result;
+}
+
+export function dot_vec2(u:vec2, v:vec2):number{
+    return u[0] * v[0] + u[1] * v[1];
+}
+
+export function dot_vec3(u:vec3, v:vec3):number{
+    return u[0] * v[0] + u[1] * v[1] + u[2] * v[2];
+}
+
+export function cross(u:vec3, v:vec3):vec3{
+    return vec3(u[1]*v[2] - u[2]*v[1], u[2] * v[0] - u[0] * v[2], u[0] * v[1] - u[1] * v[0]);
+}
+
+export function dot_vec4(u:vec4, v:vec4){
+    return u[0] * v[0] + u[1] * v[1] + u[2] * v[2] + u[3] * v[3];
+}
+
+export function mul_mat2(A: mat2, B: mat2): mat2 {
+    return mat2(
+        A[0] * B[0] + A[2] * B[1],
+        A[1] * B[0] + A[3] * B[1],
+        A[0] * B[2] + A[2] * B[3], 
+        A[1] * B[2] + A[3] * B[3]  
+    );
+}
+
+export function mul_mat3(A: mat3, B: mat3): mat3 {
+    return mat3(
+        A[0] * B[0] + A[3] * B[1] + A[6] * B[2],
+        A[1] * B[0] + A[4] * B[1] + A[7] * B[2],
+        A[2] * B[0] + A[5] * B[1] + A[8] * B[2],
+
+        A[0] * B[3] + A[3] * B[4] + A[6] * B[5],
+        A[1] * B[3] + A[4] * B[4] + A[7] * B[5],
+        A[2] * B[3] + A[5] * B[4] + A[8] * B[5],
+
+        A[0] * B[6] + A[3] * B[7] + A[6] * B[8],
+        A[1] * B[6] + A[4] * B[7] + A[7] * B[8],
+        A[2] * B[6] + A[5] * B[7] + A[8] * B[8]
+    );
+}
+
+export function mul_mat4(A: mat4, B: mat4): mat4 {
+    return mat4(
+        A[0] * B[0] + A[4] * B[1] + A[8] * B[2] + A[12] * B[3],
+        A[1] * B[0] + A[5] * B[1] + A[9] * B[2] + A[13] * B[3],
+        A[2] * B[0] + A[6] * B[1] + A[10] * B[2] + A[14] * B[3],
+        A[3] * B[0] + A[7] * B[1] + A[11] * B[2] + A[15] * B[3],
+
+        A[0] * B[4] + A[4] * B[5] + A[8] * B[6] + A[12] * B[7],
+        A[1] * B[4] + A[5] * B[5] + A[9] * B[6] + A[13] * B[7],
+        A[2] * B[4] + A[6] * B[5] + A[10] * B[6] + A[14] * B[7],
+        A[3] * B[4] + A[7] * B[5] + A[11] * B[6] + A[15] * B[7],
+
+        A[0] * B[8] + A[4] * B[9] + A[8] * B[10] + A[12] * B[11],
+        A[1] * B[8] + A[5] * B[9] + A[9] * B[10] + A[13] * B[11],
+        A[2] * B[8] + A[6] * B[9] + A[10] * B[10] + A[14] * B[11],
+        A[3] * B[8] + A[7] * B[9] + A[11] * B[10] + A[15] * B[11],
+
+        A[0] * B[12] + A[4] * B[13] + A[8] * B[14] + A[12] * B[15],
+        A[1] * B[12] + A[5] * B[13] + A[9] * B[14] + A[13] * B[15],
+        A[2] * B[12] + A[6] * B[13] + A[10] * B[14] + A[14] * B[15],
+        A[3] * B[12] + A[7] * B[13] + A[11] * B[14] + A[15] * B[15]
+    );
+}
+
+export function mul_mat2_vec2(A: mat2, u: vec2): vec2 {
+    return vec2(
+        A[0] * u[0] + A[2] * u[1], 
+        A[1] * u[0] + A[3] * u[1]  
+    );
+}
+
+export function mul_mat3_vec3(A: mat3, u: vec3): vec3 {
+    return vec3(
+        A[0] * u[0] + A[3] * u[1] + A[6] * u[2],
+        A[1] * u[0] + A[4] * u[1] + A[7] * u[2],
+        A[2] * u[0] + A[5] * u[1] + A[8] * u[2]
+    );
+}
+
+export function mul_mat4_vec4(A: mat4, u: vec4): vec4 {
+    return vec4(
+        A[0] * u[0] + A[4] * u[1] + A[8] * u[2] + A[12] * u[3],
+
+        A[1] * u[0] + A[5] * u[1] + A[9] * u[2] + A[13] * u[3],
+
+        A[2] * u[0] + A[6] * u[1] + A[10] * u[2] + A[14] * u[3],
+
+        A[3] * u[0] + A[7] * u[1] + A[11] * u[2] + A[15] * u[3]
+    );
+}
+
+export function invert_mat2(A: mat2): mat2 | null {
+    const a0 = A[0], a1 = A[1], a2 = A[2], a3 = A[3];
+    let det = a0 * a3 - a2 * a1;
+
+    if (!det) {
+        return null;
+    }
+
+    det = 1.0 / det;
+
+    return mat2(
+        a3 * det,
+        -a1 * det,
+        -a2 * det,
+        a0 * det
+    );
+}
+
+export function invert_mat3(A: mat3): mat3 | null {
+    const a00 = A[0], a01 = A[1], a02 = A[2];
+    const a10 = A[3], a11 = A[4], a12 = A[5];
+    const a20 = A[6], a21 = A[7], a22 = A[8];
+
+    const b01 = a22 * a11 - a12 * a21;
+    const b11 = -a22 * a10 + a12 * a20;
+    const b21 = a21 * a10 - a11 * a20;
+
+    let det = a00 * b01 + a01 * b11 + a02 * b21;
+
+    if (!det) {
+        return null;
+    }
+
+    det = 1.0 / det;
+
+    return mat3(
+        b01 * det,
+        (-a22 * a01 + a02 * a21) * det,
+        (a12 * a01 - a02 * a11) * det,
+        b11 * det,
+        (a22 * a00 - a02 * a20) * det,
+        (-a12 * a00 + a02 * a10) * det,
+        b21 * det,
+        (-a21 * a00 + a01 * a20) * det,
+        (a11 * a00 - a01 * a10) * det
+    );
+}
+
+export function invert_mat4(A: mat4): mat4 | null {
+    const a00 = A[0], a01 = A[1], a02 = A[2], a03 = A[3];
+    const a10 = A[4], a11 = A[5], a12 = A[6], a13 = A[7];
+    const a20 = A[8], a21 = A[9], a22 = A[10], a23 = A[11];
+    const a30 = A[12], a31 = A[13], a32 = A[14], a33 = A[15];
+
+    const b00 = a00 * a11 - a01 * a10;
+    const b01 = a00 * a12 - a02 * a10;
+    const b02 = a00 * a13 - a03 * a10;
+    const b03 = a01 * a12 - a02 * a11;
+    const b04 = a01 * a13 - a03 * a11;
+    const b05 = a02 * a13 - a03 * a12;
+    const b06 = a20 * a31 - a21 * a30;
+    const b07 = a20 * a32 - a22 * a30;
+    const b08 = a20 * a33 - a23 * a30;
+    const b09 = a21 * a32 - a22 * a31;
+    const b10 = a21 * a33 - a23 * a31;
+    const b11 = a22 * a33 - a23 * a32;
+
+    let det = b00 * b11 - b01 * b10 + b02 * b09 + b03 * b08 - b04 * b07 + b05 * b06;
+
+    if (!det) {
+        return null;
+    }
+
+    det = 1.0 / det;
+
+    return mat4(
+        (a11 * b11 - a12 * b10 + a13 * b09) * det,
+        (a02 * b10 - a01 * b11 - a03 * b09) * det,
+        (a31 * b05 - a32 * b04 + a33 * b03) * det,
+        (a22 * b04 - a21 * b05 - a23 * b03) * det,
+        (a12 * b08 - a10 * b11 - a13 * b07) * det,
+        (a00 * b11 - a02 * b08 + a03 * b07) * det,
+        (a32 * b02 - a30 * b05 - a33 * b01) * det,
+        (a20 * b05 - a22 * b02 + a23 * b01) * det,
+        (a10 * b10 - a11 * b08 + a13 * b06) * det,
+        (a01 * b08 - a00 * b10 - a03 * b06) * det,
+        (a30 * b04 - a31 * b02 + a33 * b00) * det,
+        (a21 * b02 - a20 * b04 - a23 * b00) * det,
+        (a11 * b07 - a10 * b09 - a12 * b06) * det,
+        (a00 * b09 - a01 * b07 + a02 * b06) * det,
+        (a31 * b01 - a30 * b03 - a32 * b00) * det,
+        (a20 * b03 - a21 * b01 + a22 * b00) * det
+    );
+}
+
+
+export function length(v: ArrayType): number {
+    return Math.sqrt(dot(v,v));
+}
+
+export function length_vec3(v:vec3):number{
+    return Math.sqrt(v[0]*v[0]+v[1]*v[1]+v[2]*v[2]);
+}
+
+export function normalize(v: ArrayType): void {
+    const len = length(v);
+    if (len === 0) return;
+    const inv_len = 1.0 / len;
+    for(let i = 0; i < v.length; ++i){
+        v[i] = v[i] * inv_len;
+    }
+}
+
+export function normalize_vec3(v:vec3):void{
+    const inv_len = 1.0 / length_vec3(v);
+    v[0] *= inv_len;
+    v[1] *= inv_len;
+    v[2] *= inv_len;
+}

src/math/matrix_operators.ts

@@ -0,0 +1,143 @@
+import { mat4, vec3 } from "./types";
+import { normalize_vec3, length_vec3, cross, dot_vec3 } from "./matrix_operators";
+
+export function identity(): mat4 {
+    return mat4(
+        1, 0, 0, 0,
+        0, 1, 0, 0,
+        0, 0, 1, 0,
+        0, 0, 0, 1
+    );
+}
+
+export function translate(m: mat4, v: vec3): mat4 {
+    const x = v[0], y = v[1], z = v[2];
+    const a00 = m[0], a01 = m[1], a02 = m[2], a03 = m[3];
+    const a10 = m[4], a11 = m[5], a12 = m[6], a13 = m[7];
+    const a20 = m[8], a21 = m[9], a22 = m[10], a23 = m[11];
+    const a30 = m[12], a31 = m[13], a32 = m[14], a33 = m[15];
+
+    return mat4(
+        a00, a01, a02, a03,
+        a10, a11, a12, a13,
+        a20, a21, a22, a23,
+        a00 * x + a10 * y + a20 * z + a30,
+        a01 * x + a11 * y + a21 * z + a31,
+        a02 * x + a12 * y + a22 * z + a32,
+        a03 * x + a13 * y + a23 * z + a33
+    );
+}
+
+export function scale(m: mat4, v: vec3): mat4 {
+    const x = v[0], y = v[1], z = v[2];
+    return mat4(
+        m[0] * x, m[1] * x, m[2] * x, m[3] * x,
+        m[4] * y, m[5] * y, m[6] * y, m[7] * y,
+        m[8] * z, m[9] * z, m[10] * z, m[11] * z,
+        m[12], m[13], m[14], m[15]
+    );
+}
+
+export function rotate(m: mat4, angle: number, axis: vec3): mat4 {
+    if (length_vec3(axis) < 0.000001) { return null as any; }
+
+    const n = vec3(axis[0], axis[1], axis[2]);
+    normalize_vec3(n);
+    
+    const x = n[0], y = n[1], z = n[2];
+    const s = Math.sin(angle);
+    const c = Math.cos(angle);
+    const t = 1 - c;
+
+    const a00 = m[0], a01 = m[1], a02 = m[2], a03 = m[3];
+    const a10 = m[4], a11 = m[5], a12 = m[6], a13 = m[7];
+    const a20 = m[8], a21 = m[9], a22 = m[10], a23 = m[11];
+
+    const b00 = x * x * t + c;
+    const b01 = y * x * t + z * s;
+    const b02 = z * x * t - y * s;
+    const b10 = x * y * t - z * s;
+    const b11 = y * y * t + c;
+    const b12 = z * y * t + x * s;
+    const b20 = x * z * t + y * s;
+    const b21 = y * z * t - x * s;
+    const b22 = z * z * t + c;
+
+    return mat4(
+        a00 * b00 + a10 * b01 + a20 * b02,
+        a01 * b00 + a11 * b01 + a21 * b02,
+        a02 * b00 + a12 * b01 + a22 * b02,
+        a03 * b00 + a13 * b01 + a23 * b02,
+
+        a00 * b10 + a10 * b11 + a20 * b12,
+        a01 * b10 + a11 * b11 + a21 * b12,
+        a02 * b10 + a12 * b11 + a22 * b12,
+        a03 * b10 + a13 * b11 + a23 * b12,
+
+        a00 * b20 + a10 * b21 + a20 * b22,
+        a01 * b20 + a11 * b21 + a21 * b22,
+        a02 * b20 + a12 * b21 + a22 * b22,
+        a03 * b20 + a13 * b21 + a23 * b22,
+
+        m[12], m[13], m[14], m[15]
+    );
+}
+
+export function look_at(eye: vec3, center: vec3, up: vec3): mat4 {
+    if (Math.abs(eye[0] - center[0]) < 0.000001 &&
+        Math.abs(eye[1] - center[1]) < 0.000001 &&
+        Math.abs(eye[2] - center[2]) < 0.000001) {
+        return identity();
+    }
+
+    const z = vec3(eye[0] - center[0], eye[1] - center[1], eye[2] - center[2]);
+    normalize_vec3(z);
+
+    const x = cross(up, z);
+    normalize_vec3(x);    
+    if (length_vec3(x) === 0) {
+        x[0] = 0; x[1] = 0; x[2] = 0; 
+    }
+
+    const y = cross(z, x);
+    normalize_vec3(y); 
+    
+    if (length_vec3(y) === 0) {
+        y[0] = 0; y[1] = 0; y[2] = 0;
+    }
+
+    return mat4(
+        x[0], y[0], z[0], 0,
+        x[1], y[1], z[1], 0,
+        x[2], y[2], z[2], 0,
+        -dot_vec3(x, eye),
+        -dot_vec3(y, eye),
+        -dot_vec3(z, eye),
+        1
+    );
+}
+
+export function perspective(fovy: number, aspect: number, near: number, far: number): mat4 {
+    const f = 1.0 / Math.tan(fovy / 2);
+    const nf = 1 / (near - far);
+    
+    return mat4(
+        f / aspect, 0, 0, 0,
+        0, f, 0, 0,
+        0, 0, (far + near) * nf, -1,
+        0, 0, (2 * far * near) * nf, 0
+    );
+}
+
+export function ortho(left: number, right: number, bottom: number, top: number, near: number, far: number): mat4 {
+    const lr = 1 / (left - right);
+    const bt = 1 / (bottom - top);
+    const nf = 1 / (near - far);
+    
+    return mat4(
+        -2 * lr, 0, 0, 0,
+        0, -2 * bt, 0, 0,
+        0, 0, 2 * nf, 0,
+        (left + right) * lr, (top + bottom) * bt, (far + near) * nf, 1
+    );
+}