changed canvas positioning

solve and close PublicDataLab#9 

The p5 canvas is an HTML object like as buttons and input form.
We can therefore position it where we want in the page.

Therefore the canvas size now is equal to the stacksize.
when we create it, we incapsulate it ina a variable (line 36) and then we position it in the page (line 37)

image-slice/sketch.js

@@ -1,7 +1,7 @@
 let stacksize = 1000; // define the size of the image stack
 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 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;
@@ -31,6 +31,11 @@ function preload() {
 }
 
 function setup() {
+	// first, draw the canvas.
+	// the order of creation is also the order of display
+	let canvas = createCanvas(canvassize,canvassize);
+	canvas.position(canvasspace, canvasspace + canvasspacey);
+	background('red');
 
   //count total number of images to determine width of image slices
   imagenumber = imagesStack.length;
@@ -57,7 +62,7 @@ function setup() {
   sel.option(ADD);
   sel.option(NORMAL);
   sel.selected(NORMAL);
-  sel.changed(mySelectEvent);
+  sel.changed(render);
   sel.position(canvasspace, (canvasspace / 2)+canvasspacey);
 
   //Display the textarea and assign a class
@@ -80,67 +85,32 @@ function setup() {
   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];
-    imagecount = i;
-
-	  if (currentImage.width > currentImage.height) {
-	    currentImage.resize(0,stacksize);
-      imagex = canvasspace + ((imagecount - 1) * imagesegment);
-      imagey = canvasspace+canvasspacey;
-      imagew = imagesegment;
-      imageh = stacksize;
-      blend(currentImage, imagex, 0, imagew, imageh, (imagex + canvasspace), imagey, imagew, imageh, sel.value());
-	  } else {
-	    currentImage.resize(0,stacksize);
-      imagex = canvasspace + ((imagecount - 1) * imagesegment);
-      imagey = canvasspace+canvasspacey;
-      imagew = imagesegment;
-      imageh = stacksize;
-      blend(currentImage, imagex, 0, imagew, imageh, (imagex + canvasspace), imagey, imagew, imageh, sel.value());
-	  }
-  }
+  render()
 }
 
+// renamed the function "render", we call them at the end of setup
+// and each time the dropdown is changed
 
-function mySelectEvent () {
+function render() {
 
   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];
-    imagecount = i;
 
 	  if (currentImage.width > currentImage.height) {
 	    currentImage.resize(0,stacksize);
-      imagex = canvasspace + ((imagecount - 1)* imagesegment);
-      imagey = canvasspace+canvasspacey;
-      imagew = imagesegment;
-      imageh = stacksize;
-      blend(currentImage, imagex, 0, imagew, imageh, (imagex + canvasspace), imagey, imagew, imageh, sel.value());
 	  } else {
 	    currentImage.resize(0,stacksize);
-      imagex = canvasspace + ((imagecount - 1) * imagesegment);
-      imagey = canvasspace+canvasspacey;
-      imagew = imagesegment;
-      imageh = stacksize;
-      blend(currentImage, imagex, 0, imagew, imageh, (imagex + canvasspace), imagey, imagew, imageh, sel.value());
 	  }
+	// these instructions are applied in both cases, so i move them
+	// outside the if/else block
+	imagex = i * imagesegment
+  	imagey = 0
+  	imagew = imagesegment;
+  	imageh = stacksize;
+  	blend(currentImage, imagex, 0, imagew, imageh, imagex, imagey, imagew, imageh, sel.value());
   }
 }