p5.js 向利萨如曲线添加一条消失的椭圆轨迹

Question

我有一个简单的代码，可以用一个小椭圆描绘 Liss 曲线。我想知道如何向这个形状添加 fading trail 以便它更清楚地表示曲线。我只知道一点关于添加跟随鼠标的轨迹，但我不知道该怎么做。

感谢任何帮助，这是代码：

var t = 0;

function setup() {
    createCanvas(500, 500);
    fill(255);
    
}
    
function draw() {
    background(0);
 
    for (i = 0; i < 1; i++) {

       y = 160*sin(3*t+PI/2);
       x = 160*sin(1*t);
      
    fill(255);
    
    ellipse(width/2+x, height/2+y, 5, 5);
    t += .01;
    }
}

Answer 1

尝试将 background(0) 更改为 background(0, 0, 0, 4) :)

这是一个工作示例：

https://editor.p5js.org/chen-ni/sketches/I-FbLFDXi

编辑：

这是另一个不使用背景技巧的解决方案：

https://editor.p5js.org/chen-ni/sketches/HiT4Ycd5U

基本上，它跟踪每个点的位置并在每一帧中使用更新的 alpha 重新绘制它们以创建“淡出”效果。

var t = 0;
var particleArray = [];

function setup() {
  createCanvas(500, 500);
}

function draw() {
  background(0);
  
  y = width / 2 +  160 * sin(3 * t + PI / 2);
  x = height / 2 + 160 * sin(1 * t);

  particleArray.push(new Particle(x, y, t));
  
  for (i=0; i<particleArray.length; i++) {
    particleArray[i].show(t);
  }
  
  //keep the array short, otherwise it runs very slow
  if (particleArray.length > 800) {
     particleArray.shift();
  }
  
  t += .01;
}

function Particle(x, y, t) {
  this.x = x;
  this.y = y;
  this.t = t;
  
  this.show = function(currentT) {
    var _ratio = t / currentT;
    _alpha = map(_ratio, 0, 1, 0, 255); //points will fade out as time elaps
    fill(255, 255, 255, _alpha);
    ellipse(x, y, 5, 5);
  }
}

p5.js 向利萨如曲线添加一条消失的椭圆轨迹

p5.js Add a dissapearing ellipse trail to Lissajous curve line

curve

p5.js

编辑：