Watercolor

Painterly watercolor look — Kuwahara flattening, pigment edge darkening, paper grain and bleeding

Props

radiusnumber

Default:3

Brush size — radius of the painterly flattening

radius

numberDefault: 3

Brush size — radius of the painterly flattening

bleednumber

Default:1

Amount the pigment bleeds and wobbles past hard edges

bleed

numberDefault: 1

Amount the pigment bleeds and wobbles past hard edges

strengthnumber

Default:1

Blend between the original image (0) and the full watercolor effect (1)

strength

numberDefault: 1

Blend between the original image (0) and the full watercolor effect (1)

papernumber

Default:0.35

Strength of the paper grain the pigment settles into

paper

numberDefault: 0.35

Strength of the paper grain the pigment settles into

paperColorstring

Default:#fbf7ec

Tint of the paper grain

paperColor

stringDefault: #fbf7ec

Tint of the paper grain

Usage

<Shader>
  <Watercolor
    :radius="3"
  >
    <Circle />
  </Watercolor>
</Shader>

<Shader>
  <Watercolor
    radius={3}
  >
    <Circle />
  </Watercolor>
</Shader>

<Shader>
  <Watercolor
    radius={3}
  >
    <Circle />
  </Watercolor>
</Shader>

<Shader>
  <Watercolor
    radius={3}
  >
    <Circle />
  </Watercolor>
</Shader>

import { createShader } from 'shaders/js'

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

Water

WaveDistortion