How can I make a button on my processing program that when clicked, shows more pictures?

Question

I'm designing a video game for my computer science class. So far, everything is working and the game involves dragging a picture to certain parts of the screen. However, the window is not large enough to contain all of the images, so I want to make a "next" button that will open a new page of items in the same window while also allowing the dragged images to remain on the side. Basically, I just want one part of the screen to be able to move to a new frame. Sort of like a menu button that leads to a new "scene" of the program.

I'm working with eclipse.

import processing.core.PApplet;
import processing.core.PImage;
import java.awt.event.MouseEvent;

@SuppressWarnings("serial")
public class Step1 extends  PApplet
{
//curly brown
float x = 900;
float y = 30;
float imageWidth = 175;
float imageHeight = 175;
//long brown
float x2 = 800;
float y2 = 30;
//royal dress
float x3 = 845;
float y3 = 170;
float imageWidth2 = 400;
float imageHeight2 = 400;
//flower dress
float x4 = 850;
float y4 = 145;
//black and pink dress
float x5 = 600;
float y5 = 170;
//black straight
float x6 = 700;
float y6 = 30;

boolean mouseInImage = false;
boolean mouseInImage2 = false;
boolean mouseInImage3 = false;
boolean mouseInImage4 = false;
boolean mouseInImage5 = false;
boolean mouseInImage6 = false;

PImage img;
//hairs
PImage curlyBrown = loadImage("CurleyBrown.png");
PImage longBrown = loadImage("LongBrown.png");
PImage blackStraight = loadImage("BlackStraight.png");

//dresses
PImage blackAndPinkDress = loadImage("BlackAndPinkDress.png");
PImage blackDress = loadImage("BlackDress.PNG");
PImage blackStripesDress = loadImage("BlackStripesDress.png");
PImage flowerDress = loadImage("FlowerDress.png");
PImage sparklyDress = loadImage("SparklyDress.png");
PImage royalDress = loadImage("RoyalDress.png");

public void setup()
{
    size(1024, 576);
    background(255, 255, 255, 255);
    img = loadImage("Body1.png");

}

public void draw()
{
    background(255, 255, 255, 255);
    image(img, 250, 50);
    image(royalDress, x3, y3);
    image(flowerDress, x4, y4);
    image(blackStripesDress, 680, 70);
    image(blackDress, 600, 65);
    image(blackAndPinkDress, x5, y5);
    image(sparklyDress, 500, 150);
    //hair
    image(longBrown, x2, y2, imageWidth, imageHeight);
    image(curlyBrown, x, y, imageWidth, imageHeight);
    image(blackStraight, x6, y6, 125, 145);
}

public void mousePressed(MouseEvent e)
{
    if(mouseX > x && mouseX < x + imageWidth && mouseY > y && mouseY < y + imageHeight)
        mouseInImage = true;
    else if(mouseX > x2 && mouseX < x2 + imageWidth && mouseY > y2 && mouseY < y2 + imageHeight)
        mouseInImage2 = true;
    else if(mouseX > x3 && mouseX < x3 + imageWidth2 && mouseY > y3 && mouseY < y3 + imageHeight2)
        mouseInImage3 = true;
    else if(mouseX > x4 && mouseX < x4 + imageWidth2 && mouseY > y4 && mouseY < y4 + imageHeight2)
        mouseInImage4 = true;
    else if(mouseX > x5 && mouseX < x5 + imageWidth2 && mouseY > y5 && mouseY < y5 + imageHeight2)
        mouseInImage5 = true;
    else if(mouseX > x6 && mouseX < x6 + 125 && mouseY > y6 && mouseY < y6 + 145)
        mouseInImage6 = true;
}

public void mouseDragged()
{
    if(mouseInImage)
    {
        float deltaX = mouseX - pmouseX;
        float deltaY = mouseY - pmouseY;

        x += deltaX;
        y += deltaY;
    }
    else if(mouseInImage2)
    {
        float deltaX = mouseX - pmouseX;
        float deltaY = mouseY - pmouseY;

        x2 += deltaX;
        y2 += deltaY;
    }
    else if(mouseInImage3)
    {
        float deltaX = mouseX - pmouseX;
        float deltaY = mouseY - pmouseY;

        x3 += deltaX;
        y3 += deltaY;
    }
    else if(mouseInImage4)
    {
        float deltaX = mouseX - pmouseX;
        float deltaY = mouseY - pmouseY;

        x4 += deltaX;
        y4 += deltaY;
    }
    else if(mouseInImage5)
    {
        float deltaX = mouseX - pmouseX;
        float deltaY = mouseY - pmouseY;

        x5 += deltaX;
        y5 += deltaY;
    }
    else if(mouseInImage6)
    {
        float deltaX = mouseX - pmouseX;
        float deltaY = mouseY - pmouseY;

        x6 += deltaX;
        y6 += deltaY;
    }
}

public void mouseReleased()
{
    mouseInImage = false;
    mouseInImage2 = false;
    mouseInImage3 = false;
    mouseInImage4 = false;
    mouseInImage5 = false;
    mouseInImage6 = false;
}

}

Answer 1

There are two main approaches.

Approach 1: Draw all of your pictures, and provide a way to scroll through them. Think of how a slider bar works.

Here is a dumb example that uses dots instead of images:

ArrayList<PVector> points = new ArrayList<PVector>();

void setup() {
  size(500, 500);
  for (int i = 0; i < 1000; i++) {
    points.add(new PVector(random(1000), random(height)));
  }
}

void draw() {
  background(0);

  for (PVector point : points) {
    ellipse(point.x, point.y, 10, 10);
  }
}

void keyPressed() {
  if (keyCode == LEFT) {
    for (PVector point : points) {
      point.x--;
    }
  } else if (keyCode == RIGHT) {
    for (PVector point : points) {
      point.x++;
    }
  }
}

This example moves all of the dots, but you could just call translate() instead. You might also look into a GUI library that implements a slider bar for you.

In fact, Processing comes with an example of how to implement a slider. From the PDE, go to File > Examples and then in the Examples window go to Topics > GUI > Scrollbar.

Approach 2: Split your pictures into pages, and then draw one page at a time.

Another little example:

ArrayList<PVector> pageOne = new ArrayList<PVector>();
ArrayList<PVector> pageTwo = new ArrayList<PVector>();

boolean drawPageOne = true;

void setup() {
  size(500, 500);
  for (int i = 0; i < 500; i++) {
    pageOne.add(new PVector(random(width), random(height)));
    pageTwo.add(new PVector(random(width), random(height)));
  }
}

void draw() {
  background(0);

  if (drawPageOne) {
    for (PVector point : pageOne) {
      ellipse(point.x, point.y, 10, 10);
    }
  } else {
    for (PVector point : pageTwo) {
      ellipse(point.x, point.y, 10, 10);
    }
  }
}

void mouseClicked() {
  drawPageOne = !drawPageOne;
}

This example just uses two separate ArrayList instances and a boolean to switch between them, but you could get fancier and use an array of pages and an index instead.