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