script.js

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d"); // -- Give 2D drawing API

function lerp(a, b, t){
    return (a + (b - a) * t);
}

async function loadOBJ(url){
    const response = await fetch(url);
    const text = await response.text();

    const points = [];
    const faces = [];

    text.split("\n").forEach(function (line){
        line = line.trim();
        if (line.startsWith("v ")) {
            //Vertex lines
            const [_, x, y, z] = line.split(/\s+/);
            points.push({x: parseFloat(x), y: parseFloat(y), z: parseFloat(z)});
        } else if (line.startsWith("f ")) {
            // Face Lines
            const [_, ...indices] = line.split(/\s+/);
            // OBJ indices are 1-based, so subtract 1
            faces.push(indices.map(i => parseInt(i.split("/")[0], 10) - 1))
        }
    })
    return { points, faces };
}

async function loadLettering(url) {
    const response = await fetch(url);
    const text = await response.text();
    
    const lines = text.trim().split("\n");

    const letters = {};

    for (const line of lines) {
        const parts = line.trim().split(/\s+/);
        const values = parts.slice(0, 20).map(Number); // first 20 values
        const char = parts[20]; // last token is the character

        const coords = [];
        for (let i = 0; i < values.length; i++) {
            if (values[i] === 1) {
                const x = i % 4;
                const y = Math.floor(i / 4);
                coords.push({ x, y });
            }
        }

        letters[char] = coords;
    }

    return letters;
}

function textToPoints(text, letters) {
    const result = [];
    let offsetX = 0;
    let fontSize = .2;

    for (const char of text) {
        const coords = letters[char] || [];

        // Apply offset to each coordinate
        for (const { x, y } of coords) {
            result.push({ x: (x + offsetX)*fontSize, y: y*-fontSize, z: 1});
        }

        // Advance offset: 4 columns per letter + 1 space
        offsetX += 5;
    }

    return result;
}

async function init(text) {
    const lettering = await loadLettering("lettering.txt");
    return textToPoints(text, lettering);
}

// Rendering Variables

const size = canvas.width/ 150;
const camDist = 10;
const vertMode = false;
const fog = true;
let fogDist = 9.5;
let alpha = 0;

/* Cube Data 
const points = [
    {x: 0.25, y: 0.25, z: -.25},
    {x: -.25, y: 0.25, z: -.25},
    {x: -.25, y: -.25, z: -.25},
    {x: 0.25, y: -.25, z: -.25},
    {x: 0.25, y: 0.25, z: .25},
    {x: -.25, y: 0.25, z: .25},
    {x: -0.25, y: -0.25, z: .25},
    {x: 0.25, y: -0.25, z: .25}
]

const faces = [
    [0,1,2,3],
    [4,5,6,7],
    [0,1,5,4],
    [2,3,7,6],
    [1,2,6,5],
    [0,3,7,4]
]

*/


class GameObject {
    constructor(type = "GameObject", isActive = true, points = [], faces = [], position = {x:0, y:0, z:0}, vertMode = false) {
        this.type = type;
        this.isActive = isActive;
        this.points = points;
        this.faces = faces;
        this.position = position;
    }

    static async create(url) {
        const { points, faces } = await loadOBJ(url);
        return new GameObject("GameObject", true, points, faces);
    }
}

class Text {
    constructor(type = "Text", isActive = true, text = "", points = [], position = {x:0, y:0, z:0}) {
        this.type = type;
        this.isActive = isActive;
        this.points = points;
        this.text = text;
        this.position = position;
        this.vertMode = vertMode;
    }   

    static async create(text) {
        const points = await init(text);
        return new Text("Text", true, text, points);
    }
}


function rotate(points, angle){
    for (let i = 0; i< points.length; i++){
    const x = points[i].x; 
    const z = points[i].z;
 
    points[i].x = x * Math.cos(angle) - z * Math.sin(angle);
    points[i].z = x * Math.sin(angle) + z * Math.cos(angle);
    }
}

// -1...1 -> 0...CanvasWidth
function worldToCanvas({x, y, z} , {x:dx, y:dy, z:dz}) {
    
    const X = x + dx;
    const Y = y + dy;
    const Z = z + dz;

    return {
        x: (X/(Z+camDist) + 1) * canvas.width / 2,
        y: (1-Y/(Z+camDist)) * canvas.height /2
    }
}

function draw(object) {
    const points = object.points;
    const faces = object.faces;
    const type = object.type;
    
    
    if (vertMode || type == "Text") {
        for (let i = 0; i < points.length; i++) { // For each point...
            const pos = worldToCanvas(points[i], object.position);
            if (type == "Text") {
                alpha = 1;
            } else if (fog) {
                alpha = 1 - (points[i].z + camDist - 1) / fogDist;
            } else {
                alpha = 1;
            }
            ctx.fillStyle = "rgba(144, 238, 144, " + alpha + ")";
            ctx.fillRect(pos.x, pos.y, size*4-(points[i].z*7), size*4-(points[i].z*7));
        }
    } else if (type == "GameObject"){
        for (let i = 0; i < faces.length; i++) // For each face...
        {
            ctx.beginPath();
            const first = worldToCanvas(points[faces[i][0]], object.position);
            ctx.moveTo(first.x, first.y);
            if (fog) { 
                alpha = 1 - (points[faces[i][0]].z + camDist - 1) / fogDist;
            } else {
                alpha = .25;
            }
            for (let j = 0; j < faces[i].length; j++) {
                const pos = worldToCanvas(points[faces[i][j]], object.position);
                ctx.lineTo(pos.x, pos.y)
            }

            ctx.closePath();
            ctx.strokeStyle = "rgba(144, 238, 144, " + alpha + ")";
            ctx.stroke();

            ctx.fillStyle = "rgba(144,238,144, " + alpha + ")";
            ctx.fill();
        }
    }
}

function clear() {
    ctx.fillStyle = "#101310";
    ctx.fillRect(0, 0, canvas.width, canvas.height); // Clear the canvas
}

// Game Data


const heirarchy = [];



// On Start (First Frame)

(async () => {
    const titleText = await Text.create("-jsobj-");
    const susanne = await GameObject.create("Monkey.obj");

    window.titleText = titleText;
    window.susanne = susanne;
    heirarchy.push(titleText);
    heirarchy.push(susanne);

    window.susanne.position = {x:0, y:-.25, z:-7.75};
    window.titleText.position = {x:-3.25, y:5, z:-3};
})();


// Update Loop (30 FPS)

function update() {
    
    clear()
    for (let i = 0; i < heirarchy.length; i++) {
        if (heirarchy[i].isActive) {
            draw(heirarchy[i]);
            rotate(window.susanne.points, 0.01);
        }
    }
}

setInterval(update, 1000 / 30);

// To run server in python, run "python -m http.server 8080" in the terminal and type http://localhost:8080 into the browser.