While Loop und Rotationen. Gibt es eine Möglichkeit, es innerhalb der Grenzen zu halten?

Question

Ich verwende eine while-Schleife, rotiere und übersetze, um den gewünschten Effekt für mein Programm zu erhalten. Ich möchte in der Lage sein, die Schleife innerhalb der Grenzen der Skizze zu halten. Kann mir jemand erklären, wie das geht, bitte? Hier

ist der Code:

float x, y, r, g, b, radius; 

    void setup() 
    { 
     size(800, 700); 
     smooth(); 
     frameRate(15); 
    } 

void draw() 
{ 
    handleRedBox(); 
} 

void handleRedBox() { 
    background(255); 
    stroke(255, 0, 0); 
    color from = color(100, random(255), 2); 
    color to = color(0, 200, 0); 
    color interA = lerpColor (to, from, .44); 
    int x = 100; 
    while (x < width/2 || x> width/2) { 
    int y = 100; 
    while (y <height/2 || y > height/2) { 
     blendMode(DIFFERENCE); 
     noStroke(); 
     fill(interA); 
     quadstuff(); 
     strokeWeight(5); 
     stroke(0, random(255), 0); 
     line(width/2, height/2, mouseY, mouseX); 
     translate(width, height); 
     rotate(radians(frameCount)); 
     y = y + 50; 
    } 
    x = x + 50; 
    } 
    ghostcirc(); 
    ghostcirc2(); 
} 

void ghostcirc() { 
    int w = 0; 
    while (w < width) { 
    int q = 0; 
    while (q <height) { 
     blendMode(ADD); 
     fill(random(61), random(90), random(250)); 
     ellipse(255, 255, 100, 100); 
     ; 
     noStroke(); 
     translate(width, height); 
     rotate(radians(frameCount)); 
     q = q + 100; 
    } 
    w = w + 50; 
    } 
} 

void ghostcirc2() { 
    for (int w= 0; w < width; w+=10) {  
    blendMode(ADD); 
    fill(random(61), random(90), random(250)); 
    ellipse(50, 50, 75, 75); 
    ; 
    noStroke(); 
    translate(width, height); 
    rotate(radians(frameCount)); 
    //if (keyPressed == true){ 
    // fill(random(100), random(90), random(250)); 
    } 
} 

void quadstuff() { 
    int rad = 60;  // Width of the shape 
    float xpos, ypos; // Starting position of shape  

    float xspeed = 2.8; // Speed of the shape 
    float yspeed = 2.2; // Speed of the shape 

    xpos = width/2; 
    ypos = height/2; 
    //ellipse(mouseX+x, mouseY+y, 100,100); 
    quad(xpos, ypos, rad, rad, mouseX+rad, mouseY+rad, xspeed, yspeed); 
    stroke(0); 
    strokeWeight(5); 
} 

Answer 1

Ihre Frage ist immer noch ziemlich breit, und das ist immer noch eine Menge Code, um zu versuchen, zu debuggen. Aber ich weiß es zu schätzen, dass Sie die Mühe gemacht haben, es zu verengen, also werde ich versuchen, allgemein zu helfen.

Ihr Code enthält eine Menge Dinge, die ich nicht wirklich verstehe, also werde ich mit einem einfacheren Beispiel beginnen. Ehrlich gesagt, es könnte besser sein, das Gleiche zu tun - beginnen Sie mit etwas Grundlegenderem und fügen Sie die Begrenzungslogik von Anfang an hinzu. Das wird viel einfacher als der Versuch, es hinzuzufügen, nachdem Sie bereits alles geschrieben haben.

Es gibt also zwei grundlegende Möglichkeiten, diese Art von Animation in der Verarbeitung zu tun. Ich werde beides abdecken.

Option 1: Verlassen Sie sich auf translate() und rotate(), um Dinge für Sie zu positionieren.

Dies ist, was Ihr Code tut. Hier ist ein einfacheres Beispiel, die eine Ellipse zeigt Drehung um die Mausposition:

float angle = 0; 

void setup() { 
    size(500, 500); 
} 

void draw() { 

    angle+=.1; 

    background(0); 
    translate(mouseX, mouseY); 
    rotate(angle); 
    translate(100, 0); 

    ellipse(0, 0, 50, 50); 
} 

Nun, wenn Sie wollen die Ellipse gebunden innerhalb des Fensters zu bleiben, müssen Sie zunächst ermitteln, wo die Ellipse auf seine der Bildschirm. Dies könnte kompliziert sein, da wir die translate() und rotate() Funktionen verwenden, die ein wenig wie das Verschieben der Kamera sind, anstatt die Ellipse zu bewegen - die Ellipse "denkt", dass sie immer noch an Position 0,0 ist. Wir müssen also die Position der Ellipse erhalten, nachdem wir die Kamera bewegt haben. Zum Glück Verarbeitung gibt uns die screenX() und screenY() Funktionen:

