Start/Stop button | can't figure this out

Processing Coding Questions
1

So, the code below creates a bullseye that moves from the middle to the right and starts at the left again and loops. When i click the Start button the bullseye moves, the text switches to Stop. When i click the button again nothing happens. When i click outside the button the text switches to Start and the bullseye stops.

What i want to know:

  • How can i click on the same button (rect) area again to execute a stop?
  • How can i make it so that when i press Stop the bullseye moves to width/2? (circleX from the code)
int 
  circleX, circleY, circleSize, 
  rectX, rectY, rectSize, 
  red, white, green;

boolean 
  start;

void setup() {
  size(500, 500); 
  smooth(8);
  background(5);
  circleX = width/2;
  circleY = height/2;
  circleSize = 40;
  rectX = width/2;
  rectY = height;
  rectSize = 80;
  red = color(255, 0, 0);
  white = color(255);
  green = color(0, 255, 0);
  start = false;
}

void draw() {
  noStroke();
  clear();
  button();
  bullseye();
  if (mousePressed) {
    if (mouseX > rectX-rectSize/2 && mouseX < rectX-rectSize/2 + rectSize &&
      mouseY > rectY-rectSize && mouseY < rectY-rectSize + rectSize/2) {
      start = true;
    } else {
      start = false;
    }
  }
}

void bullseye() {
  for (int circles = circleSize; circles > 0; circles -= 20) {
    fill(red);
    ellipse(circleX, circleY, circles, circles);
    fill(white);
    ellipse(circleX, circleY, circles-10, circles-10);
  }

// moves the bullseye
  if (start) {
    circleX = circleX + 5;
  } 
// after bullseye reaches the right side, start at the left side
  if (circleX > width) {
    circleX = 0;
  }
}

void button() {
  noStroke();
  fill(green);
  rect(rectX-rectSize/2, rectY-rectSize, rectSize, rectSize/2);
  fill(red);
  textSize(24);

  if (!start) {    
    text("Start", rectX-rectSize/3, rectY-rectSize+rectSize/3);
  } else if (start) {
    text("Stop", rectX-rectSize/3, rectY-rectSize+rectSize/3);
  } else if (!start) {
    text("Start", rectX-rectSize/3, rectY-rectSize+rectSize/3);
  }
}
1 Like
2

Hi SolDrakiBane,

You almost have all the logic in there!

You just need to separate 2 things:

  • The fact that you click on the button or not
  • The state of your game (Pause/Stop)

The logic would go this way:

  • if you click on the button there is 2 possibilities:
    • The state is “Play” and you should put it to “Stop”
    • The state is “Stop” and you should put it to “Play”

So you just need to change that part of your code:

if (mousePressed) {
  if (mouseX > rectX-rectSize/2 && mouseX < rectX-rectSize/2 + rectSize &&
    mouseY > rectY-rectSize && mouseY < rectY-rectSize + rectSize/2) {
    start = true;
  } else {
    start = false;
  }
}

to that:

if (mousePressed) {
  if (mouseX > rectX-rectSize/2 && mouseX < rectX-rectSize/2 + rectSize &&
    mouseY > rectY-rectSize && mouseY < rectY-rectSize + rectSize/2) {
    if (start) {
      start = false;
    } else {
      start = true;
    }
  }
}

Now for your second point, what you need to do is simply change your bullseye parameter when you set the state back to play. So the previous piece of code becomes:

if (mousePressed) {
  if (mouseX > rectX-rectSize/2 && mouseX < rectX-rectSize/2 + rectSize &&
    mouseY > rectY-rectSize && mouseY < rectY-rectSize + rectSize/2) {
    if (start) {
      start = false;
    } else {
      start = true;
      circleX = width/2;
    }
  }
}

Now it is not the best way to deal with this. Instead of having that piece of code inside your draw you should move it to the mousePressed() function that is called every time you press the mouse:

void mousePressed() {
  if (mouseX > rectX-rectSize/2 && mouseX < rectX-rectSize/2 + rectSize &&
    mouseY > rectY-rectSize && mouseY < rectY-rectSize + rectSize/2) {
    if (start) {
      start = false;
    } else {
      start = true;
      circleX = width/2;
    }
  }
}

There you go

2 Likes
3

Thank you very much for the explanation @jb4x . I’ve checked Coding Train trying to figure this out and managed to solve it aswel (a few minutes before i posted this) by doing this:

void mouseClicked() {
  if (mouseX > rectX-rectSize/2 && mouseX < rectX-rectSize/2 + rectSize &&
    mouseY > rectY-rectSize && mouseY < rectY-rectSize + rectSize/2) {
    start = ! start;
  }
}

And

  if (start) {
    circleX = circleX + 5;
  } else if (!start) {
    circleX = width/2;
  }

Once again thanks and i hope this post might help some other people out. :slight_smile:

2 Likes