# Mouse Press Redraw Loop

**URL:** <https://discourse.processing.org/t/mouse-press-redraw-loop/14555>\
**Category:** Coding Questions\
**Created:** [October 9, 2019, 6:08pm UTC](https://discourse.processing.org/t/mouse-press-redraw-loop/14555 "2019-10-09T18:08:10Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Killerherts](https://avatars.discourse-cdn.com/v4/letter/k/b19c9b/32.png) [@Killerherts](https://discourse.processing.org/u/Killerherts)\
**Post date:** [October 9, 2019, 6:08pm UTC](https://discourse.processing.org/t/mouse-press-redraw-loop/14555/1 "2019-10-09T18:08:10Z")

</div>

Thanks for taking the time to look at this, I am a beginner working on a racing game for a final project.  
My goal is to have the race start after a mouse or key press I was able to achieve this but my object jumps to the very last step. I was able to get them moving while showing every step of the way without a mousePress() action but when I attempt to incorporate this it jumps straight to the end of the race rather then showing iterations in-between.

```auto
//This Program Was Designed To Make 2 Shapes Race
float circle = 0;
float circle2 = 0;

void setup() {
  size(640, 480);//sets the size
  ellipseMode(CENTER);
  rectMode(CENTER);
  
}

void draw() 
{
  background(255); //sets background
  fill(255, 0, 0); //color circle 1
  ellipse(circle, 195, 40, 40); //draw circle 1
  fill(0, 255, 0); //color circle 2
  ellipse(circle2, 240, 40, 40); //draw circle 2
  if (mousePressed)
  {
    while (((circle+20) < width) && ((circle2 + 20) < width))
    {
      circle = circle +random(0, 5);
      circle2 = circle2 +random(0, 5);
      fill(255, 0, 0); //color circle 1
      ellipse(circle, 195, 40, 40); //draw circle 1
      fill(0, 255, 0); //color circle 2
      ellipse(circle2, 240, 40, 40); //draw circle 2
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 9, 2019, 6:57pm UTC](https://discourse.processing.org/t/mouse-press-redraw-loop/14555/2 "2019-10-09T18:57:11Z")

</div>

Get rid of the while loop: draw() updates the screen only once at its end and not throughout.

Instead use the fact that draw() in itself loops 60 times per second

Also set a boolean variable to true once the mouse is pressed. Evaluate it to check if you move your players

---

<div class="post-metadata">

**Author:** ![Killerherts](https://avatars.discourse-cdn.com/v4/letter/k/b19c9b/32.png) [@Killerherts](https://discourse.processing.org/u/Killerherts)\
**Post date:** [October 9, 2019, 7:15pm UTC](https://discourse.processing.org/t/mouse-press-redraw-loop/14555/3 "2019-10-09T19:15:29Z")

</div>

How your are explaining it is how I originally understood it but the issue I was left with was having to hold my mouse click down for the entirety of the race. I am guessing that this has something to do with my go variable.

```auto
//This Program Animates A Shape and makes Them race to the edge of screen
float circle = 0; //startX 1
float circle2 = 0;//startX 2
boolean go = false;//has mouse been clicked
void setup() {
  size(640, 480);
  frameRate(60);
}

void draw()
{
  background(255);//background color
  ellipseMode(CENTER);
  rectMode(CENTER);
  fill(255, 0, 0);//color player 1
  ellipse(circle, 220, 40, 40);//draw our first player
  fill(0, 255, 0);//color player 2
  ellipse(circle2, 240, 40, 40);//draw player 2
  if (mousePressed == true)//check to see if the race needs to begin
  {
    go = true;//set the race to begin
    if (go = true && circle < width && circle2 < width) //run race & check for screen edge finish
    {
      circle = circle + +random(0, 4);//make player 1 move
      circle2 = circle2 +random(0, 4);//make player 2 move
      fill(255, 0, 0);//color player 1
      ellipse(circle, 220, 40, 40);
      fill(0, 255, 0);
      ellipse(circle2, 240, 40, 40);
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 9, 2019, 7:19pm UTC](https://discourse.processing.org/t/mouse-press-redraw-loop/14555/4 "2019-10-09T19:19:25Z")

</div>

you had the two ifs within each other

separate them (first if sets **go** to true, second if evaluates **go** ):

```auto

//This Program Animates A Shape and makes Them race to the edge of screen

float circle = 0; //startX 1
float circle2 = 0;//startX 2

boolean go = false;//has mouse been clicked?

void setup() {
  size(640, 480);
  frameRate(60);
}

void draw()
{
  background(255);//background color
  ellipseMode(CENTER);
  rectMode(CENTER);
  fill(255, 0, 0);//color player 1
  ellipse(circle, 220, 40, 40);//draw our first player
  fill(0, 255, 0);//color player 2
  ellipse(circle2, 240, 40, 40);//draw player 2

  if (mousePressed)//check to see if the race needs to begin
  {
    go = true;//set the race to begin
  } // end of if !!!!!!!!!!!!!!!!!!!!!!!!!!!

  // 

  if (go && circle < width && circle2 < width)
  {
    //run race & check for screen edge finish
    circle = circle + +random(0, 4);//make player 1 move
    circle2 = circle2 +random(0, 4);//make player 2 move
    fill(255, 0, 0);//color player 1
    ellipse(circle, 220, 40, 40);
    fill(0, 255, 0);
    ellipse(circle2, 240, 40, 40);
  }
}
//

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 9, 2019, 7:22pm UTC](https://discourse.processing.org/t/mouse-press-redraw-loop/14555/5 "2019-10-09T19:22:01Z")

</div>

> [@Chrisir](#):
>
> if (mousePressed)

is the same as `if (mousePressed == true)`

* * *

Also, `if (go = true) ` is very wrong, you want `if (go == true) ` with two ==

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 9, 2019, 7:30pm UTC](https://discourse.processing.org/t/mouse-press-redraw-loop/14555/6 "2019-10-09T19:30:31Z")

</div>

besides, you draw the circles twice

correct:

```auto

//This Program Animates A Shape and makes Them race to the edge of screen

float circle = 0; //startX 1
float circle2 = 0;//startX 2

boolean go = false;//has mouse been clicked?

void setup() {
  size(640, 480);
  // frameRate(60);
  ellipseMode(CENTER);
  rectMode(CENTER);
}

void draw() {
  background(255);//background color

  fill(255, 0, 0);//color player 1
  ellipse(circle, 220, 40, 40);//draw our first player
  fill(0, 255, 0);//color player 2
  ellipse(circle2, 240, 40, 40);//draw player 2

  if (mousePressed) { //check to see if the race needs to begin
    go = true;//set the race to begin
  } // end of if !!!!!!!!!!!!!!!!!!!!!!!!!!!

  if (go && circle < width && circle2 < width) {
    //run race & check for screen edge finish
    circle = circle + +random(0, 4);//make player 1 move
    circle2 = circle2 +random(0, 4);//make player 2 move
  } // end of if
}// function
//

```