为什么此处理代码会产生递减的痕迹？

Question

我正在通过Processing学习Java。

代码执行以下操作。

1）调用安装程序，并初始化大小为700,300的窗口。

2）使用设置中的for循环初始化许多点，并给出随机速度。

3）自动调用绘图功能。这是一个循环功能。它一次又一次地被调用。每次用黑色矩形填充空间，并绘制所有圆并更新其位置。

4）由于每次调用draw（）时rect（）命令都会清除屏幕，因此它只能显示一个粒子，并且没有痕迹。但是确实如此。

我碰到了其中一本教程，代码如下

Spot[] spots; // Declare array
void setup() {
  size(700, 100);
  int numSpots = 70; // Number of objects
  int dia = width/numSpots; // Calculate diameter
  spots = new Spot[numSpots]; // Create array
  for (int i = 0; i < spots.length; i++) {
    float x = dia/2 + i*dia;
    float rate = random(0.1, 2.0);
    // Create each object
    spots[i] = new Spot(x, 50, dia, rate);
  }
  noStroke();
}
void draw() {
  fill(0, 12);
  rect(0, 0, width, height);
  fill(255);
  for (int i=0; i < spots.length; i++) {
    spots[i].move(); // Move each object
    spots[i].display(); // Display each object
  }
}
class Spot {
  float x, y;         // X-coordinate, y-coordinate
  float diameter;     // Diameter of the circle
  float speed;        // Distance moved each frame
  int direction = 1;  // Direction of motion (1 is down, -1 is up)

  // Constructor
  Spot(float xpos, float ypos, float dia, float sp) {
    x = xpos;
    y = ypos;
    diameter = dia;
    speed = sp;
  }

  void move() {
    y += (speed * direction); 
    if ((y > (height - diameter/2)) || (y < diameter/2)) { 
      direction *= -1; 
    } 
  }

  void display() {
    ellipse(x, y, diameter, diameter);
  }
}

它产生以下输出：

我不明白为什么会创建这些痕迹而这些痕迹会消失。凭直觉而言，由于

for (int i=0; i < spots.length; i++) {
spots[i].move(); // Move each object
spots[i].display(); // Display each object
}

请指出实现这一目标的代码行？我不知道。

参考：https://processing.org/tutorials/arrays/ @ Arrays：Casey Reas和Ben Fry

Answer 1

永远不会清除场景，因此，当在新帧中将新点添加到场景时，先前帧中绘制的点仍然存在。

说明

fill(0, 12);
rect(0, 0, width, height);

在整个视图上绘制一个透明的黑色矩形。因此，先前帧的斑点似乎随着时间消失。由于“较旧的”斑点已被透明矩形覆盖了5次，因此它们变为深灰色。 “较年轻”的斑点仅被覆盖了几次，并显示为浅灰色。由于填充颜色为白色（fill(255);，因此立即绘制的斑点为白色

如果增加混合矩形的alpha值，则斑点将“消失”得更快，而它们的“尾巴”则更短。

例如

fill(0, 50);