W9-Pixel Project

Animation, Compression, Expansion, Duplication, Distortion.

Charlin and I both are interested in creating a project that involves body movement. So we knew we wanted to create a piece utilizing camera capture. Our original idea was to change every pixel's color/hue base on the brightness. So we could have a fake thermographic camera effect. All we had to do was to map the brightness to a value between 0 and 360.

mappedHue = map(b, 0, 100, 0, 360);

We did it quickly, and it looks fun, except the speed was really slow.

let cam;
let vScale = 25;

function setup() {
  createCanvas(windowWidth, windowHeight);
  cam = createCapture(VIDEO);
  cam.size(width / vScale, height / vScale);
  cam.hide();
  colorMode(HSB, 360, 100, 100);
}

function draw() {
  cam.loadPixels();
  for (let y = 0; y < cam.height; y++) {
    for (let x = 0; x < cam.width; x++) {
      let colorOfCamAtXY = cam.get(x, y);
      let b = brightness(colorOfCamAtXY);
      noStroke();
      let mappedHue = map(b, 0, 100, 0, 360);
      fill(mappedHue, 100, 100);
      rect(x * vScale, y * vScale, vScale, vScale);
    }
  }

You can see a demo video below.

Then Charlin had another idea inspired by the Slit Scan. He was thinking of filling the canvas with a small chunk of pixels as a brush going around the canvas. We faced some problems while pursuing the idea. The colored pixels are rectangles draw repeatedly, so they are overlapping with the slit-scan copies.

While playing with the slits-scan code and inspired by sliding puzzles, I thought of changing the width of the copied slit over time to create an animated slit-scan. The idea was to select an area, then compress and expand those selected pixels simultaneously. It will be easier if we show you the video of the final work.

Try it yourself here

Code is here