From 77f371e28fa0c2b9f0bd66f8d99a78b17975f802 Mon Sep 17 00:00:00 2001 From: Azgaar Date: Wed, 21 Jul 2021 00:15:05 +0300 Subject: [PATCH 01/21] river generator - subs confluence to select main stem --- modules/river-generator.js | 35 ++++++++++++++++++++++++----------- modules/ui/tools.js | 2 +- 2 files changed, 25 insertions(+), 12 deletions(-) diff --git a/modules/river-generator.js b/modules/river-generator.js index 948afd07..02bf409e 100644 --- a/modules/river-generator.js +++ b/modules/river-generator.js @@ -31,7 +31,11 @@ const land = cells.i.filter(i => h[i] >= 20).sort((a, b) => h[b] - h[a]); const lakeOutCells = Lakes.setClimateData(h); + let step = 0; + land.forEach(function (i) { + step++; + cells.fl[i] += grid.cells.prec[cells.g[i]]; // flux from precipitation const [x, y] = p[i]; @@ -59,7 +63,7 @@ } lake.outlet = cells.r[lakeCell]; - flowDown(i, cells.fl[i], cells.fl[lakeCell], lake.outlet); + flowDown(i, cells.fl[lakeCell], lake.outlet); } // assign all tributary rivers to outlet basin @@ -100,15 +104,24 @@ riverNext++; } - flowDown(min, cells.fl[min], cells.fl[i], cells.r[i], i); + flowDown(min, cells.fl[i], cells.r[i], i, step); }); } - function flowDown(toCell, toFlux, fromFlux, river, fromCell = 0) { + function flowDown(toCell, fromFlux, river, fromCell, step) { + const toFlux = cells.fl[toCell] - cells.conf[toCell]; + // prettier-ignore + if (step) debug.append("text") + .attr("x", pack.cells.p[fromCell][0]) + .attr("y", pack.cells.p[fromCell][1]) + .text(`${step}: ${fromFlux} -> ${toFlux}`) + .attr("font-size", "1.5px"); + if (cells.r[toCell]) { // downhill cell already has river assigned - if (toFlux < fromFlux) { - cells.conf[toCell] = cells.fl[toCell]; // mark confluence + + if (fromFlux > toFlux) { + cells.conf[toCell] += cells.fl[toCell]; // mark confluence if (h[toCell] >= 20) riversData.find(r => r.river === cells.r[toCell]).parent = river; // min river is a tributary of current river cells.r[toCell] = river; // re-assign river if downhill part has less flux } else { @@ -155,16 +168,16 @@ const source = riverPoints[0].cell; const mouth = riverPoints[riverPoints.length - 2].cell; + const parent = riverPoints[0].parent || 0; - const widthFactor = rn(0.8 + Math.random() * 0.4, 1); // river width modifier [.8, 1.2] - const sourceWidth = cells.h[source] >= 20 ? 0.1 : rn(Math.min(Math.max((cells.fl[source] / 500) ** 0.4, 0.5), 1.7), 2); + const widthFactor = parent ? 1 : 1.4; + const sourceWidth = cells.h[source] >= 20 ? 0.1 : rn(Math.min(Math.max((cells.fl[source] / 500) ** 0.4, 0.5), 1.6), 2); const riverCells = riverPoints.map(point => point.cell); const riverMeandered = addMeandering(riverCells, sourceWidth * 10, 0.5); const [path, length, offset] = getPath(riverMeandered, widthFactor, sourceWidth); riverPaths.push([path, r]); - const parent = riverPoints[0].parent || 0; const width = rn(offset ** 2, 2); // mounth width in km const discharge = last(riverPoints).flux; // in m3/s @@ -295,7 +308,7 @@ const factor = riverLength / points.length; let offset; - // store points on both sides to build a valid polygon + // store points on both sides to build a polygon const riverPointsLeft = []; const riverPointsRight = []; @@ -316,12 +329,12 @@ const cosOffset = Math.cos(angle) * offset; riverPointsLeft.push([x1 - sinOffset, y1 + cosOffset]); - riverPointsRight.unshift([x1 + sinOffset, y1 - cosOffset]); + riverPointsRight.push([x1 + sinOffset, y1 - cosOffset]); } // generate polygon path and return lineGen.curve(d3.curveCatmullRom.alpha(0.1)); - const right = lineGen(riverPointsRight); + const right = lineGen(riverPointsRight.reverse()); let left = lineGen(riverPointsLeft); left = left.substring(left.indexOf("C")); diff --git a/modules/ui/tools.js b/modules/ui/tools.js index f744eac7..e276cfec 100644 --- a/modules/ui/tools.js +++ b/modules/ui/tools.js @@ -616,7 +616,7 @@ function addRiverOnClick() { const river = rivers.find(r => r.i === riverId); const sourceWidth = 0.1; - const widthFactor = river?.widthFactor || rn(0.8 + Math.random() * 0.4, 1); + const widthFactor = river?.widthFactor || (parent ? 1 : 1.4); const riverMeandered = Rivers.addMeandering(riverCells, sourceWidth * 10, 0.5); const [path, length, offset] = Rivers.getPath(riverMeandered, widthFactor, sourceWidth); From ef55f5a442c9103897f01cb8b716f3f6b40f64c9 Mon Sep 17 00:00:00 2001 From: Azgaar Date: Wed, 21 Jul 2021 22:21:48 +0300 Subject: [PATCH 02/21] fix tile save bug --- modules/river-generator.js | 61 +++++++++++++++++--------------------- modules/save.js | 2 +- modules/ui/options.js | 6 ++++ 3 files changed, 35 insertions(+), 34 deletions(-) diff --git a/modules/river-generator.js b/modules/river-generator.js index 02bf409e..60fef7dc 100644 --- a/modules/river-generator.js +++ b/modules/river-generator.js @@ -31,11 +31,7 @@ const land = cells.i.filter(i => h[i] >= 20).sort((a, b) => h[b] - h[a]); const lakeOutCells = Lakes.setClimateData(h); - let step = 0; - land.forEach(function (i) { - step++; - cells.fl[i] += grid.cells.prec[cells.g[i]]; // flux from precipitation const [x, y] = p[i]; @@ -104,22 +100,15 @@ riverNext++; } - flowDown(min, cells.fl[i], cells.r[i], i, step); + flowDown(min, cells.fl[i], cells.r[i]); }); } - function flowDown(toCell, fromFlux, river, fromCell, step) { + function flowDown(toCell, fromFlux, river) { const toFlux = cells.fl[toCell] - cells.conf[toCell]; - // prettier-ignore - if (step) debug.append("text") - .attr("x", pack.cells.p[fromCell][0]) - .attr("y", pack.cells.p[fromCell][1]) - .text(`${step}: ${fromFlux} -> ${toFlux}`) - .attr("font-size", "1.5px"); if (cells.r[toCell]) { // downhill cell already has river assigned - if (fromFlux > toFlux) { cells.conf[toCell] += cells.fl[toCell]; // mark confluence if (h[toCell] >= 20) riversData.find(r => r.river === cells.r[toCell]).parent = river; // min river is a tributary of current river @@ -171,7 +160,7 @@ const parent = riverPoints[0].parent || 0; const widthFactor = parent ? 1 : 1.4; - const sourceWidth = cells.h[source] >= 20 ? 0.1 : rn(Math.min(Math.max((cells.fl[source] / 500) ** 0.4, 0.5), 1.6), 2); + const sourceWidth = cells.h[source] >= 20 ? 0.05 : rn(Math.min(Math.max((cells.fl[source] / 700) ** 0.4, 0.5), 1.5), 2); const riverCells = riverPoints.map(point => point.cell); const riverMeandered = addMeandering(riverCells, sourceWidth * 10, 0.5); @@ -260,19 +249,22 @@ // add points at 1/3 and 2/3 of a line between adjacents river cells const addMeandering = function (riverCells, width = 1, meandering = 0.5) { const meandered = []; - const {p, conf} = pack.cells; + const {p, fl} = pack.cells; const lastCell = riverCells.length - 1; for (let i = 0; i <= lastCell; i++, width++) { const cell = riverCells[i]; const [x1, y1] = p[cell]; - meandered.push([x1, y1, conf[cell]]); + const flux = fl[cell]; + + meandered.push([x1, y1, flux]); if (i === lastCell) break; const nextCell = riverCells[i + 1]; if (nextCell === -1) { - meandered.push(getBorderPoint(cell)); + const [x, y] = getBorderPoint(cell); + meandered.push([x, y, flux]); break; } @@ -290,23 +282,27 @@ const p1y = (y1 * 2 + y2) / 3 + cos * meander; const p2x = (x1 + x2 * 2) / 3 + sin * meander; const p2y = (y1 + y2 * 2) / 3 + cos * meander; - meandered.push([p1x, p1y], [p2x, p2y]); + meandered.push([p1x, p1y, flux], [p2x, p2y, flux]); } else if (dist2 > 25 || riverCells.length < 6) { // if dist is medium or river is small add 1 extra middlepoint const p1x = (x1 + x2) / 2 + -sin * meander; const p1y = (y1 + y2) / 2 + cos * meander; - meandered.push([p1x, p1y]); + meandered.push([p1x, p1y, flux]); } } return meandered; }; - const getPath = function (points, widthFactor = 1, width = 0.1) { + const getPath = function (points, widthFactor = 1, startingWidth = 0.1) { const riverLength = points.reduce((s, v, i, p) => s + (i ? Math.hypot(v[0] - p[i - 1][0], v[1] - p[i - 1][1]) : 0), 0); // sum of segments length - const widening = 1000 + riverLength * 30; - const factor = riverLength / points.length; - let offset; + const widening = widthFactor * (riverLength / points.length) * 0.016; + let width = 0; + let lengthWidth = 0; + + // const [x, y] = points[0]; + // debug.append("text").attr("x", x).attr("y", y).text(widening).attr("font-size", "4px"); + console.log("---------"); // store points on both sides to build a polygon const riverPointsLeft = []; @@ -314,19 +310,18 @@ for (let p = 0; p < points.length; p++) { const [x0, y0] = points[p - 1] || points[p]; - const [x1, y1] = points[p]; + const [x1, y1, flux] = points[p]; const [x2, y2] = points[p + 1] || points[p]; - offset = width + (Math.atan(Math.pow(p * factor, 2) / widening) / 2) * widthFactor; - - if (points[p + 2] && points[p + 1][2]) { - const confluence = points[p + 1][2]; - width += Math.atan((confluence * 5) / widening); - } + const fluxWidth = flux / 1000; + lengthWidth += (widening / (p ** 0.8 || 1)) * ((Math.atan(p) / Math.PI) * 2); + width = lengthWidth + fluxWidth; const angle = Math.atan2(y0 - y2, x0 - x2); - const sinOffset = Math.sin(angle) * offset; - const cosOffset = Math.cos(angle) * offset; + const sinOffset = Math.sin(angle) * width; + const cosOffset = Math.cos(angle) * width; + + console.log(p, fluxWidth, lengthWidth, width); riverPointsLeft.push([x1 - sinOffset, y1 + cosOffset]); riverPointsRight.push([x1 + sinOffset, y1 - cosOffset]); @@ -338,7 +333,7 @@ let left = lineGen(riverPointsLeft); left = left.substring(left.indexOf("C")); - return [round(right + left, 2), rn(riverLength, 2), offset]; + return [round(right + left, 2), rn(riverLength, 2), width]; }; const specify = function () { diff --git a/modules/save.js b/modules/save.js index 24fbcf23..277f4168 100644 --- a/modules/save.js +++ b/modules/save.js @@ -144,7 +144,7 @@ async function getMapURL(type, options = {}) { cloneEl.id = "fantasyMap"; document.body.appendChild(cloneEl); const clone = d3.select(cloneEl); - if (debug) clone.select("#debug").remove(); + if (!debug) clone.select("#debug").remove(); const cloneDefs = cloneEl.getElementsByTagName("defs")[0]; const svgDefs = document.getElementById("defElements"); diff --git a/modules/ui/options.js b/modules/ui/options.js index 36160e72..868a2baf 100644 --- a/modules/ui/options.js +++ b/modules/ui/options.js @@ -777,6 +777,12 @@ document .forEach(el => el.addEventListener("input", updateTilesOptions)); function updateTilesOptions() { + if (this?.tagName === "INPUT") { + const {nextElementSibling: next, previousElementSibling: prev} = this; + if (next?.tagName === "INPUT") next.value = this.value; + if (prev?.tagName === "INPUT") prev.value = this.value; + } + const tileSize = document.getElementById("tileSize"); const tilesX = +document.getElementById("tileColsOutput").value; const tilesY = +document.getElementById("tileRowsOutput").value; From 36bae4e70591f7abe896776d318706c20990657d Mon Sep 17 00:00:00 2001 From: Azgaar Date: Thu, 22 Jul 2021 01:52:41 +0300 Subject: [PATCH 03/21] river width to depend on flux --- index.css | 6 ++++ modules/river-generator.js | 69 ++++++++++++++++++++++---------------- 2 files changed, 47 insertions(+), 28 deletions(-) diff --git a/index.css b/index.css index 7ba0a234..91fcde1a 100644 --- a/index.css +++ b/index.css @@ -1121,6 +1121,12 @@ div#regimentSelectorBody > div > div { fill: none; } +#debug > text { + font-size: 3px; + text-anchor: middle; + dominant-baseline: central; +} + .selectedCell { stroke-width: 1; stroke: #da3126; diff --git a/modules/river-generator.js b/modules/river-generator.js index 60fef7dc..3bb48db2 100644 --- a/modules/river-generator.js +++ b/modules/river-generator.js @@ -159,18 +159,17 @@ const mouth = riverPoints[riverPoints.length - 2].cell; const parent = riverPoints[0].parent || 0; - const widthFactor = parent ? 1 : 1.4; - const sourceWidth = cells.h[source] >= 20 ? 0.05 : rn(Math.min(Math.max((cells.fl[source] / 700) ** 0.4, 0.5), 1.5), 2); - const riverCells = riverPoints.map(point => point.cell); - const riverMeandered = addMeandering(riverCells, sourceWidth * 10, 0.5); - const [path, length, offset] = getPath(riverMeandered, widthFactor, sourceWidth); + const widthFactor = parent ? 1 : 1.4; + const initStep = cells.h[source] >= 20 ? 1 : 10; + const riverMeandered = addMeandering(riverCells, initStep, 0.5); + const [path, length, offset] = getPath(riverMeandered, widthFactor); riverPaths.push([path, r]); const width = rn(offset ** 2, 2); // mounth width in km const discharge = last(riverPoints).flux; // in m3/s - pack.rivers.push({i: r, source, mouth, discharge, length, width, widthFactor, sourceWidth, parent, cells: riverCells}); + pack.rivers.push({i: r, source, mouth, discharge, length, width, widthFactor, sourceWidth: 0, parent, cells: riverCells}); } // draw rivers @@ -247,61 +246,72 @@ }; // add points at 1/3 and 2/3 of a line between adjacents river cells - const addMeandering = function (riverCells, width = 1, meandering = 0.5) { + const addMeandering = function (riverCells, step = 1, meandering = 0.5) { const meandered = []; const {p, fl} = pack.cells; - const lastCell = riverCells.length - 1; - for (let i = 0; i <= lastCell; i++, width++) { + const lastStep = riverCells.length - 1; + let fluxPrev = 0; + const getFlux = (step, flux) => (step === lastStep ? fluxPrev : flux); + + for (let i = 0; i <= lastStep; i++, step++) { const cell = riverCells[i]; + const isLastCell = i === lastStep; + const [x1, y1] = p[cell]; - const flux = fl[cell]; + const flux1 = (fluxPrev = getFlux(i, fl[cell])); - meandered.push([x1, y1, flux]); + meandered.push([x1, y1, flux1]); - if (i === lastCell) break; + if (isLastCell) break; const nextCell = riverCells[i + 1]; if (nextCell === -1) { const [x, y] = getBorderPoint(cell); - meandered.push([x, y, flux]); + meandered.push([x, y, flux1]); break; } const [x2, y2] = p[nextCell]; + const flux2 = getFlux(i + 1, fl[nextCell]); const angle = Math.atan2(y2 - y1, x2 - x1); const sin = Math.sin(angle); const cos = Math.cos(angle); - const meander = meandering + 1 / width + Math.random() * Math.max(meandering - width / 100, 0); + const meander = meandering + 1 / step + Math.random() * Math.max(meandering - step / 100, 0); const dist2 = (x2 - x1) ** 2 + (y2 - y1) ** 2; // square distance between cells - if (width < 10 && (dist2 > 64 || (dist2 > 36 && riverCells.length < 5))) { + if (step < 10 && (dist2 > 64 || (dist2 > 36 && riverCells.length < 5))) { // if dist2 is big or river is small add extra points at 1/3 and 2/3 of segment const p1x = (x1 * 2 + x2) / 3 + -sin * meander; const p1y = (y1 * 2 + y2) / 3 + cos * meander; + const fluxThird1 = (flux1 * 2 + flux2) / 3; const p2x = (x1 + x2 * 2) / 3 + sin * meander; const p2y = (y1 + y2 * 2) / 3 + cos * meander; - meandered.push([p1x, p1y, flux], [p2x, p2y, flux]); + const fluxThird2 = (flux1 + flux2 * 2) / 3; + meandered.push([p1x, p1y, fluxThird1], [p2x, p2y, fluxThird2]); } else if (dist2 > 25 || riverCells.length < 6) { // if dist is medium or river is small add 1 extra middlepoint const p1x = (x1 + x2) / 2 + -sin * meander; const p1y = (y1 + y2) / 2 + cos * meander; - meandered.push([p1x, p1y, flux]); + const fluxMid = (flux1 + flux2) / 2; + meandered.push([p1x, p1y, fluxMid]); } } return meandered; }; - const getPath = function (points, widthFactor = 1, startingWidth = 0.1) { - const riverLength = points.reduce((s, v, i, p) => s + (i ? Math.hypot(v[0] - p[i - 1][0], v[1] - p[i - 1][1]) : 0), 0); // sum of segments length - const widening = widthFactor * (riverLength / points.length) * 0.016; - let width = 0; - let lengthWidth = 0; + const fluxFactor = 500; + const maxFluxWidth = 1; + const widthFactor = 200; + const stepWidth = 1 / widthFactor; + const lengthProgression = [1, 1, 2, 3, 5, 8, 13, 21, 34].map(n => n / widthFactor); + const maxProgression = last(lengthProgression); - // const [x, y] = points[0]; - // debug.append("text").attr("x", x).attr("y", y).text(widening).attr("font-size", "4px"); + const getPath = function (points, widthFactor = 1, startingWidth = 0) { + const riverLength = points.reduce((s, v, i, p) => s + (i ? Math.hypot(v[0] - p[i - 1][0], v[1] - p[i - 1][1]) : 0), 0); + let width = 0; console.log("---------"); // store points on both sides to build a polygon @@ -313,15 +323,18 @@ const [x1, y1, flux] = points[p]; const [x2, y2] = points[p + 1] || points[p]; - const fluxWidth = flux / 1000; - lengthWidth += (widening / (p ** 0.8 || 1)) * ((Math.atan(p) / Math.PI) * 2); - width = lengthWidth + fluxWidth; + const fluxWidth = Math.min(flux ** 0.9 / fluxFactor, 1); + const lengthWidth = p * stepWidth + (lengthProgression[p] || maxProgression); + width = widthFactor * (lengthWidth + fluxWidth) + startingWidth; const angle = Math.atan2(y0 - y2, x0 - x2); const sinOffset = Math.sin(angle) * width; const cosOffset = Math.cos(angle) * width; - console.log(p, fluxWidth, lengthWidth, width); + //const text = `${p}: ${rn(flux, 1)} - ${rn(width, 1)}`; + //debug.append("text").attr("x", x1).attr("y", y1).text(text); + + console.log({fluxWidth, lengthWidth, width}); riverPointsLeft.push([x1 - sinOffset, y1 + cosOffset]); riverPointsRight.push([x1 + sinOffset, y1 - cosOffset]); From aed9d9d76804e35eb04d5a96237a2fc6dd688b93 Mon Sep 17 00:00:00 2001 From: Azgaar Date: Fri, 23 Jul 2021 18:40:39 +0300 Subject: [PATCH 04/21] confluence to reflect real value --- index.css | 2 +- modules/river-generator.js | 146 ++++++++++++++++++++---------------- modules/ui/rivers-editor.js | 67 ++++++++++------- modules/ui/tools.js | 5 +- 4 files changed, 127 insertions(+), 93 deletions(-) diff --git a/index.css b/index.css index 91fcde1a..4012c15e 100644 --- a/index.css +++ b/index.css @@ -1122,7 +1122,7 @@ div#regimentSelectorBody > div > div { } #debug > text { - font-size: 3px; + font-size: 2px; text-anchor: middle; dominant-baseline: central; } diff --git a/modules/river-generator.js b/modules/river-generator.js index 3bb48db2..719d68d4 100644 --- a/modules/river-generator.js +++ b/modules/river-generator.js @@ -19,7 +19,9 @@ Lakes.prepareLakeData(h); resolveDepressions(h); drainWater(); + lineGen.curve(d3.curveCatmullRom.alpha(0.1)); defineRivers(); + calculateConfluenceFlux(); Lakes.cleanupLakeData(); if (allowErosion) cells.h = Uint8Array.from(h); // apply changed heights as basic one @@ -28,32 +30,29 @@ function drainWater() { const MIN_FLUX_TO_FORM_RIVER = 30; + const prec = grid.cells.prec; const land = cells.i.filter(i => h[i] >= 20).sort((a, b) => h[b] - h[a]); const lakeOutCells = Lakes.setClimateData(h); land.forEach(function (i) { - cells.fl[i] += grid.cells.prec[cells.g[i]]; // flux from precipitation - const [x, y] = p[i]; + cells.fl[i] += prec[cells.g[i]]; // add flux from precipitation // create lake outlet if lake is not in deep depression and flux > evaporation const lakes = lakeOutCells[i] ? features.filter(feature => i === feature.outCell && feature.flux > feature.evaporation) : []; for (const lake of lakes) { const lakeCell = cells.c[i].find(c => h[c] < 20 && cells.f[c] === lake.i); - cells.fl[lakeCell] += Math.max(lake.flux - lake.evaporation, 0); // not evaporated lake water drains to outlet // allow chain lakes to retain identity if (cells.r[lakeCell] !== lake.river) { const sameRiver = cells.c[lakeCell].some(c => cells.r[c] === lake.river); - const [x, y] = p[lakeCell]; - const flux = cells.fl[lakeCell]; if (sameRiver) { cells.r[lakeCell] = lake.river; - riversData.push({river: lake.river, cell: lakeCell, x, y, flux}); + riversData.push({river: lake.river, cell: lakeCell}); } else { cells.r[lakeCell] = riverNext; - riversData.push({river: riverNext, cell: lakeCell, x, y, flux}); + riversData.push({river: riverNext, cell: lakeCell}); riverNext++; } } @@ -69,8 +68,7 @@ // near-border cell: pour water out of the screen if (cells.b[i] && cells.r[i]) { - const [x, y] = getBorderPoint(i); - riversData.push({river: cells.r[i], cell: -1, x, y, flux: cells.fl[i]}); + riversData.push({river: cells.r[i], cell: -1}); return; } @@ -89,14 +87,15 @@ if (h[i] <= h[min]) return; if (cells.fl[i] < MIN_FLUX_TO_FORM_RIVER) { + // flux is too small to operate as a river if (h[min] >= 20) cells.fl[min] += cells.fl[i]; - return; // flux is too small to operate as river + return; } // proclaim a new river if (!cells.r[i]) { cells.r[i] = riverNext; - riversData.push({river: riverNext, cell: i, x, y, flux: cells.fl[i]}); + riversData.push({river: riverNext, cell: i}); riverNext++; } @@ -111,11 +110,19 @@ // downhill cell already has river assigned if (fromFlux > toFlux) { cells.conf[toCell] += cells.fl[toCell]; // mark confluence - if (h[toCell] >= 20) riversData.find(r => r.river === cells.r[toCell]).parent = river; // min river is a tributary of current river + if (h[toCell] >= 20) { + // min river is a tributary of current river + const toRiver = riversData.find(r => r.river === cells.r[toCell]); + if (toRiver) toRiver.parent = river; + } cells.r[toCell] = river; // re-assign river if downhill part has less flux } else { cells.conf[toCell] += fromFlux; // mark confluence - if (h[toCell] >= 20) riversData.find(r => r.river === river).parent = cells.r[toCell]; // current river is a tributary of min river + if (h[toCell] >= 20) { + // current river is a tributary of min river + const thisRiver = riversData.find(r => r.river === river); + if (thisRiver) thisRiver.parent = cells.r[toCell]; + } } } else cells.r[toCell] = river; // assign the river to the downhill cell @@ -128,46 +135,52 @@ waterBody.enteringFlux = fromFlux; } waterBody.flux = waterBody.flux + fromFlux; - waterBody.inlets ? waterBody.inlets.push(river) : (waterBody.inlets = [river]); + if (!waterBody.inlets) waterBody.inlets = [river]; + else waterBody.inlets.push(river); } } else { // propagate flux and add next river segment cells.fl[toCell] += fromFlux; } - const [x, y] = p[toCell]; - riversData.push({river, cell: toCell, x, y, flux: fromFlux}); + riversData.push({river, cell: toCell}); } function defineRivers() { - cells.r = new Uint16Array(cells.i.length); // re-initiate rivers array - pack.rivers = []; // rivers data + // re-initialize rivers and confluence arrays + cells.r = new Uint16Array(cells.i.length); + cells.conf = new Uint16Array(cells.i.length); + pack.rivers = []; const riverPaths = []; for (let r = 1; r <= riverNext; r++) { - const riverPoints = riversData.filter(d => d.river === r); - if (riverPoints.length < 3) continue; + const riverData = riversData.filter(d => d.river === r); + if (riverData.length < 3) continue; // exclude tiny rivers - for (const segment of riverPoints) { + for (const segment of riverData) { const i = segment.cell; - if (cells.r[i]) continue; - if (cells.h[i] < 20) continue; - cells.r[i] = r; + if (i < 0 || cells.h[i] < 20) continue; + + // mark real confluences and assign river to cells + if (cells.r[i]) cells.conf[i] = 1; + else cells.r[i] = r; } - const source = riverPoints[0].cell; - const mouth = riverPoints[riverPoints.length - 2].cell; - const parent = riverPoints[0].parent || 0; + const source = riverData[0].cell; + const mouth = riverData[riverData.length - 2].cell; + const parent = riverData[0].parent || 0; - const riverCells = riverPoints.map(point => point.cell); - const widthFactor = parent ? 1 : 1.4; + const riverCells = riverData.map(point => point.cell); + const widthFactor = !parent || parent === r ? 1.2 : 1; const initStep = cells.h[source] >= 20 ? 1 : 10; const riverMeandered = addMeandering(riverCells, initStep, 0.5); - const [path, length, offset] = getPath(riverMeandered, widthFactor); + const [path, length, offset] = getRiverPath(riverMeandered, widthFactor); riverPaths.push([path, r]); - const width = rn(offset ** 2, 2); // mounth width in km - const discharge = last(riverPoints).flux; // in m3/s + // Real mounth width examples: Amazon 6000m, Volga 6000m, Dniepr 3000m, Mississippi 1300m, Themes 900m, + // Danube 800m, Daugava 600m, Neva 500m, Nile 450m, Don 400m, Wisla 300m, Pripyat 150m, Bug 140m, Muchavets 40m + const width = rn((offset / 1.4) ** 2, 2); // mounth width in km + const discharge = last(riverData).flux; // in m3/s pack.rivers.push({i: r, source, mouth, discharge, length, width, widthFactor, sourceWidth: 0, parent, cells: riverCells}); } @@ -175,6 +188,18 @@ // draw rivers rivers.html(riverPaths.map(d => ``).join("")); } + + function calculateConfluenceFlux() { + for (const i of cells.i) { + if (!cells.conf[i]) continue; + + const sortedInflux = cells.c[i] + .filter(c => cells.r[c] && h[c] > h[i]) + .map(c => cells.fl[c]) + .sort((a, b) => b - a); + cells.conf[i] = sortedInflux.reduce((acc, flux, index) => (index ? acc + flux : acc), 0); + } + } }; // add distance to water value to land cells to make map less depressed @@ -248,7 +273,7 @@ // add points at 1/3 and 2/3 of a line between adjacents river cells const addMeandering = function (riverCells, step = 1, meandering = 0.5) { const meandered = []; - const {p, fl} = pack.cells; + const {p, fl, conf} = pack.cells; const lastStep = riverCells.length - 1; let fluxPrev = 0; @@ -259,7 +284,8 @@ const isLastCell = i === lastStep; const [x1, y1] = p[cell]; - const flux1 = (fluxPrev = getFlux(i, fl[cell])); + const flux1 = getFlux(i, fl[cell]); + fluxPrev = flux1; meandered.push([x1, y1, flux1]); @@ -268,34 +294,36 @@ const nextCell = riverCells[i + 1]; if (nextCell === -1) { const [x, y] = getBorderPoint(cell); - meandered.push([x, y, flux1]); + meandered.push([x, y, fluxPrev]); break; } const [x2, y2] = p[nextCell]; + const dist2 = (x2 - x1) ** 2 + (y2 - y1) ** 2; // square distance between cells + if (dist2 <= 25 && riverCells.length >= 6) continue; + const flux2 = getFlux(i + 1, fl[nextCell]); - const angle = Math.atan2(y2 - y1, x2 - x1); - const sin = Math.sin(angle); - const cos = Math.cos(angle); + const keepInitialFlux = conf[nextCell] || flux1 === flux2; const meander = meandering + 1 / step + Math.random() * Math.max(meandering - step / 100, 0); - const dist2 = (x2 - x1) ** 2 + (y2 - y1) ** 2; // square distance between cells + const angle = Math.atan2(y2 - y1, x2 - x1); + const sinMeander = Math.sin(angle) * meander; + const cosMeander = Math.cos(angle) * meander; if (step < 10 && (dist2 > 64 || (dist2 > 36 && riverCells.length < 5))) { // if dist2 is big or river is small add extra points at 1/3 and 2/3 of segment - const p1x = (x1 * 2 + x2) / 3 + -sin * meander; - const p1y = (y1 * 2 + y2) / 3 + cos * meander; - const fluxThird1 = (flux1 * 2 + flux2) / 3; - const p2x = (x1 + x2 * 2) / 3 + sin * meander; - const p2y = (y1 + y2 * 2) / 3 + cos * meander; - const fluxThird2 = (flux1 + flux2 * 2) / 3; - meandered.push([p1x, p1y, fluxThird1], [p2x, p2y, fluxThird2]); + const p1x = (x1 * 2 + x2) / 3 + -sinMeander; + const p1y = (y1 * 2 + y2) / 3 + cosMeander; + const p2x = (x1 + x2 * 2) / 3 + sinMeander; + const p2y = (y1 + y2 * 2) / 3 + cosMeander; + const [p1fl, p2fl] = keepInitialFlux ? [flux1, flux1] : [(flux1 * 2 + flux2) / 3, (flux1 + flux2 * 2) / 3]; + meandered.push([p1x, p1y, p1fl], [p2x, p2y, p2fl]); } else if (dist2 > 25 || riverCells.length < 6) { // if dist is medium or river is small add 1 extra middlepoint - const p1x = (x1 + x2) / 2 + -sin * meander; - const p1y = (y1 + y2) / 2 + cos * meander; - const fluxMid = (flux1 + flux2) / 2; - meandered.push([p1x, p1y, fluxMid]); + const p1x = (x1 + x2) / 2 + -sinMeander; + const p1y = (y1 + y2) / 2 + cosMeander; + const p1fl = keepInitialFlux ? flux1 : (flux1 + flux2) / 2; + meandered.push([p1x, p1y, p1fl]); } } @@ -303,18 +331,17 @@ }; const fluxFactor = 500; - const maxFluxWidth = 1; + const maxFluxWidth = 2; const widthFactor = 200; const stepWidth = 1 / widthFactor; const lengthProgression = [1, 1, 2, 3, 5, 8, 13, 21, 34].map(n => n / widthFactor); const maxProgression = last(lengthProgression); - const getPath = function (points, widthFactor = 1, startingWidth = 0) { + // build polygon from a list of points and calculated offset (width) + const getRiverPath = function (points, widthFactor = 1, startingWidth = 0) { const riverLength = points.reduce((s, v, i, p) => s + (i ? Math.hypot(v[0] - p[i - 1][0], v[1] - p[i - 1][1]) : 0), 0); let width = 0; - console.log("---------"); - // store points on both sides to build a polygon const riverPointsLeft = []; const riverPointsRight = []; @@ -323,7 +350,7 @@ const [x1, y1, flux] = points[p]; const [x2, y2] = points[p + 1] || points[p]; - const fluxWidth = Math.min(flux ** 0.9 / fluxFactor, 1); + const fluxWidth = Math.min(flux ** 0.9 / fluxFactor, maxFluxWidth); const lengthWidth = p * stepWidth + (lengthProgression[p] || maxProgression); width = widthFactor * (lengthWidth + fluxWidth) + startingWidth; @@ -331,17 +358,10 @@ const sinOffset = Math.sin(angle) * width; const cosOffset = Math.cos(angle) * width; - //const text = `${p}: ${rn(flux, 1)} - ${rn(width, 1)}`; - //debug.append("text").attr("x", x1).attr("y", y1).text(text); - - console.log({fluxWidth, lengthWidth, width}); - riverPointsLeft.push([x1 - sinOffset, y1 + cosOffset]); riverPointsRight.push([x1 + sinOffset, y1 - cosOffset]); } - // generate polygon path and return - lineGen.curve(d3.curveCatmullRom.alpha(0.1)); const right = lineGen(riverPointsRight.reverse()); let left = lineGen(riverPointsLeft); left = left.substring(left.indexOf("C")); @@ -398,5 +418,5 @@ return [graphWidth, y]; }; - return {generate, alterHeights, resolveDepressions, addMeandering, getPath, specify, getName, getBasin, remove}; + return {generate, alterHeights, resolveDepressions, addMeandering, getPath: getRiverPath, specify, getName, getBasin, remove}; }); diff --git a/modules/ui/rivers-editor.js b/modules/ui/rivers-editor.js index bc8181ee..b0159f19 100644 --- a/modules/ui/rivers-editor.js +++ b/modules/ui/rivers-editor.js @@ -13,7 +13,8 @@ function editRiver(id) { drawControlPoints(node); $("#riverEditor").dialog({ - title: "Edit River", resizable: false, + title: "Edit River", + resizable: false, position: {my: "center top+80", at: "top", of: node, collision: "fit"}, close: closeRiverEditor }); @@ -39,8 +40,8 @@ function editRiver(id) { function showEditorTips() { showMainTip(); - if (d3.event.target.parentNode.id === elSelected.attr("id")) tip("Drag to move, click to add a control point"); else - if (d3.event.target.parentNode.id === "controlPoints") tip("Drag to move, click to delete the control point"); + if (d3.event.target.parentNode.id === elSelected.attr("id")) tip("Drag to move, click to add a control point"); + else if (d3.event.target.parentNode.id === "controlPoints") tip("Drag to move, click to delete the control point"); } function getRiver() { @@ -58,7 +59,7 @@ function editRiver(id) { const parentSelect = document.getElementById("riverMainstem"); parentSelect.options.length = 0; const parent = r.parent || r.i; - const sortedRivers = pack.rivers.slice().sort((a, b) => a.name > b.name ? 1 : -1); + const sortedRivers = pack.rivers.slice().sort((a, b) => (a.name > b.name ? 1 : -1)); sortedRivers.forEach(river => { const opt = new Option(river.name, river.i, false, river.i === parent); parentSelect.options.add(opt); @@ -79,7 +80,7 @@ function editRiver(id) { function drawControlPoints(node) { const length = getRiver().length; const segments = Math.ceil(length / 4); - const increment = rn(length / segments * 1e5); + const increment = rn((length / segments) * 1e5); for (let i = increment * segments, c = i; i >= 0; i -= increment, c += increment) { const p1 = node.getPointAtLength(i / 1e5); const p2 = node.getPointAtLength(c / 1e5); @@ -88,10 +89,7 @@ function editRiver(id) { } function addControlPoint(point, before = null) { - debug.select("#controlPoints").insert("circle", before) - .attr("cx", point[0]).attr("cy", point[1]).attr("r", .6) - .call(d3.drag().on("drag", dragControlPoint)) - .on("click", clickControlPoint); + debug.select("#controlPoints").insert("circle", before).attr("cx", point[0]).attr("cy", point[1]).attr("r", 0.6).call(d3.drag().on("drag", dragControlPoint)).on("click", clickControlPoint); } function dragControlPoint() { @@ -102,22 +100,28 @@ function editRiver(id) { function redrawRiver() { const points = []; - debug.select("#controlPoints").selectAll("circle").each(function() { - points.push([+this.getAttribute("cx"), +this.getAttribute("cy")]); - }); + debug + .select("#controlPoints") + .selectAll("circle") + .each(function () { + points.push([+this.getAttribute("cx"), +this.getAttribute("cy")]); + }); if (points.length < 2) return; if (points.length === 2) { - const p0 = points[0], p1 = points[1]; + const p0 = points[0], + p1 = points[1]; const angle = Math.atan2(p1[1] - p0[1], p1[0] - p0[0]); - const sin = Math.sin(angle), cos = Math.cos(angle); - elSelected.attr("d", `M${p0[0]},${p0[1]} L${p1[0]},${p1[1]} l${-sin/2},${cos/2} Z`); + const sin = Math.sin(angle), + cos = Math.cos(angle); + elSelected.attr("d", `M${p0[0]},${p0[1]} L${p1[0]},${p1[1]} l${-sin / 2},${cos / 2} Z`); return; } const widthFactor = +document.getElementById("riverWidthFactor").value; const sourceWidth = +document.getElementById("riverSourceWidth").value; - const [path, length, offset] = Rivers.getPath(points, widthFactor, sourceWidth); + lineGen.curve(d3.curveCatmullRom.alpha(0.1)); + const [path, length, offset] = Rivers.getRiverPath(points, widthFactor, sourceWidth); elSelected.attr("d", path); const r = getRiver(); @@ -140,7 +144,7 @@ function editRiver(id) { const controls = document.getElementById("controlPoints").querySelectorAll("circle"); const points = Array.from(controls).map(circle => [+circle.getAttribute("cx"), +circle.getAttribute("cy")]); const index = getSegmentId(points, point, 2); - addControlPoint(point, ":nth-child(" + (index+1) + ")"); + addControlPoint(point, ":nth-child(" + (index + 1) + ")"); redrawRiver(); } @@ -160,7 +164,7 @@ function editRiver(id) { function generateNameRandom() { const r = getRiver(); - if (r) r.name = riverName.value = Names.getBase(rand(nameBases.length-1)); + if (r) r.name = riverName.value = Names.getBase(rand(nameBases.length - 1)); } function changeParent() { @@ -225,10 +229,13 @@ function editRiver(id) { // add a river const r = +elSelected.attr("id").slice(5); - const node = elSelected.node(), length = node.getTotalLength() / 2; + const node = elSelected.node(); + const length = node.getTotalLength() / 2; const cells = []; - const segments = Math.ceil(length / 4), increment = rn(length / segments * 1e5); + + const segments = Math.ceil(length / 4); + const increment = rn((length / segments) * 1e5); for (let i = increment * segments, c = i; i >= 0; i -= increment, c += increment) { const p = node.getPointAtLength(i / 1e5); const cell = findCell(p.x, p.y); @@ -236,30 +243,36 @@ function editRiver(id) { cells.push(cell); } - const source = cells[0], mouth = last(cells); + const source = cells[0]; + const mouth = last(cells); const name = Rivers.getName(mouth); - const smallLength = pack.rivers.map(r => r.length||0).sort((a,b) => a-b)[Math.ceil(pack.rivers.length * .15)]; - const type = length < smallLength ? rw({"Creek":9, "River":3, "Brook":3, "Stream":1}) : "River"; + const smallLength = pack.rivers.map(r => r.length || 0).sort((a, b) => a - b)[Math.ceil(pack.rivers.length * 0.15)]; + const type = length < smallLength ? rw({Creek: 9, River: 3, Brook: 3, Stream: 1}) : "River"; const discharge = rn(cells.length * 20 * Math.random()); const widthFactor = +document.getElementById("riverWidthFactor").value; const sourceWidth = +document.getElementById("riverSourceWidth").value; - pack.rivers.push({i:r, source, mouth, discharge, length, width: sourceWidth, widthFactor, sourceWidth, parent:0, name, type, basin:r}); + pack.rivers.push({i: r, source, mouth, discharge, length, width: sourceWidth, widthFactor, sourceWidth, parent: 0, name, type, basin: r}); } function removeRiver() { alertMessage.innerHTML = "Are you sure you want to remove the river? All tributaries will be auto-removed"; - $("#alert").dialog({resizable: false, width: "22em", title: "Remove river", + $("#alert").dialog({ + resizable: false, + width: "22em", + title: "Remove river", buttons: { - Remove: function() { + Remove: function () { $(this).dialog("close"); const river = +elSelected.attr("id").slice(5); Rivers.remove(river); elSelected.remove(); // keep if river if missed in pack.rivers $("#riverEditor").dialog("close"); }, - Cancel: function() {$(this).dialog("close");} + Cancel: function () { + $(this).dialog("close"); + } } }); } diff --git a/modules/ui/tools.js b/modules/ui/tools.js index e276cfec..7d2fad8f 100644 --- a/modules/ui/tools.js +++ b/modules/ui/tools.js @@ -616,10 +616,11 @@ function addRiverOnClick() { const river = rivers.find(r => r.i === riverId); const sourceWidth = 0.1; - const widthFactor = river?.widthFactor || (parent ? 1 : 1.4); + const widthFactor = river?.widthFactor || (!parent || parent === r ? 1.2 : 1); const riverMeandered = Rivers.addMeandering(riverCells, sourceWidth * 10, 0.5); - const [path, length, offset] = Rivers.getPath(riverMeandered, widthFactor, sourceWidth); + lineGen.curve(d3.curveCatmullRom.alpha(0.1)); + const [path, length, offset] = Rivers.getRiverPath(riverMeandered, widthFactor, sourceWidth); viewbox .select("#rivers") .append("path") From f932fb89063862e493d5c62ca138c65179edf0de Mon Sep 17 00:00:00 2001 From: Azgaar Date: Fri, 23 Jul 2021 18:46:58 +0300 Subject: [PATCH 05/21] remove randomness from river course rendering --- modules/river-generator.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/river-generator.js b/modules/river-generator.js index 719d68d4..19fa9ed5 100644 --- a/modules/river-generator.js +++ b/modules/river-generator.js @@ -305,7 +305,7 @@ const flux2 = getFlux(i + 1, fl[nextCell]); const keepInitialFlux = conf[nextCell] || flux1 === flux2; - const meander = meandering + 1 / step + Math.random() * Math.max(meandering - step / 100, 0); + const meander = meandering + 1 / step + Math.max(meandering - step / 100, 0); const angle = Math.atan2(y2 - y1, x2 - x1); const sinMeander = Math.sin(angle) * meander; const cosMeander = Math.cos(angle) * meander; From 27d460ce2fb4775df9d5fbb359f3552de04edd27 Mon Sep 17 00:00:00 2001 From: Azgaar Date: Fri, 23 Jul 2021 19:33:47 +0300 Subject: [PATCH 06/21] riversData: use object to avoid filtering data --- modules/river-generator.js | 80 +++++++++++++++++++------------------- 1 file changed, 39 insertions(+), 41 deletions(-) diff --git a/modules/river-generator.js b/modules/river-generator.js index 19fa9ed5..820492d0 100644 --- a/modules/river-generator.js +++ b/modules/river-generator.js @@ -7,9 +7,14 @@ TIME && console.time("generateRivers"); Math.random = aleaPRNG(seed); const {cells, features} = pack; - const p = cells.p; - const riversData = []; // rivers data + const riversData = {}; // rivers data + const riverParents = {}; + const addCellToRiver = function (cell, river) { + if (!riversData[river]) riversData[river] = [cell]; + else riversData[river].push(cell); + }; + cells.fl = new Uint16Array(cells.i.length); // water flux array cells.r = new Uint16Array(cells.i.length); // rivers array cells.conf = new Uint8Array(cells.i.length); // confluences array @@ -49,10 +54,10 @@ if (sameRiver) { cells.r[lakeCell] = lake.river; - riversData.push({river: lake.river, cell: lakeCell}); + addCellToRiver(lakeCell, lake.river); } else { cells.r[lakeCell] = riverNext; - riversData.push({river: riverNext, cell: lakeCell}); + addCellToRiver(lakeCell, riverNext); riverNext++; } } @@ -62,15 +67,16 @@ } // assign all tributary rivers to outlet basin - for (let outlet = lakes[0]?.outlet, l = 0; l < lakes.length; l++) { - lakes[l].inlets?.forEach(fork => (riversData.find(r => r.river === fork).parent = outlet)); + const outlet = lakes[0]?.outlet; + for (const lake of lakes) { + if (!Array.isArray(lake.inlets)) continue; + for (const inlet of lake.inlets) { + riverParents[inlet] = outlet; + } } // near-border cell: pour water out of the screen - if (cells.b[i] && cells.r[i]) { - riversData.push({river: cells.r[i], cell: -1}); - return; - } + if (cells.b[i] && cells.r[i]) return addCellToRiver(-1, cells.r[i]); // downhill cell (make sure it's not in the source lake) let min = null; @@ -95,7 +101,7 @@ // proclaim a new river if (!cells.r[i]) { cells.r[i] = riverNext; - riversData.push({river: riverNext, cell: i}); + addCellToRiver(i, riverNext); riverNext++; } @@ -105,24 +111,17 @@ function flowDown(toCell, fromFlux, river) { const toFlux = cells.fl[toCell] - cells.conf[toCell]; + const toRiver = cells.r[toCell]; - if (cells.r[toCell]) { + if (toRiver) { // downhill cell already has river assigned if (fromFlux > toFlux) { cells.conf[toCell] += cells.fl[toCell]; // mark confluence - if (h[toCell] >= 20) { - // min river is a tributary of current river - const toRiver = riversData.find(r => r.river === cells.r[toCell]); - if (toRiver) toRiver.parent = river; - } + if (h[toCell] >= 20) riverParents[toRiver] = river; // min river is a tributary of current river cells.r[toCell] = river; // re-assign river if downhill part has less flux } else { cells.conf[toCell] += fromFlux; // mark confluence - if (h[toCell] >= 20) { - // current river is a tributary of min river - const thisRiver = riversData.find(r => r.river === river); - if (thisRiver) thisRiver.parent = cells.r[toCell]; - } + if (h[toCell] >= 20) riverParents[river] = toRiver; // current river is a tributary of min river } } else cells.r[toCell] = river; // assign the river to the downhill cell @@ -143,7 +142,7 @@ cells.fl[toCell] += fromFlux; } - riversData.push({river, cell: toCell}); + addCellToRiver(toCell, river); } function defineRivers() { @@ -153,36 +152,35 @@ pack.rivers = []; const riverPaths = []; - for (let r = 1; r <= riverNext; r++) { - const riverData = riversData.filter(d => d.river === r); - if (riverData.length < 3) continue; // exclude tiny rivers + for (const key in riversData) { + const riverCells = riversData[key]; + if (riverCells.length < 3) continue; // exclude tiny rivers - for (const segment of riverData) { - const i = segment.cell; - if (i < 0 || cells.h[i] < 20) continue; + const riverId = +key; + for (const cell of riverCells) { + if (cell < 0 || cells.h[cell] < 20) continue; // mark real confluences and assign river to cells - if (cells.r[i]) cells.conf[i] = 1; - else cells.r[i] = r; + if (cells.r[cell]) cells.conf[cell] = 1; + else cells.r[cell] = riverId; } - const source = riverData[0].cell; - const mouth = riverData[riverData.length - 2].cell; - const parent = riverData[0].parent || 0; + const source = riverCells[0]; + const mouth = riverCells[riverCells.length - 2]; + const parent = riverParents[key] || 0; - const riverCells = riverData.map(point => point.cell); - const widthFactor = !parent || parent === r ? 1.2 : 1; + const widthFactor = !parent || parent === riverId ? 1.2 : 1; const initStep = cells.h[source] >= 20 ? 1 : 10; const riverMeandered = addMeandering(riverCells, initStep, 0.5); const [path, length, offset] = getRiverPath(riverMeandered, widthFactor); - riverPaths.push([path, r]); + riverPaths.push([path, riverId]); - // Real mounth width examples: Amazon 6000m, Volga 6000m, Dniepr 3000m, Mississippi 1300m, Themes 900m, + // Real mouth width examples: Amazon 6000m, Volga 6000m, Dniepr 3000m, Mississippi 1300m, Themes 900m, // Danube 800m, Daugava 600m, Neva 500m, Nile 450m, Don 400m, Wisla 300m, Pripyat 150m, Bug 140m, Muchavets 40m - const width = rn((offset / 1.4) ** 2, 2); // mounth width in km - const discharge = last(riverData).flux; // in m3/s + const width = rn((offset / 1.4) ** 2, 2); // mouth width in km + const discharge = cells.fl[mouth]; // in m3/s - pack.rivers.push({i: r, source, mouth, discharge, length, width, widthFactor, sourceWidth: 0, parent, cells: riverCells}); + pack.rivers.push({i: riverId, source, mouth, discharge, length, width, widthFactor, sourceWidth: 0, parent, cells: riverCells}); } // draw rivers From 50f497c62a1b84b2a4990a7859468369e3b35d5e Mon Sep 17 00:00:00 2001 From: Azgaar Date: Fri, 23 Jul 2021 20:37:17 +0300 Subject: [PATCH 07/21] river type - fix fork type selection --- modules/burgs-and-states.js | 3 +- modules/heightmap-generator.js | 1 - modules/river-generator.js | 67 +++++++++++++++++++++++----------- modules/ui/tools.js | 17 ++++----- modules/utils.js | 4 ++ 5 files changed, 58 insertions(+), 34 deletions(-) diff --git a/modules/burgs-and-states.js b/modules/burgs-and-states.js index 0dccc4ab..7ed9d724 100644 --- a/modules/burgs-and-states.js +++ b/modules/burgs-and-states.js @@ -80,6 +80,7 @@ TIME && console.time("createStates"); const states = [{i: 0, name: "Neutrals"}]; const colors = getColors(burgs.length - 1); + const each5th = each(5); burgs.forEach(function (b, i) { if (!i) return; // skip first element @@ -93,7 +94,7 @@ // states data const expansionism = rn(Math.random() * powerInput.value + 1, 1); - const basename = b.name.length < 9 && b.cell % 5 === 0 ? b.name : Names.getCultureShort(b.culture); + const basename = b.name.length < 9 && each5th(b.cell) ? b.name : Names.getCultureShort(b.culture); const name = Names.getState(basename, b.culture); const type = cultures[b.culture].type; diff --git a/modules/heightmap-generator.js b/modules/heightmap-generator.js index 8e0dc42a..ab2f51a0 100644 --- a/modules/heightmap-generator.js +++ b/modules/heightmap-generator.js @@ -422,7 +422,6 @@ if (d % 6 !== 0) return; for (const l of d3.range(i)) { const min = cells.c[cur][d3.scan(cells.c[cur], (a, b) => cells.h[a] - cells.h[b])]; // downhill cell - //debug.append("circle").attr("cx", p[min][0]).attr("cy", p[min][1]).attr("r", 1); cells.h[min] = (cells.h[cur] * 2 + cells.h[min]) / 3; cur = min; } diff --git a/modules/river-generator.js b/modules/river-generator.js index 820492d0..3859ec9d 100644 --- a/modules/river-generator.js +++ b/modules/river-generator.js @@ -171,14 +171,14 @@ const widthFactor = !parent || parent === riverId ? 1.2 : 1; const initStep = cells.h[source] >= 20 ? 1 : 10; - const riverMeandered = addMeandering(riverCells, initStep, 0.5); + const riverMeandered = addMeandering(riverCells, initStep); const [path, length, offset] = getRiverPath(riverMeandered, widthFactor); riverPaths.push([path, riverId]); // Real mouth width examples: Amazon 6000m, Volga 6000m, Dniepr 3000m, Mississippi 1300m, Themes 900m, // Danube 800m, Daugava 600m, Neva 500m, Nile 450m, Don 400m, Wisla 300m, Pripyat 150m, Bug 140m, Muchavets 40m const width = rn((offset / 1.4) ** 2, 2); // mouth width in km - const discharge = cells.fl[mouth]; // in m3/s + const discharge = cells.fl[mouth]; // m3 in second pack.rivers.push({i: riverId, source, mouth, discharge, length, width, widthFactor, sourceWidth: 0, parent, cells: riverCells}); } @@ -269,11 +269,12 @@ }; // add points at 1/3 and 2/3 of a line between adjacents river cells - const addMeandering = function (riverCells, step = 1, meandering = 0.5) { + const addMeandering = function (riverCells, step = 1, meandering = 0.5, riverPoints = null) { + const {fl, conf} = pack.cells; const meandered = []; - const {p, fl, conf} = pack.cells; - const lastStep = riverCells.length - 1; + const points = getRiverPoints(riverCells, riverPoints); + let fluxPrev = 0; const getFlux = (step, flux) => (step === lastStep ? fluxPrev : flux); @@ -281,22 +282,21 @@ const cell = riverCells[i]; const isLastCell = i === lastStep; - const [x1, y1] = p[cell]; + const [x1, y1] = points[i]; const flux1 = getFlux(i, fl[cell]); fluxPrev = flux1; meandered.push([x1, y1, flux1]); - if (isLastCell) break; const nextCell = riverCells[i + 1]; + const [x2, y2] = points[i + 1]; + if (nextCell === -1) { - const [x, y] = getBorderPoint(cell); - meandered.push([x, y, fluxPrev]); + meandered.push([x2, y2, fluxPrev]); break; } - const [x2, y2] = p[nextCell]; const dist2 = (x2 - x1) ** 2 + (y2 - y1) ** 2; // square distance between cells if (dist2 <= 25 && riverCells.length >= 6) continue; @@ -328,6 +328,24 @@ return meandered; }; + const getRiverPoints = (riverCells, riverPoints) => { + const {p} = pack.cells; + return riverCells.map((cell, i) => { + if (riverPoints && riverPoints[i]) return riverPoints[i]; + if (cell === -1) return getBorderPoint(riverCells[i - 1]); + return p[cell]; + }); + }; + + const getBorderPoint = i => { + const [x, y] = pack.cells.p[i]; + const min = Math.min(y, graphHeight - y, x, graphWidth - x); + if (min === y) return [x, 0]; + else if (min === graphHeight - y) return [x, graphHeight]; + else if (min === x) return [0, y]; + return [graphWidth, y]; + }; + const fluxFactor = 500; const maxFluxWidth = 2; const widthFactor = 200; @@ -373,13 +391,11 @@ Math.random = aleaPRNG(seed); const thresholdElement = Math.ceil(rivers.length * 0.15); const smallLength = rivers.map(r => r.length || 0).sort((a, b) => a - b)[thresholdElement]; - const smallType = {Creek: 9, River: 3, Brook: 3, Stream: 1}; // weighted small river types for (const r of rivers) { r.basin = getBasin(r.i); r.name = getName(r.mouth); - const small = r.length < smallLength; - r.type = r.parent && !(r.i % 6) ? (small ? "Branch" : "Fork") : small ? rw(smallType) : "River"; + r.type = getType(r, r.length < smallLength); } }; @@ -387,6 +403,22 @@ return Names.getCulture(pack.cells.culture[cell]); }; + // weighted arrays of river type names + const riverTypes = { + main: { + big: {River: 1}, + small: {Creek: 9, River: 3, Brook: 3, Stream: 1} + }, + fork: { + big: {Fork: 1}, + small: {Branch: 1} + } + }; + const getType = function (river, isSmall) { + const isFork = each(3)(river.i) && river.parent && river.parent !== river.i; + return rw(riverTypes[isFork ? "fork" : "main"][isSmall ? "small" : "big"]); + }; + // remove river and all its tributaries const remove = function (id) { const cells = pack.cells; @@ -407,14 +439,5 @@ return getBasin(parent); }; - const getBorderPoint = i => { - const [x, y] = pack.cells.p[i]; - const min = Math.min(y, graphHeight - y, x, graphWidth - x); - if (min === y) return [x, 0]; - else if (min === graphHeight - y) return [x, graphHeight]; - else if (min === x) return [0, y]; - return [graphWidth, y]; - }; - return {generate, alterHeights, resolveDepressions, addMeandering, getPath: getRiverPath, specify, getName, getBasin, remove}; }); diff --git a/modules/ui/tools.js b/modules/ui/tools.js index 7d2fad8f..f358d517 100644 --- a/modules/ui/tools.js +++ b/modules/ui/tools.js @@ -534,12 +534,12 @@ function addRiverOnClick() { const point = d3.mouse(this); let i = findCell(point[0], point[1]); - if (cells.r[i]) return tip("There already a river here", false, "error"); + if (cells.r[i]) return tip("There is already a river here", false, "error"); if (cells.h[i] < 20) return tip("Cannot create river in water cell", false, "error"); if (cells.b[i]) return; const riverCells = []; - let riverId = +getNextId("river").slice(5); + let riverId = last(rivers).id + 1; let parent = 0; const initialFlux = grid.cells.prec[cells.g[i]]; @@ -555,8 +555,6 @@ function addRiverOnClick() { const min = cells.c[i].sort((a, b) => h[a] - h[b])[0]; // downhill cell if (h[i] <= h[min]) return tip(`Cell ${i} is depressed, river cannot flow further`, false, "error"); - const [tx, ty] = cells.p[min]; - // pour to water body if (h[min] < 20) { riverCells.push(min); @@ -615,12 +613,11 @@ function addRiverOnClick() { } const river = rivers.find(r => r.i === riverId); - const sourceWidth = 0.1; const widthFactor = river?.widthFactor || (!parent || parent === r ? 1.2 : 1); - const riverMeandered = Rivers.addMeandering(riverCells, sourceWidth * 10, 0.5); + const riverMeandered = Rivers.addMeandering(riverCells, 1); lineGen.curve(d3.curveCatmullRom.alpha(0.1)); - const [path, length, offset] = Rivers.getRiverPath(riverMeandered, widthFactor, sourceWidth); + const [path, length, offset] = Rivers.getRiverPath(riverMeandered, widthFactor); viewbox .select("#rivers") .append("path") @@ -629,9 +626,9 @@ function addRiverOnClick() { // add new river to data or change extended river attributes const source = riverCells[0]; - const mouth = last(riverCells); - const discharge = cells.fl[mouth]; // in m3/s - const width = rn(offset ** 2, 2); // mounth width in km + const mouth = riverCells[riverCells.length - 2]; + const discharge = cells.fl[mouth]; // m3 in second + const width = rn((offset / 1.4) ** 2, 2); // mounth width in km if (river) { river.source = source; diff --git a/modules/utils.js b/modules/utils.js index 9850ea5e..84389a3d 100644 --- a/modules/utils.js +++ b/modules/utils.js @@ -236,6 +236,10 @@ function P(probability) { return Math.random() < probability; } +function each(n) { + return i => i % n === 0; +} + // random number (normal or gaussian distribution) function gauss(expected = 100, deviation = 30, min = 0, max = 300, round = 0) { return rn(Math.max(Math.min(d3.randomNormal(expected, deviation)(), max), min), round); From 4902a321ea2d5037e1faa02eb7118a06e34e15c9 Mon Sep 17 00:00:00 2001 From: Azgaar Date: Fri, 23 Jul 2021 20:48:38 +0300 Subject: [PATCH 08/21] river type - memoize what is small size for river --- modules/river-generator.js | 23 ++++++++++++++--------- modules/ui/tools.js | 3 +-- 2 files changed, 15 insertions(+), 11 deletions(-) diff --git a/modules/river-generator.js b/modules/river-generator.js index 3859ec9d..e86b5c64 100644 --- a/modules/river-generator.js +++ b/modules/river-generator.js @@ -388,14 +388,11 @@ const specify = function () { const rivers = pack.rivers; if (!rivers.length) return; - Math.random = aleaPRNG(seed); - const thresholdElement = Math.ceil(rivers.length * 0.15); - const smallLength = rivers.map(r => r.length || 0).sort((a, b) => a - b)[thresholdElement]; - for (const r of rivers) { - r.basin = getBasin(r.i); - r.name = getName(r.mouth); - r.type = getType(r, r.length < smallLength); + for (const river of rivers) { + river.basin = getBasin(river.i); + river.name = getName(river.mouth); + river.type = getType(river); } }; @@ -414,8 +411,16 @@ small: {Branch: 1} } }; - const getType = function (river, isSmall) { - const isFork = each(3)(river.i) && river.parent && river.parent !== river.i; + + let smallLength = null; + const getType = function ({i, length, parent}) { + if (smallLength === null) { + const threshold = Math.ceil(pack.rivers.length * 0.15); + smallLength = pack.rivers.map(r => r.length || 0).sort((a, b) => a - b)[threshold]; + } + + const isSmall = length < smallLength; + const isFork = each(3)(i) && parent && parent !== i; return rw(riverTypes[isFork ? "fork" : "main"][isSmall ? "small" : "big"]); }; diff --git a/modules/ui/tools.js b/modules/ui/tools.js index f358d517..5c13b6e3 100644 --- a/modules/ui/tools.js +++ b/modules/ui/tools.js @@ -639,8 +639,7 @@ function addRiverOnClick() { } else { const basin = Rivers.getBasin(parent); const name = Rivers.getName(mouth); - const smallLength = rivers.map(r => r.length || 0).sort((a, b) => a - b)[Math.ceil(pack.rivers.length * 0.15)]; - const type = length < smallLength ? rw({Creek: 9, River: 3, Brook: 3, Stream: 1}) : "River"; + const type = Rivers.getType({i: riverId, length, parent}); rivers.push({i: riverId, source, mouth, discharge, length, width, widthFactor, sourceWidth, parent, cells: riverCells, basin, name, type}); } From d5b2e7ed1469e9102fe7303897675b0b24953fde Mon Sep 17 00:00:00 2001 From: Azgaar Date: Fri, 23 Jul 2021 21:52:06 +0300 Subject: [PATCH 09/21] add river on click fix --- modules/river-generator.js | 6 +++--- modules/ui/tools.js | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/modules/river-generator.js b/modules/river-generator.js index e86b5c64..191f1ea2 100644 --- a/modules/river-generator.js +++ b/modules/river-generator.js @@ -312,8 +312,8 @@ // if dist2 is big or river is small add extra points at 1/3 and 2/3 of segment const p1x = (x1 * 2 + x2) / 3 + -sinMeander; const p1y = (y1 * 2 + y2) / 3 + cosMeander; - const p2x = (x1 + x2 * 2) / 3 + sinMeander; - const p2y = (y1 + y2 * 2) / 3 + cosMeander; + const p2x = (x1 + x2 * 2) / 3 + sinMeander / 2; + const p2y = (y1 + y2 * 2) / 3 - cosMeander / 2; const [p1fl, p2fl] = keepInitialFlux ? [flux1, flux1] : [(flux1 * 2 + flux2) / 3, (flux1 + flux2 * 2) / 3]; meandered.push([p1x, p1y, p1fl], [p2x, p2y, p2fl]); } else if (dist2 > 25 || riverCells.length < 6) { @@ -444,5 +444,5 @@ return getBasin(parent); }; - return {generate, alterHeights, resolveDepressions, addMeandering, getPath: getRiverPath, specify, getName, getBasin, remove}; + return {generate, alterHeights, resolveDepressions, addMeandering, getRiverPath, specify, getName, getType, getBasin, remove}; }); diff --git a/modules/ui/tools.js b/modules/ui/tools.js index 5c13b6e3..c20910ee 100644 --- a/modules/ui/tools.js +++ b/modules/ui/tools.js @@ -613,7 +613,7 @@ function addRiverOnClick() { } const river = rivers.find(r => r.i === riverId); - const widthFactor = river?.widthFactor || (!parent || parent === r ? 1.2 : 1); + const widthFactor = river?.widthFactor || (!parent || parent === riverId ? 1.2 : 1); const riverMeandered = Rivers.addMeandering(riverCells, 1); lineGen.curve(d3.curveCatmullRom.alpha(0.1)); @@ -641,7 +641,7 @@ function addRiverOnClick() { const name = Rivers.getName(mouth); const type = Rivers.getType({i: riverId, length, parent}); - rivers.push({i: riverId, source, mouth, discharge, length, width, widthFactor, sourceWidth, parent, cells: riverCells, basin, name, type}); + rivers.push({i: riverId, source, mouth, discharge, length, width, widthFactor, sourceWidth: 0, parent, cells: riverCells, basin, name, type}); } if (d3.event.shiftKey === false) { From d9d349f3a163f4eb6e7abab77f3256474911a161 Mon Sep 17 00:00:00 2001 From: Azgaar Date: Fri, 23 Jul 2021 23:46:00 +0300 Subject: [PATCH 10/21] delete rendered rivers on layer off --- modules/river-generator.js | 16 ++++++++-------- modules/ui/layers.js | 20 ++++++++++++++------ modules/ui/tools.js | 15 ++++++++------- 3 files changed, 30 insertions(+), 21 deletions(-) diff --git a/modules/river-generator.js b/modules/river-generator.js index 191f1ea2..a1b2bff1 100644 --- a/modules/river-generator.js +++ b/modules/river-generator.js @@ -170,14 +170,13 @@ const parent = riverParents[key] || 0; const widthFactor = !parent || parent === riverId ? 1.2 : 1; - const initStep = cells.h[source] >= 20 ? 1 : 10; - const riverMeandered = addMeandering(riverCells, initStep); + const riverMeandered = addMeandering(riverCells); const [path, length, offset] = getRiverPath(riverMeandered, widthFactor); riverPaths.push([path, riverId]); // Real mouth width examples: Amazon 6000m, Volga 6000m, Dniepr 3000m, Mississippi 1300m, Themes 900m, // Danube 800m, Daugava 600m, Neva 500m, Nile 450m, Don 400m, Wisla 300m, Pripyat 150m, Bug 140m, Muchavets 40m - const width = rn((offset / 1.4) ** 2, 2); // mouth width in km + const width = rn((offset / 1.5) ** 1.8, 2); // mouth width in km const discharge = cells.fl[mouth]; // m3 in second pack.rivers.push({i: riverId, source, mouth, discharge, length, width, widthFactor, sourceWidth: 0, parent, cells: riverCells}); @@ -269,11 +268,12 @@ }; // add points at 1/3 and 2/3 of a line between adjacents river cells - const addMeandering = function (riverCells, step = 1, meandering = 0.5, riverPoints = null) { - const {fl, conf} = pack.cells; + const addMeandering = function (riverCells, meandering = 0.5, riverPoints = null) { + const {fl, conf, h} = pack.cells; const meandered = []; const lastStep = riverCells.length - 1; const points = getRiverPoints(riverCells, riverPoints); + let step = h[riverCells[0]] < 20 ? 1 : 10; let fluxPrev = 0; const getFlux = (step, flux) => (step === lastStep ? fluxPrev : flux); @@ -348,9 +348,9 @@ const fluxFactor = 500; const maxFluxWidth = 2; - const widthFactor = 200; - const stepWidth = 1 / widthFactor; - const lengthProgression = [1, 1, 2, 3, 5, 8, 13, 21, 34].map(n => n / widthFactor); + const lengthFactor = 200; + const stepWidth = 1 / lengthFactor; + const lengthProgression = [1, 1, 2, 3, 5, 8, 13, 21, 34].map(n => n / lengthFactor); const maxProgression = last(lengthProgression); // build polygon from a list of points and calculated offset (width) diff --git a/modules/ui/layers.js b/modules/ui/layers.js index b2bad889..2063721d 100644 --- a/modules/ui/layers.js +++ b/modules/ui/layers.js @@ -1444,18 +1444,26 @@ function toggleTexture(event) { function toggleRivers(event) { if (!layerIsOn("toggleRivers")) { turnButtonOn("toggleRivers"); - $("#rivers").fadeIn(); + drawRivers(); if (event && isCtrlClick(event)) editStyle("rivers"); } else { - if (event && isCtrlClick(event)) { - editStyle("rivers"); - return; - } - $("#rivers").fadeOut(); + if (event && isCtrlClick(event)) return editStyle("rivers"); + rivers.selectAll("*").remove(); turnButtonOff("toggleRivers"); } } +function drawRivers() { + const riverPaths = pack.rivers.map(river => { + const riverMeandered = Rivers.addMeandering(river.cells, 0.5, river.points); + const widthFactor = river.widthFactor || 1; + const startingWidth = river.startingWidth || 0; + const [path] = Rivers.getRiverPath(riverMeandered, widthFactor, startingWidth); + return [path, river.i]; + }); + rivers.html(riverPaths.map(d => ``).join("")); +} + function toggleRoutes(event) { if (!layerIsOn("toggleRoutes")) { turnButtonOn("toggleRoutes"); diff --git a/modules/ui/tools.js b/modules/ui/tools.js index c20910ee..4ac393c6 100644 --- a/modules/ui/tools.js +++ b/modules/ui/tools.js @@ -538,6 +538,7 @@ function addRiverOnClick() { if (cells.h[i] < 20) return tip("Cannot create river in water cell", false, "error"); if (cells.b[i]) return; + const {alterHeights, resolveDepressions, addMeandering, getRiverPath, getBasin, getName, getType} = Rivers; const riverCells = []; let riverId = last(rivers).id + 1; let parent = 0; @@ -545,8 +546,8 @@ function addRiverOnClick() { const initialFlux = grid.cells.prec[cells.g[i]]; cells.fl[i] = initialFlux; - const h = Rivers.alterHeights(); - Rivers.resolveDepressions(h); + const h = alterHeights(); + resolveDepressions(h); while (i) { cells.r[i] = riverId; @@ -615,9 +616,9 @@ function addRiverOnClick() { const river = rivers.find(r => r.i === riverId); const widthFactor = river?.widthFactor || (!parent || parent === riverId ? 1.2 : 1); - const riverMeandered = Rivers.addMeandering(riverCells, 1); + const riverMeandered = addMeandering(riverCells); lineGen.curve(d3.curveCatmullRom.alpha(0.1)); - const [path, length, offset] = Rivers.getRiverPath(riverMeandered, widthFactor); + const [path, length, offset] = getRiverPath(riverMeandered, widthFactor); viewbox .select("#rivers") .append("path") @@ -637,9 +638,9 @@ function addRiverOnClick() { river.width = width; river.cells = riverCells; } else { - const basin = Rivers.getBasin(parent); - const name = Rivers.getName(mouth); - const type = Rivers.getType({i: riverId, length, parent}); + const basin = getBasin(parent); + const name = getName(mouth); + const type = getType({i: riverId, length, parent}); rivers.push({i: riverId, source, mouth, discharge, length, width, widthFactor, sourceWidth: 0, parent, cells: riverCells, basin, name, type}); } From dbcf46f83bd9a5a1b79eb07104000e5ea5a4b2b9 Mon Sep 17 00:00:00 2001 From: Azgaar Date: Sat, 24 Jul 2021 18:42:10 +0300 Subject: [PATCH 11/21] separete rivere rendering from generation --- main.js | 1 + modules/load.js | 13 ++++---- modules/river-generator.js | 55 ++++++++++++++++------------------ modules/ui/heightmap-editor.js | 1 + modules/ui/layers.js | 43 +++++++++++++------------- modules/ui/tools.js | 26 ++++++++-------- 6 files changed, 71 insertions(+), 68 deletions(-) diff --git a/main.js b/main.js index c0a96eb2..07183d9e 100644 --- a/main.js +++ b/main.js @@ -624,6 +624,7 @@ function generate() { drawCoastline(); Rivers.generate(); + drawRivers(); Lakes.defineGroup(); defineBiomes(); diff --git a/modules/load.js b/modules/load.js index a8a33ac0..cb02d6e9 100644 --- a/modules/load.js +++ b/modules/load.js @@ -271,12 +271,13 @@ function parseLoadedData(data) { } })(); - const notHidden = selection => selection.node() && selection.style("display") !== "none"; - const hasChildren = selection => selection.node()?.hasChildNodes(); - const hasChild = (selection, selector) => selection.node()?.querySelector(selector); - const turnOn = el => document.getElementById(el).classList.remove("buttonoff"); - void (function restoreLayersState() { + // helper functions + const notHidden = selection => selection.node() && selection.style("display") !== "none"; + const hasChildren = selection => selection.node()?.hasChildNodes(); + const hasChild = (selection, selector) => selection.node()?.querySelector(selector); + const turnOn = el => document.getElementById(el).classList.remove("buttonoff"); + // turn all layers off document .getElementById("mapLayers") @@ -291,7 +292,7 @@ function parseLoadedData(data) { if (hasChildren(gridOverlay)) turnOn("toggleGrid"); if (hasChildren(coordinates)) turnOn("toggleCoordinates"); if (notHidden(compass) && hasChild(compass, "use")) turnOn("toggleCompass"); - if (notHidden(rivers)) turnOn("toggleRivers"); + if (hasChildren(rivers)) turnOn("toggleRivers"); if (notHidden(terrain) && hasChildren(terrain)) turnOn("toggleRelief"); if (hasChildren(relig)) turnOn("toggleReligions"); if (hasChildren(cults)) turnOn("toggleCultures"); diff --git a/modules/river-generator.js b/modules/river-generator.js index a1b2bff1..3613820d 100644 --- a/modules/river-generator.js +++ b/modules/river-generator.js @@ -24,7 +24,6 @@ Lakes.prepareLakeData(h); resolveDepressions(h); drainWater(); - lineGen.curve(d3.curveCatmullRom.alpha(0.1)); defineRivers(); calculateConfluenceFlux(); Lakes.cleanupLakeData(); @@ -150,7 +149,6 @@ cells.r = new Uint16Array(cells.i.length); cells.conf = new Uint16Array(cells.i.length); pack.rivers = []; - const riverPaths = []; for (const key in riversData) { const riverCells = riversData[key]; @@ -170,20 +168,13 @@ const parent = riverParents[key] || 0; const widthFactor = !parent || parent === riverId ? 1.2 : 1; - const riverMeandered = addMeandering(riverCells); - const [path, length, offset] = getRiverPath(riverMeandered, widthFactor); - riverPaths.push([path, riverId]); - - // Real mouth width examples: Amazon 6000m, Volga 6000m, Dniepr 3000m, Mississippi 1300m, Themes 900m, - // Danube 800m, Daugava 600m, Neva 500m, Nile 450m, Don 400m, Wisla 300m, Pripyat 150m, Bug 140m, Muchavets 40m - const width = rn((offset / 1.5) ** 1.8, 2); // mouth width in km + const meanderedPoints = addMeandering(riverCells); const discharge = cells.fl[mouth]; // m3 in second + const length = getApproximateLength(meanderedPoints); + const width = getWidth(getOffset(discharge, meanderedPoints.length, widthFactor)); pack.rivers.push({i: riverId, source, mouth, discharge, length, width, widthFactor, sourceWidth: 0, parent, cells: riverCells}); } - - // draw rivers - rivers.html(riverPaths.map(d => ``).join("")); } function calculateConfluenceFlux() { @@ -346,18 +337,21 @@ return [graphWidth, y]; }; - const fluxFactor = 500; - const maxFluxWidth = 2; - const lengthFactor = 200; - const stepWidth = 1 / lengthFactor; - const lengthProgression = [1, 1, 2, 3, 5, 8, 13, 21, 34].map(n => n / lengthFactor); - const maxProgression = last(lengthProgression); + const FLUX_FACTOR = 500; + const MAX_FLUX_WIDTH = 2; + const LENGTH_FACTOR = 200; + const STEP_WIDTH = 1 / LENGTH_FACTOR; + const LENGTH_PROGRESSION = [1, 1, 2, 3, 5, 8, 13, 21, 34].map(n => n / LENGTH_FACTOR); + const MAX_PROGRESSION = last(LENGTH_PROGRESSION); + + const getOffset = (flux, pointNumber, widthFactor = 1, startingWidth = 0) => { + const fluxWidth = Math.min(flux ** 0.9 / FLUX_FACTOR, MAX_FLUX_WIDTH); + const lengthWidth = pointNumber * STEP_WIDTH + (LENGTH_PROGRESSION[pointNumber] || MAX_PROGRESSION); + return widthFactor * (lengthWidth + fluxWidth) + startingWidth; + }; // build polygon from a list of points and calculated offset (width) const getRiverPath = function (points, widthFactor = 1, startingWidth = 0) { - const riverLength = points.reduce((s, v, i, p) => s + (i ? Math.hypot(v[0] - p[i - 1][0], v[1] - p[i - 1][1]) : 0), 0); - let width = 0; - const riverPointsLeft = []; const riverPointsRight = []; @@ -366,13 +360,10 @@ const [x1, y1, flux] = points[p]; const [x2, y2] = points[p + 1] || points[p]; - const fluxWidth = Math.min(flux ** 0.9 / fluxFactor, maxFluxWidth); - const lengthWidth = p * stepWidth + (lengthProgression[p] || maxProgression); - width = widthFactor * (lengthWidth + fluxWidth) + startingWidth; - + const offset = getOffset(flux, p, widthFactor, startingWidth); const angle = Math.atan2(y0 - y2, x0 - x2); - const sinOffset = Math.sin(angle) * width; - const cosOffset = Math.cos(angle) * width; + const sinOffset = Math.sin(angle) * offset; + const cosOffset = Math.cos(angle) * offset; riverPointsLeft.push([x1 - sinOffset, y1 + cosOffset]); riverPointsRight.push([x1 + sinOffset, y1 - cosOffset]); @@ -382,7 +373,7 @@ let left = lineGen(riverPointsLeft); left = left.substring(left.indexOf("C")); - return [round(right + left, 2), rn(riverLength, 2), width]; + return round(right + left, 1); }; const specify = function () { @@ -424,6 +415,12 @@ return rw(riverTypes[isFork ? "fork" : "main"][isSmall ? "small" : "big"]); }; + const getApproximateLength = points => points.reduce((s, v, i, p) => s + (i ? Math.hypot(v[0] - p[i - 1][0], v[1] - p[i - 1][1]) : 0), 0); + + // Real mouth width examples: Amazon 6000m, Volga 6000m, Dniepr 3000m, Mississippi 1300m, Themes 900m, + // Danube 800m, Daugava 600m, Neva 500m, Nile 450m, Don 400m, Wisla 300m, Pripyat 150m, Bug 140m, Muchavets 40m + const getWidth = offset => rn((offset / 1.5) ** 1.8, 2); // mouth width in km + // remove river and all its tributaries const remove = function (id) { const cells = pack.cells; @@ -444,5 +441,5 @@ return getBasin(parent); }; - return {generate, alterHeights, resolveDepressions, addMeandering, getRiverPath, specify, getName, getType, getBasin, remove}; + return {generate, alterHeights, resolveDepressions, addMeandering, getRiverPath, specify, getName, getType, getBasin, getWidth, getOffset, getApproximateLength, remove}; }); diff --git a/modules/ui/heightmap-editor.js b/modules/ui/heightmap-editor.js index 4cac39f3..f19e8cf0 100644 --- a/modules/ui/heightmap-editor.js +++ b/modules/ui/heightmap-editor.js @@ -197,6 +197,7 @@ function editHeightmap() { } } + drawRivers(); Lakes.defineGroup(); defineBiomes(); rankCells(); diff --git a/modules/ui/layers.js b/modules/ui/layers.js index 2063721d..46beb692 100644 --- a/modules/ui/layers.js +++ b/modules/ui/layers.js @@ -875,7 +875,6 @@ function toggleStates(event) { } } -// draw states function drawStates() { TIME && console.time("drawStates"); regions.selectAll("path").remove(); @@ -1015,6 +1014,21 @@ function drawStates() { TIME && console.timeEnd("drawStates"); } +function toggleBorders(event) { + if (!layerIsOn("toggleBorders")) { + turnButtonOn("toggleBorders"); + drawBorders(); + if (event && isCtrlClick(event)) editStyle("borders"); + } else { + if (event && isCtrlClick(event)) { + editStyle("borders"); + return; + } + turnButtonOff("toggleBorders"); + borders.selectAll("path").remove(); + } +} + // draw state and province borders function drawBorders() { TIME && console.time("drawBorders"); @@ -1118,21 +1132,6 @@ function drawBorders() { TIME && console.timeEnd("drawBorders"); } -function toggleBorders(event) { - if (!layerIsOn("toggleBorders")) { - turnButtonOn("toggleBorders"); - $("#borders").fadeIn(); - if (event && isCtrlClick(event)) editStyle("borders"); - } else { - if (event && isCtrlClick(event)) { - editStyle("borders"); - return; - } - turnButtonOff("toggleBorders"); - $("#borders").fadeOut(); - } -} - function toggleProvinces(event) { if (!layerIsOn("toggleProvinces")) { turnButtonOn("toggleProvinces"); @@ -1454,14 +1453,18 @@ function toggleRivers(event) { } function drawRivers() { + TIME && console.time("drawRivers"); + const {addMeandering, getRiverPath} = Rivers; + lineGen.curve(d3.curveCatmullRom.alpha(0.1)); const riverPaths = pack.rivers.map(river => { - const riverMeandered = Rivers.addMeandering(river.cells, 0.5, river.points); + const riverMeandered = addMeandering(river.cells, 0.5, river.points); const widthFactor = river.widthFactor || 1; const startingWidth = river.startingWidth || 0; - const [path] = Rivers.getRiverPath(riverMeandered, widthFactor, startingWidth); - return [path, river.i]; + const path = getRiverPath(riverMeandered, widthFactor, startingWidth); + return ``; }); - rivers.html(riverPaths.map(d => ``).join("")); + rivers.html(riverPaths.join("")); + TIME && console.timeEnd("drawRivers"); } function toggleRoutes(event) { diff --git a/modules/ui/tools.js b/modules/ui/tools.js index 4ac393c6..01de28f4 100644 --- a/modules/ui/tools.js +++ b/modules/ui/tools.js @@ -538,7 +538,7 @@ function addRiverOnClick() { if (cells.h[i] < 20) return tip("Cannot create river in water cell", false, "error"); if (cells.b[i]) return; - const {alterHeights, resolveDepressions, addMeandering, getRiverPath, getBasin, getName, getType} = Rivers; + const {alterHeights, resolveDepressions, addMeandering, getRiverPath, getBasin, getName, getType, getWidth, getOffset, getApproximateLength} = Rivers; const riverCells = []; let riverId = last(rivers).id + 1; let parent = 0; @@ -614,22 +614,15 @@ function addRiverOnClick() { } const river = rivers.find(r => r.i === riverId); - const widthFactor = river?.widthFactor || (!parent || parent === riverId ? 1.2 : 1); - const riverMeandered = addMeandering(riverCells); - lineGen.curve(d3.curveCatmullRom.alpha(0.1)); - const [path, length, offset] = getRiverPath(riverMeandered, widthFactor); - viewbox - .select("#rivers") - .append("path") - .attr("d", path) - .attr("id", "river" + riverId); - - // add new river to data or change extended river attributes const source = riverCells[0]; const mouth = riverCells[riverCells.length - 2]; + const widthFactor = river?.widthFactor || (!parent || parent === riverId ? 1.2 : 1); + const riverMeandered = addMeandering(riverCells); + const discharge = cells.fl[mouth]; // m3 in second - const width = rn((offset / 1.4) ** 2, 2); // mounth width in km + const length = getApproximateLength(riverMeandered); + const width = getWidth(getOffset(discharge, riverMeandered.length, widthFactor)); if (river) { river.source = source; @@ -645,6 +638,13 @@ function addRiverOnClick() { rivers.push({i: riverId, source, mouth, discharge, length, width, widthFactor, sourceWidth: 0, parent, cells: riverCells, basin, name, type}); } + // render river + lineGen.curve(d3.curveCatmullRom.alpha(0.1)); + const path = getRiverPath(riverMeandered, widthFactor); + const id = "river" + riverId; + const riversG = viewbox.select("#rivers"); + riversG.append("path").attr("d", path).attr("id", id); + if (d3.event.shiftKey === false) { Lakes.cleanupLakeData(); unpressClickToAddButton(); From 424980f5be6be1845103dfd5602809758a9cf0c4 Mon Sep 17 00:00:00 2001 From: Azgaar Date: Sat, 24 Jul 2021 19:05:17 +0300 Subject: [PATCH 12/21] fix added river basin selection --- modules/river-generator.js | 2 +- modules/ui/layers.js | 2 +- modules/ui/tools.js | 16 ++++++++-------- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/modules/river-generator.js b/modules/river-generator.js index 3613820d..44c696f0 100644 --- a/modules/river-generator.js +++ b/modules/river-generator.js @@ -259,7 +259,7 @@ }; // add points at 1/3 and 2/3 of a line between adjacents river cells - const addMeandering = function (riverCells, meandering = 0.5, riverPoints = null) { + const addMeandering = function (riverCells, riverPoints = null, meandering = 0.5) { const {fl, conf, h} = pack.cells; const meandered = []; const lastStep = riverCells.length - 1; diff --git a/modules/ui/layers.js b/modules/ui/layers.js index 46beb692..64a97e76 100644 --- a/modules/ui/layers.js +++ b/modules/ui/layers.js @@ -1457,7 +1457,7 @@ function drawRivers() { const {addMeandering, getRiverPath} = Rivers; lineGen.curve(d3.curveCatmullRom.alpha(0.1)); const riverPaths = pack.rivers.map(river => { - const riverMeandered = addMeandering(river.cells, 0.5, river.points); + const riverMeandered = addMeandering(river.cells, river.points); const widthFactor = river.widthFactor || 1; const startingWidth = river.startingWidth || 0; const path = getRiverPath(riverMeandered, widthFactor, startingWidth); diff --git a/modules/ui/tools.js b/modules/ui/tools.js index 01de28f4..4c7cc4a7 100644 --- a/modules/ui/tools.js +++ b/modules/ui/tools.js @@ -540,8 +540,8 @@ function addRiverOnClick() { const {alterHeights, resolveDepressions, addMeandering, getRiverPath, getBasin, getName, getType, getWidth, getOffset, getApproximateLength} = Rivers; const riverCells = []; - let riverId = last(rivers).id + 1; - let parent = 0; + let riverId = last(rivers).i + 1; + let parent = riverId; const initialFlux = grid.cells.prec[cells.g[i]]; cells.fl[i] = initialFlux; @@ -562,7 +562,7 @@ function addRiverOnClick() { const feature = pack.features[cells.f[min]]; if (feature.type === "lake") { - parent = feature.outlet || 0; + if (feature.outlet) parent = feature.outlet; feature.inlets ? feature.inlets.push(riverId) : (feature.inlets = [riverId]); } break; @@ -618,11 +618,11 @@ function addRiverOnClick() { const source = riverCells[0]; const mouth = riverCells[riverCells.length - 2]; const widthFactor = river?.widthFactor || (!parent || parent === riverId ? 1.2 : 1); - const riverMeandered = addMeandering(riverCells); + const meanderedPoints = addMeandering(riverCells); const discharge = cells.fl[mouth]; // m3 in second - const length = getApproximateLength(riverMeandered); - const width = getWidth(getOffset(discharge, riverMeandered.length, widthFactor)); + const length = getApproximateLength(meanderedPoints); + const width = getWidth(getOffset(discharge, meanderedPoints.length, widthFactor)); if (river) { river.source = source; @@ -640,10 +640,10 @@ function addRiverOnClick() { // render river lineGen.curve(d3.curveCatmullRom.alpha(0.1)); - const path = getRiverPath(riverMeandered, widthFactor); + const path = getRiverPath(meanderedPoints, widthFactor); const id = "river" + riverId; const riversG = viewbox.select("#rivers"); - riversG.append("path").attr("d", path).attr("id", id); + riversG.append("path").attr("id", id).attr("d", path); if (d3.event.shiftKey === false) { Lakes.cleanupLakeData(); From a1425bcb542437282ff231a73bf4288548b0c6f9 Mon Sep 17 00:00:00 2001 From: Azgaar Date: Sun, 25 Jul 2021 01:37:48 +0300 Subject: [PATCH 13/21] river editor rework - data checking --- index.css | 19 ++ index.html | 4 +- modules/load.js | 8 + modules/river-generator.js | 4 +- modules/ui/editors.js | 546 ++++++++++++++++++++++++++-------- modules/ui/layers.js | 6 +- modules/ui/rivers-editor.js | 214 ++++++++----- modules/ui/rivers-overview.js | 3 +- 8 files changed, 586 insertions(+), 218 deletions(-) diff --git a/index.css b/index.css index 4012c15e..2710593f 100644 --- a/index.css +++ b/index.css @@ -202,6 +202,7 @@ a { stroke: none; mask: url(#land); cursor: pointer; + fill-rule: nonzero; } #anchors { @@ -984,6 +985,24 @@ body button.noicon { cursor: pointer; } +#controlCells > .current { + fill: #82c8ff40; + stroke: #82c8ff; + stroke-width: 0.4; +} + +#controlCells > .available { + fill: #82ff9b40; + stroke: #82ff9b; + stroke-width: 0.4; +} + +#controlCells > .occupied { + fill: #ff828240; + stroke: #ff8282; + stroke-width: 0.4; +} + #vertices > circle { fill: #ff0000; stroke: #841f1f; diff --git a/index.html b/index.html index 17f44bf5..7e059523 100644 --- a/index.html +++ b/index.html @@ -1644,12 +1644,12 @@ -
+
Source width:
-
+
Width modifier:
diff --git a/modules/load.js b/modules/load.js index cb02d6e9..7d7bd482 100644 --- a/modules/load.js +++ b/modules/load.js @@ -706,6 +706,14 @@ function parseLoadedData(data) { statesHalo.attr("opacity", opacity).attr("filter", "blur(5px)"); regions.attr("opacity", null).attr("filter", null); } + + if (version < 1.65) { + // v 1.65 changed rivers data + for (const river of pack.rivers) { + river.sourceWidth = 0; + // get points and cells + } + } })(); void (function checkDataIntegrity() { diff --git a/modules/river-generator.js b/modules/river-generator.js index 44c696f0..a9baf466 100644 --- a/modules/river-generator.js +++ b/modules/river-generator.js @@ -171,7 +171,7 @@ const meanderedPoints = addMeandering(riverCells); const discharge = cells.fl[mouth]; // m3 in second const length = getApproximateLength(meanderedPoints); - const width = getWidth(getOffset(discharge, meanderedPoints.length, widthFactor)); + const width = getWidth(getOffset(discharge, meanderedPoints.length, widthFactor, 0)); pack.rivers.push({i: riverId, source, mouth, discharge, length, width, widthFactor, sourceWidth: 0, parent, cells: riverCells}); } @@ -441,5 +441,5 @@ return getBasin(parent); }; - return {generate, alterHeights, resolveDepressions, addMeandering, getRiverPath, specify, getName, getType, getBasin, getWidth, getOffset, getApproximateLength, remove}; + return {generate, alterHeights, resolveDepressions, addMeandering, getRiverPath, specify, getName, getType, getBasin, getWidth, getOffset, getApproximateLength, getRiverPoints, remove}; }); diff --git a/modules/ui/editors.js b/modules/ui/editors.js index cac16d4c..9acf751c 100644 --- a/modules/ui/editors.js +++ b/modules/ui/editors.js @@ -6,10 +6,7 @@ restoreDefaultEvents(); // apply default viewbox events on load // restore default viewbox events function restoreDefaultEvents() { svg.call(zoom); - viewbox.style("cursor", "default") - .on(".drag", null) - .on("click", clicked) - .on("touchmove mousemove", moved); + viewbox.style("cursor", "default").on(".drag", null).on("click", clicked).on("touchmove mousemove", moved); legend.call(d3.drag().on("start", dragLegendBox)); } @@ -17,12 +14,14 @@ function restoreDefaultEvents() { function clicked() { const el = d3.event.target; if (!el || !el.parentElement || !el.parentElement.parentElement) return; - const parent = el.parentElement, grand = parent.parentElement, great = grand.parentElement; + const parent = el.parentElement; + const grand = parent.parentElement; + const great = grand.parentElement; const p = d3.mouse(this); const i = findCell(p[0], p[1]); if (grand.id === "emblems") editEmblem(); - else if (parent.id === "rivers") editRiver(); + else if (parent.id === "rivers") editRiver(el.id); else if (grand.id === "routes") editRoute(); else if (el.tagName === "tspan" && grand.parentNode.parentNode.id === "labels") editLabel(); else if (grand.id === "burgLabels") editBurg(); @@ -33,10 +32,9 @@ function clicked() { else if (grand.id === "coastline") editCoastline(); else if (great.id === "armies") editRegiment(); else if (pack.cells.t[i] === 1) { - const node = document.getElementById("island_"+pack.cells.f[i]); + const node = document.getElementById("island_" + pack.cells.f[i]); editCoastline(node); - } - else if (grand.id === "lakes") editLake(); + } else if (grand.id === "lakes") editLake(); } // clear elSelected variable @@ -51,9 +49,11 @@ function unselect() { // close all dialogs except stated function closeDialogs(except = "#except") { - $(".dialog:visible").not(except).each(function() { - $(this).dialog("close"); - }); + $(".dialog:visible") + .not(except) + .each(function () { + $(this).dialog("close"); + }); } // move brush radius circle @@ -79,8 +79,10 @@ function fitContent() { } // apply sorting behaviour for lines on Editor header click -document.querySelectorAll(".sortable").forEach(function(e) { - e.addEventListener("click", function(e) {sortLines(this);}); +document.querySelectorAll(".sortable").forEach(function (e) { + e.addEventListener("click", function (e) { + sortLines(this); + }); }); function sortLines(header) { @@ -90,7 +92,9 @@ function sortLines(header) { const headers = header.parentNode; headers.querySelectorAll("div.sortable").forEach(e => { - e.classList.forEach(c => {if(c.includes("icon-sort")) e.classList.remove(c);}); + e.classList.forEach(c => { + if (c.includes("icon-sort")) e.classList.remove(c); + }); }); header.classList.add("icon-sort-" + type + order); applySorting(headers); @@ -105,16 +109,19 @@ function applySorting(headers) { const list = headers.nextElementSibling; const lines = Array.from(list.children); - lines.sort((a, b) => { - const an = name ? a.dataset[sortby] : +a.dataset[sortby]; - const bn = name ? b.dataset[sortby] : +b.dataset[sortby]; - return (an > bn ? 1 : an < bn ? -1 : 0) * desc; - }).forEach(line => list.appendChild(line)); + lines + .sort((a, b) => { + const an = name ? a.dataset[sortby] : +a.dataset[sortby]; + const bn = name ? b.dataset[sortby] : +b.dataset[sortby]; + return (an > bn ? 1 : an < bn ? -1 : 0) * desc; + }) + .forEach(line => list.appendChild(line)); } function addBurg(point) { const cells = pack.cells; - const x = rn(point[0], 2), y = rn(point[1], 2); + const x = rn(point[0], 2), + y = rn(point[1], 2); const cell = findCell(x, point[1]); const i = pack.burgs.length; const culture = cells.culture[cell]; @@ -123,11 +130,11 @@ function addBurg(point) { const feature = cells.f[cell]; const temple = pack.states[state].form === "Theocracy"; - const population = Math.max((cells.s[cell] + cells.road[cell]) / 3 + i / 1000 + cell % 100 / 1000, .1); + const population = Math.max((cells.s[cell] + cells.road[cell]) / 3 + i / 1000 + (cell % 100) / 1000, 0.1); const type = BurgsAndStates.getType(cell, false); // generate emblem - const coa = COA.generate(pack.states[state].coa, .25, null, type); + const coa = COA.generate(pack.states[state].coa, 0.25, null, type); coa.shield = COA.getShield(culture, state); COArenderer.add("burg", i, coa, x, y); @@ -135,10 +142,23 @@ function addBurg(point) { cells.burg[cell] = i; const townSize = burgIcons.select("#towns").attr("size") || 0.5; - burgIcons.select("#towns").append("circle").attr("id", "burg"+i).attr("data-id", i) - .attr("cx", x).attr("cy", y).attr("r", townSize); - burgLabels.select("#towns").append("text").attr("id", "burgLabel"+i).attr("data-id", i) - .attr("x", x).attr("y", y).attr("dy", `${townSize * -1.5}px`).text(name); + burgIcons + .select("#towns") + .append("circle") + .attr("id", "burg" + i) + .attr("data-id", i) + .attr("cx", x) + .attr("cy", y) + .attr("r", townSize); + burgLabels + .select("#towns") + .append("text") + .attr("id", "burgLabel" + i) + .attr("data-id", i) + .attr("x", x) + .attr("y", y) + .attr("dy", `${townSize * -1.5}px`) + .text(name); BurgsAndStates.defineBurgFeatures(pack.burgs[i]); return i; @@ -148,17 +168,20 @@ function moveBurgToGroup(id, g) { const label = document.querySelector("#burgLabels [data-id='" + id + "']"); const icon = document.querySelector("#burgIcons [data-id='" + id + "']"); const anchor = document.querySelector("#anchors [data-id='" + id + "']"); - if (!label || !icon) {ERROR && console.error("Cannot find label or icon elements"); return;} + if (!label || !icon) { + ERROR && console.error("Cannot find label or icon elements"); + return; + } - document.querySelector("#burgLabels > #"+g).appendChild(label); - document.querySelector("#burgIcons > #"+g).appendChild(icon); + document.querySelector("#burgLabels > #" + g).appendChild(label); + document.querySelector("#burgIcons > #" + g).appendChild(icon); const iconSize = icon.parentNode.getAttribute("size"); icon.setAttribute("r", iconSize); label.setAttribute("dy", `${iconSize * -1.5}px`); if (anchor) { - document.querySelector("#anchors > #"+g).appendChild(anchor); + document.querySelector("#anchors > #" + g).appendChild(anchor); const anchorSize = +anchor.parentNode.getAttribute("size"); anchor.setAttribute("width", anchorSize); anchor.setAttribute("height", anchorSize); @@ -175,7 +198,8 @@ function removeBurg(id) { if (icon) icon.remove(); if (anchor) anchor.remove(); - const cells = pack.cells, burg = pack.burgs[id]; + const cells = pack.cells, + burg = pack.burgs[id]; burg.removed = true; cells.burg[burg.cell] = 0; @@ -189,8 +213,14 @@ function removeBurg(id) { function toggleCapital(burg) { const state = pack.burgs[burg].state; - if (!state) {tip("Neutral lands cannot have a capital", false, "error"); return;} - if (pack.burgs[burg].capital) {tip("To change capital please assign a capital status to another burg of this state", false, "error"); return;} + if (!state) { + tip("Neutral lands cannot have a capital", false, "error"); + return; + } + if (pack.burgs[burg].capital) { + tip("To change capital please assign a capital status to another burg of this state", false, "error"); + return; + } const old = pack.states[state].capital; // change statuses @@ -206,7 +236,10 @@ function togglePort(burg) { const anchor = document.querySelector("#anchors [data-id='" + burg + "']"); if (anchor) anchor.remove(); const b = pack.burgs[burg]; - if (b.port) {b.port = 0; return;} // not a port anymore + if (b.port) { + b.port = 0; + return; + } // not a port anymore const haven = pack.cells.haven[b.cell]; const port = haven ? pack.cells.f[haven] : -1; @@ -214,11 +247,16 @@ function togglePort(burg) { b.port = port; const g = b.capital ? "cities" : "towns"; - const group = anchors.select("g#"+g); + const group = anchors.select("g#" + g); const size = +group.attr("size"); - group.append("use").attr("xlink:href", "#icon-anchor").attr("data-id", burg) - .attr("x", rn(b.x - size * .47, 2)).attr("y", rn(b.y - size * .47, 2)) - .attr("width", size).attr("height", size); + group + .append("use") + .attr("xlink:href", "#icon-anchor") + .attr("data-id", burg) + .attr("x", rn(b.x - size * 0.47, 2)) + .attr("y", rn(b.y - size * 0.47, 2)) + .attr("width", size) + .attr("height", size); } function toggleBurgLock(burg) { @@ -251,38 +289,49 @@ function drawLegend(name, data) { const vOffset = fontSize / 2; // append items - const boxes = legend.append("g").attr("stroke-width", .5).attr("stroke", "#111111").attr("stroke-dasharray", "none"); + const boxes = legend.append("g").attr("stroke-width", 0.5).attr("stroke", "#111111").attr("stroke-dasharray", "none"); const labels = legend.append("g").attr("fill", "#000000").attr("stroke", "none"); const columns = Math.ceil(data.length / itemsInCol); - for (let column=0, i=0; column < columns; column++) { + for (let column = 0, i = 0; column < columns; column++) { const linesInColumn = Math.ceil(data.length / columns); const offset = column ? colOffset * 2 + legend.node().getBBox().width : colOffset; - for (let l=0; l < linesInColumn && data[i]; l++, i++) { - boxes.append("rect").attr("fill", data[i][1]) - .attr("x", offset).attr("y", lineHeight + l*lineHeight + vOffset) - .attr("width", colorBoxSize).attr("height", colorBoxSize); + for (let l = 0; l < linesInColumn && data[i]; l++, i++) { + boxes + .append("rect") + .attr("fill", data[i][1]) + .attr("x", offset) + .attr("y", lineHeight + l * lineHeight + vOffset) + .attr("width", colorBoxSize) + .attr("height", colorBoxSize); - labels.append("text").text(data[i][2]) - .attr("x", offset + colorBoxSize * 1.6).attr("y", fontSize/1.6 + lineHeight + l*lineHeight + vOffset); + labels + .append("text") + .text(data[i][2]) + .attr("x", offset + colorBoxSize * 1.6) + .attr("y", fontSize / 1.6 + lineHeight + l * lineHeight + vOffset); } } // append label const offset = colOffset + legend.node().getBBox().width / 2; - labels.append("text") - .attr("text-anchor", "middle").attr("font-weight", "bold").attr("font-size", "1.2em") - .attr("id", "legendLabel").text(name).attr("x", offset).attr("y", fontSize * 1.1 + vOffset / 2); + labels + .append("text") + .attr("text-anchor", "middle") + .attr("font-weight", "bold") + .attr("font-size", "1.2em") + .attr("id", "legendLabel") + .text(name) + .attr("x", offset) + .attr("y", fontSize * 1.1 + vOffset / 2); // append box const bbox = legend.node().getBBox(); const width = bbox.width + colOffset * 2; const height = bbox.height + colOffset / 2 + vOffset; - legend.insert("rect", ":first-child").attr("id", "legendBox") - .attr("x", 0).attr("y", 0).attr("width", width).attr("height", height) - .attr("fill", backClr).attr("fill-opacity", opacity); + legend.insert("rect", ":first-child").attr("id", "legendBox").attr("x", 0).attr("y", 0).attr("width", width).attr("height", height).attr("fill", backClr).attr("fill-opacity", opacity); fitLegendBox(); } @@ -293,7 +342,8 @@ function fitLegendBox() { const px = isNaN(+legend.attr("data-x")) ? 99 : legend.attr("data-x") / 100; const py = isNaN(+legend.attr("data-y")) ? 93 : legend.attr("data-y") / 100; const bbox = legend.node().getBBox(); - const x = rn(svgWidth * px - bbox.width), y = rn(svgHeight * py - bbox.height); + const x = rn(svgWidth * px - bbox.width), + y = rn(svgHeight * py - bbox.height); legend.attr("transform", `translate(${x},${y})`); } @@ -301,19 +351,23 @@ function fitLegendBox() { function redrawLegend() { if (!legend.select("rect").size()) return; const name = legend.select("#legendLabel").text(); - const data = legend.attr("data").split("|").map(l => l.split(",")); + const data = legend + .attr("data") + .split("|") + .map(l => l.split(",")); drawLegend(name, data); } function dragLegendBox() { const tr = parseTransform(this.getAttribute("transform")); - const x = +tr[0] - d3.event.x, y = +tr[1] - d3.event.y; + const x = +tr[0] - d3.event.x, + y = +tr[1] - d3.event.y; const bbox = legend.node().getBBox(); - d3.event.on("drag", function() { - const px = rn((x + d3.event.x + bbox.width) / svgWidth * 100, 2); - const py = rn((y + d3.event.y + bbox.height) / svgHeight * 100, 2); - const transform = `translate(${(x + d3.event.x)},${(y + d3.event.y)})`; + d3.event.on("drag", function () { + const px = rn(((x + d3.event.x + bbox.width) / svgWidth) * 100, 2); + const py = rn(((y + d3.event.y + bbox.height) / svgHeight) * 100, 2); + const transform = `translate(${x + d3.event.x},${y + d3.event.y})`; legend.attr("transform", transform).attr("data-x", px).attr("data-y", py); }); } @@ -330,9 +384,16 @@ function createPicker() { const closePicker = () => contaiter.style("display", "none"); const contaiter = d3.select("body").append("svg").attr("id", "pickerContainer").attr("width", "100%").attr("height", "100%"); - contaiter.append("rect").attr("x", 0).attr("y", 0).attr("width", "100%").attr("height", "100%").attr("opacity", .2) - .on("mousemove", cl).on("click", closePicker); - const picker = contaiter.append("g").attr("id", "picker").call(d3.drag().filter(() => event.target.tagName !== "INPUT").on("start", dragPicker)); + contaiter.append("rect").attr("x", 0).attr("y", 0).attr("width", "100%").attr("height", "100%").attr("opacity", 0.2).on("mousemove", cl).on("click", closePicker); + const picker = contaiter + .append("g") + .attr("id", "picker") + .call( + d3 + .drag() + .filter(() => event.target.tagName !== "INPUT") + .on("start", dragPicker) + ); const controls = picker.append("g").attr("id", "pickerControls"); const h = controls.append("g"); @@ -343,7 +404,7 @@ function createPicker() { const s = controls.append("g"); s.append("text").attr("x", 113).attr("y", 14).text("S:"); - s.append("line").attr("x1", 124).attr("y1", 10).attr("x2", 206).attr("y2", 10) + s.append("line").attr("x1", 124).attr("y1", 10).attr("x2", 206).attr("y2", 10); s.append("circle").attr("cx", 181.4).attr("cy", 10).attr("r", 5).attr("id", "pickerS"); s.on("mousemove", () => tip("Set palette saturation")); @@ -356,8 +417,13 @@ function createPicker() { controls.selectAll("line").on("click", clickPickerControl); controls.selectAll("circle").call(d3.drag().on("start", dragPickerControl)); - const spaces = picker.append("foreignObject").attr("id", "pickerSpaces") - .attr("x", 4).attr("y", 20).attr("width", 303).attr("height", 20) + const spaces = picker + .append("foreignObject") + .attr("id", "pickerSpaces") + .attr("x", 4) + .attr("y", 20) + .attr("width", 303) + .attr("height", 20) .on("mousemove", () => tip("Color value in different color spaces. Edit to change")); const html = ` `; - spaces.node().insertAdjacentHTML('beforeend', html); + spaces.node().insertAdjacentHTML("beforeend", html); spaces.selectAll("input").on("change", changePickerSpace); const colors = picker.append("g").attr("id", "pickerColors").attr("stroke", "#333333"); @@ -379,19 +445,38 @@ function createPicker() { const hatching = d3.selectAll("g#hatching > pattern"); const number = hatching.size(); - const clr = d3.range(number).map(i => d3.hsl(i/number*360, .7, .7).hex()); - clr.forEach(function(d, i) { - colors.append("rect").attr("id", "picker_" + d).attr("fill", d).attr("class", i?"":"selected") - .attr("x", i*22+4).attr("y", 40).attr("width", 16).attr("height", 16); + const clr = d3.range(number).map(i => d3.hsl((i / number) * 360, 0.7, 0.7).hex()); + clr.forEach(function (d, i) { + colors + .append("rect") + .attr("id", "picker_" + d) + .attr("fill", d) + .attr("class", i ? "" : "selected") + .attr("x", i * 22 + 4) + .attr("y", 40) + .attr("width", 16) + .attr("height", 16); }); - hatching.each(function(d, i) { - hatches.append("rect").attr("id", "picker_" + this.id).attr("fill", "url(#" + this.id + ")") - .attr("x", i*22+4).attr("y", 61).attr("width", 16).attr("height", 16); + hatching.each(function (d, i) { + hatches + .append("rect") + .attr("id", "picker_" + this.id) + .attr("fill", "url(#" + this.id + ")") + .attr("x", i * 22 + 4) + .attr("y", 61) + .attr("width", 16) + .attr("height", 16); }); - colors.selectAll("rect").on("click", pickerFillClicked).on("mousemove", () => tip("Click to fill with the color")); - hatches.selectAll("rect").on("click", pickerFillClicked).on("mousemove", () => tip("Click to fill with the hatching")); + colors + .selectAll("rect") + .on("click", pickerFillClicked) + .on("mousemove", () => tip("Click to fill with the color")); + hatches + .selectAll("rect") + .on("click", pickerFillClicked) + .on("mousemove", () => tip("Click to fill with the hatching")); // append box const bbox = picker.node().getBBox(); @@ -403,12 +488,15 @@ function createPicker() { picker.insert("rect", ":first-child").attr("x", 288).attr("y", -21).attr("id", "pickerCloseRect").attr("width", 14).attr("height", 14).on("mousemove", cl).on("click", closePicker); picker.insert("text", ":first-child").attr("x", 12).attr("y", -10).attr("id", "pickerLabel").text("Color Picker").on("mousemove", pos); picker.insert("rect", ":first-child").attr("x", 0).attr("y", -30).attr("width", width).attr("height", 30).attr("id", "pickerHeader").on("mousemove", pos); - picker.attr("transform", `translate(${(svgWidth-width)/2},${(svgHeight-height)/2})`); + picker.attr("transform", `translate(${(svgWidth - width) / 2},${(svgHeight - height) / 2})`); } function updateSelectedRect(fill) { document.getElementById("picker").querySelector("rect.selected").classList.remove("selected"); - document.getElementById("picker").querySelector("rect[fill='"+fill.toLowerCase()+"']").classList.add("selected"); + document + .getElementById("picker") + .querySelector("rect[fill='" + fill.toLowerCase() + "']") + .classList.add("selected"); } function updateSpaces() { @@ -438,8 +526,8 @@ function updatePickerColors() { const s = getPickerControl(pickerS, 1); const l = getPickerControl(pickerL, 1); - colors.each(function(d, i) { - const clr = d3.hsl(i/number*180+h, s, l).hex(); + colors.each(function (d, i) { + const clr = d3.hsl((i / number) * 180 + h, s, l).hex(); this.setAttribute("id", "picker_" + clr); this.setAttribute("fill", clr); }); @@ -461,11 +549,11 @@ function openPicker(fill, callback) { updateSelectedRect(fill); - openPicker.updateFill = function() { + openPicker.updateFill = function () { const selected = document.getElementById("picker").querySelector("rect.selected"); if (!selected) return; callback(selected.getAttribute("fill")); - } + }; } function setPickerControl(control, value, max) { @@ -479,19 +567,20 @@ function getPickerControl(control, max) { const min = +control.previousSibling.getAttribute("x1"); const delta = +control.previousSibling.getAttribute("x2") - min; const current = +control.getAttribute("cx") - min; - return current / delta * max; + return (current / delta) * max; } function dragPicker() { const tr = parseTransform(this.getAttribute("transform")); - const x = +tr[0] - d3.event.x, y = +tr[1] - d3.event.y; + const x = +tr[0] - d3.event.x, + y = +tr[1] - d3.event.y; const picker = d3.select("#picker"); const bbox = picker.node().getBBox(); - d3.event.on("drag", function() { - const px = rn((x + d3.event.x + bbox.width) / svgWidth * 100, 2); - const py = rn((y + d3.event.y + bbox.height) / svgHeight * 100, 2); - const transform = `translate(${(x + d3.event.x)},${(y + d3.event.y)})`; + d3.event.on("drag", function () { + const px = rn(((x + d3.event.x + bbox.width) / svgWidth) * 100, 2); + const py = rn(((y + d3.event.y + bbox.height) / svgHeight) * 100, 2); + const transform = `translate(${x + d3.event.x},${y + d3.event.y})`; picker.attr("transform", transform).attr("data-x", px).attr("data-y", py); }); } @@ -519,7 +608,7 @@ function dragPickerControl() { const min = +this.previousSibling.getAttribute("x1"); const max = +this.previousSibling.getAttribute("x2"); - d3.event.on("drag", function() { + d3.event.on("drag", function () { const x = Math.max(Math.min(d3.event.x, max), min); this.setAttribute("cx", x); updateSpaces(); @@ -530,16 +619,20 @@ function dragPickerControl() { function changePickerSpace() { const valid = this.checkValidity(); - if (!valid) {tip("You must provide a correct value", false, "error"); return;} + if (!valid) { + tip("You must provide a correct value", false, "error"); + return; + } const space = this.dataset.space; const i = Array.from(this.parentNode.querySelectorAll("input")).map(input => input.value); // inputs - const fill = space === "hex" ? d3.rgb(this.value) - : space === "rgb" ? d3.rgb(i[0], i[1], i[2]) - : d3.hsl(i[0], i[1]/100, i[2]/100); + const fill = space === "hex" ? d3.rgb(this.value) : space === "rgb" ? d3.rgb(i[0], i[1], i[2]) : d3.hsl(i[0], i[1] / 100, i[2] / 100); const hsl = d3.hsl(fill); - if (isNaN(hsl.l)) {tip("You must provide a correct value", false, "error"); return;} + if (isNaN(hsl.l)) { + tip("You must provide a correct value", false, "error"); + return; + } if (!isNaN(hsl.h)) setPickerControl(pickerH, hsl.h, 360); if (!isNaN(hsl.s)) setPickerControl(pickerS, hsl.s, 1); if (!isNaN(hsl.l)) setPickerControl(pickerL, hsl.l, 1); @@ -551,7 +644,7 @@ function changePickerSpace() { // add fogging function fog(id, path) { - if (defs.select("#fog #"+id).size()) return; + if (defs.select("#fog #" + id).size()) return; const fadeIn = d3.transition().duration(2000).ease(d3.easeSinInOut); if (defs.select("#fog path").size()) { defs.select("#fog").append("path").attr("d", path).attr("id", id).attr("opacity", 0).transition(fadeIn).attr("opacity", 1); @@ -564,7 +657,7 @@ function fog(id, path) { // remove fogging function unfog(id) { - let el = defs.select("#fog #"+id); + let el = defs.select("#fog #" + id); if (!id || !el.size()) el = defs.select("#fog").selectAll("path"); el.remove(); @@ -572,7 +665,7 @@ function unfog(id) { } function getFileName(dataType) { - const formatTime = time => time < 10 ? "0" + time : time; + const formatTime = time => (time < 10 ? "0" + time : time); const name = mapName.value; const type = dataType ? dataType + " " : ""; const date = new Date(); @@ -581,7 +674,7 @@ function getFileName(dataType) { const day = formatTime(date.getDate()); const hour = formatTime(date.getHours()); const minutes = formatTime(date.getMinutes()); - const dateString = [year, month, day, hour, minutes].join('-'); + const dateString = [year, month, day, hour, minutes].join("-"); return name + " " + type + dateString; } @@ -609,12 +702,9 @@ function highlightElement(element) { const enter = d3.transition().duration(1000).ease(d3.easeBounceOut); const exit = d3.transition().duration(500).ease(d3.easeLinear); - const highlight = debug.append("rect").attr("x", box.x).attr("y", box.y) - .attr("width", box.width).attr("height", box.height).attr("transform", transform); + const highlight = debug.append("rect").attr("x", box.x).attr("y", box.y).attr("width", box.width).attr("height", box.height).attr("transform", transform); - highlight.classed("highlighted", 1) - .transition(enter).style("outline-offset", "0px") - .transition(exit).style("outline-color", "transparent").delay(1000).remove(); + highlight.classed("highlighted", 1).transition(enter).style("outline-offset", "0px").transition(exit).style("outline-color", "transparent").delay(1000).remove(); const tr = parseTransform(transform); let x = box.x + box.width / 2; @@ -633,45 +723,239 @@ function selectIcon(initial, callback) { input.value = initial; if (!table.innerHTML) { - const icons = ["⚔️","🏹","🐴","💣","🌊","🎯","⚓","🔮","📯","⚒️","🛡️","👑","⚜️", - "☠️","🎆","🗡️","🔪","⛏️","🔥","🩸","💧","🐾","🎪","🏰","🏯","⛓️","❤️","💘","💜","📜","🔔", - "🔱","💎","🌈","🌠","✨","💥","☀️","🌙","⚡","❄️","♨️","🎲","🚨","🌉","🗻","🌋","🧱", - "⚖️","✂️","🎵","👗","🎻","🎨","🎭","⛲","💉","📖","📕","🎁","💍","⏳","🕸️","⚗️","☣️","☢️", - "🔰","🎖️","🚩","🏳️","🏴","💪","✊","👊","🤜","🤝","🙏","🧙","🧙‍♀️","💂","🤴","🧛","🧟","🧞","🧝","👼", - "👻","👺","👹","🦄","🐲","🐉","🐎","🦓","🐺","🦊","🐱","🐈","🦁","🐯","🐅","🐆","🐕","🦌","🐵","🐒","🦍", - "🦅","🕊️","🐓","🦇","🦜","🐦","🦉","🐮","🐄","🐂","🐃","🐷","🐖","🐗","🐏","🐑","🐐","🐫","🦒","🐘","🦏","🐭","🐁","🐀", - "🐹","🐰","🐇","🦔","🐸","🐊","🐢","🦎","🐍","🐳","🐬","🦈","🐠","🐙","🦑","🐌","🦋","🐜","🐝","🐞","🦗","🕷️","🦂","🦀", - "🌳","🌲","🎄","🌴","🍂","🍁","🌵","☘️","🍀","🌿","🌱","🌾","🍄","🌽","🌸","🌹","🌻", - "🍒","🍏","🍇","🍉","🍅","🍓","🥔","🥕","🥩","🍗","🍞","🍻","🍺","🍲","🍷" + const icons = [ + "⚔️", + "🏹", + "🐴", + "💣", + "🌊", + "🎯", + "⚓", + "🔮", + "📯", + "⚒️", + "🛡️", + "👑", + "⚜️", + "☠️", + "🎆", + "🗡️", + "🔪", + "⛏️", + "🔥", + "🩸", + "💧", + "🐾", + "🎪", + "🏰", + "🏯", + "⛓️", + "❤️", + "💘", + "💜", + "📜", + "🔔", + "🔱", + "💎", + "🌈", + "🌠", + "✨", + "💥", + "☀️", + "🌙", + "⚡", + "❄️", + "♨️", + "🎲", + "🚨", + "🌉", + "🗻", + "🌋", + "🧱", + "⚖️", + "✂️", + "🎵", + "👗", + "🎻", + "🎨", + "🎭", + "⛲", + "💉", + "📖", + "📕", + "🎁", + "💍", + "⏳", + "🕸️", + "⚗️", + "☣️", + "☢️", + "🔰", + "🎖️", + "🚩", + "🏳️", + "🏴", + "💪", + "✊", + "👊", + "🤜", + "🤝", + "🙏", + "🧙", + "🧙‍♀️", + "💂", + "🤴", + "🧛", + "🧟", + "🧞", + "🧝", + "👼", + "👻", + "👺", + "👹", + "🦄", + "🐲", + "🐉", + "🐎", + "🦓", + "🐺", + "🦊", + "🐱", + "🐈", + "🦁", + "🐯", + "🐅", + "🐆", + "🐕", + "🦌", + "🐵", + "🐒", + "🦍", + "🦅", + "🕊️", + "🐓", + "🦇", + "🦜", + "🐦", + "🦉", + "🐮", + "🐄", + "🐂", + "🐃", + "🐷", + "🐖", + "🐗", + "🐏", + "🐑", + "🐐", + "🐫", + "🦒", + "🐘", + "🦏", + "🐭", + "🐁", + "🐀", + "🐹", + "🐰", + "🐇", + "🦔", + "🐸", + "🐊", + "🐢", + "🦎", + "🐍", + "🐳", + "🐬", + "🦈", + "🐠", + "🐙", + "🦑", + "🐌", + "🦋", + "🐜", + "🐝", + "🐞", + "🦗", + "🕷️", + "🦂", + "🦀", + "🌳", + "🌲", + "🎄", + "🌴", + "🍂", + "🍁", + "🌵", + "☘️", + "🍀", + "🌿", + "🌱", + "🌾", + "🍄", + "🌽", + "🌸", + "🌹", + "🌻", + "🍒", + "🍏", + "🍇", + "🍉", + "🍅", + "🍓", + "🥔", + "🥕", + "🥩", + "🍗", + "🍞", + "🍻", + "🍺", + "🍲", + "🍷" ]; let row = ""; - for (let i=0; i < icons.length; i++) { - if (i%17 === 0) row = table.insertRow(i/17|0); - const cell = row.insertCell(i%17); + for (let i = 0; i < icons.length; i++) { + if (i % 17 === 0) row = table.insertRow((i / 17) | 0); + const cell = row.insertCell(i % 17); cell.innerHTML = icons[i]; } } - table.onclick = e => {if (e.target.tagName === "TD") {input.value = e.target.innerHTML; callback(input.value)}}; - table.onmouseover = e => {if (e.target.tagName === "TD") tip(`Click to select ${e.target.innerHTML} icon`)}; + table.onclick = e => { + if (e.target.tagName === "TD") { + input.value = e.target.innerHTML; + callback(input.value); + } + }; + table.onmouseover = e => { + if (e.target.tagName === "TD") tip(`Click to select ${e.target.innerHTML} icon`); + }; - $("#iconSelector").dialog({width: fitContent(), title: "Select Icon", - buttons: { - Apply: function() {callback(input.value||"⠀"); $(this).dialog("close")}, - Close: function() {callback(initial); $(this).dialog("close")}} + $("#iconSelector").dialog({ + width: fitContent(), + title: "Select Icon", + buttons: { + Apply: function () { + callback(input.value || "⠀"); + $(this).dialog("close"); + }, + Close: function () { + callback(initial); + $(this).dialog("close"); + } + } }); } // Calls the refresh functionality on all editors currently open. function refreshAllEditors() { - TIME && console.time('refreshAllEditors'); - if (document.getElementById('culturesEditorRefresh').offsetParent) culturesEditorRefresh.click(); - if (document.getElementById('biomesEditorRefresh').offsetParent) biomesEditorRefresh.click(); - if (document.getElementById('diplomacyEditorRefresh').offsetParent) diplomacyEditorRefresh.click(); - if (document.getElementById('provincesEditorRefresh').offsetParent) provincesEditorRefresh.click(); - if (document.getElementById('religionsEditorRefresh').offsetParent) religionsEditorRefresh.click(); - if (document.getElementById('statesEditorRefresh').offsetParent) statesEditorRefresh.click(); - if (document.getElementById('zonesEditorRefresh').offsetParent) zonesEditorRefresh.click(); - TIME && console.timeEnd('refreshAllEditors'); + TIME && console.time("refreshAllEditors"); + if (document.getElementById("culturesEditorRefresh").offsetParent) culturesEditorRefresh.click(); + if (document.getElementById("biomesEditorRefresh").offsetParent) biomesEditorRefresh.click(); + if (document.getElementById("diplomacyEditorRefresh").offsetParent) diplomacyEditorRefresh.click(); + if (document.getElementById("provincesEditorRefresh").offsetParent) provincesEditorRefresh.click(); + if (document.getElementById("religionsEditorRefresh").offsetParent) religionsEditorRefresh.click(); + if (document.getElementById("statesEditorRefresh").offsetParent) statesEditorRefresh.click(); + if (document.getElementById("zonesEditorRefresh").offsetParent) zonesEditorRefresh.click(); + TIME && console.timeEnd("refreshAllEditors"); } diff --git a/modules/ui/layers.js b/modules/ui/layers.js index 64a97e76..7b9d23f4 100644 --- a/modules/ui/layers.js +++ b/modules/ui/layers.js @@ -1457,10 +1457,10 @@ function drawRivers() { const {addMeandering, getRiverPath} = Rivers; lineGen.curve(d3.curveCatmullRom.alpha(0.1)); const riverPaths = pack.rivers.map(river => { - const riverMeandered = addMeandering(river.cells, river.points); + const meanderedPoints = addMeandering(river.cells, river.points); const widthFactor = river.widthFactor || 1; - const startingWidth = river.startingWidth || 0; - const path = getRiverPath(riverMeandered, widthFactor, startingWidth); + const startingWidth = river.sourceWidth || 0; + const path = getRiverPath(meanderedPoints, widthFactor, startingWidth); return ``; }); rivers.html(riverPaths.join("")); diff --git a/modules/ui/rivers-editor.js b/modules/ui/rivers-editor.js index b0159f19..cdfea1b9 100644 --- a/modules/ui/rivers-editor.js +++ b/modules/ui/rivers-editor.js @@ -1,21 +1,31 @@ "use strict"; function editRiver(id) { if (customization) return; - if (elSelected && d3.event && d3.event.target.id === elSelected.attr("id")) return; + if (elSelected && id === elSelected.attr("id")) return; closeDialogs(".stable"); if (!layerIsOn("toggleRivers")) toggleRivers(); - const node = id ? document.getElementById(id) : d3.event.target; - elSelected = d3.select(node).on("click", addInterimControlPoint); + document.getElementById("toggleCells").dataset.forced = +!layerIsOn("toggleCells"); + if (!layerIsOn("toggleCells")) toggleCells(); + + elSelected = d3.select("#" + id); + viewbox.on("touchmove mousemove", showEditorTips); - debug.append("g").attr("id", "controlPoints").attr("transform", elSelected.attr("transform")); + debug.append("g").attr("id", "controlCells"); + debug.append("g").attr("id", "controlPoints"); + updateRiverData(); - drawControlPoints(node); + + const river = getRiver(); + const {cells, points} = river; + const riverPoints = Rivers.getRiverPoints(cells, points); + drawControlPoints(riverPoints, cells); + drawRiverCells(cells); $("#riverEditor").dialog({ title: "Edit River", resizable: false, - position: {my: "center top+80", at: "top", of: node, collision: "fit"}, + position: {my: "left+40 center", at: "center", of: "svg", collision: "fit"}, close: closeRiverEditor }); @@ -28,10 +38,8 @@ function editRiver(id) { document.getElementById("riverNameCulture").addEventListener("click", generateNameCulture); document.getElementById("riverNameRandom").addEventListener("click", generateNameRandom); document.getElementById("riverMainstem").addEventListener("change", changeParent); - document.getElementById("riverSourceWidth").addEventListener("input", changeSourceWidth); document.getElementById("riverWidthFactor").addEventListener("input", changeWidthFactor); - document.getElementById("riverNew").addEventListener("click", toggleRiverCreationMode); document.getElementById("riverEditStyle").addEventListener("click", () => editStyle("rivers")); document.getElementById("riverElevationProfile").addEventListener("click", showElevationProfile); @@ -39,9 +47,8 @@ function editRiver(id) { document.getElementById("riverRemove").addEventListener("click", removeRiver); function showEditorTips() { + tip("Drag control points for minor change, to change cells add a new river", true); showMainTip(); - if (d3.event.target.parentNode.id === elSelected.attr("id")) tip("Drag to move, click to add a control point"); - else if (d3.event.target.parentNode.id === "controlPoints") tip("Drag to move, click to delete the control point"); } function getRiver() { @@ -67,88 +74,129 @@ function editRiver(id) { document.getElementById("riverBasin").value = pack.rivers.find(river => river.i === r.basin).name; document.getElementById("riverDischarge").value = r.discharge + " m³/s"; - r.length = elSelected.node().getTotalLength() / 2; - const length = rn(r.length * distanceScaleInput.value) + " " + distanceUnitInput.value; - document.getElementById("riverLength").value = length; - const width = rn(r.width * distanceScaleInput.value, 3) + " " + distanceUnitInput.value; - document.getElementById("riverWidth").value = width; - document.getElementById("riverSourceWidth").value = r.sourceWidth; document.getElementById("riverWidthFactor").value = r.widthFactor; + + updateRiverLength(r); + updateRiverWidth(r); } - function drawControlPoints(node) { - const length = getRiver().length; - const segments = Math.ceil(length / 4); - const increment = rn((length / segments) * 1e5); - for (let i = increment * segments, c = i; i >= 0; i -= increment, c += increment) { - const p1 = node.getPointAtLength(i / 1e5); - const p2 = node.getPointAtLength(c / 1e5); - addControlPoint([(p1.x + p2.x) / 2, (p1.y + p2.y) / 2]); - } + function updateRiverLength(river) { + river.length = rn(elSelected.node().getTotalLength() / 2, 2); + const length = `${river.length * distanceScaleInput.value} ${distanceUnitInput.value}`; + document.getElementById("riverLength").value = length; } - function addControlPoint(point, before = null) { - debug.select("#controlPoints").insert("circle", before).attr("cx", point[0]).attr("cy", point[1]).attr("r", 0.6).call(d3.drag().on("drag", dragControlPoint)).on("click", clickControlPoint); + function updateRiverWidth(river) { + const {addMeandering, getWidth, getOffset} = Rivers; + const {cells, discharge, widthFactor, sourceWidth} = river; + const meanderedPoints = addMeandering(cells); + river.width = getWidth(getOffset(discharge, meanderedPoints.length, widthFactor, sourceWidth)); + + const width = `${rn(river.width * distanceScaleInput.value, 3)} ${distanceUnitInput.value}`; + document.getElementById("riverWidth").value = width; } - function dragControlPoint() { - this.setAttribute("cx", d3.event.x); - this.setAttribute("cy", d3.event.y); - redrawRiver(); - } - - function redrawRiver() { - const points = []; + function drawControlPoints(points, cells) { debug .select("#controlPoints") .selectAll("circle") - .each(function () { - points.push([+this.getAttribute("cx"), +this.getAttribute("cy")]); - }); + .data(points) + .enter() + .append("circle") + .attr("cx", d => d[0]) + .attr("cy", d => d[1]) + .attr("r", 0.6) + .attr("data-cell", (d, i) => cells[i]) + .attr("data-i", (d, i) => i) + .call(d3.drag().on("start", dragControlPoint)); + } - if (points.length < 2) return; - if (points.length === 2) { - const p0 = points[0], - p1 = points[1]; - const angle = Math.atan2(p1[1] - p0[1], p1[0] - p0[0]); - const sin = Math.sin(angle), - cos = Math.cos(angle); - elSelected.attr("d", `M${p0[0]},${p0[1]} L${p1[0]},${p1[1]} l${-sin / 2},${cos / 2} Z`); - return; - } + function drawRiverCells(cells) { + debug + .select("#controlCells") + .selectAll("polygon.current") + .data(cells) + .join("polygon") + .attr("points", d => getPackPolygon(d)) + .attr("class", "current"); + } + + function drawAvailableCells(cells) { + debug + .select("#controlCells") + .selectAll("polygon.available") + .data(cells) + .join("polygon") + .attr("points", d => getPackPolygon(d)) + .attr("class", "available"); + } + + function dragControlPoint() { + const {c, r, fl, conf} = pack.cells; + const river = getRiver(); + const {cells} = river; + + const initCell = +this.dataset.cell; + const index = +this.dataset.i; + const prev = cells[index - 1]; + const next = cells[index + 1]; + const availableCells = conf[initCell] + ? [] + : c[initCell] + .filter(neib => !r[neib]) + .filter(neib => !prev || c[neib].includes(prev)) + .filter(neib => !next || c[neib].includes(next)); + + let movedToCell = null; + drawAvailableCells(availableCells); + + d3.event.on("drag", function () { + const {x, y} = d3.event; + const currentCell = findCell(x, y); + + if (initCell !== currentCell) { + if (availableCells.includes(currentCell)) movedToCell = currentCell; + else return; + } else movedToCell = null; + + this.setAttribute("cx", x); + this.setAttribute("cy", y); + this.__data__ = [rn(x, 1), rn(y, 1)]; + redrawRiver(); + }); + + d3.event.on("end", () => { + if (movedToCell) { + this.dataset.cell = movedToCell; + river.cells[index] = movedToCell; + + r[initCell] = 0; + r[movedToCell] = river.i; + const sourceFlux = fl[initCell]; + fl[initCell] = fl[movedToCell]; + fl[movedToCell] = sourceFlux; + drawRiverCells(river.cells); + } + + debug.select("#controlCells").selectAll("polygon.available").remove(); + }); + } + + function redrawRiver() { + const river = getRiver(); + river.points = debug.selectAll("#controlPoints > *").data(); + const {cells, widthFactor, sourceWidth} = river; + const meanderedPoints = Rivers.addMeandering(cells, river.points); - const widthFactor = +document.getElementById("riverWidthFactor").value; - const sourceWidth = +document.getElementById("riverSourceWidth").value; lineGen.curve(d3.curveCatmullRom.alpha(0.1)); - const [path, length, offset] = Rivers.getRiverPath(points, widthFactor, sourceWidth); + const path = Rivers.getRiverPath(meanderedPoints, widthFactor, sourceWidth); elSelected.attr("d", path); - const r = getRiver(); - if (r) { - r.width = rn(offset ** 2, 2); - r.length = length; - updateRiverData(); - } - + updateRiverLength(river); if (modules.elevation) showEPForRiver(elSelected.node()); } - function clickControlPoint() { - this.remove(); - redrawRiver(); - } - - function addInterimControlPoint() { - const point = d3.mouse(this); - const controls = document.getElementById("controlPoints").querySelectorAll("circle"); - const points = Array.from(controls).map(circle => [+circle.getAttribute("cx"), +circle.getAttribute("cy")]); - const index = getSegmentId(points, point, 2); - addControlPoint(point, ":nth-child(" + (index + 1) + ")"); - - redrawRiver(); - } - function changeName() { getRiver().name = this.value; } @@ -175,12 +223,16 @@ function editRiver(id) { } function changeSourceWidth() { - getRiver().sourceWidth = +this.value; + const river = getRiver(); + river.sourceWidth = +this.value; + updateRiverWidth(river); redrawRiver(); } function changeWidthFactor() { - getRiver().widthFactor = +this.value; + const river = getRiver(); + river.widthFactor = +this.value; + updateRiverWidth(river); redrawRiver(); } @@ -214,7 +266,7 @@ function editRiver(id) { // add control point const point = d3.mouse(this); - addControlPoint([point[0], point[1]]); + // addControlPoint([point[0], point[1]]); redrawRiver(); } @@ -222,7 +274,6 @@ function editRiver(id) { riverNew.classList.remove("pressed"); clearMainTip(); viewbox.on("click", clicked).style("cursor", "default"); - elSelected.on("click", addInterimControlPoint); if (!elSelected.attr("data-new")) return; // no need to create a new river elSelected.attr("data-new", null); @@ -257,11 +308,11 @@ function editRiver(id) { } function removeRiver() { - alertMessage.innerHTML = "Are you sure you want to remove the river? All tributaries will be auto-removed"; + alertMessage.innerHTML = "Are you sure you want to remove the river and all its tributaries"; $("#alert").dialog({ resizable: false, width: "22em", - title: "Remove river", + title: "Remove river and tributaries", buttons: { Remove: function () { $(this).dialog("close"); @@ -281,6 +332,11 @@ function editRiver(id) { exitRiverCreationMode(); elSelected.on("click", null); debug.select("#controlPoints").remove(); + debug.select("#controlCells").remove(); unselect(); + + const forced = +document.getElementById("toggleCells").dataset.forced; + document.getElementById("toggleCells").dataset.forced = 0; + if (forced && layerIsOn("toggleCells")) toggleCells(); } } diff --git a/modules/ui/rivers-overview.js b/modules/ui/rivers-overview.js index 63dd3b81..2d8c6ef4 100644 --- a/modules/ui/rivers-overview.js +++ b/modules/ui/rivers-overview.js @@ -129,7 +129,8 @@ function overviewRivers() { } function openRiverEditor() { - editRiver("river" + this.parentNode.dataset.id); + const id = "river" + this.parentNode.dataset.id; + editRiver(id); } function triggerRiverRemove() { From c5698c5a119b7a8b9173985b629a3c5c6b6e077c Mon Sep 17 00:00:00 2001 From: Azgaar Date: Sun, 25 Jul 2021 13:52:10 +0300 Subject: [PATCH 14/21] rivers editor - optimize --- index.css | 6 -- index.html | 1 - modules/ui/rivers-editor.js | 114 +++++------------------------------- 3 files changed, 15 insertions(+), 106 deletions(-) diff --git a/index.css b/index.css index 2710593f..1e188511 100644 --- a/index.css +++ b/index.css @@ -991,12 +991,6 @@ body button.noicon { stroke-width: 0.4; } -#controlCells > .available { - fill: #82ff9b40; - stroke: #82ff9b; - stroke-width: 0.4; -} - #controlCells > .occupied { fill: #ff828240; stroke: #ff8282; diff --git a/index.html b/index.html index 7e059523..8efe46c5 100644 --- a/index.html +++ b/index.html @@ -1656,7 +1656,6 @@
- diff --git a/modules/ui/rivers-editor.js b/modules/ui/rivers-editor.js index cdfea1b9..4d73e79c 100644 --- a/modules/ui/rivers-editor.js +++ b/modules/ui/rivers-editor.js @@ -10,7 +10,7 @@ function editRiver(id) { elSelected = d3.select("#" + id); - viewbox.on("touchmove mousemove", showEditorTips); + tip("Drag control points to change the river course. For major changes please create a new river instead", true); debug.append("g").attr("id", "controlCells"); debug.append("g").attr("id", "controlPoints"); @@ -20,7 +20,7 @@ function editRiver(id) { const {cells, points} = river; const riverPoints = Rivers.getRiverPoints(cells, points); drawControlPoints(riverPoints, cells); - drawRiverCells(cells); + drawCells(cells, "current"); $("#riverEditor").dialog({ title: "Edit River", @@ -40,17 +40,11 @@ function editRiver(id) { document.getElementById("riverMainstem").addEventListener("change", changeParent); document.getElementById("riverSourceWidth").addEventListener("input", changeSourceWidth); document.getElementById("riverWidthFactor").addEventListener("input", changeWidthFactor); - document.getElementById("riverNew").addEventListener("click", toggleRiverCreationMode); document.getElementById("riverEditStyle").addEventListener("click", () => editStyle("rivers")); document.getElementById("riverElevationProfile").addEventListener("click", showElevationProfile); document.getElementById("riverLegend").addEventListener("click", editRiverLegend); document.getElementById("riverRemove").addEventListener("click", removeRiver); - function showEditorTips() { - tip("Drag control points for minor change, to change cells add a new river", true); - showMainTip(); - } - function getRiver() { const riverId = +elSelected.attr("id").slice(5); const river = pack.rivers.find(r => r.i === riverId); @@ -112,52 +106,34 @@ function editRiver(id) { .call(d3.drag().on("start", dragControlPoint)); } - function drawRiverCells(cells) { + function drawCells(cells, type) { debug .select("#controlCells") - .selectAll("polygon.current") + .selectAll(`polygon.${type}`) .data(cells) .join("polygon") .attr("points", d => getPackPolygon(d)) - .attr("class", "current"); - } - - function drawAvailableCells(cells) { - debug - .select("#controlCells") - .selectAll("polygon.available") - .data(cells) - .join("polygon") - .attr("points", d => getPackPolygon(d)) - .attr("class", "available"); + .attr("class", type); } function dragControlPoint() { - const {c, r, fl, conf} = pack.cells; + const {i, r, fl} = pack.cells; const river = getRiver(); - const {cells} = river; const initCell = +this.dataset.cell; const index = +this.dataset.i; - const prev = cells[index - 1]; - const next = cells[index + 1]; - const availableCells = conf[initCell] - ? [] - : c[initCell] - .filter(neib => !r[neib]) - .filter(neib => !prev || c[neib].includes(prev)) - .filter(neib => !next || c[neib].includes(next)); + const occupiedCells = i.filter(i => r[i] && !river.cells.includes(i)); + drawCells(occupiedCells, "occupied"); let movedToCell = null; - drawAvailableCells(availableCells); d3.event.on("drag", function () { const {x, y} = d3.event; const currentCell = findCell(x, y); if (initCell !== currentCell) { - if (availableCells.includes(currentCell)) movedToCell = currentCell; - else return; + if (occupiedCells.includes(currentCell)) return; + movedToCell = currentCell; } else movedToCell = null; this.setAttribute("cx", x); @@ -170,16 +146,17 @@ function editRiver(id) { if (movedToCell) { this.dataset.cell = movedToCell; river.cells[index] = movedToCell; + drawCells(river.cells, "current"); + // swap river data r[initCell] = 0; r[movedToCell] = river.i; const sourceFlux = fl[initCell]; fl[initCell] = fl[movedToCell]; fl[movedToCell] = sourceFlux; - drawRiverCells(river.cells); } - debug.select("#controlCells").selectAll("polygon.available").remove(); + debug.select("#controlCells").selectAll("polygon.available, polygon.occupied").remove(); }); } @@ -247,66 +224,6 @@ function editRiver(id) { editNotes(id, river.name + " " + river.type); } - function toggleRiverCreationMode() { - if (document.getElementById("riverNew").classList.contains("pressed")) exitRiverCreationMode(); - else { - document.getElementById("riverNew").classList.add("pressed"); - tip("Click on map to add control points", true, "warn"); - viewbox.on("click", addPointOnClick).style("cursor", "crosshair"); - elSelected.on("click", null); - } - } - - function addPointOnClick() { - if (!elSelected.attr("data-new")) { - debug.select("#controlPoints").selectAll("circle").remove(); - const id = getNextId("river"); - elSelected = d3.select(elSelected.node().parentNode).append("path").attr("id", id).attr("data-new", 1); - } - - // add control point - const point = d3.mouse(this); - // addControlPoint([point[0], point[1]]); - redrawRiver(); - } - - function exitRiverCreationMode() { - riverNew.classList.remove("pressed"); - clearMainTip(); - viewbox.on("click", clicked).style("cursor", "default"); - - if (!elSelected.attr("data-new")) return; // no need to create a new river - elSelected.attr("data-new", null); - - // add a river - const r = +elSelected.attr("id").slice(5); - const node = elSelected.node(); - const length = node.getTotalLength() / 2; - - const cells = []; - - const segments = Math.ceil(length / 4); - const increment = rn((length / segments) * 1e5); - for (let i = increment * segments, c = i; i >= 0; i -= increment, c += increment) { - const p = node.getPointAtLength(i / 1e5); - const cell = findCell(p.x, p.y); - if (!pack.cells.r[cell]) pack.cells.r[cell] = r; - cells.push(cell); - } - - const source = cells[0]; - const mouth = last(cells); - const name = Rivers.getName(mouth); - const smallLength = pack.rivers.map(r => r.length || 0).sort((a, b) => a - b)[Math.ceil(pack.rivers.length * 0.15)]; - const type = length < smallLength ? rw({Creek: 9, River: 3, Brook: 3, Stream: 1}) : "River"; - - const discharge = rn(cells.length * 20 * Math.random()); - const widthFactor = +document.getElementById("riverWidthFactor").value; - const sourceWidth = +document.getElementById("riverSourceWidth").value; - - pack.rivers.push({i: r, source, mouth, discharge, length, width: sourceWidth, widthFactor, sourceWidth, parent: 0, name, type, basin: r}); - } - function removeRiver() { alertMessage.innerHTML = "Are you sure you want to remove the river and all its tributaries"; $("#alert").dialog({ @@ -318,7 +235,7 @@ function editRiver(id) { $(this).dialog("close"); const river = +elSelected.attr("id").slice(5); Rivers.remove(river); - elSelected.remove(); // keep if river if missed in pack.rivers + elSelected.remove(); $("#riverEditor").dialog("close"); }, Cancel: function () { @@ -329,11 +246,10 @@ function editRiver(id) { } function closeRiverEditor() { - exitRiverCreationMode(); - elSelected.on("click", null); debug.select("#controlPoints").remove(); debug.select("#controlCells").remove(); unselect(); + clearMainTip(); const forced = +document.getElementById("toggleCells").dataset.forced; document.getElementById("toggleCells").dataset.forced = 0; From 8bbfe6dd2c60ce0f5d6e7a2a832464b7cda61096 Mon Sep 17 00:00:00 2001 From: Azgaar Date: Sun, 25 Jul 2021 17:40:14 +0300 Subject: [PATCH 15/21] rivers creator dialog --- index.css | 6 ++ index.html | 12 +++- modules/ui/general.js | 85 +++++++----------------- modules/ui/rivers-creator.js | 120 ++++++++++++++++++++++++++++++++++ modules/ui/rivers-editor.js | 2 +- modules/ui/rivers-overview.js | 1 + modules/ui/tools.js | 3 +- 7 files changed, 165 insertions(+), 64 deletions(-) create mode 100644 modules/ui/rivers-creator.js diff --git a/index.css b/index.css index 1e188511..a1a24e92 100644 --- a/index.css +++ b/index.css @@ -1674,6 +1674,12 @@ rect.fillRect { text-align: center; } +div.editorLine { + margin: 0.2em 0; + padding: 0 0.2em; + font-size: 0.9em; +} + #emblemDownloadControl > input { width: 4.1em; } diff --git a/index.html b/index.html index 8efe46c5..34b159e8 100644 --- a/index.html +++ b/index.html @@ -1663,6 +1663,14 @@
+ +