如何在Processing中的draw()之后删除以前的形状

时间:2016-02-22 10:29:35

标签: processing

我无法弄清楚这一点。我有一个草图,上面有很少的旋转矩形。它们在每次绘制时旋转()。但是前一个矩形仍然可见。我尝试移动背景()但它要么除去一个所有的矩形或者它不清除屏幕。我希望能够在每次抽奖后清除所有矩形。

以下是代码:

 
//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();
   }
}

2 个答案:

答案 0 :(得分:3)

您在代码中发现了一些我在之前的帖子中看到过的内容。你做绘画的方式没有多大意义,我会解释原因。

以下是大多数处理草图的作用:

  • 使用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()函数,并在每一帧上在屏幕上绘制所需内容。

答案 1 :(得分:0)

您正在做的是打印每个圆圈或线条等等。你需要有一个定时器,每隔一段时间就会删除它们。如果你做得太快,你就会看到像频闪一样的频闪。所以有一个定时器,每隔一段时间就从数组列表中删除第一个rect。