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

Unlimited world

Browse Source
This commit is contained in:
Gulum
2023-08-01 21:18:18 +02:00
parent 72f912d7a4
commit d3fe6ea993
1 changed files with 94 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

231
script.js
View File

@@ -1,56 +1,38 @@
// Punktabstand für das Grid
const spacing = 32;
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]);
window.addEventListener("load", () => { window.addEventListener("load", () => {
const canvas = document.getElementById("gridCanvas"); const canvas = document.getElementById("gridCanvas");
const ctx = canvas.getContext("2d"); const ctx = canvas.getContext("2d");
// Canvas-Größe anpassen // Canvas-Größe anpassen
canvas.width = window.innerWidth; canvas.width = window.innerWidth;
canvas.height = window.innerHeight; canvas.height = window.innerHeight;
// Punktabstand für das Grid
const spacing = 32;
let sparseWorld = {};
let isDragging = false; let isDragging = false;
let startX, startY; let startX, startY;
function drawCell(ctx, x, y, spacing, code) function drawCell(ctx, x, y, spacing, code) {
{
// Code = BL BR TR TL // Code = BL BR TR TL
switch(code) switch (code) {
{
case "1011": case "1011":
case "0100": case "0100":
var startX = x + spacing * 0.5; var startX = x + spacing * 0.5;
var startY = y + spacing; var startY = y + spacing;
var endX = x + spacing; var endX = x + spacing;
var endY = y + spacing * 0.5; var endY = y + spacing * 0.5;
ctx.moveTo(startX,startY); ctx.moveTo(startX, startY);
ctx.lineTo(endX,endY); ctx.lineTo(endX, endY);
break; break;
case "1100": case "1100":
var startX = x; var startX = x;
var startY = y + spacing * 0.5; var startY = y + spacing * 0.5;
var endX = x + spacing; var endX = x + spacing;
var endY = y + spacing * 0.5; var endY = y + spacing * 0.5;
ctx.moveTo(startX,startY); ctx.moveTo(startX, startY);
ctx.lineTo(endX,endY); ctx.lineTo(endX, endY);
break; break;
case "0111": case "0111":
case "1000": case "1000":
@@ -58,24 +40,24 @@ window.addEventListener("load", () => {
var startY = y + spacing * 0.5; var startY = y + spacing * 0.5;
var endX = x + spacing * 0.5; var endX = x + spacing * 0.5;
var endY = y + spacing; var endY = y + spacing;
ctx.moveTo(startX,startY); ctx.moveTo(startX, startY);
ctx.lineTo(endX,endY); ctx.lineTo(endX, endY);
break; break;
case "0110": case "0110":
var startX = x + spacing * 0.5; var startX = x + spacing * 0.5;
var startY = y; var startY = y;
var endX = x + spacing * 0.5; var endX = x + spacing * 0.5;
var endY = y + spacing; var endY = y + spacing;
ctx.moveTo(startX,startY); ctx.moveTo(startX, startY);
ctx.lineTo(endX,endY); ctx.lineTo(endX, endY);
break; break;
case "1001": case "1001":
var startX = x + spacing * 0.5; var startX = x + spacing * 0.5;
var startY = y; var startY = y;
var endX = x + spacing * 0.5; var endX = x + spacing * 0.5;
var endY = y + spacing; var endY = y + spacing;
ctx.moveTo(startX,startY); ctx.moveTo(startX, startY);
ctx.lineTo(endX,endY); ctx.lineTo(endX, endY);
break; break;
case "1101": case "1101":
case "0010": case "0010":
@@ -83,16 +65,16 @@ window.addEventListener("load", () => {
var startY = y; var startY = y;
var endX = x + spacing; var endX = x + spacing;
var endY = y + spacing * 0.5; var endY = y + spacing * 0.5;
ctx.moveTo(startX,startY); ctx.moveTo(startX, startY);
ctx.lineTo(endX,endY); ctx.lineTo(endX, endY);
break; break;
case "0011": case "0011":
var startX = x; var startX = x;
var startY = y + spacing * 0.5; var startY = y + spacing * 0.5;
var endX = x + spacing; var endX = x + spacing;
var endY = y + spacing * 0.5; var endY = y + spacing * 0.5;
ctx.moveTo(startX,startY); ctx.moveTo(startX, startY);
ctx.lineTo(endX,endY); ctx.lineTo(endX, endY);
break; break;
case "1110": case "1110":
case "0001": case "0001":
@@ -100,20 +82,20 @@ window.addEventListener("load", () => {
var startY = y + spacing * 0.5; var startY = y + spacing * 0.5;
var endX = x + spacing * 0.5; var endX = x + spacing * 0.5;
var endY = y; var endY = y;
ctx.moveTo(startX,startY); ctx.moveTo(startX, startY);
ctx.lineTo(endX,endY); ctx.lineTo(endX, endY);
break; break;
case "0101": case "0101":
ctx.moveTo(x,y + spacing * 0.5); ctx.moveTo(x, y + spacing * 0.5);
ctx.lineTo(x + spacing * 0.5,y); ctx.lineTo(x + spacing * 0.5, y);
ctx.moveTo(x + spacing * 0.5,y + spacing); ctx.moveTo(x + spacing * 0.5, y + spacing);
ctx.lineTo(x+ spacing,y+spacing*0.5); ctx.lineTo(x + spacing, y + spacing * 0.5);
break; break;
case "1010": case "1010":
ctx.moveTo(x,y + spacing * 0.5); ctx.moveTo(x, y + spacing * 0.5);
ctx.lineTo(x + spacing * 0.5,y+spacing); ctx.lineTo(x + spacing * 0.5, y + spacing);
ctx.moveTo(x + spacing * 0.5,y); ctx.moveTo(x + spacing * 0.5, y);
ctx.lineTo(x + spacing, y+spacing*0.5); ctx.lineTo(x + spacing, y + spacing * 0.5);
break; break;
case "0000": case "0000":
@@ -128,42 +110,34 @@ window.addEventListener("load", () => {
} }
function drawGrid(grid) { 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) {
// 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 x = spacing; x < canvas.width; x += spacing) {
// for (let y = spacing; y < canvas.height; y += spacing) { // ctx.beginPath();
// drawPoint(ctx, x, y, "#000", 2); // 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();
//}
for (let y2 = 0; y2 < grid.length; y2 += 1) // Punkte zeichnen
{ var maxWidth = Math.floor(canvas.width / spacing);
for (let x2 = 0; x2 < grid[y2].length; x2 += 1) 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"; var color = "#000";
if(grid[y2][x2]) if (saveAccessArray(grid, y2, x2) === 1) {
{
color = "#FF0000" color = "#FF0000"
} }
drawPoint(ctx, x2 * spacing, y2 * spacing, color, 2); drawPoint(ctx, x2 * spacing, y2 * spacing, color, 2);
@@ -171,96 +145,79 @@ window.addEventListener("load", () => {
} }
ctx.beginPath(); ctx.beginPath();
for (let y2 = 0; y2 < grid.length; y2 += 1) for (let y2 = 0; y2 < maxHeight; y2 += 1) {
{ for (let x2 = 0; x2 < maxWidth; x2 += 1) {
for (let x2 = 0; x2 < grid[y2].length; x2 += 1)
{
var tl = saveAccessArray(grid, y2, x2); var tl = saveAccessArray(grid, y2, x2);
var tr = saveAccessArray(grid,y2,x2+1); var tr = saveAccessArray(grid, y2, x2 + 1);
var bl = saveAccessArray(grid,y2+1,x2); var bl = saveAccessArray(grid, y2 + 1, x2);
var br = saveAccessArray(grid,y2 + 1,x2+1); var br = saveAccessArray(grid, y2 + 1, x2 + 1);
var code = "" + bl + "" + br + "" + tr + "" + tl; var code = "" + bl + "" + br + "" + tr + "" + tl;
drawCell(ctx,x2 * spacing,y2 * spacing,spacing,code) drawCell(ctx, x2 * spacing, y2 * spacing, spacing, code)
} }
} }
ctx.stroke(); ctx.stroke();
} }
function saveAccessArray(array, indexA, indexB) function saveAccessArray(sparseWorld, indexA, indexB) {
{ var accesor = "X" + indexA + "Y" + indexB;
if(indexA >= array.length|| indexA < 0) var ret = sparseWorld[accesor];
{ if (ret === undefined) {
return 0; return 0;
} }
if(indexB >= array[indexA].length || indexB < 0) return 1;
{
return 0;
}
if(array[indexA][indexB])
{
return 1;
}
return 0;
} }
function saveSetArray(array, indexA, indexB, value) function saveSetArray(sparseWorld, indexA, indexB, value) {
{ var accesor = "X" + indexA + "Y" + indexB;
if(indexA >= array.length|| indexA < 0) sparseWorld[accesor] = value;
{ drawGrid(sparseWorld);
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 // Bei Größenänderungen des Fensters das Grid neu zeichnen
window.addEventListener("resize", () => { window.addEventListener("resize", () => {
canvas.width = window.innerWidth; canvas.width = window.innerWidth;
canvas.height = window.innerHeight; canvas.height = window.innerHeight;
drawGrid(array); drawGrid(sparseWorld);
}); });
//window.addEventListener("click", (event) => { //window.addEventListener("click", (event) => {
// const x = Math.round(event.clientX / spacing); // const x = Math.round(event.clientX / spacing);
// const y = Math.round(event.clientY / spacing); // const y = Math.round(event.clientY / spacing);
// saveSetArray(array, y,x, 1); // saveSetArray(y,x, 1);
// console.log(`Koordinaten: (${x}, ${y})`); // console.log(`Koordinaten: (${x}, ${y})`);
//}); //});
canvas.addEventListener("mousedown", (event) => { canvas.addEventListener("mousedown", (event) => {
isDragging = true; isDragging = true;
startX = event.clientX; startX = event.clientX;
startY = event.clientY; startY = event.clientY;
}); });
canvas.addEventListener("mousemove", (event) => { canvas.addEventListener("mousemove", (event) => {
if (isDragging) { if (isDragging) {
const currentX = event.clientX; const currentX = event.clientX;
const currentY = event.clientY; const currentY = event.clientY;
const deltaX = currentX - startX; const deltaX = currentX - startX;
const deltaY = currentY - startY; const deltaY = currentY - startY;
// Verarbeite das Dragging hier (z. B. zeichne etwas in Canvas) // Verarbeite das Dragging hier (z. B. zeichne etwas in Canvas)
const x = Math.round(currentX / spacing); const x = Math.round(currentX / spacing);
const y = Math.round(currentY / spacing); const y = Math.round(currentY / spacing);
saveSetArray(array, y,x, 1); console.log("Values: " + x + " " + y )
saveSetArray(sparseWorld, y, x, 1);
startX = currentX;
startY = currentY; startX = currentX;
} startY = currentY;
}
}); });
canvas.addEventListener("mouseup", () => { canvas.addEventListener("mouseup", () => {
isDragging = false; isDragging = false;
}); });
// Grid beim Laden der Seite zeichnen // Grid beim Laden der Seite zeichnen
drawGrid(array); drawGrid(sparseWorld);
}); });