How to avoid that the background() call erase a previously drawn object?

Hello, everyone!

I want to make an animation where there are two circles orbiting some point, and I want to draw a line between the circles each 10 frames for example. The thing is, these lines are erased in the next frame due to the background(0) function. Do you know how can I draw the moving circles and at the same time draw these lines without them getting erased?

Thank you.

1 Like

you must remember them!
( as the begin and end point is possibly the center of the two circles you best do
2 arrays of PVector with the position of the circles. )

OR
the position of the circles is defined by some math? and a loop?
you also can do a inner loop and do all that again
what you do in the outer loop for the circle position,
just not draw the circles again,only the lines when the count condition fits.

4 Likes

A third option is to use a graphics buffer like PGraphics, then display it as an image as the “background”. Then you can accumulate lines on it while still moving the circles each frame.

3 Likes

For a start, just don’t use background and don’t draw the circles :wink:

Only draw the lines

following this idea:

you must remember them!
( as the begin and end point is possibly the center of the two circles you best do
2 arrays of PVector with the position of the circles. )

here is an example code where you can enter lines with two times clicking the mouse.
It also uses background.

You have to join my code and yours. The lists and the display of the lines you can take from my code. But the stuff in mousePressed that fills the lists you have to modify with your data from the two rotating balls.

Chrisir


// the coordinates of the lines: each line goes from and to a point (PVector).
// The lists are parallel in that the elements of both lists together make a line: 
// the 0th element of both lists, the 1st element of both lists, the 2nd etc. 
ArrayList<PVector> from = new ArrayList(); 
ArrayList<PVector> to = new ArrayList();

// necessary to know if the mouse enters a from or a to point...
int situation=0;

// -------------------------------------------------------------------------
// processing core functions  

void setup() {
  size(600, 1000);
  stroke(255);
}

void draw() {
  background (0); 

  // show all stored lines 
  for (int i = 0; i < to.size(); i++) {
    PVector currentFrom = from.get(i);
    PVector currentTo   = to.get(i);
    // the line 
    linePV ( currentFrom, currentTo );
  }//for
}//func 

// -------------------------------------------------------------------------
// Inputs 

void mousePressed() {
  // depending on situation we store mouse-position as from or as to 
  if (situation==0) 
    from.add (new PVector (mouseX, mouseY));
  else if (situation==1)
    to.add (new PVector (mouseX, mouseY));

  // manage situation variable  
  situation++;
  if (situation>1)
    situation=0;
}

// -------------------------------------------------------------------------
// Tools 

void linePV ( PVector pv1, PVector pv2) {
  line(pv1.x, pv1.y, 
    pv2.x, pv2.y);
}//func 
//
1 Like