问题描述
大家好 - 我想从数组中制作一个带有随机填充颜色的矩形网格图案。我可以按照我想要的方式完成它 - 但是随机选择太快了。
我试图用 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();
}