How to replace an image with another image when mouse is pressed?

zeobat

Hello! completely new to processing here, having started it for a university module. I have created a really simple code for a an image of a balloon that changes to a picture of a "pop" when it is pressed, however I'm having trouble with replacing the image, it simply ends up overlaying it? similarly, I have tried to code my sketch so that the dimensions of the image has to be clicked on for the image to change, but my code annoyingly just lets you click anywhere in the sketch and it changes. Any sort of help would be much appreciated! thank you!

                    PImage balloon;
                    PImage balloonPop; 
                    float r1; // 
                    float r2; //
                    void setup() { //
                      background(255, 204, 0); 
                      size(1200, 700); 
                      balloon = loadImage("processingballoon.png"); 
                      balloonPop = loadImage("processingballoon2.png");
                      r1 = random(width); 
                      r2 = random(height); 
                    }
                    void draw() {
                      image(balloon, r1, r2);} //


                    void mousePressed(){
                      println(mouseX,mouseY); 
                     if (mouseX > r1  && mouseX < (r1 + balloon.width) && mouseY > r2 && mouseY < (r2 + balloon.height )); 
                    {
                    background(255, 204, 0);
                    image(balloonPop,r1,r2);
                    }
                     }

Chrisir

Hi and welcome to the forum!

In processing you can use ctrl-t to get better indents automatically

Now, your code is not bad.

But draw() runs on and on so balloon is always displayed.

The function mousePressed() is only called once per click so the popping image only appears briefly.

What you could do

To avoid that create a new variable, before setup() say boolean hasPopped=false; to indicate that the balloon is intact.

Now in draw() all the drawing takes place to make it permanent and not only briefly.

So, in draw() say

if(hasPopped==true) 
    image(balloonPop); 
    else image(balloon);

That’s doing the drawing but it knows what to draw based on hasPopped, our famous marker/ flag variable.

In mousePressed() just inside the if-clause write hasPopped=true; to store permanently that the situation has changed.

Your if-clause

Regarding the utter disaster of your if-clause: it’s caused by the ; at the end of if.

• The ; separates the if from the entire {...} section.

So delete the bad ; here.

Okay?

Best, Chrisir ;-)

zeobat

thank you so much you are a star! works perfectly now!

Chrisir

Great! Well done!

Chrisir

If you like hit ctrl-t and post your entire new version here for others.

zeobat

PImage balloon;  
PImage balloonPop; 
boolean hasPopped=false;
float r1; 
float r2; 
void setup() { 
  background(255, 204, 0); 
  size(1200, 700); //dimensions for the sketch window
  balloon = loadImage("processingballoon.png"); 
  balloonPop = loadImage("processingballoon2.png");
  r1 = random(width); 
  r2 = random(height); 
}
void draw() {

if(hasPopped==true)image(balloonPop,r1,r2); 
else image(balloon,r1,r2); }


void mousePressed(){
  println(mouseX,mouseY);
 if (mouseX > r1  && mouseX < (r1 + balloon.width) && mouseY > r2 && mouseY < (r2 + balloon.height )) 
{hasPopped=true;
background(255, 204, 0);
image(balloonPop,r1,r2);
}
 }

zeobat

Chrisir , I also was wondering how i could develop the code further by having another balloon image generate in a random location in the sketch after the initial balloon is popped and disappears? kind of like a balloon popping game? thank you again!

Chrisir

Thank you very much!

Ctrl-t has not happened

You can delete line 25

To make a moving balloon, line 24 would go to the beginning of draw with a color stored in a color variable which is then changed in line 24

The inner brackets () in line 22 are not necessary

Chrisir

if(hasPopped==true)

can be shortened to

if(hasPopped)

zeobat

PImage balloon;  
PImage balloonPop; 
boolean hasPopped=false;
float r1; 
float r2; 
float yellow;

void setup() { 
  yellow = color(255, 204, 0); 
  size(1200, 700); 
  balloon = loadImage("processingballoon.png"); 
  balloonPop = loadImage("processingballoon2.png");
  r1 = random(width); 
  r2 = random(height);
}
void draw() {
  background(255, 204, 0);
  if (hasPopped)image(balloonPop, r1, r2); 
  else image(balloon, r1, r2);
}


void mousePressed() {
  println(mouseX, mouseY);
  if (mouseX > r1  && mouseX < r1 + balloon.width && mouseY > r2 && mouseY < r2 + balloon.height ) 
  {
    hasPopped=true;
    background(yellow);
  }
}

do you mean like this? I feel I have definitely got something wrong, sorry!

Chrisir

Excellent, well done!

first regarding your background I have this version, using two fixed colors yellow and red and one currentColor that gets used by background. When I want to change the background color I say currentColor = red; or currentColor = yellow;. So again it's storing data or situation and using / applying it. Both storing and applying are separate.

I also made line breaks in the if-clauses in line 18 and 25 and some empty lines for readability. It's a matter of taste but in the long run readability is what you should aim for in programming the most.

PImage balloon;  
PImage balloonPop; 

boolean hasPopped=false;

float r1; 
float r2; 

color yellow  = color(255, 204, 0);
color red = color(255, 0, 0);  
color currentColor=yellow;

void setup() { 

  size(1200, 700);

  balloon = loadImage("processingballoon.png"); 
  balloonPop = loadImage("processingballoon2.png");

  r1 = random(width); 
  r2 = random(height);
}

void draw() {
  background(currentColor);

  if (hasPopped)
    image(balloonPop, r1, r2); 
  else image(balloon, r1, r2);
}

// ------------------------------------------------------
// Inputs: 

void mousePressed() {
  println(mouseX, mouseY);

  if (mouseX > r1  &&
    mouseX < r1 + balloon.width && 
    mouseY > r2 && 
    mouseY < r2 + balloon.height) {
    hasPopped=true;
    currentColor=red;
  }
}
//

Chrisir

I realize that I overlooked your question:

I also was wondering how i could develop the code further by having another balloon image generate in a random location in the sketch after the initial balloon is popped and disappears? kind of like a balloon popping game? thank you again!

That's a good question.

Try to rephrase the question into a concept

Please think it through more thoroughly. What exactly do you want to happen after the balloon exploded? Have a small message that appears "Play again"? Or do you want it so that the next balloon appears immediately (popped balloon would flash only briefly that would look lame).

Programming is also about having a clear step by step concept and to fill out the gaps in a vague expression from the customer like "by having another balloon image".

Try to rephrase the question into a concept.

But let's see. Best would be

• as soon as balloon pops, set a timer and display the popped balloon for 1.2 seconds or so (random time duration?) and
• then we want to reset hasPopped (to what?) and also currentColor (to what?)
• so that the old image and the old background is back again.

