FractalNoise

Multi-octave fractal Brownian motion noise texture with true noise evolution

Props

colorAstring

Default:#000000

First color

colorA

stringDefault: #000000

First color

colorBstring

Default:#ffffff

Second color

colorB

stringDefault: #ffffff

Second color

stopsobject

Default:null

Multi-stop gradient colors (overrides Color A / Color B when set)

stops

objectDefault: null

Multi-stop gradient colors (overrides Color A / Color B when set)

octavesnumber

Default:4

Number of noise octaves (more = more detail)

octaves

numberDefault: 4

Number of noise octaves (more = more detail)

detailnumber

Default:2

How much finer each successive octave becomes

detail

numberDefault: 2

How much finer each successive octave becomes

contrastnumber

Default:0.5

How strongly finer octaves contribute — higher values create more texture contrast

contrast

numberDefault: 0.5

How strongly finer octaves contribute — higher values create more texture contrast

speednumber

Default:0.15

Speed at which the noise pattern evolves in place

speed

numberDefault: 0.15

Speed at which the noise pattern evolves in place

anglenumber

Default:0

Rotation angle in degrees

angle

numberDefault: 0

Rotation angle in degrees

seednumber

Default:0

Random seed for pattern variation

seed

numberDefault: 0

Random seed for pattern variation

colorSpace"linear" | "oklch" | "oklab" | "hsl" | "hsv" | "lch"

Default:linear

Color space for interpolation

colorSpace

Color space for interpolation

Usage

<Shader>
  <FractalNoise />
</Shader>

<Shader>
  <FractalNoise />
</Shader>

<Shader>
  <FractalNoise />
</Shader>

<Shader>
  <FractalNoise />
</Shader>

import { createShader } from 'shaders/js'

const shader = await createShader(canvas, {
  components: [
    { type: 'FractalNoise', props: {} }
  ]
})

Form3D

Frost