v1.6.10 - updated points number input to a generic style

This commit is contained in:
Azgaar 2021-03-06 00:36:22 +03:00
parent 354830d4ec
commit 8767893d72
4 changed files with 56 additions and 63 deletions

View file

@ -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
View file

@ -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

View file

@ -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;
} }
} }

View file

@ -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() {