将颜色更改为形状以使颜色渐变为Processing

Question

我在处理中有以下代码，我想添加在循环颜色之间创建颜色渐变的功能。 根据我的形状数量，将共享相应的0-255值。 例如，如果我有五个平行（同心）的形状，那么我将具有以下值0-51-102-153-204-255 。 开头和结尾始终为0和255 （白色和黑色）。

float step = 0.50; // 0.5 == 50%
float hearts = 4; // heart count

void setup(){
    size(800, 800);
    stroke(0, 255, 0);
    noFill();
}

void draw(){
    background(255);
    translate(400, 400);
    for(int i = 0; i < hearts; i++) {
      for(int heart = 1; heart<= 256; heart+=heart){
        fill(0,0,0,100);
      }
        float scale = 1 + i * step;
        pushMatrix();
        scale(scale);
        strokeWeight(1.0 / scale);
        heart();
        popMatrix();
    }
    saveFrame("line-######.png");
}

void heart(){
    beginShape();
    vertex(0, 75);
    vertex(-50, 0);
    vertex(-25, -75);
    vertex(0, -50);
    vertex(25, -75);
    vertex(50, 0);
    endShape(CLOSE);
}

Answer 1

首先，你先绘制最小的一个，然后是下一个较大的，然后是下一个，直到你绘制最大的。 因此，即使你确实得到了正确的颜色，最大的颜色将覆盖所有其他颜色，你将不得不依赖透明度（而且你不必）。 因此，尽可能少地更改代码而不是

for(int i = 0; i < hearts; i++) {

像这样反过来：

for(int i = int(hearts-1); i >= 0; i--) {

第二，这样做：

for(int heart = 1; heart<= 256; heart+=heart){
   fill(0,0,0,100);
}

执行相同的命令（ fill(0,0,0,100); ）256次，并以}结尾相同的结果，结果是你将用相同的FULLY BLACK半透明颜色填充每个形状：（0 ，0,0,100）。

如果您刚刚用以下方法替换整个内容，则可以实现相同的效果：

fill(0,0,0,100);

你以某种方式达到渐变效果的事实是由于（添加）透明层，而不是由于正确计算每层的每种颜色。 要做到这一点，你需要做这样的事情：

fill((i/(hearts-1))*255);

什么会在这里发生，因为for循环降低了i ，直到它到达0 (i/(hearts-1))*255号更改相应的排序是这样的：

Let's suppose hearts = 4 as you have here... 
Remember, i in the new for loop starts from i = hearts-1 = 3

 i  |  (i/(hearts-1))*255
--------------------------
 3  |  (3/(  4   -1))*255  =  255 (white)
 2  |  (2/(  4   -1))*255  ~  170 (light gray)
 1  |  (1/(  4   -1))*255  ~  85  (dark gray)
 0  |  (0/(  4   -1))*255  =  0   (black)

这里没有透明度，因此您需要修复前面提到的for循环以查看效果。

整个draw（）方法应如下所示：

void draw() {
  background(255);
  translate(400, 400);
  for (int i = int(hearts-1); i >= 0; i--) {
    fill((i/(hearts-1))*255);
    float scale = 1 + i * step;
    pushMatrix();
    scale(scale);
    strokeWeight(1.0 / scale);
    heart();
    popMatrix();
  }
  saveFrame("line-######.png");
}