从左到右更改网格中的填充颜色

Question

我设法以正确的方式从上到下更改颜色，但我希望圆圈从左侧开始从黑色变为白色，然后向右移动。

我想我可以通过在嵌套 for 循环的内部和外部放置高度/宽度来简单地实现这一点。但无论我的 for 循环看起来像这样还是那样，它都会给出相同的结果？:

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

Answer 1

你的代码有两个问题：

您的代码是运行从上到下然后从左到右循环。如果你仔细看你的圈子，它会从上到下逐渐变色，然后到下一列，依此类推。

解决方法:

交换 for-loops。来自：

  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 xx = circsize; xx < width - circsize; xx += size) {
      ...

修复此问题后，它应该看起来像这样。我删除了涉及 k 的随机化并添加了文本以进行调试。

您的颜色增量与列数不一致。

现在，您的板上有 12 列。但是，您在每个单元格中将 colval 增加 10。由于颜色在 260 处循环，不能被 12 整除，因此圆圈从白色变为黑色并不恰好在每一行的开头。

解决方法：您需要将 colval 设置为将圆的 x-position 作为依赖项。 xx 每次循环递增 50。您可以通过获得 xx/circsize 或 xx/50 来获得 xx 去 0~12。然后将其映射到想要的输出范围，即0~255。这变成：

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

简化它以减少计算，

colval = xx * 0.425;

那么结果应该是这样的：

再次添加随机化后： 最终结果

从左到右更改网格中的填充颜色

change fill color in a grid from left to right

processing