let gallery;

let garden;

let kitchen;

let buttons;

​

let imgOgX = 1600;

let imgOgY = 9298;

let sceneOgX = 1600; 

let sceneOgY = 900; 

​

let marginStart = 6;

let margin = marginStart;

let marginMax = 20;

let scrolling = 0;

​

let galleryOgMin = 700; 

let galleryOgMax = 1200;

​

let gardenOgMin = 2000;

let gardenOgMax = 2500;

​

let kitchenOgMin = 5950; 

let kitchenOgMax = 6450;

​

let narrative = false; 

let install = false;

​

​

​

function preload() {

  img = loadImage('blueDot_Log.jpg');

  gallery = loadImage('Gallery.jpg');

  garden = loadImage('Garden.jpg');

  kitchen = loadImage('Kitchen.jpg');

  //buttons = loadImage('assets/blueDot_Buttons.jpg');

}

​

​

function setup() {

  // createCanvas(1600, 900);

  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));

​

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

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

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

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

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

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

​

  pixelDensity(1);

  noFill();

  stroke(255);

  strokeWeight(2);

  rectMode(CENTER);

  background (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);

  }

​

  background (100);

  fill (255);

  rect (0, 0, 300, 300);

  fill (0);

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

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

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

​

​

​

  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 > (galleryOgMin * (img.height / imgOgY)) && scrolling < (galleryOgMax * (img.height / imgOgY))) { 

​

        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();

​

  //if (scrolling > 8295) {

  //  showLinks();

  //}

​

}

​

​

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 showLinks() {

  let link1; 

  let link2;

​

  link1 = createA("https://bluedot.persona.co/documentation", "Installation", "_blank"); 

  link2 = createA("https://bluedot.persona.co/narrative", "Narrative", "_blank"); 

​

  link1.position(width/3, height - 50);

  link2.position(width/3 * 2, height - 50);

}

​

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);

}

​