如何在处理中绘制()后删除先前的形状 [英] How to remove previous shape after draw() in Processing

问题描述

我想不通.我有一个带有小旋转矩形的草图.它们在每次 draw() 时旋转.但是之前的矩形仍然可见.我尝试移动 background() ，但它要么摆脱了除一个之外的所有矩形，要么不清除屏幕.我希望能够在每次绘制后清除所有矩形.

I cant figure this out. I have a sketch with little rotating rectangles on it. They rotate on every draw(). However the previous rectangle remains visible. I tried moving background() around but it either gets rid of all the rectangles apart from one or it doesn't clear the screen. I would like to be able to clear all the rectangles after each 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();
   }
}

推荐答案

您的代码中发生了一些我在您之前的帖子中看到的事情.你画画的方式没有多大意义，我会解释原因.

You've got a few things going on in your code that I've seen in your previous posts. The way you're doing your drawing doesn't make a ton of sense, and I'll explain why.

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

Here's what most Processing sketches do:

• 使用 setup() 函数来设置您将在程序中使用的任何数据结构.不要从 setup() 函数中进行任何绘图.
• 每帧调用 background() 以清除旧帧.
• 在draw() 函数中绘制您想在框架中绘制的所有内容.
• 修改数据结构以更改您在屏幕上绘制的内容.

• Use the setup() function to setup any data structures you'll use in your program. Don't do any drawing from the setup() function.
• Call background() every frame to clear out old frames.
• Draw everything you want to be drawn in the frame in the draw() function.
• Modify the data structures to change what you're drawing on the screen.

您的代码对于 MCVE 来说有点太长了，所以这里有一个以更标准的方式处理绘图的小例子:

Your code is a bit too long for an MCVE, so here's a little example that handles the drawing in a more standard way:

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

请注意这与您正在做的事情有何不同.您可以这样做:

Notice how this is different from what you're doing. Here's what you do:

• 您使用 setup() 函数来设置数据结构，然后将背景和一些对象绘制到屏幕上.
• 然后你就不会从 draw() 调用 background()，所以你总是被已经绘制的东西困住了.
• 然后，您只能在屏幕上绘制所需内容的一个子集，因此您无法重绘整个场景.

• You use the setup() function to setup your data structures, but then you draw the background and some of the objects to the screen.
• You then don't call background() from draw(), so you're always stuck with whatever has already been drawn.
• You then only draw a subset of what you want on the screen, so you can't redraw your whole scene.

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

You have to modify your code to no longer draw anything from setup(), to call the background() function every frame, and to draw everything you want on the screen every frame.

这篇关于如何在处理中绘制()后删除先前的形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！