PixelSort

Pixels sort by brightness around the cursor and keep their sorted position, optionally decaying back over time

Props

radiusnumber

Default:0.4

Size of the cursor brush that sorts pixels

radius

numberDefault: 0.4

Size of the cursor brush that sorts pixels

falloffnumber

Default:1

Softness of the brush edge (0 = hard circle, 1 = very soft)

falloff

numberDefault: 1

Softness of the brush edge (0 = hard circle, 1 = very soft)

strengthnumber

Default:0.1

How fast pixels sort — runs more sorting passes per frame

strength

numberDefault: 0.1

How fast pixels sort — runs more sorting passes per frame

decaynumber

Default:0.1

How quickly sorted pixels melt back to their original position (0 = permanent)

decay

numberDefault: 0.1

How quickly sorted pixels melt back to their original position (0 = permanent)

axis"horizontal" | "vertical"

Default:vertical

Axis pixels are sorted along

axis

"horizontal" | "vertical"Default: vertical

Axis pixels are sorted along

direction"ascending" | "descending"

Default:descending

Sort order by brightness

direction

"ascending" | "descending"Default: descending

Sort order by brightness

Usage

<Shader>
  <PixelSort
    :radius="0.4"
  >
    <Circle />
  </PixelSort>
</Shader>

<Shader>
  <PixelSort
    radius={0.4}
  >
    <Circle />
  </PixelSort>
</Shader>

<Shader>
  <PixelSort
    radius={0.4}
  >
    <Circle />
  </PixelSort>
</Shader>

<Shader>
  <PixelSort
    radius={0.4}
  >
    <Circle />
  </PixelSort>
</Shader>

import { createShader } from 'shaders/js'

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

Perspective

PixelThrow