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

Processing Coding Questions
1

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:

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 /////////////////////////

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;
    }
  }
}
2 Likes
2

better mousePressed()

1 Like
3

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

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);
      }
1 Like
4

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)

    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)
1 Like
5

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…

1 Like
6

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

    if (off) 
      fill (grays);

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

Remark

you can rewrite it like this

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

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


    if (isOver()) 
      fill (red);


    rect(x, y, sz, sz);
  }
1 Like
7

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.

1 Like
8

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


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

//
1 Like
9

Ah, I tried to explain this.

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

Then you say

    if (off) 
      fill (grays);

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

You could also say:

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

OR


 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

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

)

2 Likes
10

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

2 Likes
11

Sorry that I could not be clearer in expressing it.

1 Like
12

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!

2 Likes
13

This

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

same as

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