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>
</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>Points number</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>
<output id="densityOutput">10K</output>
<output id="pointsOutput" style="color: #053305">10K</output>
</td>
</tr>

28
main.js
View file

@ -12,21 +12,6 @@ const TIME = !PRODUCTION;
const WARN = 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 (rn(localStorage.getItem("version"), 2) !== rn(version, 2)) {
localStorage.clear();
@ -367,10 +352,11 @@ function showWelcomeMessage() {
<li>River generation code refactored and optimized</li>
<li>Rivers discharge (flux) and mouth width calculated</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 outlet rendered with starting width depending on flux</li>
<li>Lake outlet width depends on flux</li>
<li>Lakes now have names</li>
<li>Rulers rework (v1.61)</li>
</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>
@ -628,12 +614,8 @@ function generateSeed() {
// Place points to calculate Voronoi diagram
function placePoints() {
TIME && console.time("placePoints");
let cellsDesired = 10000 * (+densityInput.value - POINTS_5K); // generate 10k points for each densityInput point
switch (+densityInput.value) {
case POINTS_1K: cellsDesired = 1000; break;
case POINTS_2K: cellsDesired = 2000; break;
case POINTS_5K: cellsDesired = 5000; break;
}
const cellsDesired = +pointsInput.dataset.cells;
const spacing = grid.spacing = rn(Math.sqrt(graphWidth * graphHeight / cellsDesired), 2); // spacing between points before jirrering
grid.boundary = getBoundaryPoints(graphWidth, graphHeight, spacing);
grid.points = getJitteredGrid(graphWidth, graphHeight, spacing); // jittered square grid

View file

@ -186,38 +186,38 @@
}
function getBlobPower() {
switch (+densityInput.value) {
case POINTS_1K: return .93;
case POINTS_2K: return .95;
case POINTS_5K: return .96;
case POINTS_10K: return .98;
case POINTS_20K: return .985;
case POINTS_30K: return .987;
case POINTS_40K: return .9892;
case POINTS_50K: return .9911;
case POINTS_60K: return .9921;
case POINTS_70K: return .9934;
case POINTS_80K: return .9942;
case POINTS_90K: return .9946;
case POINTS_100K: return .995;
switch (+pointsInput.dataset.cells) {
case 1000: return .93;
case 2000: return .95;
case 5000: return .96;
case 10000: return .98;
case 20000: return .985;
case 30000: return .987;
case 40000: return .9892;
case 50000: return .9911;
case 60000: return .9921;
case 70000: return .9934;
case 80000: return .9942;
case 90000: return .9946;
case 100000: return .995;
}
}
function getLinePower() {
switch (+densityInput.value) {
case POINTS_1K: return .74;
case POINTS_2K: return .75;
case POINTS_5K: return .78;
case POINTS_10K: return .81;
case POINTS_20K: return .82;
case POINTS_30K: return .83;
case POINTS_40K: return .84;
case POINTS_50K: return .855;
case POINTS_60K: return .87;
case POINTS_70K: return .885;
case POINTS_80K: return .91;
case POINTS_90K: return .92;
case POINTS_100K: return .93;
switch (+pointsInput.dataset.cells) {
case 1000: return .74;
case 2000: return .75;
case 5000: return .78;
case 10000: return .81;
case 20000: return .82;
case 30000: return .83;
case 40000: return .84;
case 50000: return .855;
case 60000: return .87;
case 70000: return .885;
case 80000: return .91;
case 90000: return .92;
case 100000: return .93;
}
}

View file

@ -102,7 +102,7 @@ const optionsContent = document.getElementById("optionsContent");
optionsContent.addEventListener("input", function(event) {
const id = event.target.id, value = event.target.value;
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 === "culturesOutput") culturesInput.value = value;
else if (id === "culturesSet") changeCultureSet();
@ -276,15 +276,26 @@ function copyMapURL() {
}
function changeCellsDensity(value) {
switch (value) {
case POINTS_1K : densityOutput.value = "1K"; break;
case POINTS_2K : densityOutput.value = "2K"; break;
case POINTS_5K : densityOutput.value = "5K"; break;
default: densityOutput.value = (value-POINTS_5K) * 10 + "K";
const convert = v => {
if (v == 1) return 1000;
if (v == 2) return 2000;
if (v == 3) return 5000;
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";
else if (value > POINTS_10K) densityOutput.style.color = "#dfdf12";
else densityOutput.style.color = "#038603";
const cells = convert(value);
pointsInput.setAttribute("data-cells", cells);
pointsOutput.value = cells / 1000 + "K";
pointsOutput.style.color = cells > 50000 ? "#b12117" : cells !== 10000 ? "#dfdf12" : "#053305";
}
function changeCultureSet() {