Wie erhält man eine Skizze, die in einer anderen Skizze funktioniert, die Bildschirme verwendet?

Question

Ich arbeite ein Projekt, das Bildschirme beteiligt. Ich möchte in der Lage sein, die Zifferntasten zu den Bildschirmen zu verwenden, die den Benutzer in einen interaktiven Teil der Skizze bringen.

Ich fing an, an einem der interaktiven Teile des Programms in einer separaten Skizze zu arbeiten. Hier ist die Skizze:

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

void setup() { 
    size(500, 500); 
    background(255); 
    noStroke(); 
    smooth(); 
} 

void draw() { 
     Zon(); 
    } 


void Zon(){ 
    // use frameCount to move x, use modulo to keep it within bounds 
    x = frameCount % width; 

    // use millis() and a timer to change the y every 2 seconds 
    if (millis() - timer >= 8000) { 
    y = random(height); 
    timer = millis(); 
    } 

    // use frameCount and noise to change the red color component 
    r = noise(frameCount * 0.01) * 255; 

    // use frameCount and modulo to change the green color component 
    g = frameCount % 1; 

    // use frameCount and noise to change the blue color component 
    b = 255 - noise(1 + frameCount * 0.025) * 255; 

    // use frameCount and noise to change the radius 
    radius = noise(frameCount * 0.01) * mouseX; 

    color c = color(r, g, b); 
    fill(c); 
    ellipse(x, y, radius, radius); 
} 

Dies war der Code für die separate Skizze. Ich möchte diese Skizze in mein eigentliches Projekt einfügen können, aber es funktioniert nicht so, wie es in der separaten Skizze funktioniert. Kann mir jemand erklären, warum das so ist?

Ich möchte, dass es einen weißen Hintergrund gibt und die Ellipse sich über den Bildschirm bewegt und eine Spur hinterlässt. Funktioniert es nicht, weil der Hintergrund immer wieder durchläuft und dabei die Spur löscht?

Wenn ich den Hintergrund entfernen (255); es ist eine Art von Arbeit, außer dass es auf dem Menübildschirm läuft, was ich nicht will.

Hier die eigentliche Projektcode:

final int stateMenu = 0; 
final int GreenBox = 3; 
int state = stateMenu; 
float x, y, r, g, b, radius; 
int timer; 
PFont font; 
PFont Amatic; 


void setup() 
{ 
    size(800, 700); 
    smooth(); 
    font = createFont("ARCARTER-78.vlw", 14); 
    textFont(font); 
    //Amatic = createFont("Amatic-Bold.ttf",60); 
    //textFont(Amatic); 
    frameRate(15); 
} 

void draw() 
{ 
    // the main routine. It handels the states. 
    // runs again and again 
    switch (state) { 
    case stateMenu: 
    showMenu(); 
    break; 
    case GreenBox: 
    handleGreenBox(); 
    break; 
    default: 
    println ("Unknown state (in draw) " 
     + state 
     + " ++++++++++++++++++++++"); 
    } 
} 

    void keyPressed() { 
    // keyboard. Also different depending on the state. 
    switch (state) { 
    case stateMenu: 
    keyPressedForStateMenu(); 
    break; 
    case GreenBox: 
    keyPressedForGreenBox(); 
    } 
    } 

    void keyPressedForStateMenu() { 
    switch(key){ 
     case '3': 
     state = GreenBox; 
     break; 
     default: 
    // do nothing 
    break; 
    } 
    } 
    void keyPressedForGreenBox(){ 
     switch(key) { 
    default: 
    state = stateMenu; 
    break; 
     } 
    } 
     void showMenu() { 
    background(255); 
    fill(0); 
    textSize(45); 
    //textFont(Amatic); 
    text(" Music Box ", 330, 250, 3); 
    textSize(14); 
    text("Press 3 for Green", 350, 350); 

} 

void handleGreenBox() { 
     Zon(); 
} 


void Zon(){ 
    background(255); 
    noStroke(); 
    smooth(); 
    // use frameCount to move x, use modulo to keep it within bounds 
    x = frameCount % width; 

    // use millis() and a timer to change the y every 2 seconds 
    if (millis() - timer >= 8000) { 
    y = random(height); 
    timer = millis(); 
    } 

    // use frameCount and noise to change the red color component 
    r = noise(frameCount * 0.01) * 255; 

    // use frameCount and modulo to change the green color component 
    g = frameCount % 1; 

    // use frameCount and noise to change the blue color component 
    b = 255 - noise(1 + frameCount * 0.025) * 255; 

    // use frameCount and noise to change the radius 
    radius = noise(frameCount * 0.01) * mouseX; 

    color c = color(r, g, b); 
    fill(c); 
    ellipse(x, y, radius, radius); 
} 

Kann jemand mir helfen, dieses Problem zu beheben, wenden Sie sich bitte?

Answer 1

