For pixel sorting, a rewrite of butter.js based on Kim Asendorf's ASDFPixelSort original processing script.
Load via script tag:
<!-- Just an IIFE namespaced `butter` -->
<script src="https://thewhodidthis.github.io/butter/butter.js"></script>
Source from an import map:
{
"imports": {
"@thewhodidthis/butter": "https://thewhodidthis.github.io/butter/main.js"
}
}
Download from GitHub directly if using a package manager:
# Add to package.json
npm install thewhodidthis/butter
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 "https://thewhodidthis.github.io/butter/main.js"
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}`,
)