如何在重绘时保留现有图形

时间:2014-04-24 22:08:06

标签: animation processing draw

我对Processing非常陌生。我正试图从我控制的“球”结束的最后一个矩形画一条线到它经过的下一个矩形。我几乎得到了它,但无法弄清楚我应该如何重新排列代码以使线条持久,并且不会被重绘背景所掩盖,或者在每个绘制实例中绘制。

这是我到目前为止所拥有的。只需使用前两个矩形进行测试:

int radius, directionX, directionY, x1;
int previousX, previousY, currentX, currentY, a, b, c, d;
float x, y, speed;

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

  directionY = 0;
  directionX = 1;
  radius = 30;

  previousX = -1;
  previousY = -1;
  currentX = 0;
  currentY = 0;

  a = 20;
  b = 20; 
  c = 20; 
  d = 20;

  x= 30;
  y= 30;
  speed = 2;
}

void draw () {
  int n1= 75;
  int n2= 325;
  int l= 100;

  background(255); 
  stroke(4);

  fill(25,81,139,a);
  rect(n1,n1,l,l);

  if((x>n1) && (x<(n1+100)) && (y>n1) && (y<n1+100)){
     a=a+ 1;
     fill(25,81,139,a);
     rect(n1,n1,l,l);

     currentX = 125;
     currentY = 125;
       if(previousX>0 && previousY>0) {
         line(previousX,previousY,currentX, currentY);
       }
    }
       previousX = 125;
       previousY = 125;   

  fill(25,81,139,b);
  rect(n1,n2,l,l);

  if((x>n1) && (x<(n1+100)) && (y>(n2)) && (y<(n2+100))){
     b=b+ 1;
     fill(25,81,139,a);
     rect(n1,n2,l,l);
     currentX = 125;
     currentY = 325;
       if(previousX>0 && previousY>0){
         line(previousX,previousY,currentX, currentY);
       }
       previousX = 125;
       previousY = 325;  

    }    

  fill(25,81,139,c);
  rect(n2,n1,l,l);

  fill(25,81,139,d); 
  rect(n2,n2,l,l);

  x=x+speed*directionX;
  y=y+speed*directionY;

  //boundaries
  if ((x>width-radius) || (x<radius)){
    directionX= -directionX;}

  if ((y>height-radius) || (y<radius)){
    directionY= -directionY;}  

 fill(255);
 stroke(0);
 strokeWeight(1);
 ellipse(x,y,radius,radius);   
}      
void keyPressed()   //movement ===========================================================
{
  if (key == CODED)
  {
    if (keyCode == DOWN)
    {
      directionX=0;
      directionY=1;
    }
    else if (keyCode == UP)
    {
      directionX=0;
      directionY=-1;
    }
    else if (keyCode == LEFT)
    {
      directionX= -1;
      directionY= 0;
    }
    else if (keyCode == RIGHT)
   {
     directionX= 1;
     directionY= 0;
   }
  }
}

3 个答案:

答案 0 :(得分:0)

遗憾的是,我无法通过拨打background(255)来阻止某些内容被覆盖。您可能不会将background(255)视为设置背景颜色,而是将其视为使用指定颜色清除屏幕。

如果您担心在每个实例上重绘,那么在性能方面通常不是一个大问题。

如果您只需要清除部分屏幕,您当然可以手动仅绘制该部分,但如果您确实需要清除区域而不清除重叠区域,则可能需要使用PGraphics来查看创建单独的图层,或者可能是这样的图书馆:https://github.com/gluon/Layers(如果你可以让它工作。只有在我转向其他解决方案之前才有点自己工作)

答案 1 :(得分:0)

我认为这解决了你的问题,我添加了一些条件的变化,每次椭圆在一个正方形时检查,我总是保持最后和当前位置,在绘制函数结束时我画线怀特这个职位。

int radius, directionX, directionY, x1;
int previousX, previousY, currentX, currentY, a, b, c, d;
float x, y, speed;

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

  directionY = 0;
  directionX = 1;
  radius = 30;

  previousX = -1;
  previousY = -1;
  currentX = 0;
  currentY = 0;

  a = 20;
  b = 20; 
  c = 20; 
  d = 20;

  x= 30;
  y= 30;
  speed = 2;
}

void draw () {
  int n1 = 75;
  int n2 = 325;
  int l = 100;

  background(255); 
  stroke(4);

  fill(25,81,139,a);
  rect(n1,n1,l,l);

  //Up rigth square
  if((x>n1) && (x<(n1+100)) && (y>n1) && (y<n1+100)){
     a=a+ 1;
     fill(25,81,139,a);
     rect(n1,n1,l,l);

     if(currentX != 125 || currentY != 125){
       previousX = currentX;
       previousY = currentY;
     }
     currentX = 125;
     currentY = 125;
  }

  fill(25,81,139,b);
  rect(n1,n2,l,l);

  //Bottom rigth square
  if((x>n1) && (x<(n1+100)) && (y>(n2)) && (y<(n2+100))){
     b=b+ 1;
     fill(25,81,139,a);
     rect(n1,n2,l,l);

     if(currentX != 125 || currentY != 325){
       previousX = currentX;
       previousY = currentY;
     }
     currentX = 125;
     currentY = 325;     
  }

  fill(25,81,139,c);
  rect(n2,n1,l,l);

  fill(25,81,139,d); 
  rect(n2,n2,l,l);

  x=x+speed*directionX;
  y=y+speed*directionY;

  //boundaries
  if ((x>width-radius) || (x<radius)){
    directionX= -directionX;}

  if ((y>height-radius) || (y<radius)){
    directionY= -directionY;}  

  //Here we draw the line bettwen squares
  if(previousX > 0 && previousY > 0 && 
    currentX > 0 && currentY > 0)
    line(previousX,previousY,currentX, currentY);

 fill(255);
 stroke(0);
 strokeWeight(1);
 ellipse(x,y,radius,radius);

}

void keyPressed()   //movement ===========================================================
{
  if (key == CODED){
    if (keyCode == DOWN){

      directionX=0;
      directionY=1;

    }
    else if (keyCode == UP){
      directionX=0;
      directionY=-1;
    }
    else if (keyCode == LEFT){
      directionX= -1;
      directionY= 0;
    }
    else if (keyCode == RIGHT){
     directionX= 1;
     directionY= 0;
   }
  }

}

希望这可能有用,如果您有更多问题请联系或添加评论,顺便说一下,对于刚接触Processing的人来说这是一个不错的工作。 关心何塞。

答案 2 :(得分:0)

我认为这里的诀窍是一直画线(只要有一个盒子在它之间绘制),当球进入一个新盒子时改变端点。就像你说的那样,你几乎就在那里,只需要进行一些调整就可以了。以下是我将如何处理问题的伪代码:

void draw() {
  draw background

  if (previous and current coords are different) {
    draw line from previous coords to current coords
  }

  if (ball is within a box) {
    draw the box highlighted
    if (current coords are not the center of the box) {
      set previous coords to current coords
      set current coords to center of the box
    }
  }
  else {
    draw the box normally
  }

  do the same for remaining boxes
}