Verify inputs, limit ranges
This commit is contained in:
parent
828b99c243
commit
588acba140
16
index.html
16
index.html
@ -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: </label>
|
<label for="inputHeat">Heat: </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: </label>
|
<label for="inputHumidity">Humidity: </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: </label>
|
<label for="inputNoiseHeatOffset">Offset: </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: </label>
|
<label for="inputNoiseHeatScale">Scale: </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: </label>
|
<label for="inputNoiseHeatOctaves">Octaves: </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: </label>
|
<label for="inputNoiseHeatPersistence">Persistence: </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: </label>
|
<label for="inputNoiseHumidityOffset">Offset: </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: </label>
|
<label for="inputNoiseHumidityScale">Scale: </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: </label>
|
<label for="inputNoiseHumidityOctaves">Octaves: </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: </label>
|
<label for="inputNoiseHumidityPersistence">Persistence: </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
105
mibpov.js
@ -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;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user