let canvasspace = 100; // define the space around the image stack

let canvasspacey = 160; // additional spacing for image URL input box

let canvassize = stacksize + (canvasspace * 2);

let clearness = 100; // set transparency levels

let savebutton, textarea, loadbutton, urls;  // create save button, load button, text box and urls

let savebuttonx = 220;

let savebuttony = (canvasspace/2)+160;

let imagecount = 0;

let imagex;

let imagey;

let sel;

​

let imagesStack = [] // set up array

​

function preload() {

  urls = localStorage.getItem("urls"); //load previously saved data from localstorage

  if(urls){ //skips if no data before

      urls = urls.split("\n"); //every line contains a new url

      for(let i=0; i<urls.length; i++){

        if(urls[i].trim()!=""){

          imagesStack[i] = loadImage(urls[i],null,(e)=>{

              alert("One or more urls failed to load. Please try again or double check the urls.");

              localStorage.removeItem("urls");

              location.reload();

          }); //load images from localstorage lines

        }

      }

  }

}

​

function setup() {

​

  // create dropdown box to select blend mode

  sel = createSelect();

  sel.option(BLEND);

  sel.option(DARKEST);

  sel.option(LIGHTEST);

  sel.option(DIFFERENCE);

  sel.option(MULTIPLY);

  sel.option(EXCLUSION);

  sel.option(SCREEN);

  sel.option(REPLACE);

  sel.option(OVERLAY);

  sel.option(HARD_LIGHT);

  sel.option(SOFT_LIGHT);

  sel.option(DODGE);

  sel.option(BURN);

  sel.option(ADD);

  sel.option(NORMAL);

  sel.selected(DIFFERENCE);

  sel.changed(mySelectEvent);

  sel.position(canvasspace, (canvasspace / 2)+canvasspacey);

​

  //Display the textarea and assign a class

  textarea = createElement("textarea");

  textarea.position(canvasspace, (canvasspace / 2));

  textarea.class("image-inputs");

  textarea.size(400,100);

  if(urls){ //if urls exist in localstorage just put it in the textarea and clear the localstorage

    textarea.value(urls.join("\n"));

    localStorage.removeItem("urls");

  }

​

  // display button to load images and bind its event handler

  loadbutton = createButton('Load Images');

  loadbutton.position(canvasspace, savebuttony-40);

  loadbutton.mousePressed(loadimgs);

​

  // display button to save images

  savebutton = createButton('Save image');

  savebutton.position(savebuttonx, savebuttony);

  savebutton.mousePressed(saveimg);

​

  // reverse the images in the array (so that first images are loaded last.

  // This may be useful, e.g., where the most prominent images should be most visible in the stack.

  imagesStack = imagesStack.reverse();

​

  createCanvas(canvassize,canvassize);

  background('#FFFFFF');

​

  // istead of rewriting the operation for each image,

  // we can use a for loop.

  // for each image in the 'imagesStack' array, we perform the same operations

​

  for(let i = 0; i < imagesStack.length; i++) {

​

      // load the image contained in the 'imagesStack' array at index 'i'

      // and put it in a temporary variable called 'currentImage'

      let currentImage = imagesStack[i];

​

    if (currentImage.width > currentImage.height) {

      aspect = currentImage.width / currentImage.height;

      currentImage.resize(stacksize,0);

      imagex = canvasspace;

      imagey = canvasspace + canvasspacey + ((stacksize - (stacksize / aspect)) / 2);

      blend(currentImage, 0, 0, stacksize, (stacksize / aspect), imagex, imagey, stacksize, (stacksize / aspect), sel.value());

      } else {

      aspect = currentImage.width / currentImage.height;

        currentImage.resize(0,stacksize);

      imagex = canvasspace + ((stacksize - (stacksize * aspect)) / 2);

      imagey = canvasspace + canvasspacey;

      blend(currentImage, 0, 0, (stacksize * aspect), stacksize, imagex, imagey, (stacksize * aspect), stacksize, sel.value());

    }

  }

}

​

function mySelectEvent () {

​

  for(let i = 0; i < imagesStack.length; i++) {

​

      // load the image contained in the 'imagesStack' array at index 'i'

      // and put it in a temporary variable called 'currentImage'

      let currentImage = imagesStack[i];

​

    if (currentImage.width > currentImage.height) {

      aspect = currentImage.width / currentImage.height;

      currentImage.resize(stacksize,0);

      imagex = canvasspace;

      imagey = canvasspace + canvasspacey + ((stacksize - (stacksize / aspect)) / 2);

      blend(currentImage, 0, 0, stacksize, (stacksize / aspect), imagex, imagey, stacksize, (stacksize / aspect), sel.value());

      } else {

      aspect = currentImage.width / currentImage.height;

        currentImage.resize(0,stacksize);

      imagex = canvasspace + ((stacksize - (stacksize * aspect)) / 2);

      imagey = canvasspace + canvasspacey;

      blend(currentImage, 0, 0, (stacksize * aspect), stacksize, imagex, imagey, (stacksize * aspect), stacksize, sel.value());

    }

  }

}

​

function loadimgs(){

  // save the data in localstorage and reload the page, so that next time on page load the images will be read from localstorage and initiated in p5

  localStorage.setItem("urls",textarea.value());

  location.reload();

}

​

function saveimg() {

  saveCanvas('myCanvas', 'jpg');

}