Wuzzy/libpov_2025
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add HTML form

Browse Source
This commit is contained in:
Wuzzy 2023-10-20 10:43:04 +02:00
parent 6e35b28558
commit a0bfa50cec
1 changed files with 113 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

122
minetest_biome_voronoi.html
View File

@ -8,14 +8,49 @@
border: 1px solid black; border: 1px solid black;
} }
</style> </style>
<!-- Voronoi diagram API -->
<script src="./rhill-voronoi-core.js"></script> <script src="./rhill-voronoi-core.js"></script>
</head> </head>
<body> <body>
<h1>Minetest Biome Point Visualizer</h1> <h1>Minetest Biome Point Visualizer</h1>
<!-- TODO: Add proper fallback by listing the voronoi points --> <div>
<!-- TODO: Add proper canvas browser fallback by listing the voronoi points -->
<canvas id="voronoiCanvas" width="900" height="900"> <canvas id="voronoiCanvas" width="900" height="900">
A voronoi diagram is supposed to be here but for some reason it cannot be displayed. A voronoi diagram is supposed to be here but for some reason it cannot be displayed.
</canvas> </canvas>
</div>
<div>
<form id="biomeForm">
<label>Biomes:<br>
<select id="biomeSelector" name="biomeList" size="16" multiple>
<option>Biome 1</option>
</select>
</label>
<br>
<button>Add</button>
<button>Remove</button>
<br>
<div>
<label>Heat:
<input id="inputHeat" type="number" value="50"></input>
</label>
<label>Humidity:
<input id="inputHumidity" type="number" value="50"></input>
</label>
<br>
<label>Min. Y:
<input id="minY" type="number" value="-31000"></input>
</label>
<label>Max. Y:
<input id="maxY" type="number" value="31000"></input>
</label>
</div>
</form>
<div>
<script> <script>
"use strict"; "use strict";
let biomePoints = [ let biomePoints = [
@ -26,6 +61,45 @@ let biomePoints = [
{ heat: 100, humidity: 100 }, { heat: 100, humidity: 100 },
{ heat: 100, humidity: 5 }, { heat: 100, humidity: 5 },
]; ];
// FOREST-16 palette, plus black
const pointColor = "#913636";
const edgeColor = "#0f2c2e";
const gridColor = "#00000040";
const axisColor = "#000000";
const cellColors = [
"#64988e",
"#3d7085",
"#345644",
"#6b7f5c",
"#b0b17c",
"#e1c584",
"#c89660",
"#ad5f52",
"#692f11",
"#89542f",
"#796e63",
"#a17d5e",
"#b4a18f",
"#ecddba",
];
const fallbackCellColor = "#ecddba";
// define an array and randomize it
function shuffleArray(values) {
let index = values.length, randomIndex;
// While there remain elements to shuffle
while (index != 0) {
// Pick a remaining element.
randomIndex = Math.floor(Math.random() * index);
index--; // And swap it with the current element.
[values[index], values[randomIndex]] = [values[randomIndex], values[index]];
}
return values;
}
let colors = shuffleArray(cellColors);
// DEBUG: Random points
biomePoints = []; biomePoints = [];
for (let i=0; i<10; i++) { for (let i=0; i<10; i++) {
biomePoints.push({ biomePoints.push({
@ -54,7 +128,7 @@ const GRID_STEP = 10
function putGrid(context) { function putGrid(context) {
context.lineWidth = 0.5; context.lineWidth = 0.5;
context.strokeStyle = "#00000040" context.strokeStyle = gridColor;
for (let x=-LIMIT; x<=LIMIT; x+=GRID_STEP) { for (let x=-LIMIT; x<=LIMIT; x+=GRID_STEP) {
context.beginPath(); context.beginPath();
context.moveTo(x, -LIMIT); context.moveTo(x, -LIMIT);
@ -76,12 +150,14 @@ function putAxes(context) {
context.beginPath(); context.beginPath();
context.moveTo(-LIMIT,0) context.moveTo(-LIMIT,0)
context.lineTo(LIMIT,0) context.lineTo(LIMIT,0)
context.closePath();
context.stroke(); context.stroke();
// humidity axis () // humidity axis ()
context.beginPath(); context.beginPath();
context.moveTo(0,-LIMIT) context.moveTo(0,-LIMIT)
context.lineTo(0,LIMIT) context.lineTo(0,LIMIT)
context.closePath();
context.stroke(); context.stroke();
} }
@ -91,12 +167,6 @@ function draw() {
let context = canvas.getContext("2d") let context = canvas.getContext("2d")
context.translate(voronoiCanvas.width/2, voronoiCanvas.height/2); context.translate(voronoiCanvas.width/2, voronoiCanvas.height/2);
context.scale(voronoiCanvas.width/300, voronoiCanvas.height/300); context.scale(voronoiCanvas.width/300, voronoiCanvas.height/300);
//putAxes(context);
//putGrid(context);
context.fillStyle = "#ef0000";
for (let p of biomePoints) {
putPoint(context, p)
}
let voronoi = new Voronoi(); let voronoi = new Voronoi();
let vbbox = {xl: -LIMIT, xr: LIMIT, yt: -LIMIT, yb: LIMIT}; let vbbox = {xl: -LIMIT, xr: LIMIT, yt: -LIMIT, yb: LIMIT};
let sites = [] let sites = []
@ -104,14 +174,48 @@ function draw() {
sites.push(biomePointToVoronoiPoint(p)); sites.push(biomePointToVoronoiPoint(p));
} }
let diagram = voronoi.compute(sites, vbbox); let diagram = voronoi.compute(sites, vbbox);
context.strokeStyle = "#009f00";
for (let c=0; c<diagram.cells.length; c++) {
let cell = diagram.cells[c]
if (c <= colors.length) {
context.fillStyle = colors[c];
} else {
context.fillStyle = fallbackColor;
}
context.beginPath();
for (let h=0; h<cell.halfedges.length; h++) {
let halfedge = cell.halfedges[h]
let start = halfedge.getStartpoint()
let end = halfedge.getEndpoint()
if (h === 0) {
context.moveTo(start.x, start.y);
} else {
context.lineTo(start.x, start.y);
}
context.lineTo(end.x, end.y);
}
context.closePath();
context.fill();
}
putAxes(context);
putGrid(context);
context.strokeStyle = edgeColor;
for (let e=0; e<diagram.edges.length; e++) { for (let e=0; e<diagram.edges.length; e++) {
let edge = diagram.edges[e]; let edge = diagram.edges[e];
context.beginPath(); context.beginPath();
context.moveTo(edge.va.x, edge.va.y); context.moveTo(edge.va.x, edge.va.y);
context.lineTo(edge.vb.x, edge.vb.y); context.lineTo(edge.vb.x, edge.vb.y);
context.closePath();
context.stroke(); context.stroke();
} }
context.fillStyle = pointColor;
for (let p of biomePoints) {
putPoint(context, p)
}
} }
window.addEventListener("load", draw); window.addEventListener("load", draw);
</script> </script>