Skip to content

Commit a978a1b

Browse files
jacobsjojacobsjo
committed
Added Isolines
1 parent 104dae5 commit a978a1b

9 files changed

+200
-5
lines changed

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
"deepslate": "^0.9.0-beta.1",
3030
"leaflet": "^1.7.1",
3131
"lodash": "^4.17.21",
32+
"marchingsquares": "^1.3.3",
3233
"tilelayer-canvas": "^1.1.3",
3334
"uniqid": "^5.4.0",
3435
"uuid": "^3.4.0"

‎public/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@
6464
<div class="content">
6565
<div id="visualization">
6666
<div id="visualization_map"></div>
67-
67+
<img id="toggleIsolinesButton" class="enabled" src="isolines.svg" />
6868
</div>
6969
</div>
7070
</div>

‎public/isolines.svg

+59
Loading

‎public/style.css

+20
Original file line numberDiff line numberDiff line change
@@ -500,6 +500,7 @@ body {
500500
width: 100%;
501501
height: 100%;
502502
background-color: rgb(43, 42, 42);
503+
position: relative;
503504
}
504505

505506
#visualization_map {
@@ -512,4 +513,23 @@ body {
512513
#visualization_map canvas.leaflet-tile{
513514
image-rendering: crisp-edges;
514515
image-rendering: pixelated;
516+
}
517+
518+
#visualization #toggleIsolinesButton{
519+
position: absolute;
520+
top: 62pt;
521+
left: 9;
522+
width: 20pt;
523+
background-color: #333333;
524+
padding: 3pt;
525+
border-radius: 5pt;
526+
z-index: 400;
527+
}
528+
529+
#visualization #toggleIsolinesButton.enabled{
530+
background-color: #7e633d;
531+
}
532+
533+
#visualization #toggleIsolinesButton:hover{
534+
background-color: #666666;
515535
}

‎src/main/UI/VisualizationManager.ts

