Precise placement of color in a grid of shapes

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.


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

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

void draw() {

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

      if (i==j) {
        //stroke(255, 0, 0);
        //fill(255, 0, 0);
      } else {
        rect(i*sz, j*sz, sz, sz);

Did you consider lerpColor ()?

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

Enumerate: (y*x)+x

1 Like

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…

— mnse

1 Like

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

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.

1 Like


More about colored grid


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

1 Like

@debxyz hi

This made using math and grid and color

1 Like

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