Skip to content

Commit

Permalink
Ocean heightmap to v1.96 (#1044)
Browse files Browse the repository at this point in the history 
* feat: allow to render ocean heightmap

* feat: allow to render ocean heightmap - test

* feat: allow to render ocean heightmap - fix issue

* feat: allow to render ocean heightmap - cleanup

---------

Co-authored-by: Azgaar <[email protected]>
  • Loading branch information
@Azgaar
Azgaar and Azgaar authored Feb 12, 2024
1 parent 83dff66 commit a4c4db6
Show file tree
Hide file tree
Showing 25 changed files with 350 additions and 198 deletions.
107 changes: 57 additions & 50 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -827,6 +827,63 @@
</tr>
</tbody>

<tbody id="styleHeightmap">
<tr id="styleHeightmapRenderOceanOption" data-tip="Check to render ocean heights">
<td colspan="2">
<input id="styleHeightmapRenderOcean" class="checkbox" type="checkbox" />
<label for="styleHeightmapRenderOcean" class="checkbox-label">Render ocean heights</label>
</td>
</tr>

<tr data-tip="Terracing rate. Set to 0 (toggle off) to improve performance">
<td>Terracing</td>
<td>
<input id="styleHeightmapTerracingInput" type="range" min="0" max="20" step="1" />
<output id="styleHeightmapTerracingOutput">0</output>
</td>
</tr>

<tr data-tip="Layers reduction rate. Increase to improve performance">
<td>Reduce layers</td>
<td>
<input id="styleHeightmapSkipInput" type="range" min="0" max="10" step="1" value="5" />
<output id="styleHeightmapSkipOutput">5</output>
</td>
</tr>

<tr data-tip="Line simplification rate. Increase to slightly improve performance">
<td>Simplify line</td>
<td>
<input id="styleHeightmapSimplificationInput" type="range" min="0" max="10" step="1" value="0" />
<output id="styleHeightmapSimplificationOutput">0</output>
</td>
</tr>

<tr data-tip="Select line interpolation type">
<td>Line style</td>
<td>
<select id="styleHeightmapCurve">
<option value="curveBasisClosed" selected>Curved</option>
<option value="curveLinear">Linear</option>
<option value="curveStep">Rectangular</option>
</select>
</td>
</tr>

<tr data-tip="Select color scheme for the element">
<td>Color scheme</td>
<td>
<select id="styleHeightmapScheme"></select>
<button
id="openCreateHeightmapSchemeButton"
data-tip="Click to add a custom heightmap color scheme"
data-stops="#ffffff,#EEEECC,#D2B48C,#008000,#008080"
class="icon-plus sideButton"
></button>
</td>
</tr>
</tbody>

<tbody id="styleOpacity" style="display: none">
<tr data-tip="Set opacity. 0: transparent, 1: solid">
<td>Opacity</td>
Expand Down Expand Up @@ -1284,56 +1341,6 @@
</tr>
</tbody>

<tbody id="styleHeightmap">
<tr data-tip="Terracing rate. Set to 0 (toggle off) to improve performance">
<td>Terracing</td>
<td>
<input id="styleHeightmapTerracingInput" type="range" min="0" max="20" step="1" />
<output id="styleHeightmapTerracingOutput">0</output>
</td>
</tr>

<tr data-tip="Layers reduction rate. Increase to improve performance">
<td>Reduce layers</td>
<td>
<input id="styleHeightmapSkipInput" type="range" min="0" max="10" step="1" value="5" />
<output id="styleHeightmapSkipOutput">5</output>
</td>
</tr>

<tr data-tip="Line simplification rate. Increase to slightly improve performance">
<td>Simplify line</td>
<td>
<input id="styleHeightmapSimplificationInput" type="range" min="0" max="10" step="1" value="0" />
<output id="styleHeightmapSimplificationOutput">0</output>
</td>
</tr>

<tr data-tip="Select line interpolation type">
<td>Line style</td>
<td>
<select id="styleHeightmapCurve">
<option value="0" selected>Curved</option>
<option value="1">Linear</option>
<option value="2">Rectangular</option>
</select>
</td>
</tr>

<tr data-tip="Select color scheme for the element">
<td>Color scheme</td>
<td>
<select id="styleHeightmapScheme"></select>
<button
id="openCreateHeightmapSchemeButton"
data-tip="Click to add a custom heightmap color scheme"
data-stops="#ffffff,#EEEECC,#D2B48C,#008000,#008080"
class="icon-plus sideButton"
></button>
</td>
</tr>
</tbody>

<tbody id="styleArmies">
<tr data-tip="Set fill transparency. Set to 0 to make it fully transparent">
<td>Fill opacity</td>
Expand Down
2 changes: 1 addition & 1 deletion libs/polylabel.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion libs/three.min.js
View file

Large diffs are not rendered by default.

53 changes: 31 additions & 22 deletions main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,16 +92,19 @@ let fogging = viewbox
let ruler = viewbox.append("g").attr("id", "ruler").style("display", "none");
let debug = viewbox.append("g").attr("id", "debug");

// lake and coast groups
lakes.append("g").attr("id", "freshwater");
lakes.append("g").attr("id", "salt");
lakes.append("g").attr("id", "sinkhole");
lakes.append("g").attr("id", "frozen");
lakes.append("g").attr("id", "lava");
lakes.append("g").attr("id", "dry");

coastline.append("g").attr("id", "sea_island");
coastline.append("g").attr("id", "lake_island");

terrs.append("g").attr("id", "oceanHeights");
terrs.append("g").attr("id", "landHeights");

labels.append("g").attr("id", "states");
labels.append("g").attr("id", "addedLabels");

Expand Down Expand Up @@ -840,29 +843,33 @@ function openNearSeaLakes() {
const LIMIT = 22; // max height that can be breached by water

for (const i of cells.i) {
const lake = cells.f[i];
if (features[lake].type !== "lake") continue; // not a lake cell
const lakeFeatureId = cells.f[i];
if (features[lakeFeatureId].type !== "lake") continue; // not a lake

check_neighbours: for (const c of cells.c[i]) {
if (cells.t[c] !== 1 || cells.h[c] > LIMIT) continue; // water cannot break this

for (const n of cells.c[c]) {
const ocean = cells.f[n];
if (features[ocean].type !== "ocean") continue; // not an ocean
removeLake(c, lake, ocean);
removeLake(c, lakeFeatureId, ocean);
break check_neighbours;
}
}
}

function removeLake(threshold, lake, ocean) {
cells.h[threshold] = 19;
cells.t[threshold] = -1;
cells.f[threshold] = ocean;
cells.c[threshold].forEach(function (c) {
function removeLake(thresholdCellId, lakeFeatureId, oceanFeatureId) {
cells.h[thresholdCellId] = 19;
cells.t[thresholdCellId] = -1;
cells.f[thresholdCellId] = oceanFeatureId;
cells.c[thresholdCellId].forEach(function (c) {
if (cells.h[c] >= 20) cells.t[c] = 1; // mark as coastline
});
features[lake].type = "ocean"; // mark former lake as ocean

cells.i.forEach(i => {
if (cells.f[i] === lakeFeatureId) cells.f[i] = oceanFeatureId;
});
features[lakeFeatureId].type = "ocean"; // mark former lake as ocean
}

TIME && console.timeEnd("openLakes");
Expand Down Expand Up @@ -1249,6 +1256,7 @@ function drawCoastline() {
features[f].vertices = vchain;

const path = round(lineGen(points));

if (features[f].type === "lake") {
landMask
.append("path")
Expand Down Expand Up @@ -1346,22 +1354,14 @@ function drawCoastline() {
// Re-mark features (ocean, lakes, islands)
function reMarkFeatures() {
TIME && console.time("reMarkFeatures");
const cells = pack.cells,
features = (pack.features = [0]);
const cells = pack.cells;
const features = (pack.features = [0]);

cells.f = new Uint16Array(cells.i.length); // cell feature number
cells.t = new Int8Array(cells.i.length); // cell type: 1 = land along coast; -1 = water along coast;
cells.haven = cells.i.length < 65535 ? new Uint16Array(cells.i.length) : new Uint32Array(cells.i.length); // cell haven (opposite water cell);
cells.harbor = new Uint8Array(cells.i.length); // cell harbor (number of adjacent water cells);

const defineHaven = i => {
const water = cells.c[i].filter(c => cells.h[c] < 20);
const dist2 = water.map(c => (cells.p[i][0] - cells.p[c][0]) ** 2 + (cells.p[i][1] - cells.p[c][1]) ** 2);
const closest = water[dist2.indexOf(Math.min.apply(Math, dist2))];

cells.haven[i] = closest;
cells.harbor[i] = water.length;
};

if (!cells.i.length) return; // no cells -> there is nothing to do
for (let i = 1, queue = [0]; queue[0] !== -1; i++) {
const start = queue[0]; // first cell
Expand Down Expand Up @@ -1402,6 +1402,15 @@ function reMarkFeatures() {
// markupPackLand
markup(pack.cells, 3, 1, 0);

function defineHaven(i) {
const water = cells.c[i].filter(c => cells.h[c] < 20);
const dist2 = water.map(c => (cells.p[i][0] - cells.p[c][0]) ** 2 + (cells.p[i][1] - cells.p[c][1]) ** 2);
const closest = water[dist2.indexOf(Math.min.apply(Math, dist2))];

cells.haven[i] = closest;
cells.harbor[i] = water.length;
}

function defineOceanGroup(number) {
if (number > grid.cells.i.length / 25) return "ocean";
if (number > grid.cells.i.length / 100) return "sea";
Expand Down Expand Up @@ -1924,7 +1933,7 @@ function showStatistics() {

mapId = Date.now(); // unique map id is it's creation date number
mapHistory.push({seed, width: graphWidth, height: graphHeight, template: heightmap, created: mapId});
INFO && console.log(stats);
INFO && console.info(stats);
}

const regenerateMap = debounce(async function (options) {
Expand Down
15 changes: 9 additions & 6 deletions modules/cultures-generator.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,28 +71,31 @@ window.Cultures = (function () {
return;
}

const cell = (c.center = placeCenter(c.sort ? c.sort : i => cells.s[i]));
centers.add(cells.p[cell]);
const sortingFn = c.sort ? c.sort : i => cells.s[i];
const center = placeCenter(sortingFn);

centers.add(cells.p[center]);
c.center = center;
c.i = newId;
delete c.odd;
delete c.sort;
c.color = colors[i];
c.type = defineCultureType(cell);
c.type = defineCultureType(center);
c.expansionism = defineCultureExpansionism(c.type);
c.origins = [0];
c.code = abbreviate(c.name, codes);
codes.push(c.code);
cultureIds[cell] = newId;
cultureIds[center] = newId;
if (emblemShape === "random") c.shield = getRandomShield();
});

cells.culture = cultureIds;

function placeCenter(v) {
function placeCenter(sortingFn) {
let spacing = (graphWidth + graphHeight) / 2 / count;
const MAX_ATTEMPTS = 100;

const sorted = [...populated].sort((a, b) => v(b) - v(a));
const sorted = [...populated].sort((a, b) => sortingFn(b) - sortingFn(a));
const max = Math.floor(sorted.length / 2);

let cellId = 0;
Expand Down
40 changes: 40 additions & 0 deletions modules/dynamic/auto-update.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -738,6 +738,46 @@ export function resolveVersionConflicts(version) {
}

if (version < 1.96) {
// v1.96 added ocean rendering for heightmap
terrs.selectAll("*").remove();

const opacity = terrs.attr("opacity");
const filter = terrs.attr("filter");
const scheme = terrs.attr("scheme");
const terracing = terrs.attr("terracing");
const skip = terrs.attr("skip");
const relax = terrs.attr("relax");

const curveTypes = {0: "curveBasisClosed", 1: "curveLinear", 2: "curveStep"};
const curve = curveTypes[terrs.attr("curve")] || "curveBasisClosed";

terrs.attr("scheme", null).attr("terracing", null).attr("skip", null).attr("relax", null).attr("curve", null);

terrs
.append("g")
.attr("id", "oceanHeights")
.attr("data-render", 0)
.attr("opacity", opacity)
.attr("filter", filter)
.attr("scheme", scheme)
.attr("terracing", 0)
.attr("skip", 0)
.attr("relax", 1)
.attr("curve", curve);
terrs
.append("g")
.attr("id", "landHeights")
.attr("opacity", opacity)
.attr("scheme", scheme)
.attr("filter", filter)
.attr("terracing", terracing)
.attr("skip", skip)
.attr("relax", relax)
.attr("curve", curve)
.attr("mask", "url(#land)");

if (layerIsOn("toggleHeight")) drawHeightmap();

// v1.96.00 moved scaleBar options from units editor to style
d3.select("#scaleBar").remove();

Expand Down
6 changes: 3 additions & 3 deletions modules/io/cloud.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ window.Cloud = (function () {

async save(fileName, contents) {
const resp = await this.call("filesUpload", {path: "/" + fileName, contents});
DEBUG && console.log("Dropbox response:", resp);
DEBUG && console.info("Dropbox response:", resp);
return true;
},

Expand Down Expand Up @@ -104,7 +104,7 @@ window.Cloud = (function () {

// Callback function for auth window
async setDropBoxToken(token) {
DEBUG && console.log("Access token:", token);
DEBUG && console.info("Access token:", token);
setToken(this.name, token);
await this.connect(token);
this.authWindow.close();
Expand All @@ -131,7 +131,7 @@ window.Cloud = (function () {
allow_download: true
};
const resp = await this.call("sharingCreateSharedLinkWithSettings", {path, settings});
DEBUG && console.log("Dropbox link object:", resp.result);
DEBUG && console.info("Dropbox link object:", resp.result);
return resp.result.url;
}
};
Expand Down
Loading

0 comments on commit a4c4db6

Please sign in to comment.