在新框架上绘制图像，同时仍然使用P5.js中的利萨茹曲线

我在p5.js中工作，创建了一条利萨茹曲线并画了一只兔子（我想是出于复活节的精神）。我想让兔子的头沿着利苏曲线跳动，就好像它是一颗（跳动的）流星的恒星部分。然而，现在它在每个"点"都输出一只兔子，因此屏幕上充满了一百万个兔子头。我如何使它沿着引导曲线的屏幕反弹，而不是沿着曲线输出模糊的兔头流？

我有一种感觉，这与兔子可能与利萨茹曲线处于同一个循环中有关。我试着为兔子创建一个单独的函数和利萨茹曲线，并处理一些变量，但我对此非常陌生，所以我仍然需要逻辑方面的帮助。谢谢你的帮助！如果你能解释一下你的答案，我真的，真的很感激，因为我正在尽可能多地学习，这样我下次就可以自己做了。非常感谢。

//Create a sketch that animates multiple shapes along Lissajous curves. Try animating color and size properties of the shapes using sin() and cos() as well.
var waveLengthOne = 25.0;
var waveLengthTwo = 200.0;
var pointCount = 0;
var angle = 2.0;
var amplitude = 130;
var xpos = 1; //playing around with a variable for x and y positions
var ypos = 1;
function setup() {
  createCanvas(windowWidth, windowHeight);
  background(233);
}
function draw() {
 // rabbit();
  if (pointCount > 2000) {
   noLoop();
  }
  noFill(); 
  strokeWeight(1);
  stroke(100);
  translate(width / 3, height / 3);
  beginShape();
  for (var i = 0; i < pointCount; i++) {
    angle = i / waveLengthOne * TWO_PI;
    var y = sin(angle) * amplitude;
    angle = i / waveLengthTwo * TWO_PI;
    var x = sin(angle) * amplitude;
    vertex(x, y);
  }
  endShape();
  pointCount++;
  // rabbit
    translate(x, y);
    noStroke()
    fill(255, 192, 203);
    ellipse(0, -60, 35, 40); // head
    fill(0);
    ellipse(-10, -65, 5, 5); //left eye
    ellipse(10, -65, 5, 5); //right eye
    ellipse(0, -55, 6, 5); //nose
    noFill()
    stroke(0);
    ellipse(0,-47, 5, 2); //mouth
    noStroke();
    fill(255, 193, 203); //ear color
    ellipse(-15, -90, 15, 40) //left ear
    ellipse(15, -90, 15, 40) // right ear
    stroke(0);
    line(-25, -60, 0, -55) // top left whisker
    line(-25, -50, 0, -55) // bottom left whisker
    line(25, -60, 0, -55) // top right whisker
    line(25,-50, 0, -55) // bottom right whisker

}