let gallery;

let garden;

let kitchen;

​

let imgOgX = 1600;

let imgOgY = 9298;

let sceneOgX = 1600; 

let sceneOgY = 900; 

​

let marginStart = 6;

let margin = marginStart;

let marginMax = 20;

let ogMarginChange = 6900;

let marginChange;

​

let scrolling = 0;

let maxScroll;

​

let galleryOgMin = 700; 

let galleryOgMax = 1200;

​

let gardenOgMin = 2000;

let gardenOgMax = 2500;

​

let kitchenOgMin = 5950; 

let kitchenOgMax = 6450;

​

let galleryMin = galleryOgMin;

let galleryMax = galleryOgMax;

let gardenMin = gardenOgMin;

let gardenMax = gardenOgMax;

let kitchenMin = kitchenOgMin;

let kitchenMax = kitchenOgMax;

​

​

​

function preload() {

  img = loadImage('blueDot_Log.jpg');

  gallery = loadImage('Gallery.jpg');

  garden = loadImage('Garden.jpg');

  kitchen = loadImage('Kitchen.jpg');

}

​

​

function setup() {

createCanvas(windowWidth, windowHeight);

  img.resize(windowWidth, imgOgY * (windowWidth / imgOgX));

  gallery.resize(windowWidth, sceneOgY * (windowWidth / sceneOgX));

  garden.resize(windowWidth, sceneOgY * (windowWidth / sceneOgX));

  kitchen.resize(windowWidth, sceneOgY * (windowWidth / sceneOgX));  

  galleryMin = galleryOgMin * (img.height / imgOgY);

  galleryMax = galleryOgMax * (img.height / imgOgY);

  gardenMin = gardenOgMin * (img.height / imgOgY);

  gardenMax = gardenOgMax * (img.height / imgOgY);

  kitchenMin = kitchenOgMin * (img.height / imgOgY);

  kitchenMax = kitchenOgMax * (img.height / imgOgY);

  marginChange = ogMarginChange * (img.height / imgOgY);

  pixelDensity(1);

  //img(img, 0, 0);

}

​

function draw() { 

  loadPixels(); 

  img.loadPixels();

  gallery.loadPixels();

  garden.loadPixels();

  kitchen.loadPixels();

​

  if (scrolling > 6900) {

    margin = map(scrolling, 6900, img.height - height - 100, marginStart, marginMax);

  }

​

​

  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;

​

      if (scrolling > galleryMin && scrolling < galleryMax) { 

​

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

​

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

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

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

        pixels[index + 3] = 255;

      } else if (scrolling > gardenMin && scrolling < gardenMax) { 

​

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

​

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

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

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

        pixels[index + 3] = 255;

      } else if (scrolling > kitchenMin && scrolling < kitchenMax) { 

​

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

​

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

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

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

        pixels[index + 3] = 255;

      } else {

​

        let scrollIndex = index + (4 * width * scrolling); //lets you scroll through the img by pixels

​

        pixels[index + 0] = img.pixels[scrollIndex + 0];

        pixels[index + 1] = img.pixels[scrollIndex + 1];

        pixels[index + 2] = img.pixels[scrollIndex + 2];

        pixels[index + 3] = 255;

      }

    }

  }

  updatePixels();

​

  // fill (255);

  // rect (10, 10, 150, 70);

  // fill (0);

  // text ("fps = " + frameRate(), 10, 30);

  // text ("margin = " + margin, 10, 50);

  // text ("scrolling = " + scrolling, 10, 70);

}

​

​

function ghostPixels(index, pixelLength) { //randomizes pixel placement, only called when Nessie appears

​

  let offsetMax = round(map(mouseX, 0, width, 0, width/4));

  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;

}

​

​

function mouseWheel(event) {

  let maxScroll = img.height - height - 100; //100 b/c img is a little long

​

  scrolling += event.delta;

​

  if (scrolling < 0) {

    scrolling = 0;

  } 

  if (scrolling > maxScroll) {

    scrolling = maxScroll;

  }

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

​

  img.resize(windowWidth, imgOgY * (windowWidth / imgOgX));

  gallery.resize(windowWidth, sceneOgY * (windowWidth / sceneOgX));

  garden.resize(windowWidth, sceneOgY * (windowWidth / sceneOgX));

  kitchen.resize(windowWidth, sceneOgY * (windowWidth / sceneOgX));

​

  galleryMin = galleryOgMin * (img.height / imgOgY);

  galleryMax = galleryOgMax * (img.height / imgOgY);

  gardenMin = gardenOgMin * (img.height / imgOgY);

  gardenMax = gardenOgMax * (img.height / imgOgY);

  kitchenMin = kitchenOgMin * (img.height / imgOgY);

  kitchenMax = kitchenOgMax * (img.height / imgOgY);

​

  marginChange = ogMarginChange * (img.height / imgOgY);

  maxScroll = img.height - height - 100;

}

​