+27-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
import { lerp2 } from "deepslate";
1+
import { lerp2, TerrainShaper } from "deepslate";
22
import * as L from "leaflet";
33
import { BiomeBuilder } from "../BuilderData/BiomeBuilder";
44
import { LayoutElementUnassigned } from "../BuilderData/LayoutElementUnassigned";
55
import { BiomeLayer } from "../Visualization/BiomeLayer";
6+
import { ContourLayer } from "../Visualization/ContourLayer";
67
import { GridMultiNoise } from "../Visualization/GridMultiNoise";
78
import { GridMultiNoiseIndicesManager } from "../Visualization/GridMultiNoiseIndicesManager";
89
import { MenuManager } from "./MenuManager";
@@ -83,9 +84,12 @@ export class VisualizationManger{
8384
private map: L.Map
8485
private biomeSource: GridMultiNoise
8586
private biomeLayer: BiomeLayer
87+
private contourLayer: ContourLayer
88+
8689
private indicesManger: GridMultiNoiseIndicesManager
8790

8891
private closeContainer: HTMLElement
92+
private toggleIsolinesButton: HTMLElement
8993

9094
constructor(builder: BiomeBuilder){
9195
this.builder = builder
@@ -95,6 +99,7 @@ export class VisualizationManger{
9599
this.biomeLayer.redraw()
96100
}
97101

102+
98103
this.biomeSource = new GridMultiNoise(BigInt("0"), builder, noises.temperature, noises.humidity, noises.continentalness, noises.erosion, noises.weirdness, noises.shift)
99104

100105
this.map = L.map('visualization_map')
@@ -107,6 +112,22 @@ export class VisualizationManger{
107112
this.biomeLayer = new BiomeLayer(this.builder, this.indicesManger);
108113
this.biomeLayer.addTo(this.map)
109114

115+
this.contourLayer = new ContourLayer(this.builder, this.indicesManger);
116+
this.contourLayer.addTo(this.map)
117+
118+
this.toggleIsolinesButton = document.getElementById('toggleIsolinesButton')
119+
120+
this.toggleIsolinesButton.onclick = (evt: MouseEvent) => {
121+
if (this.map.hasLayer(this.contourLayer)){
122+
this.map.removeLayer(this.contourLayer)
123+
this.toggleIsolinesButton.classList.remove("enabled")
124+
} else {
125+
this.map.addLayer(this.contourLayer)
126+
this.toggleIsolinesButton.classList.add("enabled")
127+
}
128+
}
129+
130+
110131
const tooltip = document.getElementById("visualizationTooltip")
111132
const tooltip_position = tooltip.getElementsByClassName("position")[0] as HTMLElement
112133
const tooltip_slice = tooltip.getElementsByClassName("slice")[0] as HTMLElement
@@ -143,7 +164,8 @@ export class VisualizationManger{
143164
tooltip_mode.src = "mode_" + lookup?.mode + ".png"
144165

145166
const pos = this.getPos(evt.latlng);
146-
tooltip_position.innerHTML = "X: " + pos.x.toFixed(0) + ", Z: " + pos.y.toFixed(0)
167+
const y = (TerrainShaper.offset(TerrainShaper.point(idxs.values.continentalness, idxs.values.erosion, idxs.values.weirdness)) * 128 + 64).toFixed(0)
168+
tooltip_position.innerHTML = "X: " + pos.x.toFixed(0) + ", Z: " + pos.y.toFixed(0) + " -> Y: " + y
147169
tooltip_slice.innerHTML = "&crarr; " + lookup?.slice?.name + " (Slice)"
148170
tooltip_layout.innerHTML = "&crarr; " + lookup?.layout?.name + " (Layout)"
149171
tooltip_biome.innerHTML = lookup?.biome?.name
@@ -198,7 +220,9 @@ export class VisualizationManger{
198220
}
199221

200222
async refresh(){
201-
if (!this.closeContainer.classList.contains("closed"))
223+
if (!this.closeContainer.classList.contains("closed")){
202224
this.biomeLayer.redraw()
225+
//this.contourLayer.redraw()
226+
}
203227
}
204228
}

‎src/main/Visualization/ContourLayer.ts

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import { BiomeSource, TerrainShaper } from "deepslate";
2+
import * as L from "leaflet";
3+
import { Biome } from "../BuilderData/Biome";
4+
import { BiomeBuilder, MultiNoiseIndexes } from "../BuilderData/BiomeBuilder";
5+
import { GridMultiNoise } from "./GridMultiNoise";
6+
import { GridMultiNoiseIndicesManager } from "./GridMultiNoiseIndicesManager";
7+
import * as msq from "marchingsquares";
8+
9+
10+
export class ContourLayer extends L.GridLayer {
11+
private builder: BiomeBuilder
12+
private gridIndicesManager: GridMultiNoiseIndicesManager
13+
14+
constructor(builder: BiomeBuilder, gridIndicesManager: GridMultiNoiseIndicesManager) {
15+
super()
16+
this.builder = builder
17+
this.gridIndicesManager = gridIndicesManager
18+
}
19+
20+
protected createTile(coords: L.Coords, done: L.DoneCallback): HTMLElement {
21+
const tile = L.DomUtil.create('canvas', 'leaflet-tile')
22+
23+
const render = async () => {
24+
var ctx = tile.getContext('2d')
25+
var size = this.getTileSize()
26+
tile.width = size.x
27+
tile.height = size.y
28+
29+
let nv = this.gridIndicesManager.get(coords)
30+
if (nv instanceof Promise) {
31+
nv = await nv
32+
} else {
33+
tile.classList.add('leaflet-tile-loaded')
34+
}
35+
36+
const offsets = nv.values.map(row => row.map(values => TerrainShaper.offset(TerrainShaper.point(values.continentalness, values.erosion, values.weirdness))))
37+
const isoValueCount = 14
38+
const isoValueStep = 0.15
39+
const isoValues = Array(isoValueCount).fill(0).map((_, idx) => (idx - (isoValueCount / 2)) * isoValueStep)
40+
const isoLines: [number, number][][][] = msq.isoLines(offsets, isoValues, { noFrame: true, polygons: false })
41+
ctx.strokeStyle = "black"
42+
ctx.lineWidth = 1
43+
isoLines.forEach(isoLine => {
44+
isoLine.forEach(line => {
45+
ctx.beginPath()
46+
for (let pid = 0 ; pid < line.length ; pid++){
47+
const point = line[pid]
48+
49+
let draw = true
50+
51+
const maxPos = size.x / this.gridIndicesManager.resolution
52+
if (pid > 0){
53+
const last_point = line[pid-1]
54+
if (point[0] === 0 && last_point[0] === 0) draw = false
55+
if (point[1] === 0 && last_point[1] === 0) draw = false
56+
if (point[0] === maxPos && last_point[0] === maxPos) draw = false
57+
if (point[1] === maxPos && last_point[1] === maxPos) draw = false
58+
}
59+
60+
if (draw){
61+
ctx.lineTo(point[1] * this.gridIndicesManager.resolution, point[0] * this.gridIndicesManager.resolution)
62+
} else {
63+
ctx.moveTo(point[1] * this.gridIndicesManager.resolution, point[0] * this.gridIndicesManager.resolution)
64+
}
65+
}
66+
ctx.stroke()
67+
});
68+
});
69+
70+
done(null, tile)
71+
}
72+
73+
render()
74+
return tile
75+
}
76+
}

‎src/main/Visualization/GridMultiNoiseIndicesManager.ts

+12-1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { GridMultiNoise } from "./GridMultiNoise";
66

77

88
export class GridMultiNoiseIndicesManager {
9+
private promises_cache: Map<string, Promise<{idx: MultiNoiseIndexes[][], values: MultiNoiseParameters[][]}>>
910
private noisevalues_cache: { key: string, values: MultiNoiseParameters[][] }[]
1011
private indices_cache: { key: string, values: MultiNoiseIndexes[][] }[]
1112
readonly resolution = 6
@@ -17,6 +18,7 @@ export class GridMultiNoiseIndicesManager {
1718
constructor(builder: BiomeBuilder, multiNoise: GridMultiNoise) {
1819
this.indices_cache = []
1920
this.noisevalues_cache = []
21+
this.promises_cache = new Map<string, Promise<{idx: MultiNoiseIndexes[][], values: MultiNoiseParameters[][]}>>()
2022
this.size = new L.Point(512, 512, false)
2123
this.midPoint = new L.Point(Math.pow(2, 21), Math.pow(2, 21), false)
2224
this.builder = builder
@@ -31,7 +33,11 @@ export class GridMultiNoiseIndicesManager {
3133

3234
if (idx === -1) {
3335
if (nv_idx === -1) {
34-
return this.multiNoise.getNoiseValueArray(nwpoint.x, nwpoint.y, this.size.x / this.resolution, this.size.x / Math.pow(2, coords.z - 5) * this.resolution).then(nv => {
36+
if (this.promises_cache.has(this._tileCoordsToKey(coords))){
37+
return this.promises_cache.get(this._tileCoordsToKey(coords))
38+
}
39+
40+
const promise = this.multiNoise.getNoiseValueArray(nwpoint.x, nwpoint.y, this.size.x / this.resolution, this.size.x / Math.pow(2, coords.z - 5) * this.resolution).then(nv => {
3541
this.noisevalues_cache.push({ key: this._tileCoordsToKey(coords), values: nv })
3642
if (this.noisevalues_cache.length > 20)
3743
this.noisevalues_cache.unshift()
@@ -40,8 +46,13 @@ export class GridMultiNoiseIndicesManager {
4046
this.indices_cache.push({ key: this._tileCoordsToKey(coords), values: indices })
4147
if (this.indices_cache.length > 20)
4248
this.indices_cache.unshift()
49+
50+
this.promises_cache.delete(this._tileCoordsToKey(coords))
4351
return {idx: indices, values: nv}
4452
})
53+
this.promises_cache.set(this._tileCoordsToKey(coords), promise)
54+
return promise
55+
4556
} else {
4657
const nvcacheEntry = this.noisevalues_cache[nv_idx]
4758
this.noisevalues_cache.splice(nv_idx, 1)

‎src/main/tsconfig.json

+3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
{
22
"extends": "../generic-tsconfig.json",
3+
"include": [
4+
"../../typings-custom/**/*.ts"
5+
],
36
"references": [
47
{"path": "../multinoiseworker/"}
58
],

‎typings-custom/marchingsquares.d.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
declare module 'marchingsquares';

0 commit comments

Comments
 (0)