Verify inputs, limit ranges

This commit is contained in:
Wuzzy 2023-10-27 14:35:41 +02:00
parent 828b99c243
commit 588acba140
2 changed files with 71 additions and 50 deletions

View File

@ -65,9 +65,9 @@ A Voronoi diagram is supposed to be here but for some reason it cannot be displa
<br> <br>
<label for="inputHeat">Heat:&nbsp;</label> <label for="inputHeat">Heat:&nbsp;</label>
<input id="inputHeat" type="number" value="50" step="1" size="10"> <input id="inputHeat" type="number" value="50" step="1" size="10" min="-1e7" max="1e7">
<label for="inputHumidity">Humidity:&nbsp;</label> <label for="inputHumidity">Humidity:&nbsp;</label>
<input id="inputHumidity" type="number" value="50" step="1" size="10"> <input id="inputHumidity" type="number" value="50" step="1" size="10" min="-1e7" max="1e7">
<br> <br>
@ -110,29 +110,29 @@ A Voronoi diagram is supposed to be here but for some reason it cannot be displa
<form id="noiseForm"> <form id="noiseForm">
<h3>Heat (<code>mg_biome_np_heat</code>)</h3> <h3>Heat (<code>mg_biome_np_heat</code>)</h3>
<label for="inputNoiseHeatOffset">Offset:&nbsp;</label> <label for="inputNoiseHeatOffset">Offset:&nbsp;</label>
<input id="inputNoiseHeatOffset" type="number" value="50" size="10"> <input id="inputNoiseHeatOffset" type="number" value="50" size="10" min="-1e7" max="1e7">
<label for="inputNoiseHeatScale">Scale:&nbsp;</label> <label for="inputNoiseHeatScale">Scale:&nbsp;</label>
<input id="inputNoiseHeatScale" type="number" value="50" size="10"> <input id="inputNoiseHeatScale" type="number" value="50" size="10" min="-1e7" max="1e7">
<label for="inputNoiseHeatOctaves">Octaves:&nbsp;</label> <label for="inputNoiseHeatOctaves">Octaves:&nbsp;</label>
<input id="inputNoiseHeatOctaves" type="number" value="3" step="1" min="1" max="65535" size="10"> <input id="inputNoiseHeatOctaves" type="number" value="3" step="1" min="1" max="65535" size="10">
<label for="inputNoiseHeatPersistence">Persistence:&nbsp;</label> <label for="inputNoiseHeatPersistence">Persistence:&nbsp;</label>
<input id="inputNoiseHeatPersistence" type="number" value="0.5" step=0.1 size="10"> <input id="inputNoiseHeatPersistence" type="number" value="0.5" step=0.1 size="10" min="-1e7" max="1e7">
<h3>Humidity (<code>mg_biome_np_humidity</code>)</h3> <h3>Humidity (<code>mg_biome_np_humidity</code>)</h3>
<label for="inputNoiseHumidityOffset">Offset:&nbsp;</label> <label for="inputNoiseHumidityOffset">Offset:&nbsp;</label>
<input id="inputNoiseHumidityOffset" type="number" value="50" size="10"> <input id="inputNoiseHumidityOffset" type="number" value="50" size="10" min="-1e7" max="1e7">
<label for="inputNoiseHumidityScale">Scale:&nbsp;</label> <label for="inputNoiseHumidityScale">Scale:&nbsp;</label>
<input id="inputNoiseHumidityScale" type="number" value="50" size="10"> <input id="inputNoiseHumidityScale" type="number" value="50" size="10" min="-1e7" max="1e7">
<label for="inputNoiseHumidityOctaves">Octaves:&nbsp;</label> <label for="inputNoiseHumidityOctaves">Octaves:&nbsp;</label>
<input id="inputNoiseHumidityOctaves" type="number" value="3" step="1" min="1" max="65535" size="10"> <input id="inputNoiseHumidityOctaves" type="number" value="3" step="1" min="1" max="65535" size="10">
<label for="inputNoiseHumidityPersistence">Persistence:&nbsp;</label> <label for="inputNoiseHumidityPersistence">Persistence:&nbsp;</label>
<input id="inputNoiseHumidityPersistence" type="number" value="0.5" step=0.1 size="10"> <input id="inputNoiseHumidityPersistence" type="number" value="0.5" step=0.1 size="10" min="-1e7" max="1e7">
<h3>Reset</h3> <h3>Reset</h3>
<button id="inputNoiseReset" type="button">Reset noise parameters</button> <button id="inputNoiseReset" type="button">Reset noise parameters</button>

