# How do I make a Stepped Grayscale gradation in grid arrays

**URL:** <https://discourse.processing.org/t/how-do-i-make-a-stepped-grayscale-gradation-in-grid-arrays/17437>\
**Category:** Coding Questions\
**Created:** [January 30, 2020, 12:57am UTC](https://discourse.processing.org/t/how-do-i-make-a-stepped-grayscale-gradation-in-grid-arrays/17437 "2020-01-30T00:57:48Z")\
**Posts on this page:** 8\
**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:** [January 30, 2020, 12:57am UTC](https://discourse.processing.org/t/how-do-i-make-a-stepped-grayscale-gradation-in-grid-arrays/17437/1 "2020-01-30T00:57:48Z")

</div>

I have 2 examples of attempts to figure out **how to implement a gradation of grays to various grid array sketches**.

- **The first sketch** is a bar grid with a single row of 7 cells.
- **The second sketch** is a 9 square grid with 3 rows + 3 columns.

In both, I’m trying to figure out how to get consistent/equal increments between the gray values. Current code shows guesstimate attempts.

What is the best way to do this?  
Thank you!!

**1ST SKETCH:**

```auto
int num = 7;
Cell [] cells = new Cell[num];

void setup(){
 size (600, 300);
 
 int x = 0, y = 0, w = ceil(width/num), h = 300; 
       // cell widths do not fill width of sketch
       //i tried rounding up with ceil() to bump up measurement 
 colorMode(RGB,100); 
       // I thought converting from 255 to 100 would 
       // be easier for incrementing grayscale steps
 
for (int i = 0; i < num; i++){
   cells[i] = new Cell(x + i*w, y, w, h, i*(100/num)); 
      // for gray gradation, trying to 
      // figure out how to get equal grayscale steps  
 }
}
void draw(){
  background (255);
  
  for (int i = 0; i < num; i++){
    cells[i].display();
  }
}

```

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

```auto
class Cell {
  float x, y, w, h;
  color color1;

  Cell ( 
    float tempX, float tempY, float tempW, float tempH, 
    color tempColor1) {

    x = tempX;
    y = tempY;
    w = tempW;
    h = tempH;

    color1 = tempColor1;
  }
  void display() {

    noStroke();
    fill(color1);
    rect(x, y, w, h);
  }
}

```

**2ND SKETCH:**

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

color bgColor = 255;

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

  int x = (width/gridX)/2, y = x,
    w = width/gridX, h = w, off = 0; // width and height of one cell, dist between cells
  int k = 0;
  

  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 ((i*30)+(i2*70)), width/gridX); 
        // trying to figure out grayscale step gradation
      k++;
    }
  }
}

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

```

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

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

  float sz;

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

    x = tempX;
    y = tempY;

    color1 = tempColor1;
    sz = tempSz;
  }

  void display() {
    fill(color1);
    rectMode(CENTER);
    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:** [January 30, 2020, 9:09am UTC](https://discourse.processing.org/t/how-do-i-make-a-stepped-grayscale-gradation-in-grid-arrays/17437/2 "2020-01-30T09:09:40Z")

</div>

Hello,

you can use `map()` command to find the color.  
See reference.  
map() command translates / maps / projects the value `i` from one range to another range so that its the same percentage on both scales.

It gives

```auto
0.0
42.5
85.0
127.5
170.0
212.5
255.0

```

Chrisir

**First Sketch:**

```auto
int num = 7;
Cell [] cells = new Cell[num];

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

  int x = 35, y = x, 
    w = ceil((width-70)/num), h = w; 

  for (int i = 0; i < num; i++) {
    // make a cell 
    cells[i] = new Cell(x + i*w, y, 
      w, h, 
      color ( map (i, 0, num-1, 0, 255 ) ));

    println( map (i, 0, num-1, 0, 255 ) );
  }// for
}
void draw() {
  background (255);

  for (int i = 0; i < num; i++) {
    cells[i].display();
  }
}

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

class Cell {
  float x, y, w, h;
  color color1;

  Cell ( 
    float tempX, float tempY, 
    float tempW, float tempH, 
    color tempColor1) {

    x = tempX;
    y = tempY;
    w = tempW;
    h = tempH;

    color1 = tempColor1;
  }
  void display() {
    // noStroke();
    stroke(255, 0, 0); 
    fill(color1);
    rect(x, y, w, h);
  }
}
//

