Остановить фон от обновления?

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

} 

Вы должны были бы сделать что-то очень похожее, но вы должны следить за два точек, в то время вместо одного, поскольку вы отслеживаете два эллипса, а не только позицию мыши.