​

let img0;

let margin = 7;

​

function preload() {

  img0 = loadImage('/data/LP_BetterForMe.png')

​

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  background(255);

  pixelDensity(1);

}

​

function draw() {

  loadPixels();

  img0.loadPixels();

​

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

    for (let x = 0; x < width; x += round(random(margin))) {

      let index = (x + y * width) * 4;

​

      let imgIndex = ghostPixels(index, img0.pixels.length, 10);

​

      pixels[index + 0] = img0.pixels[imgIndex + 0];

      pixels[index + 1] = img0.pixels[imgIndex + 1];

      pixels[index + 2] = img0.pixels[imgIndex + 2];

      pixels[index + 3] = 255;

      updatePixels();

    }

  }

}

​

​

function ghostPixels(index, pixelLength, end) { //randomizes pixel placement

  //offsetMax indicate the range of sound when rendering the image, and is a function of constant 'end' and variable 'scrolling'. 

  //as the scrolling value approaches the 'end' of the image, the function approaches and reaches 0, eliminating all sound. Inversely, as we scroll up (and away) from the end of the image, sound increases.

  let offsetMax = 100;

  //round(map(end - scrolling, 0, width, 0, width * 1.5));

  let offset = round(random(offsetMax));

​

  let neg = random(-1, 1); //if pixels are sent left/down or right/up

  if (neg < 0) {

    neg = 1;

  } else {

    neg = -1;

  }

​

  let direction = random(-1, 1); //if pixels move horizontal or vertically

  if (direction < 0) {

    direction = 4; //horizontal

  } else {

    direction = (4 * width); //vertical

  }

​

  let imgIndex = index + (direction * offset * neg);

​

  if (imgIndex < 0) { //no black pixels from top 

    imgIndex = 0;

  }

  if (imgIndex >= pixelLength) { //no black pixels from bottom

    imgIndex = pixelLength - 1600;

  }

​

  return imgIndex;

}