将颜色更改为形状以使颜色渐变为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次，并以}的相同结果结束，结果是您将使用相同的全黑半透明颜色填充每个形状：（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");
}