Rotierende/drehende Gruppen von Ellipsen

Question

Ich arbeite an einem Projekt, bei dem ich Mini-Galaxien mit Ellipsen, Rotieren, Radian usw. auf mouseX und mouseY erzeuge. Allerdings würde ich es lieben, wenn jede Mini-Galaxie nach links oder rechts rotieren könnte, so dass sie wie eine Galaxie aussieht, die sich langsam im Raum dreht. Ich bin mir nicht sicher, wie ich das machen würde und würde mir eine Anleitung wünschen. Muss ich ein Array erstellen, das die Ellipsen für jede Galaxie enthält und das dann irgendwie rotieren? Kann ich einfach eine rotate() für jede einzelne Ellipse festlegen, während sie zum Bildschirm zieht? Danke für jede Hilfe!

var bgimg; 

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

function setup(){ 
    createCanvas(1301, 822); 
    background(bgimg, 100); 
    //background(25,25,22); 

} 
function draw() { 
    //background(0); 
    fill(255); 
    noStroke(); 
    textSize(19); 
    text("Create mini-galaxies by holding your mouse in a location. Move to create another.", 20, 40); 
    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(); 
    tint(255, 127); 
    fill(random(230),5,random(210),random(230)); 
    // fill(random(125),random(250),random(100)); 
    ellipse(10*frameCount % (width/20),0,5,5); 
    rotate(radians(mouseX, mouseY)); 
    //image(stars, 10*frameCount % (width/2),0,10,10) 
    //image((10*frameCount % (width/2),0,10,10) 
    // 
    pop(); 
    } 
} 

Answer 1

werden Sie haben mehr Glück mit Ihren Fragen, wenn Sie versuchen, sie zu einem MCVE zu verengen, anstatt Ihre vollständige Skizze der Entsendung. Es ist schwierig, allgemeine Fragen zu beantworten, "wie mache ich das". Es ist viel einfacher zu beantworten spezifische "Ich versuchte X, erwartete Y, aber bekam Z stattdessen" Typ Frage. Ich werde versuchen, in einem allgemeinen Sinne zu beantworten:

Sie haben Probleme, weil Sie Ihre Zeichnung akkumulieren, indem Sie nur die background() Funktion einmal aufrufen, anstatt es jedes Bild zu löschen. Es ist nichts falsch daran, aber es macht es unmöglich, Transformationen und Rotationen auf Dinge anzuwenden, die Sie bereits gezeichnet haben.

Wie ich schon sagte in your other question, die meisten Verarbeitungs Skizzen dies zu tun:

Shop alles, was Sie in einer Datenstruktur zu ziehen.

Sie könnten ein Array von PVectors speichern. Oder Sie erstellen eine Galaxy Klasse, die Variablen und Funktionen enthält, mit denen sie sich selbst zeichnen kann, die Sie von Ihrer draw() Funktion aufrufen. Die Datenstruktur, die Sie verwenden, liegt ganz bei Ihnen.

This page und this page enthalten Diskussionen zum Erstellen von Objekten in p5.js, oder Sie versuchen einfach eine Google-Suche. Here ist ein Beispiel, das eine Klasse verwendet, die sich selbst zeichnen kann, und erstellt dann eine Instanz dieser Klasse, um eine Skizze zu erstellen.

Löschen Sie die vorherigen Bilder jedes Mal, wenn draw() aufgerufen wird.

Die meisten Skizzen rufen die Funktion background() jedes Bild auf. Das mag ärgerlich erscheinen, denn dann müssen Sie alles neu zeichnen, aber dafür sind die Datenstrukturen da.

Zeichnen Sie alles neu, was Sie in jedem Bild zeichnen möchten.

Iterieren Sie über diese Datenstrukturen und zeichnen Sie Ihre Szene neu. Dies könnte so einfach sein wie das Iterieren über ein Array von PVectors, oder vielleicht möchten Sie Objekte erstellen, die sich selbst zeichnen können.

Wie ich schon sagte, das ist sehr allgemein und genau das, was Sie tun, hängt davon ab, wie Sie über all das denken. Es gibt keinen einzigen besten Weg, dies zu tun, daher ist es schwierig, genauer zu sein.