In Ihrem ursprünglichen Code, den Sie Clearing nicht den Hintergrund, aber in der fusionierten Code-Version sind:

void Zon(){ 
    background(255); 
... 

und Sie wollen nicht, dass, wie Sie darauf hingewiesen. Das einzige andere Problem ist, dass Sie immer noch background(255) nennen müssen, aber nur einmal, wenn Sie aus dem Menü Zustand in dem GreenBox Zustand wechseln:

void keyPressedForStateMenu() { 
    switch(key) { 
    case '3': 
    state = greenBox; 
    //clear the menu once when moving into greenBox 
    background(255); 
    break; 
    default: 
    // do nothing 
    break; 
    } 
} 

Sie haben bei der Ermittlung der Frage gut gemacht und wie es lösen teilweise, nur benötigt, um den Hintergrund zu löschen, wenn Modi geändert werden.

Ihr Code wird wie folgt aussehen:

final int stateMenu = 0; 
final int greenBox = 3; 
int state = stateMenu; 

float x, y, r, g, b, radius; 
int timer; 
PFont font; 
PFont Amatic; 


void setup() 
{ 
    size(800, 700); 
    smooth(); 
    //maybe loadFont ? 
    font = createFont("ARCARTER-78.vlw", 14); 
    textFont(font); 
    //Amatic = createFont("Amatic-Bold.ttf",60); 
    //textFont(Amatic); 
    frameRate(15); 
} 

void draw() 
{ 
    // the main routine. It handels the states. 
    // runs again and again 
    switch (state) { 
    case stateMenu: 
    showMenu(); 
    break; 
    case greenBox: 
    handlegreenBox(); 
    break; 
    default: 
    println ("Unknown state (in draw) " 
     + state 
     + " ++++++++++++++++++++++"); 
    } 
} 

void keyPressed() { 
    // keyboard. Also different depending on the state. 
    switch (state) { 
    case stateMenu: 
     keyPressedForStateMenu(); 
     break; 
    case greenBox: 
     keyPressedForgreenBox(); 
    } 
} 

void keyPressedForStateMenu() { 
    switch(key) { 
    case '3': 
    state = greenBox; 
    //clear the menu once when moving into greenBox 
    background(255); 
    break; 
    default: 
    // do nothing 
    break; 
    } 
} 
void keyPressedForgreenBox() { 
    switch(key) { 
    default: 
    state = stateMenu; 
    break; 
    } 
} 
void showMenu() { 
    background(255); 
    fill(0); 
    textSize(45); 
    //textFont(Amatic); 
    text(" Music Box ", 330, 250); 
    textSize(14); 
    text("Press 3 for Green", 350, 350); 
} 

void handlegreenBox() { 
    Zon(); 
} 


void Zon() { 
    //don't clear the buffer continuously if you want to leave trails 
// background(255); 
    noStroke(); 
    smooth(); 
    // use frameCount to move x, use modulo to keep it within bounds 
    x = frameCount % width; 

    // use millis() and a timer to change the y every 2 seconds 
    if (millis() - timer >= 8000) { 
    y = random(height); 
    timer = millis(); 
    } 

    // use frameCount and noise to change the red color component 
    r = noise(frameCount * 0.01) * 255; 

    // use frameCount and modulo to change the green color component 
    g = frameCount % 1; 

    // use frameCount and noise to change the blue color component 
    b = 255 - noise(1 + frameCount * 0.025) * 255; 

    // use frameCount and noise to change the radius 
    radius = noise(frameCount * 0.01) * mouseX; 

    color c = color(r, g, b); 
    fill(c); 
    ellipse(x, y, radius, radius); 
} 

Answer 2

Wenn Sie in der Lage sein wollen, einen Hintergrund zu zeichnen und haben eine „Spur“ gezeichnet oben auf diesem Hintergrund, dann haben Sie zwei Möglichkeiten:

Option 1: eine Datenstruktur erstellen, die Sie enthält alles müssen zeichnen und dann in dieser Datenstruktur jeden Frame zeichnen. Dies könnte so einfach wie ein ArrayList<PVector> sein, oder Sie könnten besser eigene Klassen erstellen, die alles kapseln, was Sie wissen müssen, um alles in einem Frame zu zeichnen.

Option 2: Erstellen Sie eine PGraphics, auf die Sie Ihre Spur ziehen. Zeichnen Sie dann Ihren Hintergrund auf den Bildschirm und zeichnen Sie dann PGraphics auf den Bildschirm. Informationen zu diesem Ansatz finden Sie in the reference.

Welcher Ansatz Sie wählen, hängt wirklich von Ihnen ab. Ich empfehle, ein kleines Beispiel zusammenzustellen, das jeden testet, um zu sehen, welcher für Sie sinnvoller ist. Dann können Sie eine MCVE dieses kleinen Beispiels veröffentlichen, wenn Sie nicht weiterkommen. Viel Glück.