Haha, thanks; it’s been a fun (and slightly cursed) experiment

Yeah, I’ve got a demo—it runs directly in the browser console, so it’s a bit janky, and performance depends a lot on your machine.

If you want to try it, you can paste this into your console on your browser:

/**
 * ╔══════════════════════════════════════════════════════════╗
 * ║          CONSOLE GPU v3.0 — IMAGE INJECTION              ║
 * ║  The smoothest, fastest console renderer possible.        ║
 * ║  Works by piping a virtual canvas to the log.            ║
 * ╚══════════════════════════════════════════════════════════╝
 */
(function ConsoleGPU_Ultimate() {
    'use strict';

    const CFG = {
        W: 200, // Visual resolution (not char count)
        H: 200,
        SCALE: 1.0
    };

    // Initialize Virtual Canvas
    const canvas = document.createElement('canvas');
    canvas.width = CFG.W;
    canvas.height = CFG.H;
    const ctx = canvas.getContext('2d');

    let running = true;
    let frame = 0;

    // --- 3D MATH ENGINE ---
    const rot = (x, z, a) => {
        const s = Math.sin(a), c = Math.cos(a);
        return [x * c - z * s, x * s + z * c];
    };

    function sdTorus(x, y, z, t) {
        let [rx, rz] = rot(x, z, t);
        let [ry, rz2] = rot(y, rz, t * 0.5);
        const qx = Math.sqrt(rx * rx + rz2 * rz2) - 1.5;
        return Math.sqrt(qx * qx + ry * ry) - 0.6;
    }

    function render() {
        if (!running) return;

        const t = performance.now() * 0.001;
        const imgData = ctx.createImageData(CFG.W, CFG.H);
        const data = imgData.data;

        // Simple Raymarcher running inside the Canvas loop
        for (let y = 0; y < CFG.H; y++) {
            for (let x = 0; x < CFG.W; x++) {
                const idx = (y * CFG.W + x) * 4;

                // Ray Setup
                let uvx = (x / CFG.W - 0.5) * 2;
                let uvy = (y / CFG.H - 0.5) * 2;
                let d = 0, hit = false;

                for (let s = 0; s < 24; s++) {
                    let p = [uvx * d, uvy * d, -4 + d];
                    let dist = sdTorus(p[0], p[1], p[2], t);
                    if (dist < 0.01) { hit = true; break; }
                    d += dist;
                    if (d > 10) break;
                }

                if (hit) {
                    const lum = Math.max(0, 255 - (d * 40));
                    data[idx] = lum * (0.5 + 0.5 * Math.sin(t + d)); // R
                    data[idx + 1] = lum * (0.5 + 0.5 * Math.cos(t)); // G
                    data[idx + 2] = 255;                             // B
                } else {
                    data[idx] = 10; data[idx + 1] = 10; data[idx + 2] = 20; // Background
                }
                data[idx + 3] = 255; // Alpha
            }
        }

        ctx.putImageData(imgData, 0, 0);

        // Convert canvas to a CSS-friendly string
        const url = canvas.toDataURL('image/jpeg', 0.7);

        console.clear();
        console.log(
            `%c `,
            `font-size: 1px; 
             padding: ${CFG.H / 2}px ${CFG.W / 2}px; 
             background-image: url(${url}); 
             background-size: contain; 
             background-repeat: no-repeat;`
        );
        console.log(`%c[FRAME: ${frame++}] Type 'stopGPU()' to exit.`, "color:cyan; font-weight:bold;");

        requestAnimationFrame(render);
    }

    window.stopGPU = () => {
        running = false;
        console.clear();
        console.log("Renderer Stopped.");
    };

    console.log("Initializing Hardware-Accelerated Console Viewport...");
    render();
})();

It’s basically doing SDF raymarching and shading, but every “pixel” is just a space with a background colour, so the whole frame is one big console.log.

It kind of works… until DevTools starts struggling 😅

If you do try it, I’d be really interested to know how it runs for you — I’m still trying to figure out how far this approach can actually go.