updated image slide + image stack and added test_image_urls.txt

image-slice/sketch.js

@@ -1,9 +1,9 @@
 let stacksize = 1000; // define the size of the image stack
 let canvasspace = 100; // define the space around the image stack
-let canvasspacey = 160;
+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;
+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;
@@ -13,6 +13,7 @@ let imagesegment;
 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
@@ -30,11 +31,15 @@ function preload() {
 }
 
 function setup() {
-  //count number of images
+
+  //count total number of images to determine width of image slices
   imagenumber = imagesStack.length;
   imagesegment = stacksize/imagenumber;
+
+  // print so can be checked in console
   print(imagesegment);
 
+  // create dropdown box to select blend mode
   sel = createSelect();
   sel.option(BLEND);
   sel.option(DARKEST);
@@ -65,11 +70,12 @@ function setup() {
 	  localStorage.removeItem("urls");
   }
 
-  //Display the loadimages button and bind its event handler
+  // 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);
@@ -84,6 +90,7 @@ function setup() {
   // 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'
@@ -138,7 +145,7 @@ function mySelectEvent () {
 }
 
 function loadimgs(){
-  //Simply save the data in localstorage and reload the page, so that nexttime on pageload the images will be read from localstorage and initiated in p5
+  // 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();
 }

image-stack/sketch.js

@@ -1,32 +1,55 @@
 let stacksize = 1000; // define the size of the image stack
 let canvasspace = 100; // define the space around the image stack
+let canvasspacey = 160;
 let canvassize = stacksize + (canvasspace * 2);
 let clearness = 100; // set transparency levels
-let savebutton;
+let savebutton, textarea, loadbutton, urls;  // create save button, load button, text box and urls
 let savebuttonx = 520;
-let savebuttony = (canvasspace/2);
+let savebuttony = (canvasspace/2)+160;
 
 let imagesStack = [] // set up array
 
 function preload() {
-  // you can put as many images you want in the array
-  imagesStack[0] = loadImage('https://scontent-lht6-1.xx.fbcdn.net/v/t1.0-9/68881794_10157572465227164_5096209456706879488_o.jpg?_nc_cat=103&_nc_sid=2d5d41&_nc_ohc=14c7qbKWUgUAX9j3WNg&_nc_ht=scontent-lht6-1.xx&oh=994d2b9ee23aefca61c6270497eafa63&oe=5EEB8696');
-  imagesStack[1] = loadImage('https://scontent-lhr8-1.xx.fbcdn.net/v/t1.0-9/69203664_2492891857610482_6748460457532588032_o.jpg?_nc_cat=110&_nc_sid=110474&_nc_ohc=QPvNpwPQKxIAX_xzIVn&_nc_ht=scontent-lhr8-1.xx&oh=eef76fc448b139e20390cceadfed28f8&oe=5EEBE830');
-  imagesStack[2] = loadImage('https://scontent-lhr8-1.xx.fbcdn.net/v/t1.0-9/68736465_2107691639532691_5695011348983840768_o.jpg?_nc_cat=109&_nc_sid=8024bb&_nc_ohc=4y8MAffhOwkAX-HbccP&_nc_ht=scontent-lhr8-1.xx&oh=1cb31e3064e34eef70458bfeb7cefc75&oe=5EEC3E7A');
-  imagesStack[3] = loadImage('https://scontent-lhr8-1.xx.fbcdn.net/v/t1.0-9/68687767_2510578599174711_2509315057637130240_o.jpg?_nc_cat=101&_nc_sid=110474&_nc_ohc=-zpMr0-I4_sAX9sLM_0&_nc_ht=scontent-lhr8-1.xx&oh=ac82d943bd1c6cf1c06a5d5f5fe1ff6a&oe=5EEE895A');
-  imagesStack[4] = loadImage('https://scontent-lhr8-1.xx.fbcdn.net/v/t1.0-9/69138849_10156134430836286_6223749663099453440_o.jpg?_nc_cat=102&_nc_sid=110474&_nc_ohc=5NE8Idl4QGwAX_PIe11&_nc_ht=scontent-lhr8-1.xx&oh=e0e7bac5644028856a7c615efbe9c268&oe=5EEC2027');
-  imagesStack[5] = loadImage('https://scontent-lht6-1.xx.fbcdn.net/v/t1.0-9/69339788_2419242788332366_1267828638737235968_n.jpg?_nc_cat=105&_nc_sid=8024bb&_nc_ohc=0O6pA7GEnJQAX_HfKum&_nc_ht=scontent-lht6-1.xx&oh=157608f089abebba7e7d1b92300d674e&oe=5EEF4270');
-  imagesStack[6] = loadImage('https://scontent-lht6-1.xx.fbcdn.net/v/t1.0-9/69071850_2743884679028792_1314113830543949824_n.jpg?_nc_cat=105&_nc_sid=110474&_nc_ohc=Vf8lP-voLNYAX8L3xcv&_nc_ht=scontent-lht6-1.xx&oh=15d20f94188c62a336b34b702cbaff15&oe=5EEF1F78');
-  imagesStack[7] = loadImage('https://scontent-lhr8-1.xx.fbcdn.net/v/t1.0-9/s960x960/68752597_10157603056028656_3566741048203935744_o.jpg?_nc_cat=101&_nc_sid=8024bb&_nc_ohc=qqZo4LMbSDIAX9Wsy2W&_nc_ht=scontent-lhr8-1.xx&_nc_tp=7&oh=b4c06e7ff0e3adb58c86ce10fb0fa5fe&oe=5EEDE280');
-  imagesStack[8] = loadImage('https://scontent-lhr8-1.xx.fbcdn.net/v/t1.0-9/69745038_1099792167077212_4471287600560209920_o.jpg?_nc_cat=101&_nc_sid=110474&_nc_ohc=oqlLdoZTSA0AX_3fnzN&_nc_ht=scontent-lhr8-1.xx&oh=1c574fce87ec69562737636540da26fe&oe=5EEECD6D');
-  imagesStack[9] = loadImage('https://scontent-lht6-1.xx.fbcdn.net/v/t1.0-9/68496478_514789772611165_1498210959372582912_n.jpg?_nc_cat=108&_nc_sid=110474&_nc_ohc=VZ-tMWsMhq4AX-Id89G&_nc_ht=scontent-lht6-1.xx&oh=6f09b4c4a16e504acf5b4e1c52cbc514&oe=5EEBB337');
+  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 and position slider
   slider = createSlider(0, 255, 100);
   slider.position(canvasspace, canvasspace/2);
   slider.style('width', '400px');
+
+  //
+
+  //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);
@@ -62,28 +85,40 @@ function setup() {
   }
 }
 
+// when mouse is released then update image based on slider value
 function mouseReleased () {
+
+  // image transparency is set to slider value
   clearness = slider.value();
+
+  // reload the images based on new transparency value (same code as above)
+
   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) {
-      tint(255, clearness)
-      imageMode(CENTER);
-      currentImage.resize(stacksize,0);
-      image(currentImage, width/2, height/2, stacksize,0);
-    } else {
-      tint(255, clearness)
-      imageMode(CENTER);
-      currentImage.resize(0,stacksize);
-      image(currentImage, width/2, height/2, 0, stacksize);
-    }
+	  // 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) {
+	    tint(255, clearness)
+	    imageMode(CENTER);
+	    currentImage.resize(stacksize,0);
+	    image(currentImage, width/2, height/2, stacksize,0);
+	  } else {
+	    tint(255, clearness)
+	    imageMode(CENTER);
+	    currentImage.resize(0,stacksize);
+	    image(currentImage, width/2, height/2, 0, stacksize);
+	  }
   }
 }
 
