tp1_projection_3D.js

const canvas = document.querySelector('canvas#drawing');
const ctx = canvas.getContext('2d');

/**
 * Positions des sommets du cube
 * Cube centré sur 0,0,0 de hauteur, largeur, profondeur de 1
 */
const positions = [
    -0.5, -0.5, -0.5, 0.5, -0.5, -0.5,
    0.5, 0.5, -0.5, -0.5, 0.5, -0.5,
    -0.5, -0.5, 0.5, 0.5, -0.5, 0.5,
    0.5, 0.5, 0.5, -0.5, 0.5, 0.5
];

const indices = [
    0, 1, 2, 0, 2, 3,  // devant
    4, 5, 6, 4, 6, 7,  // derrière
    0, 1, 5, 0, 5, 4,  // dessous
    2, 3, 7, 2, 7, 6,  // dessus
    0, 3, 7, 0, 7, 4,  // gauche
    1, 2, 6, 1, 6, 5   // droite
];


function matXVect(mat, v) {
    let result = [];
    for (let i = 0; i < mat.length; i++) {
        let sum = 0;
        for (let j = 0; j < v.length; j++) {
            sum += mat[i][j] * v[j];
        }
        result.push(sum);
    }
    return result;
}

function transformerVecteurParMatrice(matrice, vecteur) {
    return matXVect(matrice, vecteur);
}

const worldMat = [
    [0.5, 0.5, -0.7071067690849304, 0],
    [-0.8535534143447876, 0.1464466154575348, -0.5, 0],
    [-0.1464466154575348, 0.8535534143447876, 0.5, 0],
    [0, 0, 0, 1]
];

const viewMat = [
    [-0.7071067690849304, -0.5, -0.5, 0],
    [0, 0.7071067690849304, -0.7071067690849304, 0],
    [0.7071067690849304, -0.5, -0.5, 0],
    [0, 0, 0, 1]
];

const projMat = [
    [2.237522602081299, 0, 0, 0],
    [0, 2.365222454071045, 0, 0],
    [0, 0, 1.0002000331878662, 1],
    [0, 0, -2.000200033187866, 0]
];

/**
 * Transformer les coordonnées des triangles
 */
function transformerCoordonneesTriangle(idx, pos, worldMat, viewMat, projMat) {
    const triangles = [];
    for (let i = 0; i < idx.length; i += 3) {
        const sommet1 = [pos[idx[i] * 3], pos[idx[i] * 3 + 1], pos[idx[i] * 3 + 2], 1];
        const sommet2 = [pos[idx[i + 1] * 3], pos[idx[i + 1] * 3 + 1], pos[idx[i + 1] * 3 + 2], 1];
        const sommet3 = [pos[idx[i + 2] * 3], pos[idx[i + 2] * 3 + 1], pos[idx[i + 2] * 3 + 2], 1];

        let t1 = transformerVecteurParMatrice(worldMat, sommet1);
        t1 = transformerVecteurParMatrice(viewMat, t1);
        t1 = transformerVecteurParMatrice(projMat, t1);

        let t2 = transformerVecteurParMatrice(worldMat, sommet2);
        t2 = transformerVecteurParMatrice(viewMat, t2);
        t2 = transformerVecteurParMatrice(projMat, t2);

        let t3 = transformerVecteurParMatrice(worldMat, sommet3);
        t3 = transformerVecteurParMatrice(viewMat, t3);
        t3 = transformerVecteurParMatrice(projMat, t3);

        triangles.push([t1, t2, t3]);
    }
    return triangles;
}

const trianglesTransformes = transformerCoordonneesTriangle(indices, positions, worldMat, viewMat, projMat);

//source: github copilot
function adapterCoordonnees(triangles) {
    return triangles.map(triangle => {
        return triangle.map(([x, y, z, w]) => {
            return [
                (x / w + 1) * 350,
                (y / w + 1) * 350
            ];
        });
    });
}

const trianglesAdapted = adapterCoordonnees(trianglesTransformes);


ctx.beginPath();
ctx.lineWidth = 2;
ctx.strokeStyle = "white";

function dessinTriangle(triangles) {
    triangles.forEach(triangle => {
        ctx.moveTo(triangle[0][0], triangle[0][1]);
        ctx.lineTo(triangle[1][0], triangle[1][1]);
        ctx.lineTo(triangle[2][0], triangle[2][1]);
        ctx.lineTo(triangle[0][0], triangle[0][1]);
    });
}

/**
 * Dessiner les triangles transformés sur le canvas
 */
dessinTriangle(trianglesAdapted);

/**
 * Finalisation du dessin
 */
ctx.stroke();