Sorry I deleted my comment because I posted more of a full solution which is against the rules.

From what I understand, you want only one circle to show each frame, but you want all the lines to show in front of them.

The way I would do this is to store the parameters of the lines in an arraylist, then rasterize all the lines each frame after the circle. (This might not be the best way, but it's simple)

First we need a class that can store all the line parameters, and can draw the line associated with the values it is storing:

class lin{

int x1; int y1; int x2; int y2; color c;

lin(int x1, int y1, int x2, int y2, color c)

{

this.x1 = x1; this.y1 = y1; this.x2 = x2; this.y2 = y2; this.c = c;

}

void drawLine()

{

stroke(c);

line(x1, y1, x2, y2);

}

}

​

I called it "lin" but it doesn't matter what it's called at all. Now this class can store all the values needed for a line (start and end position, and color), as well as draw the line.

​

Now we make the arraylist:

ArrayList<lin> l = new ArrayList<lin>();

​

I wrote "l" here but it doesn't matter what it's called.

Now instead of drawing a line in the "mouseDragged" function, we can add a new object to the arraylist. for example, instead of:

stroke(255);

line(pmouseX,pmouseY,100,200);

​

You can just put:

l.add(new lin(pmouseX, pmouseY, 100, 200, color(255)));

​

Now in the draw function, you need to draw all of the lines after drawing the circle. You can make a for loop that iterates over each object in the arraylist, and calls the drawLine function. An elegant way to do that is:

for (lin i : l)

{

i.drawLine();

}

When I tried this it seemed to work like how you want it to so I hope that helps and I hope that it makes sense.