akanealw/misode.github.io
1
0
Fork 0
mirror of https://github.com/misode/misode.github.io.git synced 2026-04-24 15:47:08 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Option to show final density visualization

Browse Source
This commit is contained in:
Misode
2022-11-10 21:33:27 +01:00
parent d07196611c
commit 0fb3a7c4b9
3 changed files with 27 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/app/components/previews/NoiseSettingsPreview.tsx
View File

@@ -1,10 +1,13 @@
import { useEffect, useMemo, useRef, useState } from 'preact/hooks'
import { useLocale, useProject } from '../../contexts/index.js'
import { useCanvas } from '../../hooks/index.js'
import { getNoiseBlock, noiseSettings } from '../../previews/index.js'
import type { ColormapType } from '../../previews/Colormap.js'
import { densityFunction, getNoiseBlock, noiseSettings } from '../../previews/index.js'
import { CachedCollections, checkVersion } from '../../services/index.js'
import { Store } from '../../Store.js'
import { randomSeed } from '../../Utils.js'
import { Btn, BtnInput, BtnMenu } from '../index.js'
import { ColormapSelector } from './ColormapSelector.jsx'
import type { PreviewProps } from './index.js'
export const NoiseSettingsPreview = ({ data, shown, version }: PreviewProps) => {
@@ -15,7 +18,9 @@ export const NoiseSettingsPreview = ({ data, shown, version }: PreviewProps) =>
const [biomeScale, setBiomeScale] = useState(0.2)
const [biomeDepth, setBiomeDepth] = useState(0.1)
const [autoScroll, setAutoScroll] = useState(false)
const [focused, setFocused] = useState<string | undefined>(undefined)
const [focused, setFocused] = useState<string[]>([])
const [layer, setLayer] = useState('terrain')
const [colormap, setColormap] = useState<ColormapType>(Store.getColormap() ?? 'viridis')
const offset = useRef(0)
const scrollInterval = useRef<number | undefined>(undefined)
const state = JSON.stringify([data, biomeScale, biomeDepth])
@@ -26,8 +31,13 @@ export const NoiseSettingsPreview = ({ data, shown, version }: PreviewProps) =>
return [size, size]
},
async draw(img) {
const options = { biome, biomeDepth, biomeScale, offset: offset.current, width: img.width, seed, version, project }
await noiseSettings(data, img, options)
const options = { biome, biomeDepth, biomeScale, offset: offset.current, width: img.width, seed, version, project, colormap, minY: data?.noise?.min_y ?? 0, height: data?.noise?.height ?? 256, hardZero: true }
if (layer === 'final_density') {
const df = data?.noise_router?.final_density ?? 0
await densityFunction(df, img, options)
} else {
await noiseSettings(data, img, options)
}
},
async onDrag(dx) {
offset.current += dx * size
@@ -37,12 +47,12 @@ export const NoiseSettingsPreview = ({ data, shown, version }: PreviewProps) =>
const worldX = Math.floor(x * size - offset.current)
const worldY = size - Math.max(1, Math.ceil(y * size)) + (data?.noise?.min_y ?? 0)
const block = getNoiseBlock(worldX, worldY)
setFocused(block ? `Y=${worldY} (${block.getName().path})` : `Y=${worldY}`)
setFocused([block ? `Y=${worldY} (${block.getName().path})` : `Y=${worldY}`])
},
onLeave() {
setFocused(undefined)
setFocused([])
},
}, [state, seed, project])
}, [version, state, seed, project, shown, biome, biomeScale, biomeDepth, layer, colormap])
useEffect(() => {
if (scrollInterval.current) {
@@ -63,13 +73,14 @@ export const NoiseSettingsPreview = ({ data, shown, version }: PreviewProps) =>
}
})()
}
}, [version, state, seed, project, shown, biome, biomeScale, biomeDepth, autoScroll])
}, [version, state, seed, project, shown, biome, biomeScale, biomeDepth, autoScroll, layer, colormap])
const allBiomes = useMemo(() => CachedCollections?.get('worldgen/biome') ?? [], [version])
return <>
<div class="controls preview-controls">
{focused && <Btn label={focused} class="no-pointer" />}
{focused.map(s => <Btn label={s} class="no-pointer" /> )}
{layer === 'final_density' && <ColormapSelector value={colormap} onChange={setColormap} />}
<BtnMenu icon="gear" tooltip={locale('terrain_settings')}>
{checkVersion(version, undefined, '1.17') ? <>
<BtnInput label={locale('preview.scale')} value={`${biomeScale}`} onChange={v => setBiomeScale(Number(v))} />
@@ -78,6 +89,7 @@ export const NoiseSettingsPreview = ({ data, shown, version }: PreviewProps) =>
<BtnInput label={locale('preview.biome')} value={biome} onChange={setBiome} dataList={allBiomes} larger />
}
<Btn icon={autoScroll ? 'square_fill' : 'square'} label={locale('preview.auto_scroll')} onClick={() => setAutoScroll(!autoScroll)} />
<Btn icon={layer === 'final_density' ? 'square_fill' : 'square'} label={locale('preview.final_density')} onClick={() => setLayer(layer === 'final_density' ? 'terrain' : 'final_density')} />
</BtnMenu>
<Btn icon="sync" tooltip={locale('generate_new_seed')}
onClick={() => setSeed(randomSeed())} />