# Arranging an array of objects in a grid

**URL:** <https://discourse.processing.org/t/arranging-an-array-of-objects-in-a-grid/16969>\
**Category:** Coding Questions\
**Created:** [January 8, 2020, 11:03pm UTC](https://discourse.processing.org/t/arranging-an-array-of-objects-in-a-grid/16969 "2020-01-08T23:03:27Z")\
**Posts on this page:** 15\
**Page:** 2

<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:** [January 17, 2020, 8:28pm UTC](https://discourse.processing.org/t/arranging-an-array-of-objects-in-a-grid/16969/21 "2020-01-17T20:28:32Z")

</div>

@Chrisir Yes!!! That works! 😀 😀

And one last question for today…

Since the **background color bounces back and forth between 2 random colors** , I want to have a **completely different random color each time**. I added a randomly generated number to the mouseClicked statement (then placed at head of program too as a global variable) but get the same results – only 2 alternating colors.

Again, your thoughts most appreciated!

**mouseClicked() now looks like this:**

```auto
void mouseClicked() { 
  
  //int n = int(random(10, 200));
  
  // I want to change background color when I click mouse...
  if ( background == color( r1, g1, b1) ) { //!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    background = color(r2/n, g2/n, b2/n);
  } else {
    background = color(r1, g1, b1);
  }
}

```

---

<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:** [January 17, 2020, 8:32pm UTC](https://discourse.processing.org/t/arranging-an-array-of-objects-in-a-grid/16969/22 "2020-01-17T20:32:42Z")

</div>

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

The if in mouseClicked() is only there to check which color you currently have and choose the other one (toggle).

BUT for a pure random, the if is not needed.

Just say (untested):

```auto

void mouseClicked(){

    background = color(random(255), random(255), random(255));

}

```

- Besides, the usage of random at the beginning of your sketch is running only once. You need to repeat the random command as I just did.

---

<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:** [January 17, 2020, 8:36pm UTC](https://discourse.processing.org/t/arranging-an-array-of-objects-in-a-grid/16969/23 "2020-01-17T20:36:57Z")

</div>

NB: color stores r and g and b  
so you can simplify your code

**in the class**

you have this in the class

```auto

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

class Button {
  float x, y, w, h;
  color r;
  color g;
  color b;

```

No. You want

```auto

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

class Button {
  float x, y, w, h;
  color colRect;

```

**in the constructor**

you have this in the class / constructor

```
color tempR, color tempG, color tempB, 

```

doesn’t make sense

what you want is color tempColor

Then say `colRect=tempColor ;`

**Usage of fill**

`fill(colRect);`

---

<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:** [January 17, 2020, 8:42pm UTC](https://discourse.processing.org/t/arranging-an-array-of-objects-in-a-grid/16969/24 "2020-01-17T20:42:04Z")

</div>

Thank you @Chrisir!!! 😀 😀 😀  
That works perfectly. I was trying to figure out how to get new random numbers each time…

---

<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:** [January 17, 2020, 8:44pm UTC](https://discourse.processing.org/t/arranging-an-array-of-objects-in-a-grid/16969/25 "2020-01-17T20:44:52Z")

</div>

Thank you @Chrisir for pointing this out!! I will look at this some more, and follow up with any questions later.

---

<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:** [January 17, 2020, 8:45pm UTC](https://discourse.processing.org/t/arranging-an-array-of-objects-in-a-grid/16969/26 "2020-01-17T20:45:30Z")

</div>

NB: data type “color” stores r and g and b  
so you can simplify your code

---

<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:** [January 19, 2020, 10:05pm UTC](https://discourse.processing.org/t/arranging-an-array-of-objects-in-a-grid/16969/27 "2020-01-19T22:05:35Z")

</div>

Hi @Chrisir,

1. I made the changes as outlined above regarding the variable **color colRect** and it now looks as below. And I now understand where I went awry…

Thank you for your guidance with this! 😀

```auto
int gridX = 5; 
int gridY = 5;
int many = gridX*gridY; // cells per row and column, # in total

Button [] myButtons = new Button [many]; // declaring Button class array

int r1 = int(random(255));
int g1 = int(random(255));
int b1 = int(random(255));

color background = color ( r1, g1, b1) ; //!!!!!!!!!!!!!!!!!!!!!!!!

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

  int x = 40 + 50, y = x, // dist from screen border !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    w = 100, h = w, off = 5; // width and height of one cell, dist btwn cells

  int k = 0; // counter for button objects in array
  for (int i = 0; i < gridX; i++) { // counter for xpos on grid
    for (int i2 = 0; i2 < gridY; i2++) { // counter for ypos on grid
      myButtons [k] = new Button ( x + i * (w+off), y + i2 * (h+off), 
        w, h, 
        color (random(255), random(255), random(255)), // random colors
        color (random(255), random(255), random(255)), // new random colors when on / off toggle 
        random(50, 125)); // random sizes
      k++;
    }
  }
}
void draw() {

  background (background); //!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

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

void mouseClicked() { 
  
  background = color(random(255), random(255), random(255));
  
  }

void mousePressed() {

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

```

Button Class ///////////////////

```auto
class Button {
  float x, y, w, h;
  color colRect;
  color colRect2;
  float sz;
  boolean on = false; // button starts in OFF position

  Button (float tempX, float tempY, 
    float tempW, float tempH, 
    color tempColor, color tempColor2,
    float tempSz) {
    x = tempX;
    y = tempY;

    w = tempW;
    h = tempH;

    colRect = tempColor;
    colRect2 = tempColor2;
    
     sz = tempSz;
  }

  void display() {
    if (on) {
      fill (colRect2);
      noStroke();
    } else {
      fill (colRect);
      noStroke();
    }

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

  void click() {
    
    if (mouseX > x - sz/2 && // !!!!!!!!!!!!!!!!
      mouseX < x + sz/2 &&
      mouseY > y - sz/2 &&
      mouseY < y + sz/2 )

      on = !on; // toggle on / 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:** [January 20, 2020, 6:34am UTC](https://discourse.processing.org/t/arranging-an-array-of-objects-in-a-grid/16969/28 "2020-01-20T06:34:25Z")

</div>

Okay!!

You are not using w and h in the class. It’s only used in setup (). So you don’t have to pass w and h to the class and get rid of it in the class too.

Then inside the class you could have a mouse over effect so that the rect highlights when mouse is over without pressing it (hover)

---

<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:** [January 20, 2020, 11:48pm UTC](https://discourse.processing.org/t/arranging-an-array-of-objects-in-a-grid/16969/29 "2020-01-20T23:48:52Z")

</div>

I had wondered about the w and h…  
But have now deleted in the class to no ill effect.

And have **added a mouse over effect** function in the class, replacing the click function. A nicer interaction than clicking!

So it now looks like this:  
/////////////////////////////////////////////////

```auto
int gridX = 5; 
int gridY = 5;
int many = gridX*gridY; // cells per row and column, # in total

Button [] myButtons = new Button [many]; // declaring Button class array

int r = int(random(255));
int g = int(random(255));
int b = int(random(255));

color background = color ( r, g, b) ; 

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

  int x = 40 + 50, y = x, // dist from screen border
    w = 100, h = w, off = 5; // width and height of one cell, dist btwn cells

  int k = 0; // counter for button objects in array
  for (int i = 0; i < gridX; i++) { // counter for xpos on grid
    for (int i2 = 0; i2 < gridY; i2++) { // counter for ypos on grid
      myButtons [k] = new Button ( x + i * (w+off), y + i2 * (h+off), 
        color (random(255), random(255), random(255)), // random colors
        color (random(255), random(255), random(255)), // new random colors when on / off toggle 
        random(50, 125)); // random sizes
      k++;
    }
  }
}
void draw() {

  background (background);

  for (int i = 0; i < many; i++) 
    myButtons[i].mouseOver();

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

void mouseClicked() { 

  background = color(random(255), random(255), random(255));
}

```

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

```auto
class Button {
  float x, y;
  color colRect;
  color colRect2;

  float sz;
  boolean off = true; // button starts in OFF position

  Button ( 
    float tempX, float tempY, 
    color tempColor, color tempColor2, float tempSz) {

    x = tempX;
    y = tempY;

    colRect = tempColor;
    colRect2 = tempColor2;

    sz = tempSz;
  }

  void display() {
    if (off) {
      fill (colRect);
      noStroke();
    } else {
      fill (colRect2);
      noStroke();
    }

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

  void mouseOver() {

    if (mouseX > x - sz/2 && 
      mouseX < x + sz/2 &&
      mouseY > y - sz/2 &&
      mouseY < y + sz/2 ) {

      off = false;
    } else {
      off = true;
    }
  }
}

```

Thank you @Chrisir for your guidance on this! 😁

---

<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:** [January 23, 2020, 11:27am UTC](https://discourse.processing.org/t/arranging-an-array-of-objects-in-a-grid/16969/30 "2020-01-23T11:27:12Z")

</div>

But can you combine a mouseOver effect AND a permanent change of color when you click on a cell?

---

<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:** [January 24, 2020, 10:28pm UTC](https://discourse.processing.org/t/arranging-an-array-of-objects-in-a-grid/16969/31 "2020-01-24T22:28:21Z")

</div>

This below renders permanent color change to button when mouseOver and mousePressed.

QUESTION #1 – **Though am trying – without success – to get a new random color each time with each mousePressed on same button.** As code currently runs I can change each button color only one time. I would like to be able to change the button color more than once.

Do I need to **create an additional function to generate new random colors** and integrate that new function into the mousePressed function?

QUESTION #2 – And then additionally, one step further, if I want **ALL of the buttons to change** color randomly, with a mousePressed, would that require setting up another counter to iterate through the number of buttons?

```auto
int gridX = 5; 
int gridY = 5;
int many = gridX*gridY; // cells per row and column, # in total

Button [] myButtons = new Button [many]; // declaring Button class array

color bgColor = color (random(255), random(255), random(255));
color color2; // new random color for mouseOver each time mouse is pressed 

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

  color2 = color (random(255), random(255), random(255));

  int x = 40 + 50, y = x, // dist from screen border
    w = 100, h = w, off = 5; // width and height of one cell, dist btwn cells

  int k = 0; // counter for button objects in array
  for (int i = 0; i < gridX; i++) { // counter for xpos on grid
    for (int i2 = 0; i2 < gridY; i2++) { // counter for ypos on grid
      myButtons [k] = new Button ( x + i * (w+off), y + i2 * (h+off), 
        color (random(255), random(255), random(255)), // random colors
        color2, // new random color when mousePressed 
        random(50, 125)); // random sizes
      k++;
    }
  }
}
void draw() {

  background (bgColor);
  //color2 = color (random(255), random(255), random(255));
  /*for (int i = 0; i < many; i++) 
   myButtons[i].mouseOver();*/

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

void mousePressed() { 

  bgColor = color(random(255), random(255), random(255));

  if (mousePressed) {
    color2 = color (random(255), random(255), random(255));

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

```

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

```auto
class Button {
  float x, y;
  color color1;
  color color2;

  float sz;
  boolean off = true; // button starts in OFF position

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

    x = tempX;
    y = tempY;

    color1 = tempColor1;
    color2 = tempColor2;

    sz = tempSz;
  }

  void display() {
    if (off) {
      fill (color1);
      noStroke();
    } else {
      fill (color2);
      noStroke();
    }

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

  void mouseOver() {

    if (mouseX > x - sz/2 && 
      mouseX < x + sz/2 &&
      mouseY > y - sz/2 &&
      mouseY < y + sz/2 ) {

      off = false;
    } else {
      off = true;
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [January 25, 2020, 7:09am UTC](https://discourse.processing.org/t/arranging-an-array-of-objects-in-a-grid/16969/32 "2020-01-25T07:09:45Z")

</div>

first only a reformat and change to have 2 colors set

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

color bgColor = color (random(255), random(255), random(255));

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

void setup_myButtons() {
  int x = 40 + 50, y = x, // dist from screen border
    w = 100, h = w, off = 5; // width and height of one cell, dist between cells
  int k = 0; // counter for button objects in array
  for (int i = 0; i < gridX; i++) { // counter for xpos on grid
    for (int i2 = 0; i2 < gridY; i2++) { // counter for ypos on grid
      myButtons [k] = new Button ( x + i * (w+off), y + i2 * (h+off), 
        color (random(255), random(255), random(255)), // random colors
        color (random(255), random(255), random(255)), // new random color when mousePressed 
        random(50, 125)); // random sizes
      k++;
    }
  }
}

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

void mousePressed() { 
  // bgColor = color(random(255), random(255), random(255));
  for (int i = 0; i < many; i++) myButtons[i].mouseOver(); // set ON OFF fill color select
}

//
class Button {
  float x, y;
  color color1,color2;
  float sz;
  boolean off = true; // button starts in OFF position

  Button ( float tempX, float tempY, color tempColor1, color tempColor2, float tempSz) {
    x = tempX;
    y = tempY;
    color1 = tempColor1;
    color2 = tempColor2;
    sz = tempSz;
  }

  void display() {
    noStroke();
    if (off) fill (color1);
    else fill (color2);
    rectMode(CENTER);
    rect(x, y, sz, sz);
  }

  void mouseOver() {
    if (mouseX > x - sz/2 && mouseX < x + sz/2 &&
      mouseY > y - sz/2 && mouseY < y + sz/2 ) off = ! off; // toggle
  }
}

```

now for further change ( operation example keyboard )  
to set class memory variable color2

generally there are 2 ways,  
?bad? just write:

```auto
void keyPressed() {
  if ( key == 's' ) for (int i = 0; i < many; i++) myButtons[i].color2 = color(random(255), random(255), random(255)); // see only if off == false
}

```

?good?

```auto

  void set_new_random_color2() {
    color2 = color(random(255), random(255), random(255));
  }
  
} // end class

void keyPressed() { // ______________________________ OPERATION
  if ( key == 's' ) for (int i = 0; i < many; i++) myButtons[i].set_new_random_color2(); // see only if off == false
}

```

---

<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:** [January 25, 2020, 10:12am UTC](https://discourse.processing.org/t/arranging-an-array-of-objects-in-a-grid/16969/33 "2020-01-25T10:12:41Z")

</div>

Each button/ cell could have 3 colors:

Normal  
Mouseover  
And after a click

You could make a gradient of gray for normal color : each cell a bit more gray / darker than the next

Then on mouse over color 2.  
And when clicked color 3.

These should not be random color but reflect the functionality: a selected cell would look brighter?

Next you could try to make them screen buttons with a functionality. Eg the Buttons of a calculator with numbers and plus

---

<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:** [January 25, 2020, 7:53pm UTC](https://discourse.processing.org/t/arranging-an-array-of-objects-in-a-grid/16969/34 "2020-01-25T19:53:40Z")

</div>

Thank you very much @kll!! That works great!!  
It was also interesting to see how you wrote the **void setup\_myButtons() function**.  
I surmised you did that for better readability / clarity **versus** functionality.  
Thank you again!  
😀 😀 😀

---

<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:** [January 25, 2020, 8:23pm UTC](https://discourse.processing.org/t/arranging-an-array-of-objects-in-a-grid/16969/35 "2020-01-25T20:23:17Z")

</div>

Thank you @Chrisir for these suggested directions to explore next.  
And so I think I should start 2 new projects to explore each direction separately.

Your feedback has been extremely helpful!!!  
😀

[Previous page](https://discourse.processing.org/t/arranging-an-array-of-objects-in-a-grid/16969.md?page=1)