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

Add configurable color maps for noise and density preview

Browse Source
This commit is contained in:
Misode
2022-11-10 03:42:55 +01:00
parent e89cdfb0ad
commit 3dcb1d2352
8 changed files with 103 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/app/components/previews/ColormapSelector.tsx Normal file
View File

@@ -0,0 +1,14 @@
import type { ColormapType } from '../../previews/Colormap.js'
import { ColormapTypes } from '../../previews/Colormap.js'
import { Btn } from '../Btn.jsx'
import { BtnMenu } from '../BtnMenu.jsx'
interface Props {
value: ColormapType,
onChange: (value: ColormapType) => void,
}
export function ColormapSelector({ value, onChange }: Props) {
return <BtnMenu icon="flame">
{ColormapTypes.map(type => <Btn label={type} onClick={() => onChange(type)} active={value === type} />)}
</BtnMenu>
}

12
src/app/components/previews/DensityFunctionPreview.tsx
View File

@@ -1,9 +1,11 @@
import { useEffect, useRef, useState } from 'preact/hooks'
import { useLocale, useProject } from '../../contexts/index.js'
import { useCanvas } from '../../hooks/index.js'
import type { ColormapType } from '../../previews/Colormap.js'
import { densityFunction, densityPoint } from '../../previews/index.js'
import { randomSeed } from '../../Utils.js'
import { Btn, BtnMenu } from '../index.js'
import { ColormapSelector } from './ColormapSelector.jsx'
import type { PreviewProps } from './index.js'
export const DensityFunctionPreview = ({ data, shown, version }: PreviewProps) => {
@@ -14,6 +16,7 @@ export const DensityFunctionPreview = ({ data, shown, version }: PreviewProps) =
const [height] = useState(256)
const [autoScroll, setAutoScroll] = useState(false)
const [focused, setFocused] = useState<string[]>([])
const [colormap, setColormap] = useState<ColormapType>('viridis')
const offset = useRef(0)
const scrollInterval = useRef<number | undefined>(undefined)
const state = JSON.stringify([data])
@@ -24,7 +27,7 @@ export const DensityFunctionPreview = ({ data, shown, version }: PreviewProps) =
return [size, size]
},
async draw(img) {
const options = { offset: offset.current, width: img.width, seed, version, project, minY, height }
const options = { offset: offset.current, width: img.width, seed, version, project, minY, height, colormap }
await densityFunction(data, img, options)
},
async onDrag(dx) {
@@ -34,14 +37,14 @@ export const DensityFunctionPreview = ({ data, shown, version }: PreviewProps) =
async onHover(x, y) {
const worldX = Math.floor(x * size)
const worldY = Math.floor(y * (height - minY))
const options = { offset: offset.current, width: size, seed, version, project, minY, height }
const options = { offset: offset.current, width: size, seed, version, project, minY, height, colormap }
const density = await densityPoint(data, worldX, worldY, options)
setFocused([density.toPrecision(3), `X=${Math.floor(worldX - offset.current)} Y=${(height - minY) - worldY}`])
},
onLeave() {
setFocused([])
},
}, [version, state, seed, minY, height, project])
}, [version, state, seed, minY, height, colormap, project])
useEffect(() => {
if (scrollInterval.current) {
@@ -56,11 +59,12 @@ export const DensityFunctionPreview = ({ data, shown, version }: PreviewProps) =
}, 100) as any
}
}
}, [version, state, seed, minY, height, project, shown, autoScroll])
}, [version, state, seed, minY, height, colormap, project, shown, autoScroll])
return <>
<div class="controls preview-controls">
{focused.map(s => <Btn label={s} class="no-pointer" /> )}
<ColormapSelector value={colormap} onChange={setColormap} />
<BtnMenu icon="gear" tooltip={locale('terrain_settings')}>
<Btn icon={autoScroll ? 'square_fill' : 'square'} label={locale('preview.auto_scroll')} onClick={() => setAutoScroll(!autoScroll)} />
</BtnMenu>

12
src/app/components/previews/NoisePreview.tsx
View File

@@ -1,9 +1,11 @@
import { useEffect, useRef, useState } from 'preact/hooks'
import { useLocale } from '../../contexts/index.js'
import { useCanvas } from '../../hooks/index.js'
import type { ColormapType } from '../../previews/Colormap.js'
import { normalNoise, normalNoisePoint } from '../../previews/index.js'
import { randomSeed } from '../../Utils.js'
import { Btn } from '../index.js'
import { ColormapSelector } from './ColormapSelector.jsx'
import type { PreviewProps } from './index.js'
export const NoisePreview = ({ data, shown, version }: PreviewProps) => {
@@ -11,6 +13,7 @@ export const NoisePreview = ({ data, shown, version }: PreviewProps) => {
const [seed, setSeed] = useState(randomSeed())
const [scale, setScale] = useState(2)
const [focused, setFocused] = useState<string[]>([])
const [colormap, setColormap] = useState<ColormapType>('viridis')
const offset = useRef<[number, number]>([0, 0])
const state = JSON.stringify([data])
@@ -19,7 +22,7 @@ export const NoisePreview = ({ data, shown, version }: PreviewProps) => {
return [256, 256]
},
async draw(img) {
const options = { offset: offset.current, scale, seed, version }
const options = { offset: offset.current, scale, seed, version, colormap }
normalNoise(data, img, options)
},
async onDrag(dx, dy) {
@@ -30,7 +33,7 @@ export const NoisePreview = ({ data, shown, version }: PreviewProps) => {
onHover(x, y) {
const x2 = Math.floor(x * 256)
const y2 = Math.floor(y * 256)
const options = { offset: offset.current, scale, seed, version }
const options = { offset: offset.current, scale, seed, version, colormap }
const value = normalNoisePoint(data, x2, y2, options)
const ox = -options.offset[0] - 100
@@ -42,13 +45,13 @@ export const NoisePreview = ({ data, shown, version }: PreviewProps) => {
onLeave() {
setFocused([])
},
}, [version, state, scale, seed])
}, [version, state, scale, seed, colormap])
useEffect(() => {
if (shown) {
redraw()
}
}, [version, state, scale, seed, shown])
}, [version, state, scale, seed, colormap, shown])
const changeScale = (newScale: number) => {
offset.current[0] = offset.current[0] * scale / newScale
@@ -59,6 +62,7 @@ export const NoisePreview = ({ data, shown, version }: PreviewProps) => {
return <>
<div class="controls preview-controls">
{focused.map(s => <Btn label={s} class="no-pointer" /> )}
<ColormapSelector value={colormap} onChange={setColormap} />
<Btn icon="dash" tooltip={locale('zoom_out')}
onClick={() => changeScale(scale * 1.5)} />
<Btn icon="plus" tooltip={locale('zoom_in')}