如何在处理中的draw（）之后删除以前的形状

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() 函数设置数据结构，然后将背景和一些对象绘制到屏幕上。
• 然后你就不会从draw() 调用background()，所以你总是被已经画的东西卡住了。
• 然后您只能在屏幕上绘制您想要的子集，因此您无法重绘整个场景。

您必须修改您的代码以不再从setup() 中绘制任何内容，每帧调用background() 函数，并且每帧都在屏幕上绘制您想要的所有内容。

Answer 2

您正在做的是打印每一个圆圈或线条......等。您需要有一个计时器，可以每隔一段时间删除它们。如果你做得太快，你会得到一个像闪光灯一样的外观。所以有一个计时器可以每隔一段时间从数组列表中删除第一个矩形。