Pixels: Compression Bands

By William Yao (wy538@nyu.edu) and Noah Black (nsb8333@nyu.edu)

For the Pixels assignment, Will and I came up with Compression Bands.

Vertical bands from the webcam feed are alternately stretched and compressed. The bands gradually switch places, i.e. they transition smoothly from compressed, to stretched, and back again. We used the sine function to achieve the smooth, oscillating effect. The bands are tinted red or blue depending on whether or not they’re being stretched or compressed, by an amount determined, again, by the same sine function. The image() function is used to copy each band from the source feed to the output canvas, and the stretching and compressing is a consequence of providing a wider or shorter destination (canvas) width argument than the source (camera) width argument.

let video;

const BAND_COUNT = 24;
const MIN_SCALE  = 0.6;
const MAX_SCALE  = 1.4;
const SPEED_HZ   = 0.25;

function setup() {
  createCanvas(windowWidth, windowHeight);
  pixelDensity(1);
  video = createCapture(VIDEO, { flipped: true });
  video.size(width, height);
  video.hide();
}

function draw() {
  background(0);
  const t = TWO_PI * SPEED_HZ * (millis() / 1000);
  const bandRescale = sin(t);
  const srcBandW = video.width / BAND_COUNT;
  const destBandBaseW = windowWidth / BAND_COUNT;

  let x = 0;
  for (let i = 0; i < BAND_COUNT; i++) {
    const role = (i % 2 === 0) ? bandRescale : -bandRescale;
    const mappedRescale = map(role, -1, 1, MIN_SCALE, MAX_SCALE);
    const destBandW = destBandBaseW * mappedRescale;
    const r = map(role, -1, 1, 255, 200);
    const b = map(role, -1, 1, 200, 255);
    tint(r, 220, b, 255);
    image(video, x, 0, destBandW, height, i * srcBandW, 0, srcBandW, video.height);

    x += destBandW;
  }
}