PixelThrow

Throws pixels along the cursor's path like a fluid — brighter (or redder/greener/bluer) pixels are flung farther, then settle back with friction

Props

throwKey"luminance" | "darkness" | "red" | "green" | "blue"

Default:luminance

Which pixel value decides how far a pixel is thrown

throwKey

"luminance" | "darkness" | "red" | "green" | "blue"Default: luminance

Which pixel value decides how far a pixel is thrown

strengthnumber

Default:0.25

Maximum distance pixels can be thrown

strength

numberDefault: 0.25

Maximum distance pixels can be thrown

keyInfluencenumber

Default:0.8

How much the chosen value modulates throw distance (0 = all pixels thrown equally, 1 = only high-value pixels move)

keyInfluence

numberDefault: 0.8

How much the chosen value modulates throw distance (0 = all pixels thrown equally, 1 = only high-value pixels move)

radiusnumber

Default:0.2

Size of the cursor's throw brush

radius

numberDefault: 0.2

Size of the cursor's throw brush

frictionnumber

Default:0.3

How quickly thrown pixels settle back to their origin (0 = float almost forever, 1 = snap back fast)

friction

numberDefault: 0.3

How quickly thrown pixels settle back to their origin (0 = float almost forever, 1 = snap back fast)

momentumnumber

Default:0.5

How much the thrown flow keeps drifting and swirling after the cursor passes (fluidity)

momentum

numberDefault: 0.5

How much the thrown flow keeps drifting and swirling after the cursor passes (fluidity)

edges"stretch" | "transparent" | "mirror" | "wrap"

Default:stretch

How to handle pixels thrown beyond the canvas edges

edges

"stretch" | "transparent" | "mirror" | "wrap"Default: stretch

How to handle pixels thrown beyond the canvas edges

Usage

<Shader>
  <PixelThrow
    :radius="0.2"
  >
    <Circle />
  </PixelThrow>
</Shader>

<Shader>
  <PixelThrow
    radius={0.2}
  >
    <Circle />
  </PixelThrow>
</Shader>

<Shader>
  <PixelThrow
    radius={0.2}
  >
    <Circle />
  </PixelThrow>
</Shader>

<Shader>
  <PixelThrow
    radius={0.2}
  >
    <Circle />
  </PixelThrow>
</Shader>

import { createShader } from 'shaders/js'

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

PixelSort

Pixelate