I am a very novice programmer, and am creating a simple interactive piece that allows the audience to shuffle between an array of images arranged in tiles (250x250 pixels, 4 on the top and 4 on the bottom). Each tile can only be shuffled when the cursor is hovering over its coordinates, and some tiles are only specific to certain images. This is what I have so far:
PImage[] myImageArray = new PImage[5];
void setup() {
size(1000,500);
background(10,10,10);
smooth();
}
void draw() {
for (int i=0; i < myImageArray.length; i++) {
myImageArray [0] = loadImage( "one.jpg");
myImageArray [1] = loadImage( "two.jpg");
myImageArray [2] = loadImage( "three.jpg");
myImageArray [3] = loadImage( "four.jpg");
myImageArray [4] = loadImage( "five.jpg");
}
}
void mousePressed(){
image(myImageArray[(int)random(5)],0,0);
image(myImageArray[(int)random(5)],250,0);
image(myImageArray[(int)random(5)],500,0);
image(myImageArray[(int)random(5)],750,0);
image(myImageArray[(int)random(5)],0,250);
image(myImageArray[(int)random(5)],250,250);
image(myImageArray[(int)random(5)],500,250);
image(myImageArray[(int)random(5)],750,250);
}
At this point I need to know how to shuffle a single tile inside its coordinates (as of right now wherever I click inside the sketch all tiles shuffle simultaneously).
Also...how difficult would it be to add a fade in (or out) effect after clicking?
Thanks to anyone in advance. I really appreciate the help I have received on this forum for previous projects. So thank you!
Me and some classmates are working on a virtual tour for a client for school. At the bottom of the sketch above a slider that pans panoramas left and right are navigation buttons to navigate to other rooms. I made rollover graphics for the current navigation buttons on the screen (and graphics for when the button is clicked as well) but am not sure how or where to place it in my code. For each navigation button I have 3 images (for example pantryb1 (when static), pantryb2 (rollover), pantry3(when clicked)). How would I go about this? Thanks in advance and I appreciate the help!
// The next line is needed if running in JavaScript Mode with Processing.js
/* @pjs preload="seedTop.jpg,seedBottom.jpg"; */
HScrollbar hs1;
//These images below consist of our panoramas, header, footer, buttons, etc.
//A little bit about void setup:
//This area simply sets up the dimensions of our sketch and the scroll-bar.
//Also where Processing will attempt to load our images we listed above.
void setup() {
size(1024, 680);
noStroke();
// Get the position of the img1 scrollbar
// and convert to a value to display the img1 image
float pantrypPos = hs1.getPos()-width/2;
fill(255);
image(pantryp, width/2-pantryp.width/2 + pantrypPos*1.5, 0);
image(footer, 0, 550);
image(foyerb1, 25, 558);
image(computerb1, 145, 558);
image(diningb1, 270, 558);
image(con1b1, 395, 558);
image(con2b1, 520, 558);
image(kitchenb1, 645, 558);
image(pantryb1, 770, 558);
image(hygieneb1, 900, 558);
hs1.update();
hs1.display();
stroke(0);
}
class HScrollbar {
int swidth, sheight; // width and height of bar
float xpos, ypos; // x and y position of bar
float spos, newspos; // x position of slider
float sposMin, sposMax; // max and min values of slider
int loose; // how loose/heavy
boolean over; // is the mouse over the slider?
boolean locked;
float ratio;
