Add axis labels

index.html

@@ -87,6 +87,9 @@ A Voronoi diagram is supposed to be here but for some reason it cannot be displa
 	<input id="inputCheckboxNames" type="checkbox" checked>
 	<label for="inputCheckboxNames">Show names</label>
 
+	<input id="inputCheckboxAxes" type="checkbox">
+	<label for="inputCheckboxAxes">Show axes</label>
+
 	<input id="inputCheckboxGrid" type="checkbox" checked>
 	<label for="inputCheckboxGrid">Show grid</label>
 

mibpov.js

@@ -20,6 +20,7 @@ const pointColor = "#913636";
 const pointColorSelected = "#e19696";
 const edgeColor = "#0f2c2e";
 const gridColor = "#00000040";
+const axisColor = "#000000";
 const clearColor = "#ecddba";
 const cellColorNeutral = "#888888";
 const cellColors = [
@@ -162,6 +163,8 @@ let showPoints = true;
 let showCellColors = true;
 // If true, show the grid in the diagram
 let showGrid = true;
+// If true, show the heat/humidity axes
+let showAxes = false;
 
 // Set to true if the draw canvas currently shows an error message
 let drawError = false;
@@ -351,6 +354,71 @@ function putGrid(context) {
 	}
 }
 
+function putAxes(context) {
+	const AXIS_ARROW_SIZE = 8;
+	context.lineWidth = 2;
+	context.strokeStyle = axisColor;
+	let [x0, y0] = biomeCoordsToCanvasPixelCoords(0, 0);
+	let tick_heat = (limit_heat_max - limit_heat_min) * (100/175);
+	let tick_humidity = (limit_humidity_max - limit_humidity_min) * (100/175);
+	let [tx, ty] = biomeCoordsToCanvasPixelCoords(tick_heat, tick_humidity);
+	let w = voronoiCanvas.width;
+	let h = voronoiCanvas.height;
+
+	// horizontal axis
+	context.beginPath();
+	context.moveTo(0, y0);
+	context.lineTo(w, y0);
+	// midpoint tick
+	context.moveTo(tx, y0);
+	context.lineTo(tx, y0 + AXIS_ARROW_SIZE);
+	// arrow
+	context.moveTo(w, y0);
+	context.lineTo(w - AXIS_ARROW_SIZE, y0 - AXIS_ARROW_SIZE);
+	context.moveTo(w, y0);
+	context.lineTo(w - AXIS_ARROW_SIZE, y0 + AXIS_ARROW_SIZE);
+	context.stroke();
+	context.closePath();
+
+	// vertical axis
+	context.beginPath();
+	context.moveTo(x0, 0);
+	context.lineTo(x0, h);
+	// midpoint tick
+	context.moveTo(x0, ty);
+	context.lineTo(x0 - AXIS_ARROW_SIZE, ty);
+	// arrow
+	context.moveTo(x0, 0);
+	context.lineTo(x0 - AXIS_ARROW_SIZE, AXIS_ARROW_SIZE);
+	context.moveTo(x0, 0);
+	context.lineTo(x0 + AXIS_ARROW_SIZE, AXIS_ARROW_SIZE);
+	context.stroke();
+	context.closePath();
+
+	// axis+midpoint labels
+	context.fillStyle = "black";
+
+	// heat label
+	context.textAlign = "right";
+	context.textBaseline = "top";
+	context.font = "100% sans-serif";
+	context.fillText("heat", w - AXIS_ARROW_SIZE*2, y0 + 4);
+	context.textAlign = "center";
+	context.fillText(Math.round(tick_heat), tx, y0 + AXIS_ARROW_SIZE+2);
+
+	// humidity label
+	context.textAlign = "right";
+	context.textBaseline = "bottom";
+	context.font = "100% sans-serif";
+	context.save();
+	context.rotate(-Math.PI/2);
+	context.fillText("humidity", -AXIS_ARROW_SIZE*2, x0 - 4);
+	context.restore();
+	context.textAlign = "right";
+	context.textBaseline = "middle";
+	context.fillText(Math.round(tick_humidity), x0 - AXIS_ARROW_SIZE-2, ty);
+}
+
 // Cache diagram object for performance boost
 let cachedVoronoiDiagram = null;
 
@@ -535,6 +603,9 @@ function draw(y, recalculate) {
 		if (showGrid) {
 			putGrid(context);
 		}
+		if (showAxes) {
+			putAxes(context);
+		}
 	}
 
 	// Render Voronoi cell edges
@@ -914,6 +985,10 @@ inputCheckboxGrid.onchange = function() {
 	showGrid = this.checked;
 	draw(getViewY(), true);
 }
+inputCheckboxAxes.onchange = function() {
+	showAxes = this.checked;
+	draw(getViewY(), true);
+}
 inputNoiseHeatScale.oninput = function() {
 	noises.heat.scale = +this.value;
 	clear();
@@ -993,6 +1068,7 @@ function checkboxVarsInit() {
 	showPoints = inputCheckboxPoints.checked;
 	showCellColors = inputCheckboxCellColors.checked;
 	showGrid = inputCheckboxGrid.checked;
+	showAxes = inputCheckboxAxes.checked;
 }
 
 function toggleConfigSectionDisplay(headerLink, container) {