Also we want to reset / set again r1 and r2 - to what?

(By convention they should better be called x1 and y1 by the way.)

Please try to go that path and we'll help if you need more.

Timer

OK, a word to the timer. A timer is like a stop watch. When the balloon pops, you start the stop watch (set a variable timerStart) and when 1.2 seconds have passed the time is up and you want to reset the balloon to intact.

We use millis() which is initially 0 and endlessly goes up during the run of the sketch (read: milliseconds since I started the sketch). We don't really care how big millis is since we just use the difference between now (millis()) and the time we started the timer (where we copied the former current millis into the variable timerStart). Don't worry, you'll get used to it. Remark: 1.2 seconds are 1200 milliseconds.

Here is one piece of the code:

// check if time is up 
if (millis()-timerStart > 1200) {
  // time is up 
  println("time is up");
  // do something....................
}

before setup() say int timerStart;

and in mousePressed() say

// start the timer 
timerStart=millis();

As you can see, I left some things out for you to solve e.g.

• where do these lines belong into my code and
• what do I have to do where it says // do something..................... ;-)

Best, Chrisir

GoToLoop

if (hasPopped) image(balloonPop, r1, r2); is my favorite style, as long as the whole line isn't too long. :P

Chrisir

;-)

next step is to have a balloon that slowly moves up and bit sideways. It would be harder to hit with the mouse.

Chrisir

in the mean time I made a version that shows one balloon after the other and measures your reaction time. My record is around 550 milliseconds.

zeobat

PImage balloon;  
PImage balloonPop; 
int timerStart;
boolean hasPopped=false;

float r1; 
float r2; 

color yellow  = color(255, 204, 0);
color red = color(255, 0, 0);  
color currentColor=yellow;

void setup() { 

  size(1200, 700);

  balloon = loadImage("processingballoon.png"); 
  balloonPop = loadImage("processingballoon2.png");

  r1 = random(width); 
  r2 = random(height);
}

void draw() {
  background(currentColor);

  if (hasPopped)
    image(balloonPop, r1, r2); 
  else image(balloon, r1, r2);

  if (millis()-timerStart > 1200) {

    println("time is up");
    hasPopped=false;
    currentColor=yellow;
  }
}

// ------------------------------------------------------
// Inputs: 

void mousePressed() {
  // start the timer 
  timerStart=millis();
  println(mouseX, mouseY);

  if (mouseX > r1  &&
    mouseX < r1 + balloon.width && 
    mouseY > r2 && 
    mouseY < r2 + balloon.height) {
    hasPopped=true;
    currentColor=red;
  }
}
//

I got it working,thank you for the tips! The balloon 'pops' and then re-appears soon after it is pressed, perfect! :) Now to figure out how to make it re-appear in a different location in the sketch every time... :-? your version also sounds interesting!

Chrisir

Look at lines 20 and 21

Also line 44 could be after line 52

also the section line 31 to 36 applies only when the ballon is popped, right?

zeobat

hello again! I have figured out how to make the balloon move to a random position when clicked/popped, however, about 3 or 4 clicks in, it completely disappears off of the screen! Is this to do with the balloon leaving the boundaries of the sketch, or something else?

    PImage balloon;  
    PImage balloonPop; 
    int timerStart;
    boolean hasPopped=false;

    float x1; 
    float y1; 
    float nextX;
    float nextY;


    color yellow  = color(255, 204, 0);
    color blue = color(0, 0, 255);  
    color currentColor=yellow;

    void setup() { 

      size(1200, 700);
      balloon = loadImage("processingballoon.png"); 
      balloonPop = loadImage("processingballoon2.png");

      x1 = random(width); 
      y1 = random(height);
    }

    void draw() {
      background(currentColor);
      println(hasPopped);
      if (hasPopped) {

        image(balloonPop, x1, y1); 
        if (millis()-timerStart > 1200) {
          nextX = random(height);
          nextY = random(width);
          x1=nextX;
          y1 = nextY;
          println("time is up");
          hasPopped=false;
          currentColor=yellow;
        }
      } else {

        image(balloon, x1, y1);
      }
    }

    // Inputs: 

    void mousePressed() {
      // start the timer 
      println(mouseX, mouseY);

      if (mouseX > x1  &&
        mouseX < x1 + balloon.width && 
        mouseY > y1 && 
        mouseY < y1 + balloon.height) {
        hasPopped=true;
        currentColor=blue;
        timerStart=millis();
      }
    }
    //

Chrisir

Line 22/23 is not perfect

You need to take into account the width and height of the image so it cannot disappear right or bottom of the screen

zeobat

solved it :) also added a video of moving clouds as the background and a click counter, so its really coming together. How would I go about making a reaction timer? i.e. when a certain number of balloons are clicked (20, for example) a message comes up showing how long in seconds it took for you to click them all and then restarts the game.

    import processing.video.*;
    Movie movie;
    PImage balloon;  
    PImage balloonPop; 
    PImage clouds;
    int timerStart;
    boolean hasPopped=false;
    int mouseClicks; 
    float x1; 
    float y1; 
    float nextX;
    float nextY;

    void setup() { 
      textAlign(RIGHT, TOP);
      textSize(60);
      size(1200, 700);
      balloon = loadImage("processingballoon.png"); 
      balloonPop = loadImage("processingballoon2.png");
      clouds = loadImage("clouds.jpg");
      movie = new Movie(this, "clouds.mp4");
      movie.loop();
      x1 = random(90, 1110); 
      y1 = random(233, 467);
    }
    void movieEvent (Movie movie) {
      movie.read(); // read new frames from movie
    }



    void draw() {
      image(movie, 0, 0);
      println(hasPopped);
      text("Balloons Popped:"+mouseClicks, 0, 0, width, height);
      if (hasPopped) {

        image(balloonPop, x1, y1); 
        if (millis()-timerStart > 200) {
          nextX = random(90, 1110);
          nextY = random(233, 467);
          x1=nextX;
          y1 = nextY;
          hasPopped=false;
        }
      } else {

        image(balloon, x1, y1);
      }
    }

    // Inputs: 

    void mousePressed() {

      {
        if (mouseButton == LEFT && mouseX > x1  &&
          mouseX < x1 + balloon.width && 
          mouseY > y1 && 
          mouseY < y1 + balloon.height) { 
          mouseClicks++;
        } else { 
          mouseClicks = 0;
        }
        println(mouseX, mouseY);

        if (mouseX > x1  &&
          mouseX < x1 + balloon.width && 
          mouseY > y1 && 
          mouseY < y1 + balloon.height) {
          hasPopped=true;

          timerStart=millis();
        }
      }
    }

Chrisir

You need a new timer variable like

timerStartPlayer=millis();

