# Precise placement of color in a grid of shapes

**URL:** https://discourse.processing.org/t/precise-placement-of-color-in-a-grid-of-shapes/39102
**Category:** Coding Questions
**Created:** [October 5, 2022, 4:19pm UTC](https://discourse.processing.org/t/precise-placement-of-color-in-a-grid-of-shapes/39102 "2022-10-05T16:19:38Z")
**Posts on this page:** 9
**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: [October 5, 2022, 4:19pm UTC](https://discourse.processing.org/t/precise-placement-of-color-in-a-grid-of-shapes/39102/1 "2022-10-05T16:19:38Z")

</div>

Hello!  
I am trying to work out how to implement more control of color placement within grid systems.

The very simple solution I’ve come up with so far (for one iteration of diagonal color placement) is partially successful in that the desired sections/locations are acknowledged (the background shows through).

However, the application of any styling to the rectangles–fill, stroke, strokeWeight–does not appear.  
I also tried enclosing the if-statement with pushStyle/popStyle(). But no success.

I have tried different colors, colorModes, strokeWeights, etc.

Any advice on why this is happening is most welcome.  
🤓

```auto
////////////////////////////////////////////////////////////////

int rows = 4;
int cols = 4;
int sz = 100;

void setup() {
  size(400, 400);
  noLoop();
  //frameRate(1);
  //background(0);
  //colorMode(RGB);
  //colorMode(HSB);
}

void draw() {

  for (int i = 0; i<cols; i++) {
    for (int j = 0; j<rows; j++) {

      if (i==j) {
        //strokeWeight(4);
        //stroke(255, 0, 0);
        //fill(255, 0, 0);
        fill(0);
      } else {
        //strokeWeight(2);
        //stroke(0);
        fill(255);
        rect(i*sz, j*sz, 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: [October 5, 2022, 4:35pm UTC](https://discourse.processing.org/t/precise-placement-of-color-in-a-grid-of-shapes/39102/2 "2022-10-05T16:35:36Z")

</div>

Did you consider lerpColor ()?

When you enumerated the cells,  
use map() to get the **amt** for lerpColor()

Enumerate: `(y*x)+x`

---

<div class="post-metadata">

### Author: ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)
#### Post date: [October 5, 2022, 4:40pm UTC](https://discourse.processing.org/t/precise-placement-of-color-in-a-grid-of-shapes/39102/3 "2022-10-05T16:40:38Z")

</div>

Hi @debxyz,

The code is actually only drawing white rectangles in the else part. Is this what you want to do ?  
If you put it below the closing else bracket you’ll get black and white rectangles…

Cheers  
— mnse

---

<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: [October 5, 2022, 4:49pm UTC](https://discourse.processing.org/t/precise-placement-of-color-in-a-grid-of-shapes/39102/4 "2022-10-05T16:49:05Z")

</div>

Oh gosh!!! That was the problem…LOL  
Thank you @mnse !!  
🤓

---

<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: [October 5, 2022, 4:52pm UTC](https://discourse.processing.org/t/precise-placement-of-color-in-a-grid-of-shapes/39102/5 "2022-10-05T16:52:05Z")

</div>

> [@Chrisir](#):
>
> Enumerate: `(y*x)+x`

Is this part of the lerp solution or a different path? Just curious…  
Or maybe a better way to ask, do you mean the (y\*x)+x is integrated into lerp? Or is it could be used in a manner to specifically target grid cells? I will look at this some more.  
🤓

---

<div class="post-metadata">

### Author: ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)
#### Post date: [October 5, 2022, 4:58pm UTC](https://discourse.processing.org/t/precise-placement-of-color-in-a-grid-of-shapes/39102/6 "2022-10-05T16:58:08Z")

</div>

Hi

More about colored grid

> **[Create a coloured grid in Processing – School of Computer Science &...](https://csee.bangor.ac.uk/project-rainbow/create-a-coloured-grid-in-processing/)**
>
> A coding activity using the @processingorg library to create a grid of coloured squares.

---

<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: [October 5, 2022, 5:03pm UTC](https://discourse.processing.org/t/precise-placement-of-color-in-a-grid-of-shapes/39102/7 "2022-10-05T17:03:46Z")

</div>

@jafal WOW!!! What a nice resource!!  
I will definitely spend some time reading through this later today!  
Thank you.  
🤓

---

<div class="post-metadata">

### Author: ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)
#### Post date: [October 5, 2022, 5:32pm UTC](https://discourse.processing.org/t/precise-placement-of-color-in-a-grid-of-shapes/39102/8 "2022-10-05T17:32:59Z")

</div>

@debxyz hi

This made using math and grid and color

> [@Terrain art with math](https://discourse.processing.org/t/terrain-art-with-math/28916):
>
> I used to think that the terrain is only formed by the noise, but with mathematics is more beautiful

---

<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 5, 2022, 5:34pm UTC](https://discourse.processing.org/t/precise-placement-of-color-in-a-grid-of-shapes/39102/9 "2022-10-05T17:34:30Z")

</div>

> [@debxyz](#):
>
> Is this part of the lerp solution or a different path?

It’s part of it. Like I tried to describe it