Javascript 在P5.js中仍使用李萨如曲线的情况下在新帧上绘制图像

我在p5.js中工作，创建了一条李萨如曲线并画了一只兔子（我想是为了复活节的精神）。我想让兔子的头沿着lissou曲线反弹，就像它是（反弹的）流星的恒星部分一样。然而，现在它在每一个“点”输出一只兔子，这样屏幕上就有一百万个兔子头。我如何使它沿着引导曲线的屏幕反弹，而不是沿着曲线输出模糊的兔头流

我有一种感觉，这是因为兔子可能和李萨如曲线在同一个环路中。我试图为兔子创建一个单独的函数和李萨如曲线，并尝试使用一些变量，但我对这方面非常陌生，所以我仍然需要逻辑方面的帮助。谢谢你的帮助！如果你能解释一下你的答案，我会非常非常感激，因为我正在努力学习尽可能多的东西，以便下次我能自己做这件事。谢谢大家!

//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


}

//创建一个草图，沿李萨如曲线为多个形状设置动画。尝试使用sin（）和cos（）为形状的颜色和大小属性设置动画。
var波长1=25.0；
var波长2=200.0；
var pointCount=0；
var角=2.0；
var振幅=130；
var-xpos=1//为x和y位置使用变量
var-ypos=1；
函数设置（）{
createCanvas（窗口宽度、窗口高度）；
背景（233）；
}
函数绘图（）{
//兔子（）；
如果（点数>2000）{
noLoop（）；
}
noFill（）；
冲程重量（1）；
中风（100）；
平移（宽度/3，高度/3）；
beginShape（）；
对于（变量i=0；i

您需要从

draw（）

函数调用

background（）

函数来清除任何旧帧。否则，你只是在现有的基础上画图

在大多数处理草图中，调用

background（）

函数通常是

draw（）

函数的第一行

function draw() {
   background(233);
   //rest of your code

---

您需要从

draw（）

函数调用

background（）

函数来清除任何旧帧。否则，你只是在现有的基础上画图

在大多数处理草图中，调用

background（）

函数通常是

draw（）

函数的第一行

function draw() {
   background(233);
   //rest of your code

---

谢谢，凯文！然而，当我这样做时，屏幕上什么也没有出现……它似乎覆盖/擦除了一切。我应该试着把它放在其他地方吗？@Claire我会检查你的JavaScript控制台是否有其他错误。例如，在循环内声明

x

和

y

，然后在循环外使用它们。它们将超出范围，因此将导致错误。你需要在循环之前声明它们，这样你才能在循环之后使用它们。出于某种原因，我不得不刷新我的代码编辑器几次，然后它就工作了？不知道那里发生了什么。无论如何，非常感谢你的帮助！克莱尔，凯文！然而，当我这样做时，屏幕上什么也没有出现……它似乎覆盖/擦除了一切。我应该试着把它放在其他地方吗？@Claire我会检查你的JavaScript控制台是否有其他错误。例如，在循环内声明

x

和

y

，然后在循环外使用它们。它们将超出范围，因此将导致错误。你需要在循环之前声明它们，这样你才能在循环之后使用它们。出于某种原因，我不得不刷新我的代码编辑器几次，然后它就工作了？不知道那里发生了什么。无论如何，非常感谢你的帮助！克莱尔