如何刪除之前繪製（）後處理形狀

Question

我無法弄清楚這一點。我有一個帶有小旋轉矩形的素描。它們在每個draw（）上旋轉。但是前一個矩形仍然可見。我嘗試過移動背景（），但是它或者除去了一個或者沒有清除屏幕的所有矩形。我希望能夠在每次抽籤後清除所有矩形。

下面是代碼：

//Create array of objects 
ArrayList<Circle> circles = new ArrayList<Circle>(); 
ArrayList<Connector> centrePoint = new ArrayList<Connector>(); 

void setup(){ 
    size(800, 800); 
    frameRate(1); 
    rectMode(CENTER); 
    background(204); 
    for(int i = 1; i < 50; i++){ 
     float r = random(100,height-100); 
     float s = random(100,width-100); 
     float t = 20; 
     float u = 20; 
     println("Print ellipse r and s " + r,s); 
     circles.add(new Circle(r,s,t,u,color(14,255,255),random(360),random(5),random(10))); 
    } 
    //Draw out all the circles from the array 
    for(Circle circle : circles){ 
     circle.draw(); 
     float connectStartX = circle.x1; 
     float connectStartY = circle.y1; 
     println("PrintconnectStartX and Y " + connectStartX,connectStartY); 
     for(Circle circleEnd : circles){ 
      float connectEndX = (circleEnd.x1); 
      float connectEndY = (circleEnd.y1); 
      centrePoint.add(new Connector(connectStartX,connectStartY,connectEndX,connectEndY)); 
} 
} 

//For each ellipse, add the centre point of the ellipse to array 
    for(Connector connectUp : centrePoint){ 
     println(connectUp.connectStartX ,connectUp.connectStartY ,connectUp.connectEndX ,connectUp.connectEndY); 
     stroke(100, 0, 0); 
    if (dist(connectUp.connectStartX ,connectUp.connectStartY ,connectUp.connectEndX ,connectUp.connectEndY) < 75){ 
     connectUp.draw(connectUp.connectStartX ,connectUp.connectStartY ,connectUp.connectEndX ,connectUp.connectEndY); 
    } 
    } 

//For the line weight it should equal the fat of the node it has come from ie 
//for each circle, for each connectUp if the x==connectStartX and y==connectStartY then make the line strokeWeight==fat 
for(Circle circle : circles){ 
for(Connector connectUp : centrePoint){ 

    if (connectUp.connectStartX == circle.x1 & connectUp.connectStartY == circle.y1 & (dist(connectUp.connectStartX ,connectUp.connectStartY ,connectUp.connectEndX ,connectUp.connectEndY) < 75)){ 
    print(" true "+ circle.fat); 
    float authority = circle.fat; 
    strokeWeight(authority*1.5); 
    connectUp.draw(connectUp.connectStartX ,connectUp.connectStartY ,connectUp.connectEndX ,connectUp.connectEndY); 
    } 
    } 
} 
} 

void update(){ 
} 
void draw() { 
for(Circle circle : circles){ 
    circle.rot =+0.02; 
    circle.draw(); 
    circle.rot = random(-6,6); 

} 
} 


//Need to connect each ellipse to all the other ellipses 

class Connector { 
    public float connectStartX; 
    public float connectStartY; 
    public float connectEndX; 
    public float connectEndY; 
    public color cB; 
    public float thickness; 

    public Connector(float connectStartX, float connectStartY, float connectEndX, float connectEndY){ 
     this.connectStartX = connectStartX; 
     this.connectStartY = connectStartY; 
     this.connectEndX = connectEndX; 
     this.connectEndY = connectEndY; 
     //this.cB = tempcB; 
     //this.thickness = thickness; 
    } 

void draw(float connectStartX, float connectStartY, float connectEndX, float connectEndY){ 
    line(connectStartX, connectStartY, connectEndX, connectEndY); 
     // float fat = random(255); 
     //fill(fat); 
     stroke(100, 0, 0); 
    } 
    } 

class Circle{ 
    public float x1; 
    public float y1; 
    public float x2; 
    public float y2; 
    public color cB; 
    public float rot; 
    public float fat = random(5); 
    public float fert = 0.1; 

    public Circle(float x1, float y1, float x2, float y2, color tempcB, float rot, float fat, float fert){ 
     this.x1 = x1; 
     this.y1 = y1; 
     this.x2 = x2; 
     this.y2 = y2; 

     this.cB = tempcB; 
     //Tilt - I think this is done in radians 
     this.rot = rot; 
     //Authority -this is the fill 
     this.fat = fat; 
     //Fertility- this is a multiplier for the tilt 
     this.fert = fert; 
    } 
    void draw(){ 
     pushMatrix(); 
     translate(x1, y1); 
     fert = random(0.5); 
     rot = random(-6,6); 
     rotate(rot*fert); 
     translate(-x1, -y1); 
     //float fat = random(255); 
     fill(fat); 
     rect(x1, y1, 24, 36); 
     popMatrix(); 
    } 
} 

Answer 1

在你的代碼中你已經看到了你在之前的文章中看到過的幾件事。你做繪畫的方式沒有多大意義，我會解釋爲什麼。

這裏是最處理草圖做：

• 使用setup()功能設置，你會在你的程序中使用的任何數據結構。 請勿執行setup()函數的任何繪圖。
• 每幀調用background()清除舊幀。
• 繪製您希望繪製在draw()函數中的框架中的所有內容。
• 修改數據結構以更改您在屏幕上繪製的內容。

你的代碼是一個MCVE太長了一點，所以這裏的處理該圖中更標準的方式一個小例子：

ArrayList<PVector> circles = new ArrayList<PVector>(); 

void setup() { 
    size(500, 500); 
    ellipseMode(RADIUS); 

    //setup your data structures here 
    circles.add(new PVector(250, 250)); 

    //don't do any drawing yet 
} 

void mousePressed() { 
    //modify the data structure whenever you want to change what's on the screen 
    circles.add(new PVector(mouseX, mouseY)); 
} 

void keyPressed() { 
    //modify the data structure whenever you want to change what's on the screen 
    if (!circles.isEmpty()) { 
    circles.remove(0); 
    } 
} 

void draw() { 
    //call background every frame to clear out old frames 
    background(0); 

    //draw everything 
    for (PVector p : circles) { 
    ellipse(p.x, p.y, 20, 20); 
    } 
} 

注意如何，這是從你的不同」重新做。這裏就是你要做的：

• 您使用setup()功能設置你的數據結構，但後來你畫的背景和一些物體的畫面。
• 然後您不要撥打background()來自draw()，所以您總是堅持已經繪製的任何東西。
• 然後，您只需在屏幕上繪製所需的子集，以免重新繪製整個場景。

你必須修改代碼以不再從setup()畫什麼，調用background()功能每一幀，並提請您想每一幀畫面上的一切。

Answer 2

你在做什麼是印刷的每一個圓或線...等。你需要有一個定時器，每隔一段時間就會刪除它們。如果你做得太快，你會看起來像頻閃。所以有一個定時器，每隔一段時間從數組列表中刪除第一個矩形。