如何绘制褪色的物体轨迹？无后台操作

Question

我有一个简单的椭圆，在屏幕上移动，有没有我可以实现的简单代码让这个椭圆在它后面画一条轨迹，它的 alpha 会随着时间的推移在一定程度上淡化？我仍然希望轨迹最后可见，但不如投射椭圆亮。

Answer 1

假设椭圆是唯一被绘制的东西，那么有一个简单的解决方案，即不在每一帧上绘制完全不透明的背景，而是绘制一个半透明的背景：

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background(0, 35);
  ellipse(mouseX, mouseY, 20, 20);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>

但是，有一些注意事项，即对于某些 colors/transparency 级别，由于一些奇怪的 alpha 混合数学异常，您将留下永久的轨迹“幽灵”。

Answer 2

你也可以这样做：

let positions = [];

function draw(){
   positions.push(mouseX);
   positions.push(mouseY);

   for(let i in positions){
      let x = positions[i];
      let y = positions[i + 1];
      fill(255, 255 - i * 10); noStroke();
      ellipse(mouseX, mouseY, x, y)
   }

   if(positions.length > 20){
      positions.shift();
      positions.shift();
   }
}

如何绘制褪色的物体轨迹？无后台操作

How to draw a fading object trail? Without background manipulation

p5.js