How to draw a line between the previous click and the most recent click?

Question

int previousX;
int previousY;
void  setup() {
   size(400, 400);
   stroke(255);
} 
void mousePressed(){
  previousX = mouseX;
  previousY = mouseY;
}
void  draw() {
   background(75, 55, 43);
   line(previousX,previousY,mouseX, mouseY);   
}

The end result is supposed to be when the user clicks the mouse, a line will appear from 0,0 to wherever the user clicks the mouse, then when the user clicks the mouse again, another line is drawn from the previous mouse click to the new mouse click. Example: line(0,0,50,43) line(50,43,25,67) line(25,67,99,77). The code I currently doesn't show any permanent lines, but it has the previous mouse click.

Answer 1

The simplest solution would be not to draw over the previous lines with background(...) . It would look like this:

int previousX;
int previousY;
void  setup() {
   size(400, 400);
   stroke(255);
} 
void mousePressed(){
  line(previousX,previousY,mouseX, mouseY);   
  previousX = mouseX;
  previousY = mouseY;
}
void  draw() {
}

Note, that it will only work, if you don't need to clear the canvas with background(...) .

Answer 2

In order to draw the previous permanent lines, you need to store all the previous points. This can be achieved by using an ArrayList . The points were stored using PVector to group the x and y components.

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

void  setup() {
   size(400, 400);
   stroke(255);
   
   // The first point is (0, 0)
   points.add(new PVector(0, 0));
} 
void mousePressed(){
  // Each time the mouse is pressed add a new point
  points.add(new PVector(mouseX, mouseY));
}
void  draw() {
   background(75, 55, 43);
   
   // Loop through the array list
   for(int i = 0; i < points.size(); i++){
     if(i == points.size()-1){
       // For the last point draw a line to the mouse
       line(points.get(i).x, points.get(i).y, mouseX, mouseY);
     }else{
       // Draw a line between each of the points
       line(points.get(i).x, points.get(i).y, points.get(i+1).x, points.get(i+1).y);
     }
   }
}