How do I make a Stepped Grayscale gradation in grid arrays

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

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

``````0.0
42.5
85.0
127.5
170.0
212.5
255.0
``````

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

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.

``````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;
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);
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);
}
}
//
``````
1 Like
• 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.

1 Like

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

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

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.

Yeah, I decided to start a little later with 30

1 Like