webgl_game/src/js/draw.ts

import { Vec3, Vec2, Color } from "./common.js"
import { Graphics, Texture } from "./graphics.js";

export function drawTriangle(gfx: Graphics, positions: [Vec2, Vec2, Vec2], color: Color) {
    const a_position = gfx.getAttribute("a_position");
    const a_color = gfx.getAttribute("a_color");

    const points: Array<number> = [
        positions[0].x, positions[0].y,
        positions[1].x, positions[1].y,
        positions[2].x, positions[2].y,
    ]

    const colors: Array<number[]> = [
        color,
        color,
        color,
    ];

    a_position.data(gfx.ctx, points, gfx.ctx.STATIC_DRAW);
    a_color.data(gfx.ctx, colors.flat(), gfx.ctx.STATIC_DRAW);
    gfx.ctx.drawArrays(gfx.ctx.TRIANGLES, 0, 3);
}

export function drawTriangleExts(gfx: Graphics, position: Vec3, exts: Vec2, color: Color) {
    const a_position = gfx.getAttribute("a_position");
    const a_color = gfx.getAttribute("a_color");

    const points: Array<number> = [
        position.x, position.y, position.z,
        position.x + exts.x, position.y, position.z,
        position.x, position.y + exts.y, position.z,
    ]

    const colors: Array<number[]> = [
        color,
        color,
        color,
    ];

    a_position.data(gfx.ctx, points, gfx.ctx.STATIC_DRAW);
    a_color.data(gfx.ctx, colors.flat(), gfx.ctx.STATIC_DRAW);
    gfx.ctx.drawArrays(gfx.ctx.TRIANGLES, 0, 3);
}

export function drawRectangle(gfx: Graphics, corners: [Vec3, Vec3, Vec3, Vec3], color: Color | Texture) {
    const a_position = gfx.getAttribute("a_position");

    const points: Array<number> = [
        corners[0].x, corners[0].y, corners[0].z, 
        corners[1].x, corners[1].y, corners[1].z, 
        corners[3].x, corners[3].y, corners[3].z, 

        corners[2].x, corners[2].y, corners[2].z, 
        corners[1].x, corners[1].y, corners[1].z, 
        corners[3].x, corners[3].y, corners[3].z,

    ]

    if (color instanceof Texture) {
        const a_tex_position = gfx.getAttribute("a_tex_position");
        
        const uv: Array<number> = [
            0.0, 0.0,
            -1.0, 0.0,
            0.0, -1.0,
            -1.0, -1.0,
            -1.0, 0.0,
            0.0, -1.0,
        ];

        a_position.data(gfx.ctx, points, gfx.ctx.STATIC_DRAW);
        a_tex_position.data(gfx.ctx, uv, gfx.ctx.STATIC_DRAW);
        color.bind(gfx);
        gfx.ctx.drawArrays(gfx.ctx.TRIANGLES, 0, 6);
        color.unbind(gfx);
    } else {
        const a_color = gfx.getAttribute("a_color");

        const colors: Array<number[]> = new Array(6);
        colors.fill(color);

        a_position.data(gfx.ctx, points, gfx.ctx.STATIC_DRAW);
        a_color.data(gfx.ctx, colors.flat(), gfx.ctx.STATIC_DRAW);
        gfx.ctx.drawArrays(gfx.ctx.TRIANGLES, 0, 6);
    }

}

export function drawIsometricCube(gfx: Graphics, position: Vec3, exts: Vec3, color: Color | Texture) {
    let points = [
        position,
        new Vec3(position.x, position.y + exts.y, position.z),
        new Vec3(position.x + exts.x, position.y, position.z),
        new Vec3(position.x + exts.x, position.y + exts.y, position.z),
        new Vec3(position.x + 1.5 * exts.x, position.y - 0.5 * exts.y, position.z + 0.25 * exts.z),
        new Vec3(position.x + 1.5 * exts.x, position.y + 0.5 * exts.y, position.z + 0.25 * exts.z),
        new Vec3(position.x + 0.5 * exts.x, position.y - 0.5 * exts.y, position.z + 0.25 * exts.z),
    ];

    drawRectangle(
        gfx, 
        [
            points[0],
            points[1],
            points[3],
            points[2],
        ],
        color);

    drawRectangle(
        gfx, 
        [
            points[3],
            points[2],
            points[4],
            points[5],
        ],
        color);

    drawRectangle(
        gfx, 
        [
            points[0],
            points[2],
            points[4],
            points[6],
        ],
        color);
}

export function drawRectangleExts(gfx: Graphics, position: Vec3, exts: Vec2, color: Color | Texture) {
    const a_position = gfx.getAttribute("a_position");

    const points: Array<number> = [
        position.x, position.y, position.z,
        position.x + exts.x, position.y, position.z,
        position.x, position.y + exts.y, position.z,
        
        position.x + exts.x, position.y + exts.y, position.z,
        position.x + exts.x, position.y, position.z,
        position.x, position.y + exts.y, position.z,
    ]

    if (color instanceof Texture) {
        const a_tex_position = gfx.getAttribute("a_tex_position");
        
        const uv: Array<number> = [
            0.0, 0.0,
            -1.0, 0.0,
            0.0, -1.0,
            -1.0, -1.0,
            -1.0, 0.0,
            0.0, -1.0,
        ];

        a_position.data(gfx.ctx, points, gfx.ctx.STATIC_DRAW);
        a_tex_position.data(gfx.ctx, uv, gfx.ctx.STATIC_DRAW);
        color.bind(gfx);
        gfx.ctx.drawArrays(gfx.ctx.TRIANGLES, 0, 6);
        color.unbind(gfx);
    } else {
        const a_color = gfx.getAttribute("a_color");

        const colors: Array<number[]> = new Array(6);
        colors.fill(color);

        a_position.data(gfx.ctx, points, gfx.ctx.STATIC_DRAW);
        a_color.data(gfx.ctx, colors.flat(), gfx.ctx.STATIC_DRAW);
        gfx.ctx.drawArrays(gfx.ctx.TRIANGLES, 0, 6);
    }

}

export function drawCircle(gfx: Graphics, position: Vec2, radius: number, color: Color) {
    const points: Array<Vec2> = new Array<Vec2>();

    const precision = 40;
    const angle = 2.0*Math.PI/precision;
    let a = 0;
    for (let i = 0; i < precision; ++i) {
        var vec = Vec2.angle(a);
        vec.mult(radius);
        a += angle;
        points.push(vec);
    }

    for (let i = 0; i < points.length; i++) {
        const current = points[i];
        const next = points[(i + 1) % points.length];
        let center = position;
        drawTriangle(gfx, [center, center.addNew(current), center.addNew(next)], color);
    }
}

export function drawLine(gfx: Graphics, A: Vec2, B: Vec2, color: Color) {
    const a_position = gfx.getAttribute("a_position");
    const a_color = gfx.getAttribute("a_color");

    let points: Array<number> = [
        A.x, A.y,
        B.x, B.y,
    ];

    const colors: Array<number[]> = [
        color,
        color,
    ];

    a_position.data(gfx.ctx, points, gfx.ctx.STATIC_DRAW);
    a_color.data(gfx.ctx, colors.flat(), gfx.ctx.STATIC_DRAW);
    gfx.ctx.drawArrays(gfx.ctx.LINES, 0, 2);
}