120 lines
2.9 KiB
HTML
120 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
|
<title>Minetest Biome Point Visualizer</title>
|
|
<style>
|
|
canvas {
|
|
border: 1px solid black;
|
|
}
|
|
</style>
|
|
<script src="./rhill-voronoi-core.js"></script>
|
|
</head>
|
|
<body>
|
|
<h1>Minetest Biome Point Visualizer</h1>
|
|
<!-- TODO: Add proper fallback by listing the voronoi points -->
|
|
<canvas id="voronoiCanvas" width="900" height="900">
|
|
A voronoi diagram is supposed to be here but for some reason it cannot be displayed.
|
|
</canvas>
|
|
<script>
|
|
"use strict";
|
|
let biomePoints = [
|
|
{ heat: 0, humidity: 0 },
|
|
{ heat: 50, humidity: 25 },
|
|
{ heat: -3, humidity: -59 },
|
|
{ heat: -100, humidity: -100 },
|
|
{ heat: 100, humidity: 100 },
|
|
{ heat: 100, humidity: 5 },
|
|
];
|
|
biomePoints = [];
|
|
for (let i=0; i<10; i++) {
|
|
biomePoints.push({
|
|
heat: Math.random()*200-100,
|
|
humidity: Math.random()*200-100,
|
|
});
|
|
}
|
|
|
|
function biomePointToVoronoiPoint(point) {
|
|
let newPoint = { x: point.heat, y: point.humidity }
|
|
return newPoint;
|
|
}
|
|
function voronoiPointToBiomePoint(point) {
|
|
let newPoint = { heat: point.x, humidity: point.y }
|
|
return newPoint;
|
|
}
|
|
|
|
function putPoint(context, point) {
|
|
context.moveTo(0, 0);
|
|
context.arc(point.heat, point.humidity, 2, 0, Math.PI * 2);
|
|
context.fill();
|
|
};
|
|
|
|
const LIMIT = 200
|
|
const GRID_STEP = 10
|
|
|
|
function putGrid(context) {
|
|
context.lineWidth = 0.5;
|
|
context.strokeStyle = "#00000040"
|
|
for (let x=-LIMIT; x<=LIMIT; x+=GRID_STEP) {
|
|
context.beginPath();
|
|
context.moveTo(x, -LIMIT);
|
|
context.lineTo(x, LIMIT);
|
|
context.stroke();
|
|
}
|
|
for (let y=-LIMIT; y<=LIMIT; y+=GRID_STEP) {
|
|
context.beginPath();
|
|
context.moveTo(-LIMIT, y);
|
|
context.lineTo(LIMIT, y);
|
|
context.stroke();
|
|
}
|
|
|
|
}
|
|
|
|
function putAxes(context) {
|
|
context.lineWidth = 0.75;
|
|
// heat axis (horizontal)
|
|
context.beginPath();
|
|
context.moveTo(-LIMIT,0)
|
|
context.lineTo(LIMIT,0)
|
|
context.stroke();
|
|
|
|
// humidity axis ()
|
|
context.beginPath();
|
|
context.moveTo(0,-LIMIT)
|
|
context.lineTo(0,LIMIT)
|
|
context.stroke();
|
|
}
|
|
|
|
function draw() {
|
|
let canvas = document.getElementById("voronoiCanvas");
|
|
// TODO: Check for getContext support of browser
|
|
let context = canvas.getContext("2d")
|
|
context.translate(voronoiCanvas.width/2, voronoiCanvas.height/2);
|
|
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 vbbox = {xl: -LIMIT, xr: LIMIT, yt: -LIMIT, yb: LIMIT};
|
|
let sites = []
|
|
for (let p of biomePoints) {
|
|
sites.push(biomePointToVoronoiPoint(p));
|
|
}
|
|
let diagram = voronoi.compute(sites, vbbox);
|
|
context.strokeStyle = "#009f00";
|
|
for (let e=0; e<diagram.edges.length; e++) {
|
|
let edge = diagram.edges[e];
|
|
context.beginPath();
|
|
context.moveTo(edge.va.x, edge.va.y);
|
|
context.lineTo(edge.vb.x, edge.vb.y);
|
|
context.stroke();
|
|
}
|
|
}
|
|
window.addEventListener("load", draw);
|
|
</script>
|
|
</body>
|
|
</html>
|