That starts at when the new Ballon appears intact

It stops when user popps it

You can then e.g. measure the shortest time, the longest / slowest time and the average.

You need also a balloon counter to count to 20

Show your attempt- there’s already a timer and you can use a similar approach for the new timer timerStartPlayer

zeobat

this is what i have so far, I set the counter to count down from 20 and to reset when it gets to 0. Im not too sure how to get the sketch to record and add up each time between every 'pop'.

    import processing.video.*;
    Movie movie;
    PImage balloon;  
    PImage balloonPop; 
    PImage clouds;
    int timerStart;
    boolean hasPopped=false;
    int mouseClicks=20; 
    float x1; 
    float y1; 
    float nextX;
    float nextY;
    int timerStartPlayer = 0;
    int time = 0;


    void setup() { 
      textAlign(RIGHT, TOP);
      textSize(60);
      size(1200, 700);
      balloon = loadImage("processingballoon.png"); 
      balloonPop = loadImage("processingballoon2.png");
      clouds = loadImage("clouds.jpg");
      movie = new Movie(this, "clouds.mp4");
      movie.loop();
      x1 = random(90, 1110); 
      y1 = random(233, 467);
    }
    void movieEvent (Movie movie) {
      movie.read(); // read new frames from movie
    }



    void draw() {
      image(movie, 0, 0);
      time = millis() - timerStartPlayer;
      text(time, 150, 0);
      text("Balloons Left:"+mouseClicks, 0, 0, width, height);
      if (hasPopped) {

        image(balloonPop, x1, y1); 
        if (millis()-timerStart > 200) {

          nextX = random(90, 1110);
          nextY = random(233, 467);
          x1=nextX;
          y1 = nextY;
          hasPopped=false;
        }
      } else {

        image(balloon, x1, y1);
      }
    }

    // Inputs: 

    void mousePressed() {

      {
        if (mouseButton == LEFT && mouseX > x1  &&
          mouseX < x1 + balloon.width && 
          mouseY > y1 && 
          mouseY < y1 + balloon.height && mouseClicks>0) 
        { 
          mouseClicks--;
        } else { 
          mouseClicks = 20;
        }
        println(mouseX, mouseY);

        if (mouseX > x1  &&
          mouseX < x1 + balloon.width && 
          mouseY > y1 && 
          mouseY < y1 + balloon.height) {
          hasPopped=true;

          timerStart=millis();

          timerStartPlayer = millis();
        }
      }
    }

Chrisir

before setup() :

int timerStartPlayer;
int timeItTookTheUserToReact; 

when the new intact Ballon appears :

timerStartPlayer=millis(); 

println(timerStartPlayer);

when user popps ballon:

timeItTookTheUserToReact = millis() - timerStartPlayer;
println(timeItTookTheUserToReact);

zeobat

Thank you so much for your help so far,its almost complete! I adapted it a little bit so that the reaction time is shown on the left corner of the sketch. The final step of my game is when the balloon count reaches 0, I want the words "Game Over" and the end reaction time to appear, and then the game restarts. However for some reason, it isn't working:

            import processing.video.*;
            Movie movie;
            PImage balloon;  
            PImage balloonPop; 
            PImage clouds;
            int timerStart;
            boolean hasPopped=false;
            int mouseClicks=20; 
            float x1; 
            float y1; 
            float nextX;
            float nextY;
            int timerStartPlayer;


            void setup() { 
              textAlign(RIGHT, TOP);
              textSize(60);
              size(1200, 700);
              balloon = loadImage("processingballoon.png"); 
              balloonPop = loadImage("processingballoon2.png");
              clouds = loadImage("clouds.jpg");
              movie = new Movie(this, "clouds.mp4");
              movie.loop();
              x1 = random(90, 1110); 
              y1 = random(233, 467);
            }
            void movieEvent (Movie movie) {
              movie.read(); // read new frames from movie
            }



            void draw() {
              image(movie, 0, 0);
              text(timerStartPlayer, 250, 0);
              text("Balloons Left:"+mouseClicks, 0, 0, width, height);
              if (hasPopped) {

                image(balloonPop, x1, y1); 
                if (millis()-timerStart > 200) {
                  nextX = random(90, 1110);
                  nextY = random(233, 467);
                  x1=nextX;
                  y1 = nextY;
                  hasPopped=false;
                }
              } else {

                image(balloon, x1, y1);
              }
            }

            // Inputs: 

            void mousePressed() {

              {
                if (mouseButton == LEFT && mouseX > x1  &&
                  mouseX < x1 + balloon.width && 
                  mouseY > y1 && 
                  mouseY < y1 + balloon.height && mouseClicks>0) 
                { 
                  mouseClicks--;
                } else { 
                  mouseClicks = 20;
                }


                if (mouseX > x1  &&
                  mouseX < x1 + balloon.width && 
                  mouseY > y1 && 
                  mouseY < y1 + balloon.height) {
                  hasPopped=true;

                  timerStart=millis();

                  timerStartPlayer = millis();
                  println(timerStartPlayer);
                }
                if (mouseClicks==0) 
                { 
                  background (0, 140, 228);
                  text("GAME OVER ", 600, 250);
                  text("reaction time:"+timerStartPlayer, 600, 450);
                }
              }
            }

Chrisir

Are you kidding?

As I said

• The function mousePressed() is only called once per click so the popping image only appears briefly. (or your game over screen)

• Now in draw() all the drawing takes place to make it permanent and not only briefly.

So as we did with hasPopped you need to set a marker in mousePressed() and act accordingly in draw() (your game over screen)

zeobat

