Solarize

Inverts tones above a luminance threshold — a classic darkroom and photo effect

Props

threshold
Luminance level above which colors are inverted. Pixels brighter than this threshold get flipped.
Type
number
Default
0.5
strength
Blend between original (0) and fully solarized (1)
Type
number
Default
1

Usage

<Shader>
  <Solarize>
    <Circle />
  </Solarize>
</Shader>

<Shader>
  <Solarize>
    <Circle />
  </Solarize>
</Shader>

<Shader>
  <Solarize>
    <Circle />
  </Solarize>
</Shader>

<Shader>
  <Solarize>
    <Circle />
  </Solarize>
</Shader>

import { createShader } from 'shaders/js'

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