# Why does this code run as desired but the flow of colors seems backwards

**URL:** <https://discourse.processing.org/t/why-does-this-code-run-as-desired-but-the-flow-of-colors-seems-backwards/18149>\
**Category:** Coding Questions\
**Created:** [February 26, 2020, 5:14pm UTC](https://discourse.processing.org/t/why-does-this-code-run-as-desired-but-the-flow-of-colors-seems-backwards/18149 "2020-02-26T17:14:48Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [February 26, 2020, 5:14pm UTC](https://discourse.processing.org/t/why-does-this-code-run-as-desired-but-the-flow-of-colors-seems-backwards/18149/1 "2020-02-26T17:14:48Z")

</div>

I guess this is primarily a question about flow of the program – aka what’s going on under the hood. The code does run and mouse interaction is as desired, but I don’t understand why. Probably something simple I’m not seeing.

- Mouse over = **red** square

- Mouse over & mouse pressed = **sustained blue** square

- **Red & blue alternate** via on/off switch in mousePressed

- No mouse over = **gray** squares (neutral state)

I finally got this to work via an on/off switch.

**Now my only question is why??**

Color order seems like it should be **gray, then red, then blue.**

However, to get the desired effect the order is **blue, red, then gray**. The on/off effect is between the red and blue.

**But the code reads as though its switching between red and grays…** Seems counterintuitive…

Here is the working code:

```auto
int gridX = 3, gridY = gridX, many = gridX*gridY; // cells per row and column, # in total
Button [] myButtons = new Button [many]; // Button class array

void setup() {
  size (600, 600);

  int x = (width/gridX)/2, y = x, 
    w = width/gridX, h = w, off = 0;

  int k = 0;
  int colorValue = 30;
  int colorStep = int(255/many);

  for (int i = 0; i < gridX; i++) { 
    for (int i2 = 0; i2 < gridY; i2++) { 
      myButtons [k] = new Button ( x + i * (w+off), y + i2 * (h+off), 
        color (colorValue + (k*colorStep)), color (255, 0, 0), 
        color (0, 0, 255), width/gridX); 

      k++;
      println(colorValue + (k*colorStep));
    }
  }
}

void draw() {
  background (255);
  for (int i = 0; i < many; i++)  
    myButtons[i].display();
}

void mouseClicked() {
  for (int i = 0; i < many; i++)  
    myButtons[i].mousePressed();
}

```

CLASS /////////////////////////

```auto
class Button {
  float x, y;

  color grays; // grays
  color red; // red
  color blue; // blue

  float sz;

  boolean off = true;

  Button ( 
    float tempX, float tempY, 
    color tempColor1, color tempColor2, color tempColor3, float tempSz) {

    x = tempX;
    y = tempY;

    grays = tempColor1;
    red = tempColor2;
    blue = tempColor3;

    sz = tempSz;
  }

  boolean isOver() {
    return (mouseX > x - sz/2 && 
      mouseX < x + sz/2 &&
      mouseY > y - sz/2 &&
      mouseY < y + sz/2 );
  }

  void display() {
    stroke(255);
    strokeWeight(15);

    fill (blue);
    rectMode(CENTER);
    rect(x, y, sz, sz);

    if (off) { // the button switch, alternates red to blue when clicked
      if (isOver()) {
        fill (red);
        rect(x, y, sz, sz);
      } else {
        fill (grays);
        rect(x, y, sz, sz);
      }
    }
  }
  void mousePressed() { // on/off switch
    if (isOver()) {
      off = !off;
    }
  }
}

```

---

<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:** [February 26, 2020, 7:54pm UTC](https://discourse.processing.org/t/why-does-this-code-run-as-desired-but-the-flow-of-colors-seems-backwards/18149/2 "2020-02-26T19:54:22Z")

</div>

> [@debxyz](#):
>
> void mouseClicked() {

better mousePressed()

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [February 26, 2020, 9:04pm UTC](https://discourse.processing.org/t/why-does-this-code-run-as-desired-but-the-flow-of-colors-seems-backwards/18149/3 "2020-02-26T21:04:48Z")

</div>

Ok. Regarding mousePressed.  
But my question has to do with flow.

```auto
fill (blue); // seems like (grays) sh'd go here
    
    rectMode(CENTER);
    rect(x, y, sz, sz);
    

    if (off) { // the button switch, alternates red to blue when clicked
      if (isOver()) {
        fill (red);
        
        rect(x, y, sz, sz);
      } else {
        fill (grays); // seems like (blue) sh'd go here
        
        rect(x, y, sz, sz);
      }

```

---

<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:** [February 26, 2020, 9:08pm UTC](https://discourse.processing.org/t/why-does-this-code-run-as-desired-but-the-flow-of-colors-seems-backwards/18149/4 "2020-02-26T21:08:51Z")

</div>

I don’t know if I fully understand

One thing that can be discussed here:

It only **looks like** it’s switching between red and blue (when clicking) but in fact it’s between blue and gray.

You can see it, when you move the mouse away: it is either blue or gray permanently but not red.

reason: We have mouse over (red) only during the button is off, not when it’s on.

(blue is the default. It stays blue when not off)

```auto
    fill (blue); // blue is the default.
    rectMode(CENTER);
    rect(x, y, sz, sz);

    if (off) { // the button switch, alternates blue to gray when clicked (and not over)
      if (isOver()) {
        fill (red);
        rect(x, y, sz, sz);
      } else {
        fill (gray); // GRAY !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
        rect(x, y, sz, sz);
      } // This end else as in not mouseOver
    } // This ends if(off)

```

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [February 26, 2020, 9:12pm UTC](https://discourse.processing.org/t/why-does-this-code-run-as-desired-but-the-flow-of-colors-seems-backwards/18149/5 "2020-02-26T21:12:41Z")

</div>

Grays are the intended default. And the code runs showing the grays before any mouse over interaction. That is what I want.  
However, the way the code is written, with the blue appearing first, that doesn’t seem to make logical sense…

---

<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:** [February 26, 2020, 9:16pm UTC](https://discourse.processing.org/t/why-does-this-code-run-as-desired-but-the-flow-of-colors-seems-backwards/18149/6 "2020-02-26T21:16:49Z")

</div>

> [@debxyz](#):
>
> However, the way the code is written, with the blue appearing first, that doesn’t seem to make logical sense…

you start by boolean off = true;

in the function display() :

blue is the default. Because you say: fill (blue); without a condition

Then you say

```auto
    if (off) 
      fill (grays); 

```

It’s just how you implement the (off) variable

**Remark**

you can rewrite it like this

```auto
  void display() {
    stroke(255);
    strokeWeight(15);
    rectMode(CENTER);

    if (off) 
      fill (gray);
    else 
    fill (blue);

    if (isOver()) 
      fill (red);

    rect(x, y, sz, sz);
  }

```

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [February 26, 2020, 9:29pm UTC](https://discourse.processing.org/t/why-does-this-code-run-as-desired-but-the-flow-of-colors-seems-backwards/18149/7 "2020-02-26T21:29:22Z")

</div>

I copy/pasted this into my code but it changed the functionality.  
**The original code I posted runs properly with the intended intended mouse action.** I just don’t understand why because when I read the code it seems like the grays should be the first color listed and executed.

---

<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:** [February 26, 2020, 9:32pm UTC](https://discourse.processing.org/t/why-does-this-code-run-as-desired-but-the-flow-of-colors-seems-backwards/18149/8 "2020-02-26T21:32:47Z")

</div>

However did you notice how the buttons turn red even when the mouse is on the white lines between the buttons?

This is because you had strokeWeight(15); so the gaps between the buttons were not gaps but part of the button.

I use strokeWeight(1); and changed setup using offset again (which is the gap between the buttons)

Also I use 4 colors now for on / off and a different mouse over color for each = 4.

You will see only when you move the mouse away from a blue button

```auto

int gridX = 3, gridY = gridX, 
  many = gridX*gridY; // cells per row and column, # in total
Button [] myButtons = new Button [many]; // Button class array

void setup() {
  size (600, 600);

  int x = ((width/gridX)/2)+10, y = x, 
    w = (width/gridX)-20, h = w, 
    off = 10;

  int k = 0;
  int colorValue = 30;
  int colorStep = int(255/many);

  for (int i = 0; i < gridX; i++) { 
    for (int i2 = 0; i2 < gridY; i2++) { 
      //
      myButtons [k] = new Button ( 
        x + i * (w+off), y + i2 * (h+off), 
        color (colorValue + (k*colorStep)), 
        color (255, 0, 0), 
        color (0, 0, 255), w
        ); 

      k++;
      println(colorValue + (k*colorStep));
    }
  }
}

void draw() {
  background (255);
  for (int i = 0; i < many; i++)  
    myButtons[i].display();
}

void mousePressed() {
  for (int i = 0; i < many; i++)  
    myButtons[i].mousePressed();
}

/////////////////////////

class Button {
  float x, y;

  color gray; // grays
  color red; // red
  color blue; // blue

  float sz;

  boolean on = false;

  Button ( 
    float tempX, float tempY, 
    color tempColor1, color tempColor2, color tempColor3, 
    float tempSz) {

    x = tempX;
    y = tempY;

    gray = tempColor1;
    red = tempColor2;
    blue = tempColor3;

    sz = tempSz;
  }

  boolean isOver() {
    return (mouseX > x - sz/2 && 
      mouseX < x + sz/2 &&
      mouseY > y - sz/2 &&
      mouseY < y + sz/2 );
  }

  void display() {
    stroke(255);
    strokeWeight(1);
    rectMode(CENTER);

    fill (blue);

    if (on) {
      fill (blue); 
      if (isOver()) 
        fill (0, 0, 111);
    } else {
      fill (gray);
      if (isOver()) 
        fill (red);
    }

    rect(x, y, sz, sz);
  }

  void mousePressed() { // on/off switch
    if (isOver()) {
      on = !on;
    }
  }
}//class

//

```

---

<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:** [February 26, 2020, 9:35pm UTC](https://discourse.processing.org/t/why-does-this-code-run-as-desired-but-the-flow-of-colors-seems-backwards/18149/9 "2020-02-26T21:35:49Z")

</div>

> [@debxyz](#):
>
> when I read the code it seems like the grays should be the first color listed and executed.

Ah, I tried to explain this.

blue is the default. Because you say: fill (blue); without a condition

Then you say

```auto
    if (off) 
      fill (grays); 

```

It’s just how you implement the (off) variable.

You could also say:

```auto
 fill (grays); // without a condition
 if( ! off ) // if not off
    fill (blue);

```

OR

```auto

 if ( off )   
    fill (grays); 
   else fill (blue); // with else !!!!!!!!!!!!!!!!!!!!!!!!!!!!

```

but it’s clear how the code works and how processing executes it.

**Remark**

(You could also name the variable “on” and change everything. maybe clearer

```auto
 fill (grays); // without a condition: default 
 if( on ) 
    fill (blue);

```

)

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [February 26, 2020, 9:42pm UTC](https://discourse.processing.org/t/why-does-this-code-run-as-desired-but-the-flow-of-colors-seems-backwards/18149/10 "2020-02-26T21:42:21Z")

</div>

> [@Chrisir](#):
>
> ```auto
> fill (grays); // without a condition 
> if( ! off ) // if not off fill (blue);
> 
> ```

That makes sense. I’ll try that. Thank you!

---

<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:** [February 26, 2020, 9:44pm UTC](https://discourse.processing.org/t/why-does-this-code-run-as-desired-but-the-flow-of-colors-seems-backwards/18149/11 "2020-02-26T21:44:37Z")

</div>

Sorry that I could not be clearer in expressing it.

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [February 26, 2020, 9:47pm UTC](https://discourse.processing.org/t/why-does-this-code-run-as-desired-but-the-flow-of-colors-seems-backwards/18149/12 "2020-02-26T21:47:09Z")

</div>

No problem. It was probably a weird question to ask. I spent about 3 days off and on working on that, and even though it worked it didn’t look right.  
Your explanation is very clear.  
Thank you again!

---

<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:** [February 26, 2020, 9:51pm UTC](https://discourse.processing.org/t/why-does-this-code-run-as-desired-but-the-flow-of-colors-seems-backwards/18149/13 "2020-02-26T21:51:39Z")

</div>

This

```auto
 fill (grays); // without a condition: default
 if( ! off ) // if not off
    fill (blue);

```

same as

```auto
if ( off )   
    fill (grays); 
   else fill (blue); // with else !!!!!!!!!!!!!!!!!!!!!!!!!!!!

```