How do I make a Stepped Grayscale gradation in grid arrays

debxyz · January 30, 2020, 12:57am

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:

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();
  }
}

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

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:

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();
  
}

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

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);
  }
}

Chrisir · January 30, 2020, 9:09am

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

Chrisir

First Sketch:

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);
  }
}
//

Chrisir · January 30, 2020, 10:38am

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

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);
  }
}
//

Chrisir · January 30, 2020, 11:26am

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.

debxyz · January 30, 2020, 7:53pm

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:

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();
}

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

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);
  }
}

Chrisir · January 30, 2020, 9:20pm

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


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);
  }
}
//

debxyz · January 30, 2020, 9:53pm

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.

Chrisir · January 30, 2020, 10:08pm

Yeah, I decided to start a little later with 30

Topic		Replies	Views
Need help: Grid with increasing number of columns + incremental greyscale gradient Coding Questions	10	949	April 19, 2021
Problem looping through a 4D array Coding Questions	34	1971	May 12, 2020
Programmatically step through every permutation of a 4x4 black and white grid Beginners	8	442	August 2, 2022
Trouble manipulating single cells in an array Coding Questions	2	230	December 16, 2020
Need help: Animating grid with gradient rectangles Coding Questions homework	6	495	June 1, 2021

How do I make a Stepped Grayscale gradation in grid arrays

Related topics