MarchingCube2D/script.js

window.addEventListener("load", () => {
    const canvas = document.getElementById("gridCanvas");
    const ctx = canvas.getContext("2d");

    // Canvas-Größe anpassen
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    // Punktabstand für das Grid
    const spacing = 32;

    let sparseWorld = {};

    let isDragging = false;
    let startX, startY;

    function drawCell(ctx, x, y, spacing, code) {
        // Code = BL BR TR TL
        switch (code) {
            case "1011":
            case "0100":
                var startX = x + spacing * 0.5;
                var startY = y + spacing;
                var endX = x + spacing;
                var endY = y + spacing * 0.5;
                ctx.moveTo(startX, startY);
                ctx.lineTo(endX, endY);
                break;
            case "1100":
                var startX = x;
                var startY = y + spacing * 0.5;
                var endX = x + spacing;
                var endY = y + spacing * 0.5;
                ctx.moveTo(startX, startY);
                ctx.lineTo(endX, endY);
                break;
            case "0111":
            case "1000":
                var startX = x;
                var startY = y + spacing * 0.5;
                var endX = x + spacing * 0.5;
                var endY = y + spacing;
                ctx.moveTo(startX, startY);
                ctx.lineTo(endX, endY);
                break;
            case "0110":
                var startX = x + spacing * 0.5;
                var startY = y;
                var endX = x + spacing * 0.5;
                var endY = y + spacing;
                ctx.moveTo(startX, startY);
                ctx.lineTo(endX, endY);
                break;
            case "1001":
                var startX = x + spacing * 0.5;
                var startY = y;
                var endX = x + spacing * 0.5;
                var endY = y + spacing;
                ctx.moveTo(startX, startY);
                ctx.lineTo(endX, endY);
                break;
            case "1101":
            case "0010":
                var startX = x + spacing * 0.5;
                var startY = y;
                var endX = x + spacing;
                var endY = y + spacing * 0.5;
                ctx.moveTo(startX, startY);
                ctx.lineTo(endX, endY);
                break;
            case "0011":
                var startX = x;
                var startY = y + spacing * 0.5;
                var endX = x + spacing;
                var endY = y + spacing * 0.5;
                ctx.moveTo(startX, startY);
                ctx.lineTo(endX, endY);
                break;
            case "1110":
            case "0001":
                var startX = x;
                var startY = y + spacing * 0.5;
                var endX = x + spacing * 0.5;
                var endY = y;
                ctx.moveTo(startX, startY);
                ctx.lineTo(endX, endY);
                break;
            case "0101":
                ctx.moveTo(x, y + spacing * 0.5);
                ctx.lineTo(x + spacing * 0.5, y);
                ctx.moveTo(x + spacing * 0.5, y + spacing);
                ctx.lineTo(x + spacing, y + spacing * 0.5);
                break;
            case "1010":
                ctx.moveTo(x, y + spacing * 0.5);
                ctx.lineTo(x + spacing * 0.5, y + spacing);
                ctx.moveTo(x + spacing * 0.5, y);
                ctx.lineTo(x + spacing, y + spacing * 0.5);

                break;
            case "0000":
            case "1111":
            default: return;
        }
    }

    function drawPoint(ctx, x, y, color = "#000", size = 1) {
        ctx.fillStyle = color;
        ctx.fillRect(x, y, size, size);
    }

    function drawGrid(grid) {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        ctx.strokeStyle = "#888";
        ctx.lineWidth = 1;

        // Vertikale Linien zeichnen
        //for (let x = spacing; x < canvas.width; x += spacing) {
        //  ctx.beginPath();
        //  ctx.moveTo(x, 0);
        //  ctx.lineTo(x, canvas.height);
        //  ctx.stroke();
        //}

        // Horizontale Linien zeichnen
        //for (let y = spacing; y < canvas.height; y += spacing) {
        //  ctx.beginPath();
        //  ctx.moveTo(0, y);
        //  ctx.lineTo(canvas.width, y);
        //  ctx.stroke();
        //}

        // Punkte zeichnen
        var maxWidth = Math.floor(canvas.width / spacing);
        var maxHeight = Math.floor(canvas.height / spacing);
        for (let y2 = 0; y2 < maxHeight; y2 += 1) {
            for (let x2 = 0; x2 < maxWidth; x2 += 1) {
                var color = "#000";
                if (saveAccessArray(grid, y2, x2) === 1) {
                    color = "#FF0000"
                }
                drawPoint(ctx, x2 * spacing, y2 * spacing, color, 2);
            }
        }

        ctx.beginPath();
        for (let y2 = 0; y2 < maxHeight; y2 += 1) {
            for (let x2 = 0; x2 < maxWidth; x2 += 1) {
                var tl = saveAccessArray(grid, y2, x2);
                var tr = saveAccessArray(grid, y2, x2 + 1);
                var bl = saveAccessArray(grid, y2 + 1, x2);
                var br = saveAccessArray(grid, y2 + 1, x2 + 1);
                var code = "" + bl + "" + br + "" + tr + "" + tl;
                drawCell(ctx, x2 * spacing, y2 * spacing, spacing, code)
            }
        }
        ctx.stroke();
    }

    function saveAccessArray(sparseWorld, indexA, indexB) {
        var accesor = "X" + indexA + "Y" + indexB;
        var ret = sparseWorld[accesor];
        if (ret === undefined) {
            return 0;
        }
        return 1;
    }

    function saveSetArray(sparseWorld, indexA, indexB, value) {
        var accesor = "X" + indexA + "Y" + indexB;
        sparseWorld[accesor] = value;
        drawGrid(sparseWorld);
    }

    // Bei Größenänderungen des Fensters das Grid neu zeichnen
    window.addEventListener("resize", () => {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        drawGrid(sparseWorld);
    });

    //window.addEventListener("click", (event) => {
    //    const x = Math.round(event.clientX / spacing);
    //    const y = Math.round(event.clientY / spacing);
    //    saveSetArray(y,x, 1);
    //    console.log(`Koordinaten: (${x}, ${y})`);
    //});

    canvas.addEventListener("mousedown", (event) => {
        isDragging = true;
        startX = event.clientX;
        startY = event.clientY;
    });

    canvas.addEventListener("mousemove", (event) => {
        if (isDragging) {
            const currentX = event.clientX;
            const currentY = event.clientY;

            const deltaX = currentX - startX;
            const deltaY = currentY - startY;

            // Verarbeite das Dragging hier (z. B. zeichne etwas in Canvas)
            const x = Math.round(currentX / spacing);
            const y = Math.round(currentY / spacing);
            console.log("Values: " + x + " " + y )
            saveSetArray(sparseWorld, y, x, 1);

            startX = currentX;
            startY = currentY;
        }
    });

    canvas.addEventListener("mouseup", () => {
        isDragging = false;
    });

    // Grid beim Laden der Seite zeichnen
    drawGrid(sparseWorld);
});