From bd4ffba870512472a6ad4686ce5c3f5bc4f07bfd Mon Sep 17 00:00:00 2001
From: mikima <mikimauri@gmail.com>
Date: Thu, 25 Jun 2020 10:01:36 +0200
Subject: [PATCH] changed canvas positioning

solve and close #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 | 66 ++++++++++++-------------------------------
 1 file changed, 18 insertions(+), 48 deletions(-)

diff --git a/image-slice/sketch.js b/image-slice/sketch.js
index b1bd2aa..642a143 100644
--- a/image-slice/sketch.js
+++ b/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());
   }
 }