阻止背景刷新？

Question

我试图让我的GIF做类似于this gif的事情。

我已经能够绘制线条和'行星'到轨道，但无法弄清楚如何保持连接两个圆的线，就像gif一样。

以下是基本代码：

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

感谢您提供任何帮助/建议！

Answer 1

问题是你在每一帧中都会调用background()，这会清除你已经绘制的任何内容。

因此，您需要停止调用background()，或者需要每帧重绘旧行。

如果您只是将background()功能从draw()功能转移到setup()功能，那么您已经有50％左右：

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

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

  float t = millis()/1000.0f;

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

//  showMouse();
  connectingLines();
}

但是，原始动画不会显示省略号的先前位置。因此，您需要通过调用background()函数清除前一帧，然后重绘前一行位置。你可以通过一个包含那些先前位置的ArrayList来做到这一点。

这是一个使用ArrayList重绘鼠标的简单示例：

ArrayList<PVector> points = new ArrayList<PVector>();

void setup() {
  size(500, 500); 
}

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

  points.add(new PVector(mouseX, mouseY));

  for(PVector p : points){
    ellipse(p.x, p.y, 10, 10);
  }

}

你需要做一些非常相似的事情，但是你必须一次跟踪两个点，而不是一个，因为你跟踪的是两个椭圆而不仅仅是鼠标位置。