sorry if my questions seem really dumb, I'm quite a slow learner but I'm slowly getting there, I appreciate your patience! I have got the gameover screen to work,and added a start screen using the same technique,but now I'm having difficulty resetting the timer (timerStartPlayer) at the start screen and back to 0 each time the game is reset after game over. I know that milis can't be 'reset' once the sketch has started, so should i make a class for the timer or is there an easier solution?

               import processing.video.*;
    Movie movie;
    PImage balloon;  
    PImage balloonPop; 
    PImage clouds;
    int timerStart;
    boolean hasPopped=false;
    boolean GameOver=false;
    boolean start=true;
    int mouseClicks=20; 
    float x1; 
    float y1; 
    float nextX;
    float nextY;
    int timerStartPlayer;


    void setup() { 
      textAlign(RIGHT, TOP);
      textSize(60);
      size(1200, 700);
      balloon = loadImage("processingballoon.png"); 
      balloonPop = loadImage("processingballoon2.png");
      clouds = loadImage("clouds.jpg");
      movie = new Movie(this, "clouds.mp4");
      movie.loop();
      x1 = random(90, 1110); 
      y1 = random(233, 467);
    }
    void movieEvent (Movie movie) {
      movie.read(); // read new frames from movie
    }

    void draw() {
      if (start==false) {
        image(movie, 0, 0);
        text(timerStartPlayer, 250, 0);
        text("Balloons Left:"+mouseClicks, 0, 0, width, height);
        if (hasPopped) {

          image(balloonPop, x1, y1); 
          if (millis()-timerStart > 200) {

            nextX = random(90, 1110);
            nextY = random(233, 467);
            x1=nextX;
            y1 = nextY;
            hasPopped=false;
          }
        } else {

          image(balloon, x1, y1);
        }
        if (mouseClicks==0) 
        {
          GameOver=true;
        }

        if (GameOver) {

          background (0, 140, 228);
          text("GAME OVER ", 600, 300);
          text("Reaction Time:"+timerStartPlayer, 600, 350);
        }
      } else {

        background (0, 140, 228);
        text("START GAME", 600, 300);
      }
    }

    // Inputs: 

    void mousePressed() {

      {
        if (mouseButton == LEFT && mouseX > x1  &&
          mouseX < x1 + balloon.width && 
          mouseY > y1 && 
          mouseY < y1 + balloon.height && mouseClicks>0) 
        { 
          mouseClicks--;
        } else { 
          mouseClicks = 20;
        }


        if (mouseX > x1  &&
          mouseX < x1 + balloon.width && 
          mouseY > y1 && 
          mouseY < y1 + balloon.height) {
          hasPopped=true;

          timerStart=millis();

          timerStartPlayer = millis();
        }

        if (GameOver=true && mousePressed)
        {
          GameOver=false;
        }
        if (start=true && mousePressed)
        {
          start=false;
        }
      }
    }

Chrisir

this is my version, with last time, best time (left upper corner) and current time (in the right upper corner) and a fancy countdown 3-2-1 Go

// Full Code for Experts


// balloons 
PImage balloon;  // intact 
PImage balloonPop; // popped
boolean hasPopped = false; // flag 

// position of balloon 
float r1; 
float r2; 

// colors (constants)
final color yellow  = color(255, 204, 0);
final color red     = color(255, 0, 0);
final color black   = color(0);
color currentColor  = yellow; // for background: yellow or red 

// timer for going back to intact balloon
int timerStart;

// timer for countdown and countdown number
int timerStartCountdown; 
int iCountdown; // countdown number for 3,2,1...

// variable for user best time etc. (reaction test)
float timerUserNeeded;
String textTimerUserNeeded="";
float bestTime=1000000; 

// ------------------------------------------------------
// The core functions

void setup() { 

  size(1200, 700);

  // load images 
  balloon = loadImage("processingballoon.png"); 
  balloonPop = loadImage("processingballoon2.png");

  // optional resize 
  balloon.resize(100, 0); // proportional resize 
  balloonPop.resize(100, 0);

  r1 = random(10, width-balloon.width-10); 
  r2 = random(10, height-balloon.height-10);

  fill(black); // black for text 

  // set user timer (reaction test)
  timerUserNeeded=millis();
}

void draw() {
  background(currentColor);

  // show status upper left corner (reaction test) 
  if (!textTimerUserNeeded.equals("")) {
    textSize(12);
    text(textTimerUserNeeded
      +"\nbest "
      +bestTime
      +".", 
      12, 16);
  }//if

  // two main situations 
  if (hasPopped) {
    // show popped balloon and countdown
    drawForHasPopped();
  }//if  
  else { 
    // show intact balloon
    drawForHasNotPopped();
  }//else
}//function 

// --------------------------------------------------------
// functions called from draw() 

void drawForHasPopped() {

  // balloon has popped 

  // show popped balloon
  image(balloonPop, r1, r2);

  // show countdown 
  textSize(209);
  textAlign(CENTER, CENTER); // center for x and y 
  text(iCountdown, width/2, height/2);
  textAlign(LEFT, BASELINE); // back to normal 

  // if timer for the countdown number is up
  if (millis()-timerStartCountdown > 1200/3) {
    // set timer again and decrease countdown 
    timerStartCountdown=millis();
    iCountdown--;
  }//if

  // if timer for the popped balloon is up
  if (millis()-timerStart > 1200) {
    // "time is up"
    // reset       
    hasPopped=false; 
    currentColor=yellow;
    r1 = random(10, width-balloon.width-10); 
    r2 = random(10, height-balloon.height-10);
    // timer (reaction test) 
    timerUserNeeded=millis();
  }//if
}

void drawForHasNotPopped() {

  // balloon has not popped 

  // show intact balloon
  image(balloon, r1, r2);
  // show running time (reaction test) 
  text(str((millis()-timerUserNeeded)/1000.0), 
    width-44, 16);
}

// ------------------------------------------------------
// Inputs: 

void mousePressed() {
  if (mouseX > r1  &&
    mouseX < r1 + balloon.width && 
    mouseY > r2 && 
    mouseY < r2 + balloon.height &&
    !hasPopped) {

    // take user time (reaction test)
    float userNeededTime=(millis()-timerUserNeeded)/1000.0;
    textTimerUserNeeded="User needed "
      +str(userNeededTime);
    // new best time
    if (userNeededTime<bestTime)
      bestTime=userNeededTime;

    // go to mode "balloon is popped" and set timer 
    hasPopped=true;
    currentColor=red;
    timerStart=millis();
    timerStartCountdown=millis();
    iCountdown=3;
  }//if
}// function 
//

Chrisir

you don't have to reset millis

just start timerStartPlayer at the right point in your code (you got that horrible wrong) with timerStartPlayer=millis();

and measure the time (you got that wrong too) when the balloon popps:

timeItTookTheUserToReact = millis() - timerStartPlayer;

