How to remove old lines when new ones heve been drawn? - processing

Question

I am experienced in Web Development but new to Processing.
I have come up with a simple sketch that draws some lines, making nice spirograph-like images:
float x1 = random(width);
float y1 = random(height);
float x2 = random(width);
float y2 = random(height);
float speedx1 = random(5,20);
float speedy1 = random(5,20);
float speedx2 = random(5,20);
float speedy2 = random(5,20);
void setup() {
size(640, 360);
background(255);
strokeWeight(0.5);
frameRate(15);
}
void draw() {
for (int i = 0; i < 1; i++) {
if ((x1 > width) || (x1 < 0)) {
speedx1 = speedx1 * -1;
}
if ((y1 > height) || (y1 < 0)) {
speedy1 = speedy1 * -1;
}
if ((x2 > width) || (x2 < 0)) {
speedx2 = speedx2 * -1;
}
if ((y2 > height) || (y2 < 0)) {
speedy2 = speedy2 * -1;
}
x1 += speedx1;
y1 += speedy1;
x2 += speedx2;
y2 += speedy2;
line(x1, y1, x2 ,y2);
if (frameCount%500 == 0) saveFrame("spirograph-#####.png");
}
}
This is fine, but after a while the image is cluttered with lines because they don't go away. So I'd like to keep some lines (maybe 15) and delete the old ones.
I could of course write the coordinates of the old ones to an array and make a white line of the first element over the black line, then delete the first element of the array and create a new array element at the end. But this would draw white pixels over the newer lines, whic is undesirable.
Is there a way to solve this?
Maybe create objects that are later being cleared?
Thanks!

Answer 1

I recommend to create a class CLine, which can holde the coordinates of a line and draw a line:
public class CLine {
public CLine() {}
public float _x1 = 0, _y1 = 0, _x2 = 0, _y2 = 0;
public void set( float x1, float y1, float x2, float y2 ) {
_x1 = x1; _y1 = y1; _x2 = x2; _y2 = y2;
}
public void draw() {
if ( _x1 != _x2 || _y1 != _y2 )
line(_x1, _y1, _x2 , _y2);
}
};
Create an array of CLine objects and initialize it in the the setup function:
CLine [] lines;
int current = 0;
void setup() {
int no_of = 15;
lines = new CLine[no_of];
for (int i = 0; i < no_of; ++ i )
lines[i] = new CLine();
size(640, 360);
background(255);
strokeWeight(0.5);
frameRate(15);
}
Create a new line in every draw and store the coordinates to the array of CLine objects. Use a control variable next_line_index, to hold the index of the array element where the next line to be stored. If the counter reaches the end of the array, it has to bes et to 0.
Now you can clear the screen in every frame and you can draw all the lines which are stored in the array to a clean view:
float x1 = random(width);
float y1 = random(height);
float x2 = random(width);
float y2 = random(height);
float speedx1 = random(5,20);
float speedy1 = random(5,20);
float speedx2 = random(5,20);
float speedy2 = random(5,20);
int next_line_index = 0;
void draw() {
if ((x1 > width) || (x1 < 0)) {
speedx1 = speedx1 * -1;
}
if ((y1 > height) || (y1 < 0)) {
speedy1 = speedy1 * -1;
}
if ((x2 > width) || (x2 < 0)) {
speedx2 = speedx2 * -1;
}
if ((y2 > height) || (y2 < 0)) {
speedy2 = speedy2 * -1;
}
x1 += speedx1;
y1 += speedy1;
x2 += speedx2;
y2 += speedy2;
lines[next_line_index++].set(x1, y1, x2, y2 );
if (next_line_index == lines.length) next_line_index = 0;
background(255);
for (int j = 0; j < lines.length; ++ j )
lines[j].draw();
if (frameCount%500 == 0) saveFrame("spirograph-#####.png");
}
Preview:

Answer 2

I could of course write the coordinates of the old ones to an array and make a white line of the first element over the black line, then delete the first element of the array and create a new array element at the end. But this would draw white pixels over the newer lines, whic is undesirable.
You're on the right track. You want to store the coordinates of your lines in an array (or better yet, in an ArrayList of Line instances). But you don't want to "erase" the lines one at a time.
Instead, you probably want to clear out everything! You can do this by calling the background() function. Then redraw the lines that you want.
Here's a very basic example:
void draw(){
background(255);
for(Line line : lines){
line.draw();
}
}
void mousePressed(){
lines.add(new Line(0, 0, mouseX, mouseY));
if(lines.size() >= 10){
lines.remove(0);
}
}
This code assumes you've created a Line class, but more importantly notice how previous frames are cleared out every time draw() is called. This is a very standard approach and is probably what you want to do for most Processing sketches.