```

---

<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 30, 2020, 10:38am UTC](https://discourse.processing.org/t/how-do-i-make-a-stepped-grayscale-gradation-in-grid-arrays/17437/3 "2020-01-30T10:38:37Z")

</div>

Other way to do this: you can just add a step-value “colorStep” to a color Value “colorValue” for every new cell. Thus the color is changed for every cell.

**Your 2nd sketch**

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

color bgColor = 255;

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

  int x = 19, y = x, // dist from screen!!!!!  
    w = width/gridX-13, h = w, 
    off = 3; // width and height of one cell, dist between cells
  int colorValue=0; 

  // adjust dist to screen border 
  x+=w/2; 
  y+=h/2;
  // grayscale step gradation
  int colorStep=ceil(255/(many-1));

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

void draw() {
  background (bgColor);

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

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

class Button {
  float x, y;
  color color1;

  float sz;

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

    x = tempX;
    y = tempY;

    color1 = tempColor1;
    sz = tempSz;
  }

  void display() {
    fill(color1);
    rectMode(CENTER);
    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:** [January 30, 2020, 11:26am UTC](https://discourse.processing.org/t/how-do-i-make-a-stepped-grayscale-gradation-in-grid-arrays/17437/4 "2020-01-30T11:26:59Z")

</div>

- Of course you can apply this to the red part of the color, to get a red gradient.

- Of course you can start at 100 instead of 0 and make smaller steps.

---

<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 30, 2020, 7:53pm UTC](https://discourse.processing.org/t/how-do-i-make-a-stepped-grayscale-gradation-in-grid-arrays/17437/5 "2020-01-30T19:53:46Z")

</div>

Thank you very much @Chrisir !!! Both versions make sense.

**I then tried approach of the 2nd version with a 2D GRID.** But it seems there’s some additional aspect to consider. I’ve commented in the area near bottom where _I think_ the issue exists.

Thank you again for the previous comments.

**2D GRID VERSION:**

```auto
int num = 5, cols = num, rows = cols; // Number of columns and rows in the grid
Button [][] myButtons= new Button[cols][rows]; 

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

  int x = (width/num)/2, y = x, sz = (width/num)-5;
  int colorValue = 0;
  int colorStep = ceil(255/(cols*rows)-1);

  for (int i = 0; i < cols; i++) {
    for (int j = 0; j < rows; j++) {
      println(colorStep);
      myButtons[i][j] = new Button (
        x+ i*(width/cols), y+ j*(height/rows), 
        color (colorValue), // gray step
        sz);

      colorValue+=colorStep; // Is this the problem area?
      i++;
      //colorValue+=colorStep;
      //j++;
    }
  }
}

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

```

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

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

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

    x = tempX;
    y = tempY;

    colRect = tempColor;

    sz = tempSz;
  }

  void display() {

    stroke(0);
    rectMode(CENTER);
    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:** [January 30, 2020, 9:20pm UTC](https://discourse.processing.org/t/how-do-i-make-a-stepped-grayscale-gradation-in-grid-arrays/17437/6 "2020-01-30T21:20:34Z")

</div>

You had a null pointer exception in draw(). This was caused in setup() where you said ` i++;` - this is bad because you changed one of the for-loop variables which is always dangerous.

you were not having `fill(colRect);` inside the class in display() - so the color wasn’t really used by the class!!!

Chrisir

```auto

int num = 5, 
  cols = num, rows = cols; // Number of columns and rows in the grid
Button [][] myButtons= new Button[cols][rows]; 

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

  int x = (width/num)/2, y = x, 
    sz = (width/num)-5;
  int colorValue = 30;
  int colorStep = int(225/(cols*rows));
  println("colorStep "+colorStep);
  println("============================");

  for (int i = 0; i < cols; i++) {
    for (int j = 0; j < rows; j++) {
      println("colorValue "+colorValue);
      myButtons[i][j] = new Button (
        x+ i*(width/cols), y+ j*(height/rows), 
        color (colorValue), // gray step
        sz);

      colorValue += colorStep; 
      // i++; // this was wrong !!!!!!!!!!!!!!!!!!!!!!!
      //colorValue+=colorStep;
      //j++;
    }
  }
  println("----");
}//func 

void draw() {
  background(255);

  for (int i = 0; i < cols; i++) {
    for (int j = 0; j < rows; j++) {
      // println(i, j);
      myButtons[i][j].display();
    }
  }
}//func 

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

class Button {
  float x, y;
  color colRect;
  float sz;

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

    x = tempX;
    y = tempY;

    colRect = tempColor;

    sz = tempSz;
  }

  void display() {
    stroke(0);
    rectMode(CENTER);
    fill(colRect); // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    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:** [January 30, 2020, 9:53pm UTC](https://discourse.processing.org/t/how-do-i-make-a-stepped-grayscale-gradation-in-grid-arrays/17437/7 "2020-01-30T21:53:01Z")

</div>

THANK YOU!!!  
😀 😀 😀

And just wondering. **I noticed you started colorValue at 30.** That is because very little visual distinction in dark range with steps 10 + 20?  
Just want to make sure I understand all the parts.

---

<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 30, 2020, 10:08pm UTC](https://discourse.processing.org/t/how-do-i-make-a-stepped-grayscale-gradation-in-grid-arrays/17437/8 "2020-01-30T22:08:16Z")

</div>

Yeah, I decided to start a little later with 30