P5.jsでLissajou Curvesを使用しているときに、新しいフレームに画像を描画

Question

私はp5.jsで作業していて、リサージュカーブを作成し、ウサギを描いています（イースターの精神のなかにあります）。私はウサギの頭がリサウのカーブに沿って跳ね返るようにしたいと思っています。それはあたかもバウンスする星の星のようです。しかし、今は100万本のウサギの頭がスクリーンを満たしているように、「ポイント」ごとにウサギを出力しています。どのようにカーブに沿ってウサギの頭のぼんやりしたストリームを出力するのではなく、カーブを導く画面に沿ってバウンスするようにするには？

これは、ウサギがリサジュー曲線と同じループにあるかもしれないという事実と関係していると感じています。私は別の関数を作成し、ウサギのリサージュカーブを作成しようとしましたが、いくつかの変数で遊んでいましたが、私はこれに新しいスーパーです。何か助けてくれてありがとう！そして、あなたが少し答えることを説明できるなら、私は本当に、本当に感謝しています。私は自分の次回にこれを行うことができるようにできるだけ多くのことを学ぼうとしています。ありがとうございました！

//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()関数を呼び出す必要があります。さもなければ、あなたはすでにそこにあるものの上に描くだけです。

通常、ほとんどの処理スケッチでdraw()関数の最初の行は、background()関数を呼び出すことです。

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