xordev_shader_port.js

// install `npm i tela.js`
import { loop, Color, Window } from "tela.js/src/index.node.js";

// Port from https://x.com/XorDev/status/1894123951401378051
const width = 640;
const height = 480;
const window = Window.ofSize(width, height);
window.setWindowSize(width, height);

loop(async ({ dt, time }) => {
    window.setTitle(`FPS: ${(1 / dt).toFixed(2)}`);
    const resultCanvas = await window.mapParallel((x, y, { width, height, time }) => {
        // Output variables (float)
        let O_r = 0.0, O_g = 0.0, O_b = 0.0, O_a = 0.0; // Output color components

        // 1. Normalized Coordinates (p) and Setup
        let p_x = (x * 2.0 - width) / height;
        let p_y = (y * 2.0 - height) / height;

        // Calculate the squared distance (dot(p, p))
        const D = p_x * p_x + p_y * p_y;

        // Distortion magnitude (L_mag) and initial tracker (L_x, L_y)
        const L_mag = Math.abs(0.7 - D);
        let L_x = L_mag; // l+=abs(.7-dot(p,p)) sets both L_x and L_y
        let L_y = L_mag;

        // Initial Iterated Vector (v)
        let K = (1.0 - L_x) / 0.2;
        let v_x = p_x * K;
        let v_y = p_y * K;

        // 2. Iteration Loop (i=1 to 8)
        for (let i = 1.0; i <= 8.0; i += 1.0) {
            // Cosine Noise (v+=cos(v.yx*i+vec2(0,i)+t)/i+.7)

            // v_x component update (uses previous v_y)
            let N_x = Math.cos(v_y * i + 0.0 + time) / i + 0.7;
            // v_y component update (uses previous v_x)
            let N_y = Math.cos(v_x * i + i + time) / i + 0.7;

            v_x = v_x + N_x;
            v_y = v_y + N_y;

            // Color Accumulation (o+=(sin(v.xyyx)+1.)*abs(v.x-v.y)*.2)
            let C_factor = Math.abs(v_x - v_y) * 0.2;

            // R and A components (sin(v.x))
            let S_x = Math.sin(v_x);
            // G and B components (sin(v.y))
            let S_y = Math.sin(v_y);

            O_r = O_r + (S_x + 1.0) * C_factor;
            O_g = O_g + (S_y + 1.0) * C_factor;
            O_b = O_b + (S_y + 1.0) * C_factor;
            O_a = O_a + (S_x + 1.0) * C_factor;
        }

        // 3. Final Color Mapping
        // o=tanh(exp(p.y*vec4(1,-1,-2,0))*exp(-4.*l.x)/o)

        // Radial Mask (exp(-4.*l.x))
        const E_mask = Math.exp(-4.0 * L_x);

        // Final Calculation for each channel
        O_r = Math.tanh((Math.exp(p_y * 1.0) * E_mask) / O_r);
        O_g = Math.tanh((Math.exp(p_y * -1.0) * E_mask) / O_g);
        O_b = Math.tanh((Math.exp(p_y * -2.0) * E_mask) / O_b);
        // Alpha channel vector component is 0, so exp(p_y * 0) = 1.0
        O_a = Math.tanh((1.0 * E_mask) / O_a);

        return Color.ofRGB(O_r, O_g, O_b, O_a);
    })
        .run({ width, height, time });
    resultCanvas.paint();
}).play();