this

 if (start=true

must be if (start==true with double == (or just if (start) )

Same if (GameOver=true

don't have that twice:

if (mouseButton == LEFT && mouseX > x1  &&
      mouseX < x1 + balloon.width && 
      mouseY > y1 && 
      mouseY < y1 + balloon.height && mouseClicks>0) 

Chrisir

Your draw is a mess.

You got several variables start gameOver haspopped that indicate different situations or screens.

Those are called states of a program.

Since only ONE variable is allowed to be true at one point in time, the are connected.

Hence, make ONE variable int state; that can have several values of type integer indicating the current situation.

the values could be start (let's say 0 ), gameover (ok, 1), gameRunningWithBallonIntact (2), gameRunningWithBallonPopped(3)

now your draw would be

void draw(){

    switch(state) {

        case 0:
        ....
        break; 

        case 1:
        ....
        break; 

        case 2:
        ....
        break; 

        case 3:
        ....
        break; 

    }

}

believe me, much better.

Instead of setting gameover or start now, delete all of them, just set state correctly throughout

Chrisir

zeobat

have tried puttingtimerStartPlayer=millis(); andtimeItTookTheUserToReact = millis() - timerStartPlayer; almost everywhere and can't get it to work :( maybe i should get some sleep never mind i got it!! (i think) thank you :)

Chrisir

hit ctrt-t,

can you post it again?

zeobat

I managed to get the timer to work, but i'm not familiar with utilising switch statements at all so i have definitely messed something up lol:

            `import processing.video.*;

            Movie movie;
            PImage balloon;  
            PImage balloonPop; 
            PImage startsign;
            PImage over;
            PImage clouds;
            int timerStart;
            boolean hasPopped=false;
            boolean GameOver=false;
            boolean start=true;
            int mouseClicks=20; 
            float x1; 
            float y1; 
            float nextX;
            float nextY;
            int timerStartPlayer;
            int timeItTookTheUserToReact;
            int state;


            void setup() { 
              textAlign(RIGHT, TOP);
              textSize(60);
              size(1200, 700);
              startsign = loadImage("start.jpg");
              balloon = loadImage("processingballoon.png"); 
              balloonPop = loadImage("processingballoon2.png");
              clouds = loadImage("clouds.jpg");
              over = loadImage("gameover.jpg");
              movie = new Movie(this, "clouds.mp4");
              movie.loop();
              x1 = random(90, 1110); 
              y1 = random(233, 467);
            }
            void movieEvent (Movie movie) {
              movie.read(); // read new frames from movie
            }

            void draw() {


              switch(state) {

              case 0:
                background (0, 140, 228);
                image(startsign, 220, 100);
                break; 


              case 1:
                background (0, 140, 228);
                image(over, 220, 100);
                text("Reaction Time:"+timeItTookTheUserToReact, 900, 550);
                break; 

              case 2:
                image(movie, 0, 0);
                text("Balloons Left:"+mouseClicks, 0, 0, width, height);
                image(balloonPop, x1, y1); 


                break; 

              case 3:
                image(balloon, x1, y1);
                break;
              }
              if (millis()-timerStart > 200) {

                nextX = random(90, 1110);
                nextY = random(233, 467);
                x1=nextX;
                y1 = nextY;
                state=3;
              }
            }

            // Inputs: 

            void mousePressed() {




              {
                if (mouseButton == LEFT && mouseX > x1  &&
                  mouseX < x1 + balloon.width && 
                  mouseY > y1 && 
                  mouseY < y1 + balloon.height && mouseClicks>0) 
                { 
                  state=2;
                  mouseClicks--;
                  timerStart=millis();
                  timeItTookTheUserToReact = millis() - timerStartPlayer;
                } else { 

                  mouseClicks = 20;
                }

                if (state==1 && mousePressed)
                {
                  state=3;
                }
                if (state==0 && mousePressed)
                {
                  state=3;
                }
              }
            }

                `

Chrisir

switch is really simple, it's just like a long if(...) ... else if (...) ... else if (...) ... clause

Chrisir

definitely you shouldn't have anything in draw that is outside of switch. Because to which state should it belong to?

Also you should have

  switch(state) {

        case 0:

in mousePressed as well : every mouse inputs happens in the context of a state and should be treated differently depending on state

zeobat

I kind of understand what you mean, but when i replace the if statements with the switch statements, I get all sorts of errors. do you have a small example for me to try and understand how it could work?

        import processing.video.*;

        Movie movie;
        PImage balloon;  //intact balloon image
        PImage balloonPop; //popped balloon image
        PImage startsign; //start image
        PImage over; //end image
        PImage clouds; //background 

        boolean hasPopped=false; //
        boolean GameOver=false; //
        boolean start=true; //
        int mouseClicks=20; //start click counter at 20

        //position of balloon
        float x1; 
        float y1; 
        float nextX; 
        float nextY; 

        int timerStartPlayer;
        int timeItTookTheUserToReact; //timer for reaction time
        int timerStart; // timer for going back to intact balloon

        int state;

        void setup() { 

          textAlign(RIGHT, TOP); 
          textSize(60);
          size(1200, 700); 
          //load images
          startsign = loadImage("start.jpg");
          balloon = loadImage("processingballoon.png"); 
          balloonPop = loadImage("processingballoon2.png");
          clouds = loadImage("clouds.jpg");
          over = loadImage("gameover.jpg");
          //load background animation
          movie = new Movie(this, "clouds.mp4");
          movie.loop();
          // set random position of balloon to appear in the sketch but not so it appears off screen
          x1 = random(90, 1110); 
          y1 = random(233, 467);
        }
        void movieEvent (Movie movie) { 
          movie.read(); // read new frames from movie
        }

        void draw() { 
          switch(state) {

          case 0:
            background (0, 140, 228); //blue background
            image(startsign, 220, 100); //display start image

            break; 

          case 1:
            mouseClicks=0;
            background (0, 140, 228); //blue background
            image(over, 220, 100); // display game over image
            text("Reaction Time:"+timeItTookTheUserToReact, 900, 550); //show time since new game began

            break; 

          case 2:
            image(movie, 0, 0);
            text("Balloons Left:"+mouseClicks, 0, 0, width, height);
            image(balloonPop, x1, y1); 

            break; 

          case 3:
            millis()-timerStart > 200;
            nextX = random(90, 1110);
            nextY = random(233, 467);
            x1=nextX;
            y1 = nextY;
            image(balloon, x1, y1);

            break;
          }
        }


        //Inputs: 

        void mousePressed() { 
          switch(state) {

          case 0:
            GameOver=true && mousePressed;
            GameOver=false;

            break;

          case 1:
            start=true && mousePressed;

            start=false;

            break;

          case 2:
            mouseClicks = 20;

            break;

          case 3:
            mousePressed && mouseX > x1  &&
              mouseX < x1 + balloon.width && 
              mouseY > y1 && 
              mouseY < y1 + balloon.height && mouseClicks>0; 
            hasPopped=true; 
            mouseClicks--;
            timerStart=millis(); 
            timeItTookTheUserToReact = millis() - timerStartPlayer;   
            break;
          }
        }

Chrisir

are you sticking with start (let's say 0 ), gameover (ok, 1), gameRunningWithBallonIntact (2), gameRunningWithBallonPopped(3)

then get rid of gameover, haspopped and start

here is an example:

//
// states
final int stateGame  = 0;  // consts
final int statePause = 1;
int state = statePause;    // current state

// ---------------------------------------------------------------

void setup() {
  // init (runs only once)
  size(800, 600);
} // func 

void draw() {

  // draw() runs on and on 

  switch (state) {

  case stateGame: 
    // Game
    handleStateGame();
    break; 

  case statePause:
    // Pause
    handleStatePause(); 
    break;

  default:
    // error
    println("Error number 939; unknown state : " 
      + state 
      + ".");
    exit();
    break;
  } // switch
  //
} // func 

// ------------------------------------------------------------

// functions for states - called from draw() 

void handleStateGame() {
  // Game
  background(11);
  fill(244, 3, 3); // red 
  text ("Game....", 210, 313);
  signHome(10, 100);
} // func 

void handleStatePause() {
  // Pause
  background(255);
  fill(244, 3, 3); // red 
  text ("Pause.... ", 210, 313);
  text ("Hit p to start ", 210, 385);
  signHome(width-70, 100);
} // func 

// ----------------------------------------
// keyboard input 

void keyPressed() {

  switch (state) {

  case stateGame: 
    // Game
    keyPressedForStateGame();
    break; 

  case statePause:
    // Pause
    keyPressedForStatePause(); 
    break;

  default:
    // error
    println("Error number 1039; unknown state : "
      + state 
      + ".");
    exit();
    break;
  } // switch
} // func 

// ----

void keyPressedForStateGame() { 
  if (key == CODED) 
  {
    if (keyCode == UP) {
      //
    } else if (keyCode == DOWN) {
      //
    }

    if (keyCode == LEFT) {
      //
    } else if (keyCode == RIGHT) {
      //
    } else {
      // do nothing
    } // else
  } //  if (key == CODED) {
  else 
  {
    // not CODED ---------------------- 
    if (key == 'p') {
      // Pause 
      state = statePause;
    } else {
      // do nothing
    } // else
  } // else not CODED
} // func

void keyPressedForStatePause() { 
  if (key == CODED) 
  {
    if (keyCode == UP) {
      //
    } else if (keyCode == DOWN) {
      // none
    }

    if (keyCode == LEFT) {
      //
    } else if (keyCode == RIGHT) {
      //
    } else {
      // do nothing
    } // else
  } //  if (key == CODED) {
  else 
  {
    // not CODED ---------------------- 
    if (key == 'p') {
      //
      state = stateGame;
    } else {
      // do nothing
    } // else
  } // else not CODED
} // func

// -------------------------------------------------------
// Mouse input

void mousePressed() {
  //
  switch (state) {

  case stateGame: 
    // Game
    mousePressedForStateGame();
    break; 

  case statePause:
    // Pause
    mousePressedForStatePause(); 
    break;

  default:
    // error
    println("Error number 1139; unknown state : " + state+".");
    exit();
    break;
  } // switch
} // func 

void mousePressedForStateGame() {
  if (dist(mouseX, mouseY, 10, 100) < 30 ) { 
    println ("Hit Game.");
  }
} // func 

void mousePressedForStatePause() {
  if (dist(mouseX, mouseY, width-70, 100) < 30 ) { 
    println ("Hit Pause.");
  }
} // func 

// -------------------------------------------------------
// Misc

void signHome(int x, int y) {
  // gives a sign for a house / home sign

  final int width1=6;
  final int height1=8;

  fill( 2, 255, 0 );
  strokeWeight(1);
  stroke ( 2, 255, 0 );
  noFill();
  x+=21;
  y+=14;
  triangle ( x-width1, y, 
    x, y-height1, 
    x+width1, y );
  rect(x-width1/2, y, width1, width1);
  rect(x-width1/4+1, y+height1/4+1, width1/4, width1/3);
  strokeWeight(1);
}

// =====================================================================

zeobat

using the example, I've made a bit of progress, but now the balloons now spin around the screen really fast instead of doing what they're meant to :/ just can't get my head around it

            import processing.video.*;

            Movie movie;
            PImage balloon;  //intact balloon image
            PImage balloonPop; //popped balloon image
            PImage startsign; //start image
            PImage over; //end image
            PImage clouds; //background 


            int mouseClicks=20; //start click counter at 20

            final int stateStart  = 0;  // consts
            final int stateEnd = 1;
            final int stateGameRunningWithBalloonIntact =2;
            final int stateGameRunningWithBalloonPopped =3;
            int state = 0;

            //position of balloon
            float x1; 
            float y1; 
            float nextX; 
            float nextY; 

            int timerStartPlayer;
            int timeItTookTheUserToReact; //timer for reaction time
            int timerStart; // timer for going back to intact balloon



            void setup() { 

              textAlign(RIGHT, TOP); 
              textSize(60);
              size(1200, 700); 
              //load images
              startsign = loadImage("start.jpg");
              balloon = loadImage("processingballoon.png"); 
              balloonPop = loadImage("processingballoon2.png");
              clouds = loadImage("clouds.jpg");
              over = loadImage("gameover.jpg");
              //load background animation
              movie = new Movie(this, "clouds.mp4");
              movie.loop();
              // set random position of balloon to appear in the sketch but not so it appears off screen
              x1 = random(90, 1110); 
              y1 = random(233, 467);
            }
            void movieEvent (Movie movie) { 
              movie.read(); // read new frames from movie
            }

            void draw() { 
              switch(state) {

              case 0:
                handleStateStart();

                break; 

              case 1:
                handleStateEnd();
                break; 

              case 2:

                handlestateGameRunningWithBalloonPopped();

                break; 

              case 3:
                handlestateGameRunningWithBalloonIntact();

                break;
              }
            }

            void handleStateEnd() {
              mouseClicks=0;
              background (0, 140, 228); //blue background
              image(over, 220, 100); // display game over image
              text("Reaction Time:"+timeItTookTheUserToReact, 900, 550); //show time since new game began
            }
            void handleStateStart() {
              background (0, 140, 228); //blue background
              image(startsign, 220, 100); //display start image
            }

            void handlestateGameRunningWithBalloonPopped() {
              image(movie, 0, 0);
              text("Balloons Left:"+mouseClicks, 0, 0, width, height);
              image(balloonPop, x1, y1);
            }
            void handlestateGameRunningWithBalloonIntact() {
              image(movie, 0, 0);
              text("Balloons Left:"+mouseClicks, 0, 0, width, height);
              if (millis()-timerStart > 200);
              nextX = random(90, 1110);
              nextY = random(233, 467);
              x1=nextX;
              y1 = nextY;
              image(balloon, x1, y1);
            }

            //Inputs: 

            void mousePressed() { 
              switch(state) {

              case 0:
                mousePressedForEnd();


                break;

              case 1:
                mousePressedForStart();

                break;

              case 2:
                mousePressedGameRunningWithBalloonPopped();

                break;

              case 3:
                mousePressedGameRunningWithBalloonIntact();
              }
            }
            void mousePressedForStart() {
              if (mousePressed);
              { 
                state=3;
              }
            }

            void mousePressedForEnd() {
              if (mousePressed);
              {
                state=3;
              }
            }

            void mousePressedGameRunningWithBalloonPopped() {
              mouseClicks = 20;
            }

            void mousePressedGameRunningWithBalloonIntact() {
              if (mousePressed && mouseX > x1  &&
                mouseX < x1 + balloon.width && 
                mouseY > y1 && 
                mouseY < y1 + balloon.height && mouseClicks>0);
              {
                state=2; 
                mouseClicks--;
                timerStart=millis(); 
                timeItTookTheUserToReact = millis() - timerStartPlayer;
              }
            }  

Chrisir

this:

  if (mousePressed);
  { 
    state=3;
  }

is wrong because of the semicolon in if (mousePressed);. The if clause ends with ; and

  { 
    state=3;
  }

is executed always

Chrisir

since mousePressedForStart() is called by mousePressed this :

 if (mousePressed)
      { 

is not necessary

in draw you have:

 switch(state) {

  case 0:
    handleStateStart();
    break; 

  case 1:
    handleStateEnd();
    break; 

but then you swapped start and end in mousePressed

void mousePressed() { 
  switch(state) {

  case 0:
    mousePressedForEnd();
    break;

  case 1:
    mousePressedForStart();
    break;

handlestateGameRunningWithBalloonIntact

in handlestateGameRunningWithBalloonIntact

 if (millis()-timerStart > 200);
  nextX = random(90, 1110);
  nextY = random(233, 467);
  x1=nextX;
  y1 = nextY;
  image(balloon, x1, y1);

you want

     if (millis()-timerStart > 200) {   // no semicolon!!!
          nextX = random(90, 1110);
          nextY = random(233, 467);
          x1=nextX;
          y1 = nextY;
      }
      image(balloon, x1, y1);

and so on.....

please proof read and debug.

you still need the timers, but not the booleans !

still a lot to do for you:

//import processing.video.*;

//Movie movie;
PImage balloon;  //intact balloon image
PImage balloonPop; //popped balloon image
PImage startsign; //start image
PImage over; //end image
PImage clouds; //background 

//boolean hasPopped=false; //
//boolean GameOver=false; //
//boolean start=true; //
int mouseClicks=20; //start click counter at 20

final int stateStart  = 0;  // consts
final int stateEnd = 1;
final int stateGameRunningWithBalloonIntact =2;
final int stateGameRunningWithBalloonPopped =3;
int state = 0;

//position of balloon
float x1; 
float y1; 

float nextX; 
float nextY; 

int timerStartPlayer;
int timeItTookTheUserToReact; //timer for reaction time
int timerStart; // timer for going back to intact balloon

void setup() { 

  textAlign(RIGHT, TOP); 
  textSize(60);
  size(1200, 700); 
  //load images
  startsign = loadImage("start.jpg");

  balloon = loadImage("processingballoon.jpg"); 
  balloonPop = loadImage("processingballoon2.jpg");

  clouds = loadImage("clouds.jpg");
  over = loadImage("gameover.jpg");
  //load background animation
  //movie = new Movie(this, "clouds.mp4");
  //movie.loop();
  // set random position of balloon to appear in the sketch but not so it appears off screen
  x1 = random(90, 1110); 
  y1 = random(233, 467);
}
//void movieEvent (Movie movie) { 
//  movie.read(); // read new frames from movie
//}

void draw() { 
  switch(state) {

  case 0:
    handleStateStart();
    break; 

  case 1:
    handleStateEnd();
    break; 

  case 2:
    handlestateGameRunningWithBalloonPopped();
    break; 

  case 3:
    handlestateGameRunningWithBalloonIntact();
    break;
  }//switch
}

void handleStateEnd() {
  mouseClicks=0;
  background (0, 140, 228); //blue background
  image(over, 220, 100); // display game over image
  text("Reaction Time:"+timeItTookTheUserToReact, 900, 550); //show time since new game began
}

void handleStateStart() {
  background (0, 140, 228); //blue background
  //  image(startsign, 220, 100); //display start image
  text("start", 220, 100); //display start image
}

void handlestateGameRunningWithBalloonPopped() {
  //image(movie, 0, 0);
  text("Balloons Left:"+mouseClicks, 0, 0, width, height);
  image(balloonPop, x1, y1);
}

void handlestateGameRunningWithBalloonIntact() {
  //image(movie, 0, 0);
  text("Balloons Left:"+mouseClicks, 0, 0, width, height);
  //if (millis()-timerStart > 200) {
  //  nextX = random(90, 1110);
  //  nextY = random(233, 467);
  //  x1=nextX;
  //  y1 = nextY;
  //}
  image(balloon, x1, y1);
}

//-----------------------------------------------------------------------
//Inputs: 

void mousePressed() { 
  switch(state) {

  case 0:
    mousePressedForEnd();
    break;

  case 1:
    mousePressedForStart();
    break;

  case 2:
    mousePressedGameRunningWithBalloonPopped();

    break;

  case 3:
    mousePressedGameRunningWithBalloonIntact();
  }
}
void mousePressedForStart() {
  if (mousePressed);
  { 
    state=3;
  }
}

void mousePressedForEnd() {
  if (mousePressed) {
    state=3;
  }
}

void mousePressedGameRunningWithBalloonPopped() {
  mouseClicks = 20;
}

void mousePressedGameRunningWithBalloonIntact() {
  if (mousePressed && mouseX > x1  &&
    mouseX < x1 + balloon.width && 
    mouseY > y1 && 
    mouseY < y1 + balloon.height && mouseClicks>0);
  {
    state=2; 
    mouseClicks--;
    timerStart=millis(); 
    timeItTookTheUserToReact = millis() - timerStartPlayer;
  }
}  
//-----------------------------------------------------------------------

zeobat

yay!!! all working!! :) let me know please if theres any other small mistakes but everything seems good to me. thanks so much!

                import processing.video.*;


                Movie movie;
                PImage balloon;  //intact balloon image
                PImage balloonPop; //popped balloon image
                PImage startsign; //start image
                PImage over; //end image
                PImage clouds; //background 

                int mouseClicks=20; //start click counter at 20

                final int stateStart  = 0;  // consts
                final int stateEnd = 1;
                final int stateGameRunningWithBalloonIntact =2;
                final int stateGameRunningWithBalloonPopped =3;
                int state = 0;

                //position of balloon
                float x1; 
                float y1; 

                float nextX; 
                float nextY; 

                int timerStartPlayer;
                int timeItTookTheUserToReact; //timer for reaction time
                int timerStart; // timer for going back to intact balloon

                void setup() { 

                  textAlign(RIGHT, TOP); 
                  textSize(60);
                  size(1200, 700); 
                  //load images
                  startsign = loadImage("start.jpg");

                  balloon = loadImage("processingballoon.png"); 
                  balloonPop = loadImage("processingballoon2.png");

                  clouds = loadImage("clouds.jpg");
                  over = loadImage("gameover.jpg");
                  //load background animation
                  movie = new Movie(this, "clouds.mp4");
                  movie.loop();
                  // set random position of balloon to appear in the sketch but not so it appears off screen
                  x1 = random(90, 1110); 
                  y1 = random(233, 467);
                }
                  void movieEvent (Movie movie) { 
                  movie.read(); // read new frames from movie
                 }

                void draw() { 
                  switch(state) {

                  case 0:
                    handleStateStart();
                    break; 

                  case 1:
                    handleStateEnd();
                    break; 

                  case 2:
                    handlestateGameRunningWithBalloonPopped();
                    break; 

                  case 3:
                    handlestateGameRunningWithBalloonIntact();
                    break;
                  }//switch
                }

                void handleStateEnd() {
                  mouseClicks=0;
                  background (0, 140, 228); //blue background
                  image(over, 220, 100); // display game over image
                  text("Reaction Time:"+timeItTookTheUserToReact, 900, 550); //show time since new game began
                }

                void handleStateStart() {
                  background (0, 140, 228); //blue background
                  image(startsign, 220, 100); //display start image
                }

                void handlestateGameRunningWithBalloonPopped() {
                  image(movie, 0, 0);
                  text("Balloons Left:"+mouseClicks, 0, 0, width, height);
                  image(balloonPop, x1, y1);
                  if (millis()-timerStart > 200) {
                    nextX = random(90, 1110);
                  nextY = random(233, 467);
                  x1=nextX;
                  y1 = nextY;
                  state = 3;
                }
                if (mouseClicks==0) {
                state=1;
                timerStartPlayer = millis(); }
                } 
                void handlestateGameRunningWithBalloonIntact() {
                  image(movie, 0, 0);
                  text("Balloons Left:"+mouseClicks, 0, 0, width, height);
                  image(balloon, x1, y1);
                  }



                //-----------------------------------------------------------------------
                //Inputs: 

                void mousePressed() { 
                  switch(state) {

                  case 0:
                    mousePressedForStart();
                    break;

                  case 1:
                    mousePressedForEnd();
                    break;

                  case 2:


                    break;

                  case 3:
                    mousePressedGameRunningWithBalloonIntact();
                  }
                }
                void mousePressedForStart() 
                    {state=3;    
                   }



                void mousePressedForEnd()
                    {state=3;
                    mouseClicks = 20;
                  }



                void mousePressedGameRunningWithBalloonIntact() {
                  if (mouseX > x1  &&
                    mouseX < x1 + balloon.width && 
                    mouseY > y1 && 
                    mouseY < y1 + balloon.height && mouseClicks>0)

                   {state=2; 
                    mouseClicks--;
                    timerStart=millis(); 
                    timeItTookTheUserToReact = millis() - timerStartPlayer;
                    }
                    else { mouseClicks = 20;}


                }  
                //-----------------------------------------------------------------------

Chrisir

hit ctrl-t

Chrisir

You are not using the constants:

stateStart  = 0;  // consts
final int stateEnd = 1;
final int stateGameRunningWithBalloonIntact =2;
final int stateGameRunningWithBalloonPopped =3;
int state = 0;

You can use them in draw() and mousePressed() instead of 0,1,2....

So code is better readable

Are you sure timerStartPlayer and timerStart are handled correctly??

zeobat

The timers are working as I want them to, but would you suggest a better place for them to go in the code?

On another related topic, do you have any suggestions or pointers as to how I would go about extending this app by connecting it to an Arduino?

Chrisir

it's horrible, so many mistakes...

in draw() these are swapped, 2 is intact, 3 is popped (following your constants), not vice versa:

  case 2:
    handlestateGameRunningWithBalloonPopped();
    break; 

  case 3:
    handlestateGameRunningWithBalloonIntact();

That's the natural order: first intact then popped. Not vice versa.

to avoid this kind of errors, use the constants instead of the numbers:

  case stateGameRunningWithBalloonIntact:
    handlestateGameRunningWithBalloonIntact();
    break; 

  case stateGameRunningWithBalloonPopped:
    handlestateGameRunningWithBalloonPopped();
    break; 

why do you have this?

why do you have this?

nextX = random(90, 1110);
nextY = random(233, 467);

I suggest

  nextX = random(0, width-balloon.width-10);
  nextY = random(0, height-balloon.height-10);

Remark

This

    nextX = random(90, 1110);
    nextY = random(233, 467);
    x1 = nextX;
    y1 = nextY;

can be

    x1 = random(90, 1110);
    y1 = random(233, 467);

(with changes to random from above)

Remark

Do you realize that when you click next to a balloon, mouseClicks goes back to 20? Do you want this? (if so, shouldn't you reset the reaction time counter?)

mousePressedForStart()

This

void mousePressedForStart() { state=3; }

shouldn't we say state=2; here (stateGameRunningWithBalloonIntact = 2;)

(probably you here compensate the mistake in draw(), making it all the more hard to read)

instead of state = 2 or state = 3 you want state = stateGameRunningWithBalloonIntact;

TIMER

in mousePressedForStart() :

You forgot to place this here too :

 timerStartPlayer = millis();  // TIMER 

because in my opinion, on first start timerStartPlayer is zero (you never set it to millis()), than he loads the movie and the images, which can take a lot of millis, then we show the start screen (more millis pass by!!!!), the ballons are shown and all these milliseconds are calculated as reaction time of the player. You make him slower than he is!!!

in the second round of the game (after the first 20 clicks) I think it's NOT better because of these lines in handlestateGameRunningWithBalloonPopped() :

  if (mouseClicks==0) {
    state=1;
    timerStartPlayer = millis();
  }

You are going to state end here then later to state start and the counter timerStartPlayer is all the time counting before the first balloon is shown.

Moreover:

During handlestateGameRunningWithBalloonPopped() with this line if(millis()-timerStart > 200) { you wait 200 millis before the next balloon is shown.

In this phase, the player can't react at all!!!! But the timer keeps on running. So the 200 millis are counted against him, making him appear slower than he is again. And 20x200 mills: 4000 - these are 4 seconds! That's unacceptable.

Testing

You really need a proper testing. Test yourself. Get a friend to test it, wait longer times on start and stop screen, measure the time roughly with your phone to check those obvious errors!

I can't believe you said, you're happy with your timers...

Chrisir

Chrisir

by connecting it to an Arduino?

best ask in the arduino section here in the processing forum.