워리 노이즈

Worley Noise

흩어진 점까지의 거리를 색으로 보여 주는 세포형 무늬입니다.

다른 이름: WorleyNoisecellular noisecell noise

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

React

// WebGPU 를 지원하는 브라우저에서만 그립니다.
import { Shader, WorleyNoise } from 'shaders/react'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: 320 }} disableTelemetry>
      <WorleyNoise />
    </Shader>
  )
}

Vue

<!-- WebGPU 를 지원하는 브라우저에서만 그립니다. -->
<script setup lang="ts">
import { Shader, WorleyNoise } from 'shaders/vue'
</script>

<template>
  <Shader style="width: 100%; height: 320px" :disable-telemetry="true">
    <WorleyNoise/>
  </Shader>
</template>

Svelte

<!-- WebGPU 를 지원하는 브라우저에서만 그립니다. -->
<script>
  import { Shader, WorleyNoise } from 'shaders/svelte'
</script>

<Shader style="width: 100%; height: 320px" disableTelemetry>
  <WorleyNoise />
</Shader>

Solid

// WebGPU 를 지원하는 브라우저에서만 그립니다.
import { Shader, WorleyNoise } from 'shaders/solid'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: '320px' }} disableTelemetry>
      <WorleyNoise />
    </Shader>
  )
}

JavaScript

// WebGPU 를 지원하는 브라우저에서만 그립니다.
// <canvas id="canvas" style="width:100%;height:320px"></canvas> 가 페이지에 있어야 한다
import { createShader } from 'shaders/js'

const shader = await createShader(document.getElementById("canvas"), {
  components: [
    {
      type: 'WorleyNoise',
    }
  ]
}, { disableTelemetry: true })

속성(props) · `WorleyNoise`

값을 바꾸면 위 데모와 코드 탭에 바로 반영됩니다. 설명은 라이브러리 레지스트리의 영어 원문(MIT)입니다.

이름	값	기본값	범위·선택지	설명(원문)
`colorA`Color A (Low)	#ffffff	#ffffff	—	Color where the noise field is low (typically near cell centers)
`colorB`Color B (High)	#000000	#000000	—	Color where the noise field is high (typically near cell boundaries)
`colorSpace`Color Space		linear	linear · oklch · oklab · hsl · hsv · lch	Color space for color interpolation
`scale`Scale	6	6	1 – 30 (step 0.5)	Number of cells across the canvas at the base octave
`mode`Mode		f1	f1 · f2 · f2MinusF1 · f1PlusF2 · f1TimesF2	Field type. F1 = distance to nearest point. F2 = distance to second-nearest. F2 − F1 emphasises cell boundaries.
`distance`Distance		euclidean	euclidean · manhattan · chebyshev	Distance metric. Euclidean = round cells. Manhattan = diamond. Chebyshev = square.
`octaves`Octaves	1	1	1 – 4 (step 1)	Number of fractal layers stacked at progressively finer scales
`lacunarity`Lacunarity	2	2	1.5 – 4 (step 0.1)	Scale multiplier between octaves (only active when Octaves > 1)
`persistence`Persistence	0.5	0.5	0 – 1 (step 0.01)	Amplitude multiplier between octaves (only active when Octaves > 1)
`jitter`Jitter	1	1	0 – 1 (step 0.01)	How much each cell's point drifts inside its cell. 0 = rigid grid (banded look), 1 = fully random.
`contrast`Contrast	1	1	0.25 – 4 (step 0.01)	Steepness of the gradient between low and high regions
`balance`Balance	0	0	-1 – 1 (step 0.01)	Shifts the gradient midpoint. Negative pulls the field toward Color A, positive toward Color B.
`seed`Seed	0	0	0 – 100 (step 1)	Random seed — shifts the cell pattern without changing its overall structure
`speed`Speed	0.5	0.5	0 – 5 (step 0.1)	Animation speed — how fast each cell's point drifts

모든 컴포넌트 공통: blendMode · opacity · visible · maskSource/maskType · boundingBox · id

비누 거품이나 조각난 암석처럼 세포 경계가 이어지는 무늬입니다. 얼룩이 매끈하게 섞이는 노이즈보다 각 셀의 모양이 분명하게 드러납니다.

`scale`은 기본값 6, 범위 1–30이며 높일수록 캔버스에 더 많은 셀이 들어갑니다. `mode`는 기본값 `f1`로 가장 가까운 점과의 거리를 사용하고, `f2MinusF1`을 고르면 셀 경계가 강조됩니다. `distance`는 기본값 `euclidean`이며 `manhattan`은 다이아몬드형, `chebyshev`는 사각형 셀을 만듭니다. `jitter`는 기본값 1, 범위 0–1로 0에 가까우면 규칙적인 배열, 1에 가까우면 셀 안의 점이 더 자유롭게 흩어집니다. `speed`는 기본값 0.5, 범위 0–5이며 셀의 점이 움직이는 속도입니다.

입력 없이 캔버스에 직접 그려지는 생성 레이어입니다. 세포 무늬를 유지하고 싶다면 `speed`를 낮추고, 경계가 복잡한 화면에서는 색 대비를 줄여 형태가 뭉치지 않게 하세요. 비슷한 셀 경계 표현인 `Voronoi`와 나란히 비교해도 좋습니다.

언제 쓰나

세포·거품·조각난 돌 같은 표면, 셀 기반 배경, 경계가 보이는 추상 무늬에 좋습니다. 구름처럼 경계가 거의 없는 색 번짐을 원할 때는 피하세요.

속성(props) · WorleyNoise

함께 보기

보로노이Voronoi

블록 노이즈Block Noise

침식 노이즈Erosion Noise

프랙털 노이즈Fractal Noise

언제 쓰나

속성(props) · `WorleyNoise`