diff --git a/src/app/components/panels/PreviewPanel.ts b/src/app/components/panels/PreviewPanel.ts index 86dd0b09..62f78a1e 100644 --- a/src/app/components/panels/PreviewPanel.ts +++ b/src/app/components/panels/PreviewPanel.ts @@ -23,15 +23,14 @@ export const PreviewPanel = (view: View, model: DataModel) => { } else { App.preview.set(null) } - - view.mount(el.querySelector('.panel-controls')!, ` - ${App.preview.get()?.menu(view, redraw) ?? ''} -
- ${Octicon.x} -
`, false) } + view.mount(el.querySelector('.panel-controls')!, ` + ${App.preview.get()?.menu(view, redraw) ?? ''} +
+ ${Octicon.x} +
`, false) model.addListener({ invalidated: redraw }) diff --git a/src/app/preview/NoiseSettingsPreview.ts b/src/app/preview/NoiseSettingsPreview.ts index 662bdc91..627a8e8a 100644 --- a/src/app/preview/NoiseSettingsPreview.ts +++ b/src/app/preview/NoiseSettingsPreview.ts @@ -9,6 +9,7 @@ export class NoiseSettingsPreview extends Preview { private minLimitPerlinNoise: PerlinNoise private maxLimitPerlinNoise: PerlinNoise private mainPerlinNoise: PerlinNoise + private depthNoise: PerlinNoise private width: number = 512 private chunkWidth: number = 4 private chunkHeight: number = 4 @@ -20,12 +21,13 @@ export class NoiseSettingsPreview extends Preview { constructor() { super() - this.minLimitPerlinNoise = new PerlinNoise(hexId(), -15, [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]) - this.maxLimitPerlinNoise = new PerlinNoise(hexId(), -15, [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]) - this.mainPerlinNoise = new PerlinNoise(hexId(), -7, [1, 1, 1, 1, 1, 1, 1, 1]) + this.minLimitPerlinNoise = PerlinNoise.fromRange(hexId(), -15, 0) + this.maxLimitPerlinNoise = PerlinNoise.fromRange(hexId(), -15, 0) + this.mainPerlinNoise = PerlinNoise.fromRange(hexId(), -7, 0) + this.depthNoise = PerlinNoise.fromRange(hexId(), -15, 0) } - getName() { + getName() { return 'noise-settings' } @@ -73,7 +75,7 @@ export class NoiseSettingsPreview extends Preview { })}">
- ${this.debug ? Octicon.square_fill : Octicon.square} + ${Octicon.square}
@@ -140,16 +142,18 @@ export class NoiseSettingsPreview extends Preview { private fillNoiseColumn(x: number): number[] { const data = Array(this.chunkCountY + 1) - const scaledDepth = 0.265625 * this.depth - const scaledScale = 96 / this.scale + let scaledDepth = 0.265625 * this.depth + let scaledScale = 96 / this.scale const xzScale = 684.412 * this.state.sampling.xz_scale const yScale = 684.412 * this.state.sampling.y_scale const xzFactor = xzScale / this.state.sampling.xz_factor const yFactor = yScale / this.state.sampling.y_factor + const randomDensity = this.state.random_density_offset ? this.getRandomDensity(x) : 0 + console.log(randomDensity) for (let y = 0; y <= this.chunkCountY; y += 1) { - let noise = this.sampleAndClampNoise(x, y, 0, xzScale, yScale, xzFactor, yFactor) - const yOffset = 1 - y * 2 / this.chunkCountY + let noise = this.sampleAndClampNoise(x, y, this.mainPerlinNoise.getOctaveNoise(0).zo, xzScale, yScale, xzFactor, yFactor) + const yOffset = 1 - y * 2 / this.chunkCountY + randomDensity const density = yOffset * this.state.density_factor + this.state.density_offset const falloff = (density + scaledDepth) * scaledScale noise += falloff * (falloff > 0 ? 4 : 1) @@ -174,6 +178,14 @@ export class NoiseSettingsPreview extends Preview { return data } + private getRandomDensity(x: number): number { + const noise = this.depthNoise.getValue(x * 200, 10, this.depthNoise.getOctaveNoise(0).zo, 1, 0, true) + const a = (noise < 0) ? -noise * 0.3 : noise + const b = a * 24.575625 - 2 + console.log(a, b) + return (b < 0) ? b * 0.009486607142857142 : Math.min(b, 1) * 0.006640625 + } + private sampleAndClampNoise(x: number, y: number, z: number, xzScale: number, yScale: number, xzFactor: number, yFactor: number): number { let a = 0 let b = 0 diff --git a/src/app/preview/PerlinNoise.ts b/src/app/preview/PerlinNoise.ts index c49276df..31dd09f6 100644 --- a/src/app/preview/PerlinNoise.ts +++ b/src/app/preview/PerlinNoise.ts @@ -19,6 +19,10 @@ export class PerlinNoise { this.lowestFreqValueFactor = Math.pow(2, (amplitudes.length - 1)) / (Math.pow(2, amplitudes.length) - 1) } + public static fromRange(seed: string, min: number, max: number) { + return new PerlinNoise(seed, min, Array(max - min + 1).fill(1)) + } + public getValue(x: number, y: number, z: number, a = 0, b = 0, fixY = false) { let value = 0 let inputF = this.lowestFreqInputFactor diff --git a/src/app/views/View.ts b/src/app/views/View.ts index fdc24525..bfb1ea55 100644 --- a/src/app/views/View.ts +++ b/src/app/views/View.ts @@ -55,9 +55,12 @@ export class View { export const toggleMenu = (el: Element) => { el.classList.add('active') - document.body.addEventListener('click', evt => { - if ((evt.target as Element).matches('.btn.input')) return - if ((evt.target as Element).closest('.btn')?.classList.contains('input')) return + const hideMenu = () => document.body.addEventListener('click', evt => { + if ((evt.target as Element).matches('.btn.input') || (evt.target as Element).closest('.btn')?.classList.contains('input')) { + hideMenu() + return + } el.classList.remove('active') }, { capture: true, once: true }) + hideMenu() } diff --git a/src/styles/global.css b/src/styles/global.css index db2fd9c3..905b72ce 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -284,7 +284,7 @@ nav > .toggle span { height: 100%; background-color: var(--nav-faded); display: block; - cursor: grab; + cursor: crosshair; image-rendering: optimizeSpeed; image-rendering: -moz-crisp-edges; image-rendering: -webkit-optimize-contrast;