Help with background refresh on parts of a sketch

piethon

I am trying to get my gif to do something similar to

I have been able to get the line to draw, and the 'planets' to orbit, but can't figure out how to keep the line connecting the two circles, like the gif does.

Here's the basic code:

    int x = 500;
    int y = 500;
    int radius = y/2;
    int cX = x/2;
    int cY = y/2;

    String text1;

    int lg_xBall;
    int lg_yBall;
    int sm_xBall;
    int sm_yBall;

    void setup() {
      size(x, y); 
      smooth();
      colorMode(RGB);
    }

    void draw() {
      background(0);
      stroke(255);

      float t = millis()/1000.0f;

      drawSmBallOrbit(100);
      drawLgBallOrbit(100);
      moveSmBall(t);
      moveLgBall(t);
      sun();

    //  showMouse();
      connectingLines();

    }

    void drawCircle() { // This will draw a simple circle
      stroke(1);
      // x1=a+r*cos t, y1=b+r*sin t
      ellipse(x/2, y/2, x/2, y/2);
    }

    void drawLines() {  // This will draw lines from the center of the circle.
      stroke(1);
      line(x/2, y/2, radius/2, radius); // line from 6 to center
      line(x/2, y/2, x/2, y/4); // line from 12 to center
      for (int i = 0; i <= 5; i+=2.5) {
        float x1 = x/2+radius/2*cos(i);
        float y1 = y/2+radius/2*sin(i);
        line(x/2, y/2, x1, y1);
      }
    }

    void moveSmBall(float ky) { // This will create, and move, a small 'planet'
      pushStyle();
      stroke(100);
      sm_xBall = (int)(cX+radius*cos(ky));
      sm_yBall = (int)(cY+radius*sin(ky));
      fill(190, 0, 0);
    //  background(0);
      ellipse(sm_xBall, sm_yBall, 10, 10);
      popStyle();
    }
    void drawSmBallOrbit(float opacity) {
      pushStyle();
      stroke(255, opacity);
      strokeWeight(1);
      noFill();
      ellipse(x/2, y/2, cX+radius, cY+radius);
      popStyle();
    }

    void moveLgBall(float kx) {
      kx = kx/.7;
      pushStyle();
      lg_xBall = (int)(cX+radius*cos(kx)*.6);
      lg_yBall = (int)(cY+radius*sin(kx)*.6);
      fill(0, 0, 230);
      ellipse(lg_xBall, lg_yBall, 30, 30);
      popStyle();
    }

    void drawLgBallOrbit(float opacity) {
      pushStyle();
      stroke(255, opacity);
      strokeWeight(1);
      noFill();
      ellipse(x/2, y/2, (cX+radius)*.6, (cY+radius)*.6);
      popStyle();
    }

    void sun() {
      pushStyle();
      fill(250, 250, 0);
      ellipse(cX, cY, 40, 40);
      popStyle();
    }

    void connectingLines() {
      line(sm_xBall, sm_yBall, lg_xBall, lg_yBall);
    }

    void showMouse() {
      text("X: " + mouseX, x/2, y/2-30);
      text("Y: " + mouseY, x/2, y/2-50); 
    }

I have had someone suggest using an array to pass variables into, and draw lines from that, but I'm unsure A) how I would do that (I understand arrays, just not sure where/how I'd use them here), and B) draw lines using that array...but again, I'm not sure how those wouldn't also get "refreshed over" by the background.

Here's what that sketch looks . (Ignore the colors dropping in and out, that's due to the gifExport, not my sketch - the sketch looks fine). Now, I just need the lines to stay there (as in original up top). Any ideas? If I remove "background(0);" from the draw() routine, I can see the lines remaining, like I want - the only problem is, the "planets" also remain on screen, instead of simply moving...

Thanks so much for any help/advice!

GoToLoop

https://Processing.org/reference/createGraphics_.html
https://Processing.org/reference/PGraphics.html

piethon

So, would I create a graphic of the planets? And that graphic "sits" above the background? (Is that what "off-screen graphics buffer" is?) I don't need "the answer", as I like to learn of course, but can you give a little more of a hint as to what to do with PG Graphics?

GoToLoop

In Processing, PGraphics is a PImage which allows us to draw upon them.
We can display them on the canvas just like any PImage, via image(), set() or background().
Use beginDraw() & endDraw() when modifying the PGraphics.
BtW, the canvas is itself a PGraphics too! :P

P.S.: use clear() in order to fill up the PGraphics w/ 100% transparent black. ;)
https://Processing.org/reference/clear_.html

piethon

GoToLoop, I always appreciate your help! I read through those pages, and tried to create a test graphic, but I think I'm misunderstanding something. Here's the sub for it (note: I inserted this into the above code, so all the rest is still there).

PGraphics pg;
void setup(){
 pg = createGraphics(10,10);
}

void graphicCircle(float ky2){
  pg.beginDraw();
  sm_xBall2 = (int)(cX+radius*cos(ky2));
  sm_yBall2 = (int)(cY+radius*sin(ky2));
  pg.fill(255,0,0);
  pg.ellipse(sm_xBall2,sm_yBall2,10,10);
  pg.endDraw();
  image(pg,50,50);
}

But, if I put graphicCircle(t); into draw();, nothing shows up. I was expecting a red ellipse to track around the orbit.

GoToLoop

I believe for your case you should have a PGraphics w/ the same width & height as the canvas:
pg = createGraphics(width, height);

The only diff. is that you keep drawing the lines upon the main canvas.
But the ellipse() upon the PGraphics.