Image gallery assistance if you may

Question

I created an image gallery that works great, the only problem I have is that I don't know how to set up my program so when you open it it opens with the pictures as thumbnails and if you click on the thumbnails the image expands.

int maxImages; 
int imageIndex;

// Declaring an array of images.
PImage[] images;

void setup() {

  size(600,400);

  images = new PImage[maxImages];

  maxImages = 2;
  imageIndex = 0;     // Initial image to be displayed is the first

  for (int i = 0; i < images.length; i ++ ) {
    images[i] = loadImage( "changeling" + i + ".jpg" ); 
  }

}

void draw() {

  // Displaying one image
  image(images[imageIndex],0,0); 

}

Answer 1

Here it's the idea, to show the images i'm setting them whit a width and height of 100 you can use any value or your own algorithm to get the best sizes. Knowing the space in the sketch that every image occupies I can know when the mouse was inside one of them when an mouse click event happen. Then I proceed to expand the image by doubling the size until it reaches a good size comparing whit the screen size, Again you can use you own value or algorithm to get the best expansion ratio. Once the mouse it's clicked again when an image is expanded it goes back to the thumbnail again.

Hope this can be useful.

int maxImages; 
int imageIndex;
boolean imageExpand;

// Declaring an array of images.
PImage[] images; 

void setup() {

  size(600,400);

  maxImages = 2;
  imageIndex = 0; // Initial image to be displayed is the first
  boolean imageExpand;

  images = new PImage[maxImages];    
  imageExpand = false;

  for (int i = 0; i < images.length; i ++ ) {
    images[i] = loadImage( "changeling" + i + ".jpg" ); 
  }

}

void draw() {

  if(!imageExpand){
    showThumbnail();
  }

}

void mouseClicked(){

  if(!imageExpand){
    for(int i=0; i < images.length; i++){
      if((images[i].X > mouseX) && (images[i].X + images[i].width < mouseX)){
        if((images[i].Y > mouseY) && (images[i].Y + images[i].height < mouseY)){ 
          expandImage(images[i]);
          imageExpand = true;
        }
      }
    }
  }
  else{
    imageExpand = false;
    showThumbnail();
  }

}

void expandImage(PImage myImage){

  int largeWidth, largeHeight; 
  while((myImage.width * 2 < 600) && (myImage.height * 2 < 400)){
    largeWidth = myImage.width * 2;
    largeWidth = myImage.height * 2;
  }

  image(myImage, 0, 0, largeWidth, largeHeight);

}

void showThumbnail(){

  int posX = 0, posY = 0, lastImage = 0;
  for(int i=0; i < images.length; i++){
    if(posX + 100 < 600){
      image(images[i], posX, posY, 100, 100);
      posX = posX + 100;
    }
    else{
      posX = 0;
      posY = posY + 100;
      image(images[i], posX, posY, 100, 100);
    }
  }

}

Regards Jose