通过反复绘制透明矩形逐渐淡出答案

【问题标题】：Gradual fading by drawing a transparent rectangle repeatedly通过反复绘制透明矩形逐渐淡出
【发布时间】：2011-10-12 15:53:46
【问题描述】：

这是一个关于Processing.org的问题。

我通过在每一帧的视图上绘制一个半透明的白色矩形来淡出以前绘制的对象。

但是，它们似乎永远不会完全变白。褪色在一些明显的非白色灰色阴影处具有固定点。尝试淡入黑色时也会发生同样的情况。

这是 alpha 混合在处理过程中的标准功能吗？是否有一种相对简单的方法来实现完全白色的背景（给定足够的步骤）？

我想象得到的颜色将是混合颜色的线性组合，这意味着限制应该是白色。也许非白色固定点是舍入的产物？

说明问题的示例代码：

void setup() {
  size(300,300);
  background(0);
  noStroke();
  frameRate(15);
}

void draw() {
  fill(255,10);
  rect(0,0,width,height);
  fill(255);
  rect(0,0,50,50); // for comparison to white
}

edit:添加了java标签，希望得到更多关注

【问题讨论】：

你找到解决这个问题的方法了吗？
@LaserJesus 不是真的，我已经不再玩它了。它不会褪色成全白的原因是颜色被编码为整数（即不允许使用小数值）。

标签： java colors processing alphablending

【解决方案1】：

我不确定发生了什么，看起来你应该是对的，如果绘制的矩形数量 * 这些矩形的 alpha 值大于 255，它应该是完全白色的。无论如何，为什么不重绘每一帧（就像我通过将背景（0）线移动到绘图循环中所做的那样）然后只增加你的 alpha 值。我认为这条路径将使您在未来对动画有更多的控制权。

int a;

void setup() {
  size(300,300);
  noStroke();
  frameRate(15);
  a = 0;
}

void draw() {
  background(0);
  a += 1;
  if(a<=255){
    fill(255,a);
  }
  rect(0,0,width,height);
  fill(255);
  rect(0,0,50,50); // for comparison to white
}

【讨论】：

我的意思不是仅仅淡出一个矩形，而是逐渐淡出到目前为止在屏幕上绘制的所有内容，所有这些同时仍然绘制新的东西。想象一下在屏幕上移动一个“球”，而不是删除在前一帧中绘制的球，而只是稍微“淡出”它。最终的结果将是球会留下一个褪色的痕迹。这可以为更复杂的动画带来很好的效果。您概述的方法只能产生一个渐变矩形，而不是这种效果。

【解决方案2】：

我做了很多挖掘，现在我很有信心地说，用 Alpha 通道完全褪色是不可能的。但是有一种东西叫做亮度，所以让我们使用它。

void setup() {
  size(300,300);
  background(0);
  noStroke();
  frameRate(15);

  // White rectangle for fading comparison.
  fill(255);
  rect(0, 0, 50, 50);
}

void draw() {
  fade(10);
}

void fade(final int fadeSpeed) {
  loadPixels();
  for (int row = 0; row < height; row++) {
    for (int col = 0; col < width; col++) {
      final int pixelIndex = row * width + col;
      int pixel = pixels[pixelIndex];
      int red   = ((pixel >>> 16) & 0xFF) + fadeSpeed;
      int green = ((pixel >>>  8) & 0xFF) + fadeSpeed;
      int blue  =  (pixel         & 0xFF) + fadeSpeed;
      if (red   > 255) { red   = 255; }
      if (green > 255) { green = 255; }
      if (blue  > 255) { blue  = 255; }

      // Shift bits back into propper position and 
      red   <<= 16;
      green <<=  8;
      pixel &= 0xFF000000;  // Keep alpha bits.
      pixel |= red |= green |= blue;

      pixels[pixelIndex] = color(pixel);
    }
  }
  updatePixels();
}

通过同时增加所有三个颜色通道（红、绿、蓝），我们不会改变颜色而是改变亮度。

【讨论】：

【解决方案3】：

我发现，虽然舍入误差（如果是这样的话）适用于您可以尝试的几乎所有内容，但使用 blendMode(SUBTRACT)，然后使用非常小的灰度颜色（如 fill(2)）填充可实现在许多draw() 循环中逐渐淡出，没有所有其他方法似乎都具有的“幽灵”图像，同时保持帧速率（这在实时绘图情况下通常很关键）。

 // The only reasonable way to actually "fade" out the pixels.
blendMode(SUBTRACT);
fill(2);
rect(0, 0, width, height);
blendMode(NORMAL);

【讨论】：