import { lerp2 } from './utils';

export function makeRgbLerpPic(ctx: CanvasRenderingContext2D) {
    const width = ctx.canvas.width;
    const height = ctx.canvas.height;
    const imageData = ctx.createImageData(width, height); 
    const col1 = new Uint8ClampedArray([0xFF, 0x0, 0x0, 0xFF]);
    const col2 = new Uint8ClampedArray([0x0, 0xFF, 0x0, 0xFF]);
    const col3 = new Uint8ClampedArray([0x0, 0x0, 0xFF, 0xFF]);

    for (let i = 0; i < imageData.data.length; i += 4) {
        const pixel = i / 4;
        const xcoord = pixel % width;
        const xlerp = xcoord / width;
        const ylerp = (pixel - xcoord) / width / height;
        imageData.data[i] = lerp2(col1[0], col2[0], xlerp, col3[0], ylerp);
        imageData.data[i + 1] = lerp2(col1[1], col2[1], xlerp, col3[1], ylerp);
        imageData.data[i + 2] = lerp2(col1[2], col2[2], xlerp, col3[2], ylerp);
        imageData.data[i + 3] = lerp2(col1[3], col2[3], xlerp, col3[3], ylerp);
    }

    ctx.putImageData(imageData, 0, 0);
}

const CUBE_POINTS = [
     [ 1, -1, -5], 
     [ 1, -1, -3], 
     [ 1,  1, -5], 
     [ 1,  1, -3], 
     [-1, -1, -5], 
     [-1, -1, -3], 
     [-1,  1, -5], 
     [-1,  1, -3],
]; 

function circle(ctx: CanvasRenderingContext2D, x: number, y: number) {
    ctx.beginPath();
    ctx.ellipse(x, y, 5, 5, 0, 0, 2*Math.PI);
    ctx.closePath();
    ctx.fill();
}

export function threeDimCube(ctx: CanvasRenderingContext2D) {
    const width = ctx.canvas.width;
    const height = ctx.canvas.height;
    ctx.strokeStyle = "black";
    ctx.fillStyle = "black";
    ctx.lineWidth = 1;

    for (let i = 0; i < 8; i++) {
        const xProj = CUBE_POINTS[i][0] / -CUBE_POINTS[i][2];
        const yProj = CUBE_POINTS[i][1] / -CUBE_POINTS[i][2];
        const xProjRemap = (1 + xProj) / 2; 
        const yProjRemap = (1 + yProj) / 2; 
        const xProjPix = xProjRemap * width; 
        const yProjPix = yProjRemap * height; 
        circle(ctx, xProjPix, yProjPix);
    }
}