Genuary 7: Not Made for Images

let capture

let p

let moshed = false

​

function setup() {

  createCanvas(windowWidth, windowHeight)

  pixelDensity(1)

  capture = createCapture(VIDEO)

  capture.hide()

  p = createP()

  p.html('Click anywhere to mosh')

  p.position(10, 10)

  p.style('font-family', 'sans-serif')

  p.style('font-size', '20px')

  p.style('color', '#FFF')

  p.style('background', 'rgba(0,0,0,0.5)')

  p.style('border-radius', '8px')

  p.style('padding', '10px')

}

​

function mousePressed() {

  p.hide()

  loadPixels()

  const idx = floor(random(width))

  for (let y = 0; y < height; y++) {

    const indices = new Array(width).fill(0).map((_, i) => i)

    const channel = random([0, 1, 2])

    QuickSelect(indices, idx, (a, b) => {

      return pixels[(y*width + a)*4 + channel] < pixels[(y*width + b)*4 + channel]

    })

    const rearranged = indices.flatMap((i) => [...pixels.slice((y*width + i)*4, (y*width + i + 1)*4)])

    pixels.set(rearranged, y * width * 4)

  }

  updatePixels()

  moshed = true

}

​

function draw() {

  if (moshed) return

  background(255)

  push()

  translate(width/2, height/2)

  scale(-1, 1)

  imageMode(CENTER)

  image(capture, 0, 0, width, height, 0, 0, capture.width, capture.height, COVER)

  pop()

}