URGENT: Code Skipping Over Individual Paths

dangel3272

Hi, I'm fairly new to Processing, and I'm having an issue where I have multiple paths, but it will skip through multiple to go to the last one. I'm fairly sure the issue is that the coordinates to go to the next path are the same for each one, but it's kind of necessary for my project, and I'd really love to know if there was some kind of work-around. Here is my code:

PImage StartScreen;
PImage Text1;
PImage Text2;
PImage FinalText;
PImage Keep;
PImage Fire;
PImage Laverne;
PImage Chase;
PImage Lindsay;
PImage Riley;
int stage;
int path = 0;

void setup () {
  stage=1;
  size (960, 540);
  StartScreen = loadImage ("Start Screen.png");
  Text1 = loadImage ("Text card 1.png");
  Text2 = loadImage ("Text card 2.png");
  FinalText = loadImage ("Text card 3.png");
  Keep = loadImage ("KEEP Big.png");
  Fire = loadImage ("FIRE Big.png");
  Laverne = loadImage ("Laverne Waller.png");
  Chase = loadImage ("Chase Willoughby.png");
  Lindsay = loadImage ("Lindsay Holme.png");
  Riley = loadImage ("Riley Travis.png");
}

void draw () {
  println (mouseX, mouseY);
  //START SCREEN
  if (path == 0) {
    image (StartScreen, 0, 0);
    if ((mouseX > 354) && (mouseX < 432) && (mouseY > 368) && (mouseY < 396) && (mousePressed == true)) {
      path = 1;
    }
  }

  //FIRST TEXT
  else if (path == 1) {
    image (Text1, 0, 0);
    if ((mouseX > 385) && (mouseX < 445) && (mouseY > 412) && (mouseY < 437) && (mousePressed == true)) { 
      path = 2;
    }
  }

  //SECOND TEXT
  else if (path == 2) {
    image (Text2, 0, 0);
    if ((mouseX > 382) && (mouseX < 443) && (mouseY > 372) && (mouseY < 397) && (mousePressed == true)) {
      path = 3;
    }
  }

  //PATH 3
  else if (path == 3) { // Laverne
    background (0);
    imageMode (CENTER);
    image (Keep, 240, 405);
    image (Fire, 720, 405);
    image (Laverne, 480, 150);

    if ((mouseY > 315) && (mouseY < 515) && (mouseX > 98) && (mouseX < 398) && (mousePressed == true)) {
      path = 4;
    } else if ((mouseX > 575) && (mouseX < 875) && (mouseY > 315) && (mouseY < 515) && (mousePressed == true)) {
      path = 4;
    }
  }

  // PATH 4
  else if (path == 4) { // Chase
    image (Keep, 240, 405);
    image (Fire, 720, 405);
    image (Chase, 480, 150);

    if ((mouseY > 315) && (mouseY < 515) && (mouseX > 98) && (mouseX < 398) && (mousePressed == true)) {
      path = 5;
    } else if ((mouseX > 575) && (mouseX < 875) && (mouseY > 315) && (mouseY < 515) && (mousePressed == true)) {
      path = 5;
    }
  }                                                    

  // PATH 5
  else if (path == 5) { // Lindsay
    image (Keep, 240, 405);
    image (Fire, 720, 405);
    image (Lindsay, 480, 150);

    if ((mouseY > 315) && (mouseY < 515) && (mouseX > 98) && (mouseX < 398) && (mousePressed == true)) {
      path = 6;
    } else if ((mouseX > 575) && (mouseX < 875) && (mouseY > 315) && (mouseY < 515) && (mousePressed == true)) {
      path = 6;
    }
  }

  else if (path == 6) {
    image (Keep, 240, 405);
    image (Fire, 720, 405);
    image (Riley, 480, 150);

    if ((mouseY > 315) && (mouseY < 515) && (mouseX > 98) && (mouseX < 398) && (mousePressed == true)) {
      path = 7;
    } else if ((mouseX > 575) && (mouseX < 875) && (mouseY > 315) && (mouseY < 515) && (mousePressed == true)) {
      path = 7;
    }
  }

  else if (path == 7) {
    imageMode (CORNER);
    image (FinalText, 0, 0);
  }
}

Any help would be greatly appreciated!

quark

I'm fairly sure the issue is that the coordinates to go to the next path are the same for each one

Spot on that is the problem. The draw method is executed ~60 times a second so if path == 3 and we press the mouse inside the area indicated then
in the next frame path changes to 4 and
in the next frame path changes to 5 and
in the next frame path changes to 6 and
...

so after about 0.06s you have gone from path = 3 to path = 7.

The solution is to create a new boolean variable which is called advance

boolean advance = false;

Now create a new method

void mousePressed(){
  advance = true;
}

Now in your draw method change the if statement conditions like this

//START SCREEN
if (path == 0) {
  image (StartScreen, 0, 0);
  if ((mouseX > 354) && (mouseX < 432) && (mouseY > 368) && (mouseY < 396) && (advance == true)) {
    advance = false;
    path = 1;
  }
}

//FIRST TEXT
else if (path == 1) {
  image (Text1, 0, 0);
  if ((mouseX > 385) && (mouseX < 445) && (mouseY > 412) && (mouseY < 437) && (advance == true)) { 
    advance = false;
    path = 2;
  }
}

You can ignore the following comments if you want to :)

You could also simplify your code by adding a new method to test the mouse coordinates like this

boolean isMouseInside(int lowX, int highX, int lowY, int highY) {
  return mouseX > lowX && mouseX < highX && mouseY > lowY && mouseY < highY);
}

Then you code becomes

//START SCREEN
if (path == 0) {
  image (StartScreen, 0, 0);
  if (isMouseInside(354, 432, 368, 396) && advance == true) {
    advance = false;
    path = 1;
  }
}

//FIRST TEXT
else if (path == 1) {
  image (Text1, 0, 0);
  if (isMouseInside(385, 445, 412, 437) && advance == true) { 
    advance = false;
    path = 2;
  }
}

Multiple if / if else statements can be replaced by the switch case statement like this

switch(path) {
//START SCREEN
case 0:
  image (StartScreen, 0, 0);
  if (isMouseInside(354, 432, 368, 396) && advance == true) {
    advance = false;
    path = 1;
  }
  break;

//FIRST TEXT
case 1:
  image (Text1, 0, 0);
  if (isMouseInside(385, 445, 412, 437) && advance == true) { 
    advance = false;
    path = 2;
  }
  break;
// case statments for 3-7

} // end of switch statement