Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

changed canvas positioning #12

Open
wants to merge 1 commit into
base: gh-pages
Choose a base branch
from
Open

changed canvas positioning #12

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 18 additions & 48 deletions image-slice/sketch.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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
Expand All @@ -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());
}
}

Expand Down