Die Funktion background() in p5.js überschreiben?

Question

Ich habe eine Galaxieskizze in p5.js mit Rotationen und Radianten erstellt, aber sie wird jedes Mal gelöscht, wenn der Hintergrund() geladen wird, während draw() ausgeführt wird. Gibt es eine Möglichkeit, die background() -Funktion zu übersteuern? Ich möchte, dass die Galaxien im Blick bleiben.

var stars; 

function preload(){ 
//for (var i = 0; i < planetArray.length; i++) { 
//stars = loadImage('Assets/stars.png'); 
} 

function setup(){ 
    createCanvas(windowWidth, windowHeight); 

} 
function draw() { 
    //background(0); 
    star() 
    //function mousepressed(){ 
} 
    function star(){ 
    //angle = map(mouseX, 0,width, 0,360); 
    //rotate(radians(angle*100)); 
    noStroke(); 
    //translate(width/2, height/2); 
    translate(mouseX,mouseY); 
    fill(0); 
    rotate(radians(frameCount%360)); //rotates output of ellipses 
    rotate(radians(1000*frameCount%360)); 
    for(var i =0; i < 20; i++){ 
    push(); 
    noStroke(); 
    fill(random(200),0,random(150),random(2)); 
    // fill(random(125),random(250),random(100)); 
    ellipse(10*frameCount % (width/10),0,10,10); 
    //image(stars, 10*frameCount % (width/2),0,10,10) 
    //image((10*frameCount % (width/2),0,10,10) 
    // 
    pop(); 
    } 
} 

Answer 1

Nun, es ist wirklich keine Magie, um sie. Wenn Sie die Funktion background() aufrufen, wird das Fenster mit einer Volltonfarbe (oder einem Bild) ausgefüllt, und alles, was Sie zuvor gezeichnet haben, wird gezeichnet.

Die Lösung für dieses Problem besteht nicht darin, die background()-Funktion zu "überfahren". Um dein Programm so zu strukturieren, dass deine Sachen richtig gezeichnet werden. Wie du das machst, hängt genau davon ab, was du willst.

Option 1: Rufen Sie die Funktion background() nur einmal an.

Wenn Sie nur einen schwarzen Hintergrund am Anfang wollen, und alles, was Sie von der draw() Funktion tun, noch addieren, dann möchten Sie vielleicht nur die background() Funktion einmal aufrufen. Sie könnten dies beispielsweise als letzte Zeile in Ihrer setup()-Funktion tun.

Option 2: Speichern Sie alles, was Sie in einer Datenstruktur zeichnen möchten.

Dies ist wahrscheinlich der typischste Fall. Wenn Sie möchten, dass ein Hintergrund hinter sich bewegenden Formen gezeichnet wird, müssen Sie diese Formen in einer Art Datenstruktur speichern und dann jeden einzelnen Rahmen zeichnen.

Option 3: Zeichnen Sie ein Bild außerhalb des Bildschirms, und zeichnen Sie dieses Bild dann über Ihren Hintergrund.

Dies ist ein bisschen eine Mischung zwischen den ersten beiden Optionen. Sie können alles (mit Ausnahme des Hintergrunds) auf einen nicht sichtbaren Bildschirm (PImage) zeichnen und dann den Hintergrund auf den Bildschirm zeichnen und dann das Bild auf den Bildschirm zeichnen. Dies ermöglicht Ihnen einen Hintergrund, der die Farben ändert, ohne alles andere neu zu zeichnen.

Welche Option Sie wählen, hängt wirklich davon ab, was genau passieren soll.