+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');
 }

test_image_urls.txt

@@ -0,0 +1,10 @@
+https://upload.wikimedia.org/wikipedia/commons/1/1f/West_Village_333_Avenue_of_the_Americas_embedded_2019-09-30_17-21.jpg
+https://upload.wikimedia.org/wikipedia/commons/d/d8/El_Guamache_Bay%2C_Margarita_island.jpg
+https://upload.wikimedia.org/wikipedia/commons/2/23/Cleome_hassleriana_NBG_2_LR.jpg
+https://upload.wikimedia.org/wikipedia/commons/7/72/Umeda_Sky_Building%2C_Osaka%2C_November_2016_-02.jpg
+https://upload.wikimedia.org/wikipedia/commons/7/7f/Umeda_Sky_Building%2C_Osaka%2C_November_2016_-01.jpg
+https://upload.wikimedia.org/wikipedia/commons/a/a1/Adam_Thoroughgood_House_-_South_LR.jpg
+https://upload.wikimedia.org/wikipedia/commons/e/ec/Viking_Sky_%28ship%2C_2017%29_and_GNV_Cristal_%28ship%2C_1989%29.jpg
+https://upload.wikimedia.org/wikipedia/commons/c/ca/The_Sky_Garden.jpg
+https://upload.wikimedia.org/wikipedia/commons/7/75/Sky_Garden_-_Workmen.jpg
+https://upload.wikimedia.org/wikipedia/commons/9/98/New_Clairvaux%2C_Sacred_Stones.jpg