mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-17 09:41:24 +01:00
v1.6.10 - updated points number input to a generic style
This commit is contained in:
parent
354830d4ec
commit
8767893d72
4 changed files with 56 additions and 63 deletions
|
|
@ -938,14 +938,14 @@
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
||||||
<tr data-tip="Set number of points to be used for graph generation. Highly affects performance">
|
<tr data-tip="Set number of points to be used for graph generation. Highly affects performance. 10K is the only recommended value">
|
||||||
<td></td>
|
<td></td>
|
||||||
<td>Points number</td>
|
<td>Points number</td>
|
||||||
<td>
|
<td>
|
||||||
<input id="densityInput" type="range" min=1 max=13 value=4>
|
<input id="pointsInput" type="range" min=1 max=13 value=4 data-cells=10000 >
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<output id="densityOutput">10K</output>
|
<output id="pointsOutput" style="color: #053305">10K</output>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
||||||
|
|
|
||||||
28
main.js
28
main.js
|
|
@ -12,21 +12,6 @@ const TIME = !PRODUCTION;
|
||||||
const WARN = 1;
|
const WARN = 1;
|
||||||
const ERROR = 1;
|
const ERROR = 1;
|
||||||
|
|
||||||
// constants to link density values to number of cells
|
|
||||||
const POINTS_1K = 1;
|
|
||||||
const POINTS_2K = 2;
|
|
||||||
const POINTS_5K = 3;
|
|
||||||
const POINTS_10K = 4;
|
|
||||||
const POINTS_20K = 5;
|
|
||||||
const POINTS_30K = 6;
|
|
||||||
const POINTS_40K = 7;
|
|
||||||
const POINTS_50K = 8;
|
|
||||||
const POINTS_60K = 9;
|
|
||||||
const POINTS_70K = 10;
|
|
||||||
const POINTS_80K = 11;
|
|
||||||
const POINTS_90K = 12;
|
|
||||||
const POINTS_100K = 13;
|
|
||||||
|
|
||||||
// if map version is not stored, clear localStorage and show a message
|
// if map version is not stored, clear localStorage and show a message
|
||||||
if (rn(localStorage.getItem("version"), 2) !== rn(version, 2)) {
|
if (rn(localStorage.getItem("version"), 2) !== rn(version, 2)) {
|
||||||
localStorage.clear();
|
localStorage.clear();
|
||||||
|
|
@ -367,10 +352,11 @@ function showWelcomeMessage() {
|
||||||
<li>River generation code refactored and optimized</li>
|
<li>River generation code refactored and optimized</li>
|
||||||
<li>Rivers discharge (flux) and mouth width calculated</li>
|
<li>Rivers discharge (flux) and mouth width calculated</li>
|
||||||
<li>Lake editor rework</li>
|
<li>Lake editor rework</li>
|
||||||
<li>Lake type defined dynamically based on evaporation and river system</li>
|
<li>Lake type based on evaporation and river system</li>
|
||||||
<li>Lake flux, inlets and outlet tracked properly</li>
|
<li>Lake flux, inlets and outlet tracked properly</li>
|
||||||
<li>Lake outlet rendered with starting width depending on flux</li>
|
<li>Lake outlet width depends on flux</li>
|
||||||
<li>Lakes now have names</li>
|
<li>Lakes now have names</li>
|
||||||
|
<li>Rulers rework (v1.61)</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<iframe width="100%" height="auto" src="https://www.youtube.com/embed/XBSNkTf1Ddg?controls=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
<iframe width="100%" height="auto" src="https://www.youtube.com/embed/XBSNkTf1Ddg?controls=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
||||||
|
|
@ -628,12 +614,8 @@ function generateSeed() {
|
||||||
// Place points to calculate Voronoi diagram
|
// Place points to calculate Voronoi diagram
|
||||||
function placePoints() {
|
function placePoints() {
|
||||||
TIME && console.time("placePoints");
|
TIME && console.time("placePoints");
|
||||||
let cellsDesired = 10000 * (+densityInput.value - POINTS_5K); // generate 10k points for each densityInput point
|
|
||||||
switch (+densityInput.value) {
|
const cellsDesired = +pointsInput.dataset.cells;
|
||||||
case POINTS_1K: cellsDesired = 1000; break;
|
|
||||||
case POINTS_2K: cellsDesired = 2000; break;
|
|
||||||
case POINTS_5K: cellsDesired = 5000; break;
|
|
||||||
}
|
|
||||||
const spacing = grid.spacing = rn(Math.sqrt(graphWidth * graphHeight / cellsDesired), 2); // spacing between points before jirrering
|
const spacing = grid.spacing = rn(Math.sqrt(graphWidth * graphHeight / cellsDesired), 2); // spacing between points before jirrering
|
||||||
grid.boundary = getBoundaryPoints(graphWidth, graphHeight, spacing);
|
grid.boundary = getBoundaryPoints(graphWidth, graphHeight, spacing);
|
||||||
grid.points = getJitteredGrid(graphWidth, graphHeight, spacing); // jittered square grid
|
grid.points = getJitteredGrid(graphWidth, graphHeight, spacing); // jittered square grid
|
||||||
|
|
|
||||||
|
|
@ -186,38 +186,38 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
function getBlobPower() {
|
function getBlobPower() {
|
||||||
switch (+densityInput.value) {
|
switch (+pointsInput.dataset.cells) {
|
||||||
case POINTS_1K: return .93;
|
case 1000: return .93;
|
||||||
case POINTS_2K: return .95;
|
case 2000: return .95;
|
||||||
case POINTS_5K: return .96;
|
case 5000: return .96;
|
||||||
case POINTS_10K: return .98;
|
case 10000: return .98;
|
||||||
case POINTS_20K: return .985;
|
case 20000: return .985;
|
||||||
case POINTS_30K: return .987;
|
case 30000: return .987;
|
||||||
case POINTS_40K: return .9892;
|
case 40000: return .9892;
|
||||||
case POINTS_50K: return .9911;
|
case 50000: return .9911;
|
||||||
case POINTS_60K: return .9921;
|
case 60000: return .9921;
|
||||||
case POINTS_70K: return .9934;
|
case 70000: return .9934;
|
||||||
case POINTS_80K: return .9942;
|
case 80000: return .9942;
|
||||||
case POINTS_90K: return .9946;
|
case 90000: return .9946;
|
||||||
case POINTS_100K: return .995;
|
case 100000: return .995;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function getLinePower() {
|
function getLinePower() {
|
||||||
switch (+densityInput.value) {
|
switch (+pointsInput.dataset.cells) {
|
||||||
case POINTS_1K: return .74;
|
case 1000: return .74;
|
||||||
case POINTS_2K: return .75;
|
case 2000: return .75;
|
||||||
case POINTS_5K: return .78;
|
case 5000: return .78;
|
||||||
case POINTS_10K: return .81;
|
case 10000: return .81;
|
||||||
case POINTS_20K: return .82;
|
case 20000: return .82;
|
||||||
case POINTS_30K: return .83;
|
case 30000: return .83;
|
||||||
case POINTS_40K: return .84;
|
case 40000: return .84;
|
||||||
case POINTS_50K: return .855;
|
case 50000: return .855;
|
||||||
case POINTS_60K: return .87;
|
case 60000: return .87;
|
||||||
case POINTS_70K: return .885;
|
case 70000: return .885;
|
||||||
case POINTS_80K: return .91;
|
case 80000: return .91;
|
||||||
case POINTS_90K: return .92;
|
case 90000: return .92;
|
||||||
case POINTS_100K: return .93;
|
case 100000: return .93;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -102,7 +102,7 @@ const optionsContent = document.getElementById("optionsContent");
|
||||||
optionsContent.addEventListener("input", function(event) {
|
optionsContent.addEventListener("input", function(event) {
|
||||||
const id = event.target.id, value = event.target.value;
|
const id = event.target.id, value = event.target.value;
|
||||||
if (id === "mapWidthInput" || id === "mapHeightInput") mapSizeInputChange();
|
if (id === "mapWidthInput" || id === "mapHeightInput") mapSizeInputChange();
|
||||||
else if (id === "densityInput" || id === "densityOutput") changeCellsDensity(+value);
|
else if (id === "pointsInput") changeCellsDensity(+value);
|
||||||
else if (id === "culturesInput") culturesOutput.value = value;
|
else if (id === "culturesInput") culturesOutput.value = value;
|
||||||
else if (id === "culturesOutput") culturesInput.value = value;
|
else if (id === "culturesOutput") culturesInput.value = value;
|
||||||
else if (id === "culturesSet") changeCultureSet();
|
else if (id === "culturesSet") changeCultureSet();
|
||||||
|
|
@ -276,15 +276,26 @@ function copyMapURL() {
|
||||||
}
|
}
|
||||||
|
|
||||||
function changeCellsDensity(value) {
|
function changeCellsDensity(value) {
|
||||||
switch (value) {
|
const convert = v => {
|
||||||
case POINTS_1K : densityOutput.value = "1K"; break;
|
if (v == 1) return 1000;
|
||||||
case POINTS_2K : densityOutput.value = "2K"; break;
|
if (v == 2) return 2000;
|
||||||
case POINTS_5K : densityOutput.value = "5K"; break;
|
if (v == 3) return 5000;
|
||||||
default: densityOutput.value = (value-POINTS_5K) * 10 + "K";
|
if (v == 4) return 10000;
|
||||||
|
if (v == 5) return 20000;
|
||||||
|
if (v == 6) return 30000;
|
||||||
|
if (v == 7) return 40000;
|
||||||
|
if (v == 8) return 50000;
|
||||||
|
if (v == 9) return 60000;
|
||||||
|
if (v == 10) return 70000;
|
||||||
|
if (v == 11) return 80000;
|
||||||
|
if (v == 12) return 90000;
|
||||||
|
if (v == 13) return 100000;
|
||||||
}
|
}
|
||||||
if (value > POINTS_50K) densityOutput.style.color = "#b12117";
|
const cells = convert(value);
|
||||||
else if (value > POINTS_10K) densityOutput.style.color = "#dfdf12";
|
|
||||||
else densityOutput.style.color = "#038603";
|
pointsInput.setAttribute("data-cells", cells);
|
||||||
|
pointsOutput.value = cells / 1000 + "K";
|
||||||
|
pointsOutput.style.color = cells > 50000 ? "#b12117" : cells !== 10000 ? "#dfdf12" : "#053305";
|
||||||
}
|
}
|
||||||
|
|
||||||
function changeCultureSet() {
|
function changeCultureSet() {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue