Prism

A beam of light that fans out and splits into a slowly-rotating rainbow past a controllable point. Transparent background — composite over a dark layer.

Props

position{x: number, y: number}

Default:{"x":0.18,"y":0.18}

Where the beam originates

position

{x: number, y: number}Default: {"x":0.18,"y":0.18}

Where the beam originates

beamWidthnumber

Default:0.04

Thickness of the white beam

beamWidth

numberDefault: 0.04

Thickness of the white beam

intensitynumber

Default:1.6

Brightness (above 1 blows the core to white)

intensity

numberDefault: 1.6

Brightness (above 1 blows the core to white)

beamColorstring

Default:#ffffff

Colour of the beam before it splits

beamColor

stringDefault: #ffffff

Colour of the beam before it splits

startFalloffnumber

Default:0.15

How softly the beam fades in at its source

startFalloff

numberDefault: 0.15

How softly the beam fades in at its source

endFalloffnumber

Default:0.6

How quickly the rainbow fades out with distance

endFalloff

numberDefault: 0.6

How quickly the rainbow fades out with distance

splitPosition{x: number, y: number}

Default:{"x":0.5,"y":0.42}

Where the beam starts to fan out and split (projected onto the beam axis)

splitPosition

{x: number, y: number}Default: {"x":0.5,"y":0.42}

Where the beam starts to fan out and split (projected onto the beam axis)

spreadnumber

Default:0.7

How widely the rainbow diffuses as it travels past the split point

spread

numberDefault: 0.7

How widely the rainbow diffuses as it travels past the split point

softnessnumber

Default:0.12

How quickly the white beam transitions into the rainbow

softness

numberDefault: 0.12

How quickly the white beam transitions into the rainbow

saturationnumber

Default:0.95

Rainbow saturation — 0 = white, 1 = full colour

saturation

numberDefault: 0.95

Rainbow saturation — 0 = white, 1 = full colour

speednumber

Default:0.1

Speed the hue slowly rotates through the rainbow (0 = static)

speed

numberDefault: 0.1

Speed the hue slowly rotates through the rainbow (0 = static)

Usage

<Shader>
  <Prism
    :intensity="1.6"
  />
</Shader>

<Shader>
  <Prism
    intensity={1.6}
  />
</Shader>

<Shader>
  <Prism
    intensity={1.6}
  />
</Shader>

<Shader>
  <Prism
    intensity={1.6}
  />
</Shader>

import { createShader } from 'shaders/js'

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

Posterize

ProgressiveBlur