Zeichnen von Bild auf einem neuen Rahmen, während immer noch Lissajou Kurven in P5.js

Question

Ich arbeite in p5.js und habe eine Lissajou-Kurve erstellt und zeichnete ein Kaninchen (im Sinne von Ostern, nehme ich an). Ich möchte, dass der Hasenkopf mit der Lissou-Kurve mitschwingt, als ob es der Star-Teil eines (hüpfenden) Sterns wäre. Aber jetzt gibt es an jedem "Punkt" einen Hasen aus, so dass eine Million Kaninchenköpfe den Bildschirm füllen. Wie mache ich es so, dass es auf dem Bildschirm, der die Kurve führt, springt, anstatt einen verschwommenen Strom von Kaninchenköpfen zusammen mit der Kurve auszugeben?

Ich habe das Gefühl, dass dies mit der Tatsache zu tun hat, dass der Hase vielleicht in der gleichen Schleife ist wie die Lissajou-Kurve. Ich habe versucht, eine separate Funktion und Lissajou-Kurve für den Hasen zu erstellen und mit einigen Variablen herumzuspielen, aber ich bin neu dabei, also brauche ich immer noch Hilfe bei der Logik. Danke für jede Hilfe! Und wenn du erklären könntest, dass du ein bisschen antwortest, würde ich es wirklich, wirklich schätzen, da ich versuche so viel wie möglich zu lernen, damit ich das nächste Mal alleine machen kann. Vielen Dank!

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

Sie benötigen die background() Funktion von Ihrer draw() Funktion aufrufen, alle alten Rahmen zu räumen. Ansonsten zeichnest du dich nur über das hinaus, was schon da ist.

Das Aufrufen der background()-Funktion ist normalerweise die erste Zeile der draw()-Funktion in den meisten Verarbeitungsskizzen.

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