Search code examples
processing

change fill color in a grid from left to right

I managed to change the colors in the right way from up to down but i want the Circles to go from black to white starting on the left side and then go to the right.

i thought i could simple achive this with the placement of height / width in the inner and outer part of the nested for loop. But no matter if my for loop looks like this or that it gives the same result?:

for(float xx = circsize; xx < width-circsize; xx += size){
    for(float yy = circsize; yy < height-circsize; yy += size){ 

for(float yy = circsize; yy < height-circsize; yy += size){
   for(float yy = circsize; yy < height-circsize; yy += size){ 

int marginY = 10;
int marginX = 10;
float size = 50;
float circsize = 50;
int xStep = 10;
int yStep = 10;
float x, y;
float xx, yy;
float colorval = 50;
float colval = 0;
void setup(){
size(700, 700);  
//stroke(24,252,22); 

  for(float x = size; x < height-size; x += size){
    for(float y = size; y < width-size; y += size){
      fill(255,0,0);
      rect(x, y, size, size);
    }
  }
 
    for(float xx = circsize; xx < width-circsize; xx += size){
      for(float yy = circsize; yy < height-circsize; yy += size){
     float k = random(1);

     colval+=10;
     println(colval);
     if(colval > 255){
       colval = 0;
     }
      fill(colval);
      if(k <= 0.8){
      circle(xx+circsize/2, yy+circsize/2, circsize);
      }
    }
  }
}
Solution

  • There are 2 problems in your code:

    1. Your code is running loops from top to bottom and then from left to right. If you look at your circles carefully, it is fading colors from the top to bottom, then to the next column, and so on.

    Solution:

    Swap the for-loops. From:

      for(float xx = circsize; xx < width-circsize; xx += size){
    for(float yy = circsize; yy < height-circsize; yy += size){
      ...

    To:

      for (float yy = circsize; yy < height - circsize; yy += size) {
    for (float xx = circsize; xx < width - circsize; xx += size) {
      ...

    Once you fix this, it should look something like this. I removed the randomization involving k and added the text just to debug. enter image description here

    1. The increments you have to your colors is not aligned with the number of columns.

    Right now, you have 12 columns on the board. However, you increment your colval by 10 in each cell. Since the color loops around at 260, that is not divisible by 12, making the circles go from white to black not exactly at the beginning of each row.

    Solution: You need to set colval to have the x-position of the circle as a dependency. xx is incremented by 50 each loop. You can get xx to go 0~12 by getting xx/circsize or xx/50. Then map it to the desired output range, that is 0~255. This becomes:

    colval = xx / circsize * (255 / 12);

    Simplifying it to minimize calculations,

    colval = xx * 0.425;

    Then the result should look something like this: enter image description here

    Once you add in the randomization again: Final Result enter image description here