about

For pixel sorting, a rewrite of butter.js based on Kim Asendorf's ASDFPixelSort original processing script.

setup

Fetch latest from GitHub directly:

# Includes ESM and CJS versions
npm install thewhodidthis/butter

usage

The default and only export is an anonymous function that accepts a settings object and returns another function expecting ImageData type input. For example,

import bender from '@thewhodidthis/butter'

const source = document.createElement('img')
const target = document.createElement('img')
const master = document.createElement('canvas').getContext('2d')

const canvas = Object.assign(master.canvas, { width: 180, height: 180 })
const buffer = canvas.cloneNode().getContext('2d')

const filter = bender()
const upward = 0.5 * Math.PI

source.addEventListener('load', () => {
  buffer.rotate(upward)
  buffer.drawImage(source, 0, -canvas.height)

  const pixels = buffer.getImageData(0, 0, canvas.width, canvas.height)
  const result = filter(pixels)

  buffer.putImageData(result, 0, 0)

  master.translate(0, canvas.height)
  master.rotate(-upward)
  master.drawImage(buffer.canvas, 0, 0)

  const output = canvas.toDataURL('image/jpeg')

  target.setAttribute('src', output)
})

source.setAttribute('crossOrigin', 'anonymous')
source.setAttribute('src', `//source.unsplash.com/random/${canvas.width}x${canvas.height}`)

see also

• Pixel bending with butter and crook