在 P5.js 中仍使用李萨如曲线的同时在新框架上绘制图像

Question

我在 p5.js 工作并创建了李萨茹曲线并画了一只兔子（我想是本着复活节的精神）。我想让兔子的头随着 lissou 曲线弹跳，就好像它是（弹跳的）流星的星星部分。但是，现在它每 "point" 输出一只兔子，以至于有一百万只兔子头填满了屏幕。我如何让它沿着屏幕弹跳引导曲线，而不是随着曲线输出模糊的兔子头流？

我有一种感觉，这与兔子可能与李萨茹曲线处于同一循环中这一事实有关。我试图为兔子创建一个单独的函数和李萨茹曲线，并尝试使用一些变量，但我对此非常陌生，所以我仍然需要逻辑方面的帮助。感谢您的任何帮助！如果你能稍微解释一下你的回答，我真的非常感激，因为我正在努力学习尽可能多的知识，以便下次我可以自己做这个。谢谢！

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


}

Answer 1

您需要从 draw() 函数中调用 background() 函数来清除所有旧帧。否则你只是在已有的基础上绘图。

调用background()函数通常是大多数Processing sketch中draw()函数的第一行。

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

在 P5.js 中仍使用李萨如曲线的同时在新框架上绘制图像

Drawing Image on a New Frame while still using Lissajou Curves in P5.js

javascript

variables

for-loop

waveform

p5.js