Pixelate

Pixelation effect with adjustable cell size

Props

scalenumber

Default:50

Number of pixels along the longest edge (higher = smaller pixels)

scale

numberDefault: 50

Number of pixels along the longest edge (higher = smaller pixels)

gapnumber

Default:0

Space between pixels as a fraction of cell size (0 = no gap, 1 = fully invisible)

gap

numberDefault: 0

Space between pixels as a fraction of cell size (0 = no gap, 1 = fully invisible)

roundnessnumber

Default:0

Roundness of each pixel's corners (0 = square, 1 = circle)

roundness

numberDefault: 0

Roundness of each pixel's corners (0 = square, 1 = circle)

Usage

<Shader>
  <Pixelate>
    <Circle />
  </Pixelate>
</Shader>

<Shader>
  <Pixelate>
    <Circle />
  </Pixelate>
</Shader>

<Shader>
  <Pixelate>
    <Circle />
  </Pixelate>
</Shader>

<Shader>
  <Pixelate>
    <Circle />
  </Pixelate>
</Shader>

import { createShader } from 'shaders/js'

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

Perspective

Plasma

Documentation

Pixelate

Props

Usage