// - Edited the equality checks within the if statments in the draw() function when evaluating whether we are in an images range

// - Edited the ghostPixels() function (simplified parameters needed); edited function calls to ghostPixels() to reflect this

​

​

//Changelog 28.4.2020:

// - Playing around with buttons that appear at the end of the story!! very epic

// - Finally got the FONT TO LOAD

// - Scaled the spacing and font size with window size

// - Made the background transparent for the pixel effect so it doesnt look weird

// - linked button with webpages (!!)

​

//buttons are smaller + fade in & out smoooooth 

​

p5.disableFriendlyErrors = true; // disables FES

​

let img;

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 arrowScroll = 5;

​

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;

​

let buttonSwitch = 0;

let fade;

let fadeD;

let fadeN;

let fadeA;

​

​

function preload() {

  img = loadImage('blueDot_Log.jpg');

  gallery = loadImage('Gallery.jpg');

  garden = loadImage('Garden.jpg');

  kitchen = loadImage('Kitchen.jpg');

​

}

​

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  reAlign();

​

  pixelDensity(1);

  cursor(CROSS);

​

  fade = color(255, 255, 255, 2);

  fadeD = fade;

  fadeN = fade;

  fadeA = fade;

​

}

​

function draw() {

  loadPixels();

  img.loadPixels();

  gallery.loadPixels();

  garden.loadPixels();

  kitchen.loadPixels();

​

  if (scrolling > marginChange) {

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

  }

  if (margin > marginMax) {

    margin = marginMax

  }

  if (scrolling < img.height / 2) {

    margin = marginStart;

  }

​

​

  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)) { //edited all the if statments. Before it used to be "scrolling < max", "scrolling > min"; now it is min and max bound inclusive (>=, <=). Now, the image noise begins earlier in the scroll (due to min inclusivity) and becomes 0 when the scroll reaches the max image bound (max inclusivity).

​

        let imgIndex = ghostPixels(index, img.pixels.length, galleryMax - galleryMax % 100); //when sending the request for ghost pixels, send the parameters of gallery max boundary as well to manipulate the sound levels of the render

​

        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)) { //same as above if statement

​

        let imgIndex = ghostPixels(index, img.pixels.length, gardenMax - gardenMax % 100); //send parameters of garden max bound, same as above

​

        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)) { //same as above if statement

​

        let imgIndex = ghostPixels(index, img.pixels.length, kitchenMax - kitchenMax % 100); //send parameters of kitchen max bound, same as above

​

        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 >= maxScroll) {

    buttonSwitch = 1;

    fade = color(255, 255, 255, 5);

    fadeD = fade;

    fadeN = fade;

    fadeA = fade;

  } else if ((scrolling < maxScroll) && (scrolling > maxScroll - 200)) {

    fade = color(25, 7, 255, 25);

    fadeD = fade;

    fadeN = fade;

    fadeA = fade;

    //buttonSwitch = false;

  } else {

    buttonSwitch = 0;

  }

​

  if ((mouseX < width / 3) && (mouseY > windowHeight - 150) && (scrolling >= maxScroll)) {

    fadeD = color(255, 164, 202);

  }

   if ((mouseX > width / 3) && (mouseX < 2 * (width / 3)) && (mouseY > windowHeight - 150) && (scrolling >= maxScroll))  {

    fadeN = color(239, 100, 55);

  }

   if ((mouseX > 2 * (width / 3)) && (mouseY > windowHeight - 150) && (scrolling >= maxScroll)) {

    fadeA = color(156, 115, 255);

  }

​

  showButtons(buttonSwitch);

​

​

  arrowKeys();

​

  fill(255);

  rect(10, 10, 150, 110);

  fill(0);

  text("fps = " + windowHeight, 10, 100);

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

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

  text("gallery = " + galleryMax, 10, 70);

  text("fade = " + fade, 10, 90);

  text("buttonSwitch = " + buttonSwitch, 10, 110);

}

​

function showButtons(buttonStat) {

  let fontSize = (windowHeight / 3) * 0.07;

  fontString = fontSize.toString()

  fontString = fontString.concat("px")

​

  documentation = createButton('documentation');

  documentation.position(0, windowHeight - 100);

  documentation.style("font-family", "Nitti Normal");

  documentation.style("background-color", "transparent");

  documentation.style("border-color", "transparent");

  documentation.style("color", fadeD);

  documentation.style("font-size", fontString);

  documentation.size((windowWidth / 3), windowHeight / 8);

  documentation.mousePressed(documentation_link);

  documentation.style("border", "none");

  documentation.style("outline", "none");

  documentation.style("box-shadow", "none");

  documentation.hide();

​

  narrative = createButton('narrative');

  narrative.position((windowWidth / 3), windowHeight - 100);

  narrative.style("font-family", "Nitti Normal");

  narrative.style("background-color", "transparent");

  narrative.style("border-color", "transparent");

  narrative.style("color", fadeN);

  narrative.style("font-size", fontString);

  narrative.size((windowWidth / 3), windowHeight / 8);

  narrative.mousePressed(narrative_link);

  narrative.style("border", "none");

  narrative.style("outline", "none");

  narrative.style("box-shadow", "none");

  narrative.hide();

​

  art_stat = createButton('artist statement');

  art_stat.position(2 * (windowWidth / 3), windowHeight - 100);

  art_stat.style("font-family", "Nitti Normal");

  art_stat.style("background-color", "transparent");

  art_stat.style("border-color", "transparent");

  art_stat.style("color", fadeA);

  art_stat.style("font-size", fontString);

  art_stat.size((windowWidth / 3), windowHeight / 8);

  art_stat.mousePressed(statement_link);

  art_stat.style("border", "none");

  art_stat.style("outline", "none");

  art_stat.style("box-shadow", "none");

  art_stat.hide();

​

  if (buttonStat == 0) {

    documentation.hide();

    narrative.hide();

    art_stat.hide();

  } else if (buttonStat == 1) {

    documentation.show();

    narrative.show();

    art_stat.show();

​

  }

}

​

function documentation_link() {

  window.open("https://bluedot.persona.co/documentation");

}

​

function narrative_link() {

  window.open("https://bluedot.persona.co/narrative");

}

​

function statement_link() {

  window.open("https://bluedot.persona.co/artist-statement");

}

​

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

​

  //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 = 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;

}

​

​

function mouseWheel(event) {

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

  //scrollStop()

  scrolling += event.delta;

}

​

function arrowKeys() {

  if (keyIsDown(UP_ARROW)) {

    scrolling = scrolling - arrowScroll;

  }

  if (keyIsDown(DOWN_ARROW)) {

    scrolling = scrolling + arrowScroll;

  }

  scrollStop()

​

}

​

function scrollStop() {

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

  if (scrolling < 0) {

    scrolling = 0;

  }

  if (scrolling > maxScroll) {

    scrolling = maxScroll;

  }

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

  reAlign();

​

}

​

function reAlign() {

  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;

}