akanealw/misode.github.io
1
0
Fork 0
mirror of https://github.com/misode/misode.github.io.git synced 2026-04-24 07:37:10 +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

1
src/app/components/Octicon.tsx
View File

@@ -21,6 +21,7 @@ export const Octicon = {
file: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M3.75 1.5a.25.25 0 00-.25.25v11.5c0 .138.112.25.25.25h8.5a.25.25 0 00.25-.25V6H9.75A1.75 1.75 0 018 4.25V1.5H3.75zm5.75.56v2.19c0 .138.112.25.25.25h2.19L9.5 2.06zM2 1.75C2 .784 2.784 0 3.75 0h5.086c.464 0 .909.184 1.237.513l3.414 3.414c.329.328.513.773.513 1.237v8.086A1.75 1.75 0 0112.25 15h-8.5A1.75 1.75 0 012 13.25V1.75z"></path></svg>,
file_directory: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.75 1A1.75 1.75 0 000 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0016 13.25v-8.5A1.75 1.75 0 0014.25 3h-6.5a.25.25 0 01-.2-.1l-.9-1.2c-.33-.44-.85-.7-1.4-.7h-3.5z"></path></svg>,
file_zip: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M3.5 1.75a.25.25 0 01.25-.25h3a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h2.086a.25.25 0 01.177.073l2.914 2.914a.25.25 0 01.073.177v8.586a.25.25 0 01-.25.25h-.5a.75.75 0 000 1.5h.5A1.75 1.75 0 0014 13.25V4.664c0-.464-.184-.909-.513-1.237L10.573.513A1.75 1.75 0 009.336 0H3.75A1.75 1.75 0 002 1.75v11.5c0 .649.353 1.214.874 1.515a.75.75 0 10.752-1.298.25.25 0 01-.126-.217V1.75zM8.75 3a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zM6 5.25a.75.75 0 01.75-.75h.5a.75.75 0 010 1.5h-.5A.75.75 0 016 5.25zm2 1.5A.75.75 0 018.75 6h.5a.75.75 0 010 1.5h-.5A.75.75 0 018 6.75zm-1.25.75a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zM8 9.75A.75.75 0 018.75 9h.5a.75.75 0 010 1.5h-.5A.75.75 0 018 9.75zm-.75.75a1.75 1.75 0 00-1.75 1.75v3c0 .414.336.75.75.75h2.5a.75.75 0 00.75-.75v-3a1.75 1.75 0 00-1.75-1.75h-.5zM7 12.25a.25.25 0 01.25-.25h.5a.25.25 0 01.25.25v2.25H7v-2.25z"></path></svg>,
flame: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.998 14.5c2.832 0 5-1.98 5-4.5 0-1.463-.68-2.19-1.879-3.383l-.036-.037c-1.013-1.008-2.3-2.29-2.834-4.434-.322.256-.63.579-.864.953-.432.696-.621 1.58-.046 2.73.473.947.67 2.284-.278 3.232-.61.61-1.545.84-2.403.633a2.788 2.788 0 01-1.436-.874A3.21 3.21 0 003 10c0 2.53 2.164 4.5 4.998 4.5zM9.533.753C9.496.34 9.16.009 8.77.146 7.035.75 4.34 3.187 5.997 6.5c.344.689.285 1.218.003 1.5-.419.419-1.54.487-2.04-.832-.173-.454-.659-.762-1.035-.454C2.036 7.44 1.5 8.702 1.5 10c0 3.512 2.998 6 6.498 6s6.5-2.5 6.5-6c0-2.137-1.128-3.26-2.312-4.438-1.19-1.184-2.436-2.425-2.653-4.81z"></path></svg>,
gear: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.429 1.525a6.593 6.593 0 011.142 0c.036.003.108.036.137.146l.289 1.105c.147.56.55.967.997 1.189.174.086.341.183.501.29.417.278.97.423 1.53.27l1.102-.303c.11-.03.175.016.195.046.219.31.41.641.573.989.014.031.022.11-.059.19l-.815.806c-.411.406-.562.957-.53 1.456a4.588 4.588 0 010 .582c-.032.499.119 1.05.53 1.456l.815.806c.08.08.073.159.059.19a6.494 6.494 0 01-.573.99c-.02.029-.086.074-.195.045l-1.103-.303c-.559-.153-1.112-.008-1.529.27-.16.107-.327.204-.5.29-.449.222-.851.628-.998 1.189l-.289 1.105c-.029.11-.101.143-.137.146a6.613 6.613 0 01-1.142 0c-.036-.003-.108-.037-.137-.146l-.289-1.105c-.147-.56-.55-.967-.997-1.189a4.502 4.502 0 01-.501-.29c-.417-.278-.97-.423-1.53-.27l-1.102.303c-.11.03-.175-.016-.195-.046a6.492 6.492 0 01-.573-.989c-.014-.031-.022-.11.059-.19l.815-.806c.411-.406.562-.957.53-1.456a4.587 4.587 0 010-.582c.032-.499-.119-1.05-.53-1.456l-.815-.806c-.08-.08-.073-.159-.059-.19a6.44 6.44 0 01.573-.99c.02-.029.086-.075.195-.045l1.103.303c.559.153 1.112.008 1.529-.27.16-.107.327-.204.5-.29.449-.222.851-.628.998-1.189l.289-1.105c.029-.11.101-.143.137-.146zM8 0c-.236 0-.47.01-.701.03-.743.065-1.29.615-1.458 1.261l-.29 1.106c-.017.066-.078.158-.211.224a5.994 5.994 0 00-.668.386c-.123.082-.233.09-.3.071L3.27 2.776c-.644-.177-1.392.02-1.82.63a7.977 7.977 0 00-.704 1.217c-.315.675-.111 1.422.363 1.891l.815.806c.05.048.098.147.088.294a6.084 6.084 0 000 .772c.01.147-.038.246-.088.294l-.815.806c-.474.469-.678 1.216-.363 1.891.2.428.436.835.704 1.218.428.609 1.176.806 1.82.63l1.103-.303c.066-.019.176-.011.299.071.213.143.436.272.668.386.133.066.194.158.212.224l.289 1.106c.169.646.715 1.196 1.458 1.26a8.094 8.094 0 001.402 0c.743-.064 1.29-.614 1.458-1.26l.29-1.106c.017-.066.078-.158.211-.224a5.98 5.98 0 00.668-.386c.123-.082.233-.09.3-.071l1.102.302c.644.177 1.392-.02 1.82-.63.268-.382.505-.789.704-1.217.315-.675.111-1.422-.364-1.891l-.814-.806c-.05-.048-.098-.147-.088-.294a6.1 6.1 0 000-.772c-.01-.147.039-.246.088-.294l.814-.806c.475-.469.679-1.216.364-1.891a7.992 7.992 0 00-.704-1.218c-.428-.609-1.176-.806-1.82-.63l-1.103.303c-.066.019-.176.011-.299-.071a5.991 5.991 0 00-.668-.386c-.133-.066-.194-.158-.212-.224L10.16 1.29C9.99.645 9.444.095 8.701.031A8.094 8.094 0 008 0zm1.5 8a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM11 8a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>,
git_commit: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z"></path></svg>,
globe: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.543 7.25h2.733c.144-2.074.866-3.756 1.58-4.948.12-.197.237-.381.353-.552a6.506 6.506 0 00-4.666 5.5zm2.733 1.5H1.543a6.506 6.506 0 004.666 5.5 11.13 11.13 0 01-.352-.552c-.715-1.192-1.437-2.874-1.581-4.948zm1.504 0h4.44a9.637 9.637 0 01-1.363 4.177c-.306.51-.612.919-.857 1.215a9.978 9.978 0 01-.857-1.215A9.637 9.637 0 015.78 8.75zm4.44-1.5H5.78a9.637 9.637 0 011.363-4.177c.306-.51.612-.919.857-1.215.245.296.55.705.857 1.215A9.638 9.638 0 0110.22 7.25zm1.504 1.5c-.144 2.074-.866 3.756-1.58 4.948-.12.197-.237.381-.353.552a6.506 6.506 0 004.666-5.5h-2.733zm2.733-1.5h-2.733c-.144-2.074-.866-3.756-1.58-4.948a11.738 11.738 0 00-.353-.552 6.506 6.506 0 014.666 5.5zM8 0a8 8 0 100 16A8 8 0 008 0z"></path></svg>,

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')}