반응-확산

Reaction Diffusion

산호나 세포처럼 보이는 무늬가 자라며, 드래그한 곳에서 새 패턴이 번집니다.

다른 이름: ReactionDiffusionGray-Scottreaction-diffusion pattern

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

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

React

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

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

Vue

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

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

Svelte

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

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

Solid

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

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: '320px' }} disableTelemetry>
      <ReactionDiffusion />
    </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: 'ReactionDiffusion',
    }
  ]
}, { disableTelemetry: true })

속성(props) · `ReactionDiffusion`

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

이름	값	기본값	범위·선택지	설명(원문)
`preset`Pattern		coral	coral · mitosis · spots · maze · worms · fingerprints · holes · solitons · bubbles · waves · flowers · custom	Named Gray-Scott regime — drives the feed & kill rates for a whole family of patterns. Choose Custom to dial feed & kill by hand
`feed`Feed	0.0545	0.0545	0.01 – 0.1 (step 0.001)	Feed rate — how fast chemical U is replenished (used when Pattern = Custom)
`kill`Kill	0.062	0.062	0.03 – 0.07 (step 0.001)	Kill rate — how fast chemical V is removed (used when Pattern = Custom)
`diffusionRatio`Diffusion Ratio	0.5	0.5	0.2 – 0.9 (step 0.01)	Ratio of the two chemicals' diffusion rates — shifts the pattern character (lower = tighter, more filament-like)
`featureSize`Feature Size	3	3	1 – 6 (step 0.1)	Size of the pattern features — lower shows finer, smaller cells; higher magnifies them into larger cells
`speed`Speed	6	6	1 – 16 (step 1)	Simulation steps per frame — higher evolves the pattern faster
`brushSize`Brush Size	0.04	0.04	0.01 – 0.3 (step 0.01)	Radius of the cursor brush that seeds new reagent as you drag
`brushStrength`Brush Strength	0.6	0.6	0 – 1 (step 0.01)	How much reagent the cursor injects while dragging
`colorA`Background	transparent	transparent	—	Background color (empty regions between cells)
`colorC`Wall Color	#38bdf8	#38bdf8	—	Accent color at the cell walls (mid pattern values)
`colorB`Cell Color	#e2f5ff	#e2f5ff	—	Color of the dense cell interiors (high pattern values)
`contrast`Contrast	0.5	0.5	0 – 1 (step 0.01)	Sharpness of the cell walls — higher gives crisper, more graphic edges
`threshold`Threshold	0.28	0.28	0.05 – 0.6 (step 0.01)	Pattern level the colors are centered on — shifts the balance of background vs. cells
`colorSpace`Color Space		oklch	linear · oklch · oklab · hsl · hsv · lch	Color space for color interpolation
`relief`Relief	0.4	0.4	0 – 1 (step 0.01)	Treats the pattern as a raised surface and shades it with a light — higher gives a more sculpted, three-dimensional look (0 for a flat, graphic look)
`lightAngle`Light Angle	135	135	0 – 360 (step 1)	Direction the surface light comes from, in degrees
`childInfluence`Influence	0.6	0.6	0 – 1 (step 0.01)	When a child layer is nested, how strongly its brightness biases the pattern — the preset sets the character, the child steers where it grows dense vs. sparse (0 ignores the child)
`childContrast`Contrast	0.5	0.5	0 – 1 (step 0.01)	Contrast applied to the child's brightness before it drives the pattern — higher pushes toward a crisp two-tone split (edges), lower keeps smooth tonal shading
`childThreshold`Threshold	0.5	0.5	0 – 1 (step 0.01)	Brightness level of the child that reads as neutral — shifts which tones grow the pattern vs. clear it
`childInvert`Invert		false	—	Flip which tones of the child grow the pattern (bright vs. dark areas)

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

산호·세포·얼룩처럼 연결된 무늬가 화면에 자라고, 드래그한 곳에서 새 무늬가 번진다. 물감이 서로 밀고 퍼지며 경계를 만드는 장면처럼 유기적인 패턴을 만든다.

`preset`은 패턴의 기본 성격을 고르며 기본값은 `coral`이다. `feed`(기본값 0.0545, 범위 0.01–0.1)와 `kill`(기본값 0.062, 범위 0.03–0.07)은 `preset`을 Custom으로 골랐을 때 직접 조절한다. `featureSize`는 무늬 크기(기본값 3, 범위 1–6), `speed`는 한 프레임에 진행하는 단계 수(기본값 6, 범위 1–16)를 바꾼다.

혼자 화면을 채우는 생성 레이어라 밑에 이미지가 필요 없다. 단순한 바탕에 두면 패턴의 경계가 선명하고, 패턴이 움직이며 드래그 입력도 받으므로 읽어야 할 텍스트와 겹치지 않게 한다.

언제 쓰나

유기적인 히어로 배경, 패턴을 직접 키우는 인터랙티브 아트, 생물·화학을 설명하는 시각 자료에 좋다. 문장이나 작은 정보가 중심인 화면에서는 피한다.

속성(props) · ReactionDiffusion

함께 보기

잉크 플로Ink Flow

보로노이Voronoi

플라즈마Plasma

대리석 무늬Marble

언제 쓰나

속성(props) · `ReactionDiffusion`