Reduce grid line rendering for large value ranges

manual.html

@@ -32,7 +32,7 @@
 
 <p>Red dots represent the biome points, and they are labelled by default by their (heat, humidity) coordinates. Dark green border lines represent the boundaries of Voronoi cells and the large colored areas represent the biomes themselves.</p>
 
-<p>By default, a grid is displayed. A grid line is shown for every 10 units.</p>
+<p>By default, a grid is displayed. A grid line is shown for every 10 units (unless the value range of heat or humidity is very large).</p>
 
 <p>Below the diagram, a couple of status information is shown: The current altitude (Y coordinate), the heat and humidity range of the current diagram and your cursor position (if it is on the diagram).</p>
 

mibpov.js

@@ -7,6 +7,25 @@ const MAX_Y_DEFAULT = 31000
 // Draw a grid line every GRID_STEP units
 const GRID_STEP = 10
 
+// Grid widths. We use lower grid widths
+// as the grid becomes more crammed.
+// There are 4 levels from 0 to 3.
+// Level 3 is the full width, level 1 is the
+// smallest with and level 0 renders no grid lines
+// when the grid would become too crammed.
+const GRID_WIDTH_LEVEL_3 = 2; // full width
+const GRID_WIDTH_LEVEL_2 = 1; // reduced width
+const GRID_WIDTH_LEVEL_1 = 0.5; // more reduced width
+// the grid thesholds are the "grid lines to pixel"
+// ratio. The more grid lines therere are per pixel,
+// the lower the grid level.
+// e.g. grid level 2 triggers if ratio is above
+// GRID_THRESHOLD_LEVEL_2. Grid level 3 is used
+// if no grid thresholds are triggered.
+const GRID_THRESHOLD_LEVEL_2 = 0.08;
+const GRID_THRESHOLD_LEVEL_1 = 0.16;
+const GRID_THRESHOLD_LEVEL_0 = 0.24; // this will disable grid rendering
+
 // Distance from the point's center in which a point can
 // be selected by clicking on it
 const POINT_SELECT_DISTANCE = 25
@@ -361,35 +380,65 @@ function putPoint(context, point) {
 function putGrid(context) {
 	let [limit_x_min, limit_y_min] = biomeCoordsToCanvasPixelCoords(limit_heat_min, limit_humidity_min);
 	let [limit_x_max, limit_y_max] = biomeCoordsToCanvasPixelCoords(limit_heat_max, limit_humidity_max);
-	context.lineWidth = 2;
+
+	// Calculate the "grid lines pixel ratio" to reduce the
+	// width of grid lines or even disable rendering them.
+	// A high ratio means that a LOT of grid lines would render
+	// on the canvas.
+	// This code will effectively trigger if the value range
+	// is very high.
+	let xGridLinesPerPixel = (limit_heat_max-limit_heat_min) / voronoiCanvas.width / GRID_STEP;
+	let yGridLinesPerPixel = (limit_humidity_max-limit_humidity_min) / voronoiCanvas.height/ GRID_STEP;
+	let xWidth = GRID_WIDTH_LEVEL_3;
+	let yWidth = GRID_WIDTH_LEVEL_3;
+	if (xGridLinesPerPixel > GRID_THRESHOLD_LEVEL_0) {
+		xWidth = null;
+	} else if (xGridLinesPerPixel > GRID_THRESHOLD_LEVEL_1) {
+		xWidth = GRID_WIDTH_LEVEL_1;
+	} else if (xGridLinesPerPixel > GRID_THRESHOLD_LEVEL_2) {
+		xWidth = GRID_WIDTH_LEVEL_2;
+	}
+	if (yGridLinesPerPixel > GRID_THRESHOLD_LEVEL_0) {
+		yWidth = null;
+	} else if (yGridLinesPerPixel > GRID_THRESHOLD_LEVEL_1) {
+		yWidth = GRID_WIDTH_LEVEL_1;
+	} else if (xGridLinesPerPixel > GRID_THRESHOLD_LEVEL_2) {
+		yWidth = GRID_WIDTH_LEVEL_2;
+	}
 	context.strokeStyle = GRID_COLOR;
-	for (let he=0; he<=limit_heat_max; he+=GRID_STEP) {
-		let [x, _] = biomeCoordsToCanvasPixelCoords(he, 0);
-		context.beginPath();
-		context.moveTo(x, limit_y_min);
-		context.lineTo(x, limit_y_max);
-		context.stroke();
+	if (xWidth !== null) {
+		context.lineWidth = xWidth;
+		for (let he=0; he<=limit_heat_max; he+=GRID_STEP) {
+			let [x, _] = biomeCoordsToCanvasPixelCoords(he, 0);
+			context.beginPath();
+			context.moveTo(x, limit_y_min);
+			context.lineTo(x, limit_y_max);
+			context.stroke();
+		}
+		for (let he=-GRID_STEP; he>=limit_heat_min; he-=GRID_STEP) {
+			let [x, _] = biomeCoordsToCanvasPixelCoords(he, 0);
+			context.beginPath();
+			context.moveTo(x, limit_y_min);
+			context.lineTo(x, limit_y_max);
+			context.stroke();
+		}
 	}
-	for (let he=-GRID_STEP; he>=limit_heat_min; he-=GRID_STEP) {
-		let [x, _] = biomeCoordsToCanvasPixelCoords(he, 0);
-		context.beginPath();
-		context.moveTo(x, limit_y_min);
-		context.lineTo(x, limit_y_max);
-		context.stroke();
-	}
-	for (let hu=0; hu<=limit_humidity_max; hu+=GRID_STEP) {
-		let [_, y] = biomeCoordsToCanvasPixelCoords(0, hu);
-		context.beginPath();
-		context.moveTo(limit_x_min, y);
-		context.lineTo(limit_x_max, y);
-		context.stroke();
-	}
-	for (let hu=-GRID_STEP; hu>=limit_humidity_min; hu-=GRID_STEP) {
-		let [_, y] = biomeCoordsToCanvasPixelCoords(0, hu);
-		context.beginPath();
-		context.moveTo(limit_x_min, y);
-		context.lineTo(limit_x_max, y);
-		context.stroke();
+	if (yWidth !== null) {
+		context.lineWidth = yWidth;
+		for (let hu=0; hu<=limit_humidity_max; hu+=GRID_STEP) {
+			let [_, y] = biomeCoordsToCanvasPixelCoords(0, hu);
+			context.beginPath();
+			context.moveTo(limit_x_min, y);
+			context.lineTo(limit_x_max, y);
+			context.stroke();
+		}
+		for (let hu=-GRID_STEP; hu>=limit_humidity_min; hu-=GRID_STEP) {
+			let [_, y] = biomeCoordsToCanvasPixelCoords(0, hu);
+			context.beginPath();
+			context.moveTo(limit_x_min, y);
+			context.lineTo(limit_x_max, y);
+			context.stroke();
+		}
 	}
 }