Gulum/MarchingCube2D
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Implement Marching cube

Browse Source
This commit is contained in:
Gulum
2023-08-01 20:52:15 +02:00
parent 1798bf1ae6
commit 72f912d7a4
1 changed files with 222 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

340
script.js
View File

@@ -1,49 +1,23 @@
/*
// Punktabstand für das Grid
const spacing = 32;
1 1
1 1 NOTHING
let array = [];
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
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 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 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
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);
@@ -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 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);
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(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);
});