Dither

Dithering effect with multiple pattern options

Props

Default:bayer4

Dithering pattern algorithm

pattern

Dithering pattern algorithm

pixelSizenumber

Default:4

Size of dithering pixels

pixelSize

numberDefault: 4

Size of dithering pixels

thresholdnumber

Default:0.5

Luminance threshold for dithering

threshold

numberDefault: 0.5

Luminance threshold for dithering

spreadnumber

Default:1

How much of the luminance range participates in dithering (lower = more solid areas)

spread

numberDefault: 1

How much of the luminance range participates in dithering (lower = more solid areas)

colorMode"custom" | "source"

Default:custom

How colors are determined

colorMode

"custom" | "source"Default: custom

How colors are determined

colorAstring

Default:transparent

Dark color for dithering

colorA

stringDefault: transparent

Dark color for dithering

colorBstring

Default:#ffffff

Light color for dithering

colorB

stringDefault: #ffffff

Light color for dithering

Usage

<Shader>
  <Dither>
    <Circle />
  </Dither>
</Shader>

<Shader>
  <Dither>
    <Circle />
  </Dither>
</Shader>

<Shader>
  <Dither>
    <Circle />
  </Dither>
</Shader>

<Shader>
  <Dither>
    <Circle />
  </Dither>
</Shader>

import { createShader } from 'shaders/js'

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

DiffuseBlur

DotGrid

Documentation

Dither

Props

Usage