float screenX = screenX(0, 0); 
float screenY = screenY(0, 0); 

Dies wird uns sagen, wo auf dem Bildschirm wird die Ellipse (oder genauer gesagt, in der Position 0,0 sein wird, nachdem die Transformationen angewendet werden) gezogen werden. Wir können dies verwenden, um zu überprüfen, ob diese außerhalb der Grenzen des Fensters liegen und dann tun, was auch immer Sie wollen.

Welche Art von Begrenzung Sie tun, hängt davon ab, was Sie passieren möchten. Sie können die Animation so um den Bildschirm wickeln, dass sie auf der rechten Seite wieder auf der linken Seite erscheint. Sie können die Positionen begrenzen, sodass sie nur an den Rand des Fensters gehen, anstatt sich daran vorbei zu bewegen. Hier ist, dass:

float angle = 0; 

void setup() { 
    size(500, 500); 
} 

void draw() { 

    angle+=.1; 

    background(0); 
    translate(mouseX, mouseY); 
    rotate(angle); 
    translate(100, 0); 

    float screenX = screenX(0, 0); 
    float screenY = screenY(0, 0); 

    if (screenX < 25) { 
    rotate(-angle); 
    translate(25-screenX, 0); 
    rotate(angle); 
    } else if (screenX > 475) { 
    rotate(-angle); 
    translate(475-screenX, 0); 
    rotate(angle); 
    } 

    if (screenY < 25) { 
    rotate(-angle); 
    translate(0, 25-screenY); 
    rotate(angle); 
    } else if (screenY > 475) { 
    rotate(-angle); 
    translate(0, 475-screenY); 
    rotate(angle); 
    } 

    ellipse(0, 0, 50, 50); 
} 

Dieser Code das gleiche wie oben ist, außer jetzt verwendet es screenX() und screenY(), um zu bestimmen, wenn die Ellipse aus dem Bildschirm sein wird, und verwendet dann translate(), um es innerhalb der Grenzen der Bewegung zurück Bildschirm.

Option 2: Behalten Sie die Position selbst im Auge.

Anstatt sich auf translate() und rotate() für Sie die Positionierung zu tun, könnten Sie auch nur einige grundlegende Algebra und Trig die Positionierung selbst zu tun.

Hier ist das einfache Programm, ohne noch begrenzt:

float angle = 0; 

void setup() { 
    size(500, 500); 
} 

void draw() { 

    angle+=.1; 

    background(0); 

    float circleX = mouseX + cos(angle)*100; 
    float circleY = mouseY + sin(angle)*100; 

    ellipse(circleX, circleY, 50, 50); 
} 

Beachten Sie, dass ich die Position der Ellipse bin Berechnung mich stattdessen auf translate() und rotate() zu verlassen. Nun könnte es einfacher sein, um genau zu denken, wo der Kreis sein, so kann ich den Begrenzungs tun:

float angle = 0; 

void setup() { 
    size(500, 500); 
} 

void draw() { 

    angle+=.1; 

    background(0); 

    float circleX = mouseX + cos(angle)*100; 
    float circleY = mouseY + sin(angle)*100; 

    if (circleX < 25) { 
    circleX = 25; 
    } else if (circleX > 475) { 
    circleX = 475; 
    } 

    if (circleY < 25) { 
    circleY = 25; 
    } else if (circleY > 475) { 
    circleY = 475; 
    } 

    ellipse(circleX, circleY, 50, 50); 
} 

Dies könnte ein wenig leichter sein, darüber nachzudenken, da Sie mit dem Bildschirm direkt Koordinaten arbeiten können. Beide Optionen machen das gleiche, sie sind nur unterschiedliche Denkweisen.

Von hier aus ist es nur eine Frage der Definition genau, wie Ihre Grenze funktionieren sollte. Ich habe dir ein Beispiel gegeben, aber du könntest alles tun, was du willst.

Sie könnten auch Ihre Eingabevariablen einschränken (in meinem Fall mouseX und mouseY), so dass die Animation das Fenster nie verlässt. das Hinzufügen an der Spitze der draw() Funktion entweder eine der oben genannten Optionen wird die Animation zu verlassen, um den Bildschirm zu vermeiden:

if (mouseX < 150) { 
    mouseX = 150; 
    } else if (mouseX > 350) { 
    mouseX = 350; 
    } 

    if (mouseY < 150) { 
    mouseY = 150; 
    } else if (mouseY > 350) { 
    mouseY = 350; 
    } 

Auch hier, wie Sie dies tun, ist wirklich an Ihnen und was Sie wollen passieren . Es wird wahrscheinlich einfacher sein, wenn du mit einem Basisprogramm wie meins anfängst und dann ein kleines Ding nach dem anderen hinzufügst, anstatt es zu deiner bestehenden riesigen Skizze hinzuzufügen. Viel Glück.