commit cff2c6add4a3ab8c434ed82018d10b64576b4fec Author: Julian Date: Tue Aug 1 18:58:42 2023 +0200 Initial diff --git a/README.md b/README.md new file mode 100644 index 0000000..e7bf309 --- /dev/null +++ b/README.md @@ -0,0 +1,4 @@ +# Margin Cube 2D + +![EMBED](The-components-of-the-Marching-Cubes-Algorithm-in-2D-known-as-Marching-Squares-a-2D.png) +from [here](https://www.researchgate.net/figure/The-components-of-the-Marching-Cubes-Algorithm-in-2D-known-as-Marching-Squares-a-2D_fig2_335473796) \ No newline at end of file diff --git a/The-components-of-the-Marching-Cubes-Algorithm-in-2D-known-as-Marching-Squares-a-2D.png b/The-components-of-the-Marching-Cubes-Algorithm-in-2D-known-as-Marching-Squares-a-2D.png new file mode 100644 index 0000000..3605f71 Binary files /dev/null and b/The-components-of-the-Marching-Cubes-Algorithm-in-2D-known-as-Marching-Squares-a-2D.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..3e1f406 --- /dev/null +++ b/index.html @@ -0,0 +1,24 @@ + + + + + + Canvas Grid + + + + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..1aad3dc --- /dev/null +++ b/script.js @@ -0,0 +1,162 @@ +/* + +1 1 +1 1 NOTHING + +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"); + 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 array = []; + array.push([0, 0, 0, 0, 0, 0, 0]); + array.push([0, 0, 0, 1, 0, 0, 0]); + array.push([0, 0, 0, 1, 0, 0, 0]); + array.push([0, 1, 0, 1, 0, 0, 0]); + + 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.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 + //for (let x = spacing; x < canvas.width; x += spacing) { + // for (let y = spacing; y < canvas.height; y += spacing) { + // drawPoint(ctx, x, y, "#000", 2); + // } + //} + + + for (let y2 = 0; y2 < array.length; y2 += 1) + { + for (let x2 = 0; x2 < array[y2].length; x2 += 1) + { + drawPoint(ctx, x2 * spacing, y2 * spacing, "#000", 2); + } + } + + for (let y2 = 0; y2 < array.length; y2 += 1) + { + for (let x2 = 0; x2 < array[y2].length; x2 += 1) + { + var tl = new Point2D(x2 * spacing, y2 * spacing, array[y2][x2]); + var tr = new Point2D(x2 * spacing + spacing, y2 * spacing, array[y2][x2+1]); + var bl = new Point2D(x2 * spacing, y2 * spacing + spacing, array[y2+1][x2]); + var br = new Point2D(x2 * spacing + spacing, y2 * spacing + spacing, array[y2 + 1][x2+1]); + drawAlgo(ctx, tl, tr, bl, br,"#000", 2); + } + } + } + + // Bei Größenänderungen des Fensters das Grid neu zeichnen + window.addEventListener("resize", () => { + canvas.width = window.innerWidth; + canvas.height = window.innerHeight; + drawGrid(); + }); + + // Grid beim Laden der Seite zeichnen + drawGrid(array); + });