105
mibpov.js
View File

@ -16,6 +16,10 @@ const MIN_CANVAS_SIZE = 100;
// Minimum required distance of canvas from the right page side // Minimum required distance of canvas from the right page side
const CANVAS_PAGE_MARGIN_RIGHT = 20 const CANVAS_PAGE_MARGIN_RIGHT = 20
// Minimum and maximum value for heat and humidity
const MIN_HEAT_HUMIDITY_VALUE = -1e7
const MAX_HEAT_HUMIDITY_VALUE = 1e7
// Grid widths. We use lower grid widths // Grid widths. We use lower grid widths
// as the grid becomes more crammed. // as the grid becomes more crammed.
// There are 4 levels from 0 to 3. // There are 4 levels from 0 to 3.
@ -101,6 +105,9 @@ let draw_humidity_min, draw_humidity_max;
let midpoint_heat; let midpoint_heat;
let midpoint_humidity; let midpoint_humidity;
// Y altitude at which the diagram is currently viewed at
let viewY = 0;
// Biome noise settings // Biome noise settings
const NOISE_OFFSET_DEFAULT = 50; const NOISE_OFFSET_DEFAULT = 50;
const NOISE_SCALE_DEFAULT = 50; const NOISE_SCALE_DEFAULT = 50;
@ -259,12 +266,9 @@ function addBiome(biomeDef) {
draw(true); draw(true);
} }
// Get the Y vale of the widget to set the Y altitude // Get the Y value of the viewed altitude
function getViewY() { function getViewY() {
if (!inputViewY) { return viewY;
return 0;
}
return inputViewY.value;
} }
// Returns the biome point by its given ID // Returns the biome point by its given ID
// or null if it couldn't be found // or null if it couldn't be found
@ -843,6 +847,14 @@ function draw(recalculate) {
return true; return true;
} }
// Render a special message if the value range is huge
if ((limit_heat_max - limit_heat_min > MAX_HEAT_HUMIDITY_VALUE) || (limit_humidity_max - limit_humidity_min > MAX_HEAT_HUMIDITY_VALUE)) {
showDiagramMessage(context, "Value range is too large.");
drawError = true;
putResizeCorner(context);
return true;
}
let points = getRenderedPoints(y); let points = getRenderedPoints(y);
// Render a special message if there are no biomes // Render a special message if there are no biomes
if (points.length === 0) { if (points.length === 0) {
@ -1256,7 +1268,7 @@ function updatePointWhenDragged(pointID) {
/* Updates the text showing the current altitude (Y height) /* Updates the text showing the current altitude (Y height)
the diagram currently applies */ the diagram currently applies */
function updateAltitudeText() { function updateAltitudeText() {
altitudeDisplay.innerHTML = "showing diagram for altitude Y=<span class='statAltitude'>"+inputViewY.value+"</span>"; altitudeDisplay.innerHTML = "showing diagram for altitude Y=<span class='statAltitude'>"+getViewY()+"</span>";
} }
@ -1552,8 +1564,12 @@ biomeSelector.onchange = function() {
addBiomeButton.onclick = function() { addBiomeButton.onclick = function() {
// Add a biome at a random position // Add a biome at a random position
let he = Math.round(limit_heat_min + Math.random() * (limit_heat_max - limit_heat_min)); let he_min = Math.max(MIN_HEAT_HUMIDITY_VALUE, limit_heat_min);
let hu = Math.round(limit_humidity_min + Math.random() * (limit_humidity_max - limit_humidity_min)); let he_max = Math.min(MAX_HEAT_HUMIDITY_VALUE, limit_heat_max);
let hu_min = Math.max(MIN_HEAT_HUMIDITY_VALUE, limit_heat_min);
let hu_max = Math.min(MAX_HEAT_HUMIDITY_VALUE, limit_heat_max);
let he = Math.round(he_min + Math.random() * (he_max - he_min));
let hu = Math.round(hu_min + Math.random() * (hu_max - hu_min));
addBiome({name: generateBiomeName(lastBiomeID), heat: he, humidity: hu, min_y: MIN_Y_DEFAULT, max_y: MAX_Y_DEFAULT}); addBiome({name: generateBiomeName(lastBiomeID), heat: he, humidity: hu, min_y: MIN_Y_DEFAULT, max_y: MAX_Y_DEFAULT});
} }
removeBiomeButton.onclick = function() { removeBiomeButton.onclick = function() {
@ -1583,18 +1599,28 @@ removeBiomeButton.onclick = function() {
} }
/* Biome editing widgets events */ /* Biome editing widgets events */
function handleBiomeNumberInput(biomeValueName, element) {
let val = +element.value;
if (element.value === "" || typeof val !== "number") {
return;
}
if (element.min !== "" && (val < +element.min || val > +element.max)) {
return;
}
onChangeBiomeValueWidget(biomeValueName, val);
}
inputHeat.oninput = function() { inputHeat.oninput = function() {
onChangeBiomeValueWidget("heat", +this.value); handleBiomeNumberInput("heat", this);
} }
inputHumidity.oninput = function() { inputHumidity.oninput = function() {
onChangeBiomeValueWidget("humidity", +this.value); handleBiomeNumberInput("humidity", this);
} }
inputMinY.oninput = function() { inputMinY.oninput = function() {
onChangeBiomeValueWidget("min_y", +this.value); handleBiomeNumberInput("min_y", this);
} }
inputMaxY.oninput = function() { inputMaxY.oninput = function() {
onChangeBiomeValueWidget("max_y", +this.value); handleBiomeNumberInput("max_y", this);
} }
inputBiomeName.oninput = function() { inputBiomeName.oninput = function() {
onChangeBiomeValueWidget("name", this.value); onChangeBiomeValueWidget("name", this.value);
@ -1603,6 +1629,11 @@ inputBiomeName.oninput = function() {
/* Diagram view settings events */ /* Diagram view settings events */
inputViewY.oninput = function() { inputViewY.oninput = function() {
let y = +this.value;
if (y === null) {
return;
}
viewY = Math.floor(y);
draw(true); draw(true);
updateAltitudeText(); updateAltitudeText();
} }
@ -1629,53 +1660,43 @@ inputCheckboxAxes.onchange = function() {
/* Noise parameters events */ /* Noise parameters events */
inputNoiseHeatScale.oninput = function() { function updateNoiseParam(noiseName, noiseValueName, element) {
noises.heat.scale = +this.value; if (element.value === "") {
return;
}
let val = +element.value;
if (val < +element.min || val > +element.max) {
return;
}
noises[noiseName][noiseValueName] = val;
clear(); clear();
updateAreaVars(); updateAreaVars();
draw(true); draw(true);
} }
inputNoiseHeatScale.oninput = function() {
updateNoiseParam("heat", "scale", this);
}
inputNoiseHeatOffset.oninput = function() { inputNoiseHeatOffset.oninput = function() {
noises.heat.offset = +this.value; updateNoiseParam("heat", "offset", this);
clear();
updateAreaVars();
draw(true);
} }
inputNoiseHeatPersistence.oninput = function() { inputNoiseHeatPersistence.oninput = function() {
noises.heat.persistence = +this.value; updateNoiseParam("heat", "persistence", this);
clear();
updateAreaVars();
draw(true);
} }
inputNoiseHeatOctaves.oninput = function() { inputNoiseHeatOctaves.oninput = function() {
noises.heat.octaves = +this.value; updateNoiseParam("heat", "octaves", this);
clear();
updateAreaVars();
draw(true);
} }
inputNoiseHumidityScale.oninput = function() { inputNoiseHumidityScale.oninput = function() {
noises.humidity.scale = +this.value; updateNoiseParam("humidity", "scale", this);
clear();
updateAreaVars();
draw(true);
} }
inputNoiseHumidityOffset.oninput = function() { inputNoiseHumidityOffset.oninput = function() {
noises.humidity.offset = +this.value; updateNoiseParam("humidity", "offset", this);
clear();
updateAreaVars();
draw(true);
} }
inputNoiseHumidityPersistence.oninput = function() { inputNoiseHumidityPersistence.oninput = function() {
noises.humidity.persistence = +this.value; updateNoiseParam("humidity", "persistence", this);
clear();
updateAreaVars();
draw(true);
} }
inputNoiseHumidityOctaves.oninput = function() { inputNoiseHumidityOctaves.oninput = function() {
noises.humidity.octaves = +this.value; updateNoiseParam("humidity", "octaves", this);
clear();
updateAreaVars();
draw(true);
} }
inputNoiseReset.onclick = function() { inputNoiseReset.onclick = function() {
noises.heat.offset = NOISE_OFFSET_DEFAULT; noises.heat.offset = NOISE_OFFSET_DEFAULT;