# Start/Stop button | can't figure this out

**URL:** <https://discourse.processing.org/t/start-stop-button-cant-figure-this-out/3784>\
**Category:** Coding Questions\
**Created:** [September 24, 2018, 10:14am UTC](https://discourse.processing.org/t/start-stop-button-cant-figure-this-out/3784 "2018-09-24T10:14:20Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![SolDrakibane](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/soldrakibane/32/1810_2.png) [@SolDrakibane](https://discourse.processing.org/u/SolDrakibane)\
**Post date:** [September 24, 2018, 10:14am UTC](https://discourse.processing.org/t/start-stop-button-cant-figure-this-out/3784/1 "2018-09-24T10:14:21Z")

</div>

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)

```auto
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);
  }
}

```

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [September 24, 2018, 10:54am UTC](https://discourse.processing.org/t/start-stop-button-cant-figure-this-out/3784/2 "2018-09-24T10:54:58Z")

</div>

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:

```auto
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:

```auto
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:

```auto
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:

```auto
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

---

<div class="post-metadata">

**Author:** ![SolDrakibane](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/soldrakibane/32/1810_2.png) [@SolDrakibane](https://discourse.processing.org/u/SolDrakibane)\
**Post date:** [September 24, 2018, 11:10am UTC](https://discourse.processing.org/t/start-stop-button-cant-figure-this-out/3784/3 "2018-09-24T11:10:34Z")

</div>

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:

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

```

And

```auto
  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. 🙂