如何减慢处理中的随机颜色生成器？

如何解决如何减慢处理中的随机颜色生成器？

大家好 - 我想从数组中制作一个带有随机填充颜色的矩形网格图案。我可以按照我想要的方式完成它 - 但是随机选择太快了。我试图用 frameRate() 减慢一切速度； – 但这会减慢整个动画的速度。（例如，如果我想添加其他内容）。然后我尝试用 if(frameCount%20 == 0) {…} 减慢它的速度，但这并没有保留绘制的网格 – 只让它每 XXX 帧出现一帧 – 有人知道我如何减慢我们称之为“颜色噪声” “？ – 感谢您的任何帮助！

float size = 20;
color cbw = color(0,0);      //defines BLACK
color cg = color(0,255,0);     //defines GREEN
color cb = color(0,255);     //defines BLUE
color cw = color(255,255); //defines WHITE
color[] colors = {             //random selects one of above colors
cbw,cg,cb,cw
}; 

void setup() {
  size(1080,1080);

}

void draw() {
  background(255);

  for (int x = 0; x < width/size; x++) {
    for (int y = 0; y < height/size; y++) {
      color c1 = (colors[int(random(0,4))]);  //assigns a random color from above to c1-4
      fill(c1);
      nostroke();
      rect(size*x,size*y,size,size);
    }
  }
  }

解决方法

您对 frameCount % 20 的态度是正确的。（或者您可以use millis()）

主要问题是矩形绘图的颜色选择是tightly coupled。简而言之，目前您只能选择随机颜色和同时渲染，而不能独立选择颜色和渲染（例如在不同时间）

一种选择是使用数组来存储每个矩形的颜色，您可以使用两次：

写入值：选择随机颜色
读取值：渲染矩形时

这是您草图的修改版本，用于说明上述想法：

float size = 20;
color cbw = color(0,0);      //defines BLACK
color cg = color(0,255,0);     //defines GREEN
color cb = color(0,255);     //defines BLUE
color cw = color(255,255); //defines WHITE
color[] colors = {             //random selects one of above colors
cbw,cg,cb,cw
}; 
// all colors for each rect
color[][] rectColors;

void setup() {
  size(1080,1080);
  // allocate invidual rect colours
  rectColors = new color[width/(int)size][height/(int)size];
}

void draw() {
  background(255);
  
  if(frameCount%20 == 0){
    // randomize colours
    int numColors = colors.length;
    for (int x = 0; x < width/size; x++) {
      for (int y = 0; y < height/size; y++) {
        rectColors[x][y] = colors[int(random(0,numColors))];
      }
    }
  }

  for (int x = 0; x < width/size; x++) {
    for (int y = 0; y < height/size; y++) {
      color c1 = rectColors[x][y];  //assigns a random color from above to c1-4
      fill(c1);
      noStroke();
      rect(size*x,size*y,size,size);
    }
  }
 }

就我个人而言，我会做一些额外的事情，使其更易于阅读并可能在其他草图中重复使用：

假设您希望网格单元位于整个像素上，将 float size = 20; 更改为 int size = 20;。这消除了转换的需要（例如宽度/（整数）大小）
缓存/存储经常重复使用的数据（例如网格行和列）
将随机化颜色和渲染矩形的循环封装到单独的函数中。甚至像不返回值也不带参数的函数一样简单（例如很像 void setup()）

这可能是这样的：

int size = 20;
color cbw = color(0,cw
}; 
// all colours for each rect
color[][] rectColors;

// grid dimensions
int cols;
int rows;

void setup() {
  size(1080,1080);
  // compute grid dimensions
  cols = width / size;
  rows = height / size;
  // allocate invidual rect colours
  rectColors = new color[cols][rows];
  // call randomize colours function
  randomizeColors();
}
// declare randomize colours function
void randomizeColors(){
  // read array length,avoding the previosuly hardcoded value (4)
  int numColors = colors.length;
  for (int x = 0; x < cols; x++) {
    for (int y = 0; y < rows; y++) {
      rectColors[x][y] = colors[int(random(0,numColors))];
    }
  }
}

void drawRectangles(){
  for (int x = 0; x < cols; x++) {
    for (int y = 0; y < rows; y++) {
      color c1 = rectColors[x][y];  //read a random color
      fill(c1);
      noStroke();
      rect(size * x,size * y,size);
    }
  }
}

void draw() {
  background(255);
  
  if(frameCount % 20 == 0){
    randomizeColors();
  }
  
  drawRectangles();
  
 }