Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 

readme.md

about

Helps create Web Worker friendly pixel bending psychedelia.

setup

Fetch latest from GitHub directly:

# Includes ESM and CJS versions
npm install thewhodidthis/wobble

usage

Link up to webcam feed for example,

import bender from '@thewhodidthis/wobble'

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

const { width: w, height: h } = canvas

const camera = document.createElement('video')

if (navigator.mediaDevices) {
  navigator.mediaDevices.getUserMedia({
    video: { width: w },
    audio: false
  }).then((stream) => {
    camera.srcObject = stream
  }).catch(console.log)
}

const filter = bender(50)
const buffer = canvas.cloneNode().getContext('2d')

const repeat = () => {
  buffer.drawImage(camera, 0, 0)

  const source = buffer.getImageData(0, 0, w, h)
  const result = filter(source)

  master.putImageData(result, 0, 0)

  window.requestAnimationFrame(repeat)
}

document.body.appendChild(canvas)

document.addEventListener('click', (e) => {
  e.preventDefault()

  if (camera.paused) {
    camera.play().then(() => {
      window.requestAnimationFrame(repeat)
    }).catch(console.log)
  } else {
    camera.pause()
  }
})

see also