How to keep existing graphics on redraw

Question

I'm pretty new to Processing. I'm trying to draw a line from the last rectangle my controlled "ball" was over, to the next rectangle it passes over. I've almost got it, but can't figure out how I should rearrange the code to make the lines last, and not be covered up by the redrawing of the background, or be drawn at every instance of draw.

Here's what I have so far. Just testing it with the first two rectangles:

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

Can you write a clear title? The title does not say anything about your problem. — Kevin Rave, Apr 24 '14 at 22:13

score 0 · Answer 1 · answered Apr 24 '14 at 23:05

There is unfortunately no way I know of to prevent something from being covered by a call to background(255). You might wan't to consider background(255) not as setting the background color, but as clearing the screen using the specified color.

If you worry about redrawing at every instance it is usually not a big problem performance-wise.

If you need to only clear part of the screen you can of course draw over only that part manually, but if you really need to clear areas without clearing overlapping areas, you might want to look into using PGraphics to create separate layers, or possibly a library like this: https://github.com/gluon/Layers (If you can get it working. Only got it kinda-sorta working myself before I moved on to other solutions)

score 0 · Answer 2 · answered Apr 26 '14 at 05:52

I think this solves your problem, I add some changes to the conditionals that check every time the ellipse was in a square and I keep the last and current position at all times, at the end of the draw function I draw the line whit this positions.

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

}

Hope this could be useful, if you have more problems please contact or add comments, by the way it's a nice job for someone new to Processing. Regards Jose.

score 0 · Answer 3 · answered Apr 27 '14 at 04:25

I think the trick here is to draw the line all the time (as long as there a boxes to draw it between), changing the endpoints when the ball enters a new box. Like you said, you are almost there, just a few tweaks to draw are necessary. Here is some pseudocode for how I would approach the problem:

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
}

How to keep existing graphics on redraw

3 Answers3