Implement Marching cube

script.js

@@ -1,49 +1,23 @@
-/*
+// Punktabstand für das Grid
+const spacing = 32;
 
-1 1
+let array = [];
-1 1         NOTHING
+array.push([0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
+array.push([0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
+array.push([0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
+array.push([0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
+array.push([0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
+array.push([0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
+array.push([0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
+array.push([0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
+array.push([0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
+array.push([0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
+array.push([0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
+array.push([0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
+array.push([0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
+array.push([0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
+array.push([0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
 
-1 0
-1 1         \
-
-1 1
-0 1         \
-
-0 0
-1 1         _
-
-1 1         --
-0 0
-
-1 0
-1 0         |
-
-0 1             |
-0 1
-
-0 0
-0 1         NOTHING
-
-0 1
-0 0         NOTHING
-
-1 0
-0 0         NOTHING
-
-0 0
-1 0         NOTHING
-
-*/
-
-class Point2D
-{
-    constructor(x, y, isActive)
-    {
-        this.x = x;
-        this.y = y;
-        this.IsActive = isActive;
-    }
-}
 
 window.addEventListener("load", () => {
     const canvas = document.getElementById("gridCanvas");
@@ -52,76 +26,130 @@ window.addEventListener("load", () => {
     // Canvas-Größe anpassen
     canvas.width = window.innerWidth;
     canvas.height = window.innerHeight;
+
+    let isDragging = false;
+    let startX, startY;
   
-    // Punktabstand für das Grid
+    function drawCell(ctx, x, y, spacing, code)
-    const spacing = 32;
+    {
-    let array = [];
+        // Code = BL BR TR TL
-    array.push([0, 0, 0, 0, 0, 0, 0]);
+        switch(code)
-    array.push([0, 0, 0, 1, 0, 0, 0]);
+        {
-    array.push([0, 0, 0, 1, 0, 0, 0]);
+            case "1011":
-    array.push([0, 1, 0, 1, 0, 0, 0]);
+            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 drawAlgo(ctx, tl, tr, bl, br, color = "#000", size = 1)
-    {
-        ctx.fillStyle = color;
-        if(tl !== undefined && br !== undefined)
-        {
-            if(tl.IsActive && br.IsActive)
-            {
-                ctx.moveTo(tl.X, tl.Y);
-                ctx.lineTo(br.X, br.Y);
-                return;
-            } 
-        }
-        if(tl !== undefined && tr !== undefined)
-        {
-            if(tl.IsActive && tr.IsActive)
-            {
-                ctx.moveTo(tl.X, tl.Y);
-                ctx.lineTo(tr.X, tr.Y);
-                return;
-            } 
-        }
-        if(bl !== undefined && br !== undefined)
-        {
-            if(bl.IsActive && br.IsActive)
-            {
-                ctx.moveTo(bl.X, bl.Y);
-                ctx.lineTo(br.X, br.Y);
-                return;
-            }
-        }
-    }
-
 
     function drawGrid(grid) {
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
-  
+
-      ctx.strokeStyle = "#888";
+    ctx.strokeStyle = "#888";
-      ctx.lineWidth = 1;
+    ctx.lineWidth = 1;
-  
+
-      // Vertikale Linien zeichnen
+    // Vertikale Linien zeichnen
-      //for (let x = spacing; x < canvas.width; x += spacing) {
+    //for (let x = spacing; x < canvas.width; x += spacing) {
-      //  ctx.beginPath();
+    //  ctx.beginPath();
-      //  ctx.moveTo(x, 0);
+    //  ctx.moveTo(x, 0);
-      //  ctx.lineTo(x, canvas.height);
+    //  ctx.lineTo(x, canvas.height);
-      //  ctx.stroke();
+    //  ctx.stroke();
-      //}
+    //}
-  
+
-      // Horizontale Linien zeichnen
+    // Horizontale Linien zeichnen
-      //for (let y = spacing; y < canvas.height; y += spacing) {
+    //for (let y = spacing; y < canvas.height; y += spacing) {
-      //  ctx.beginPath();
+    //  ctx.beginPath();
-      //  ctx.moveTo(0, y);
+    //  ctx.moveTo(0, y);
-      //  ctx.lineTo(canvas.width, y);
+    //  ctx.lineTo(canvas.width, y);
-      //  ctx.stroke();
+    //  ctx.stroke();
-      //}
+    //}
-  
+
-      // Punkte zeichnen
+    // Punkte zeichnen
         //for (let x = spacing; x < canvas.width; x += spacing) {
         //    for (let y = spacing; y < canvas.height; y += spacing) {
         //        drawPoint(ctx, x, y, "#000", 2);
@@ -129,34 +157,110 @@ window.addEventListener("load", () => {
         //}
 
 
-        for (let y2 = 0; y2 < array.length; y2 += 1)
+        for (let y2 = 0; y2 < grid.length; y2 += 1)
         {
-            for (let x2 = 0; x2 < array[y2].length; x2 += 1)
+            for (let x2 = 0; x2 < grid[y2].length; x2 += 1)
             {
-                drawPoint(ctx, x2 * spacing, y2 * spacing, "#000", 2);
+                var color = "#000";
+                if(grid[y2][x2])
+                {
+                    color = "#FF0000"
+                }
+                drawPoint(ctx, x2 * spacing, y2 * spacing, color, 2);
             }
         }
 
-        for (let y2 = 0; y2 < array.length; y2 += 1)
+        ctx.beginPath();
+        for (let y2 = 0; y2 < grid.length; y2 += 1)
         {
-            for (let x2 = 0; x2 < array[y2].length; x2 += 1)
+            for (let x2 = 0; x2 < grid[y2].length; x2 += 1)
             {
-                var tl = new Point2D(x2 * spacing, y2 * spacing, array[y2][x2]);
+                var tl = saveAccessArray(grid, y2, x2);
-                var tr = new Point2D(x2 * spacing + spacing, y2 * spacing, array[y2][x2+1]);
+                var tr = saveAccessArray(grid,y2,x2+1);
-                var bl = new Point2D(x2 * spacing, y2 * spacing + spacing, array[y2+1][x2]);
+                var bl = saveAccessArray(grid,y2+1,x2);
-                var br = new Point2D(x2 * spacing + spacing, y2 * spacing + spacing, array[y2 + 1][x2+1]);
+                var br = saveAccessArray(grid,y2 + 1,x2+1);
-                drawAlgo(ctx, tl, tr, bl, br,"#000", 2);
+                var code = "" + bl + "" + br + "" + tr + "" + tl;
+                drawCell(ctx,x2 * spacing,y2 * spacing,spacing,code)
             }
         }
+        ctx.stroke();
     }
-  
+
+    function saveAccessArray(array, indexA, indexB)
+    {
+        if(indexA >= array.length|| indexA < 0) 
+        {
+            return 0;
+        }
+        if(indexB >= array[indexA].length || indexB < 0)
+        {
+            return 0;
+        }
+        if(array[indexA][indexB])
+        {
+            return 1;
+        }
+        return 0;
+    }
+
+    function saveSetArray(array, indexA, indexB, value)
+    {
+        if(indexA >= array.length|| indexA < 0) 
+        {
+            return;
+        }
+        if(indexB >= array[indexA].length || indexB < 0)
+        {
+            return;
+        }
+        array[indexA][indexB] = value;
+        drawGrid(array);
+    }
+
     // Bei Größenänderungen des Fensters das Grid neu zeichnen
     window.addEventListener("resize", () => {
       canvas.width = window.innerWidth;
       canvas.height = window.innerHeight;
-      drawGrid();
+      drawGrid(array);
+    });
+
+    //window.addEventListener("click", (event) => {
+    //    const x = Math.round(event.clientX / spacing);
+    //    const y = Math.round(event.clientY / spacing);
+    //    saveSetArray(array, 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);
+        saveSetArray(array, y,x, 1);
+        
+        startX = currentX;
+        startY = currentY;
+      }
+    });
+
+    canvas.addEventListener("mouseup", () => {
+      isDragging = false;
     });
   
     // Grid beim Laden der Seite zeichnen
     drawGrid(array);
   });
+
+