3.1 Mouse Tracking and Lists

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

void draw(){
  ellipse(mouseX,mouseY,100,100);
}

If we create a background in the sketch we will only see a circle placed at the current mouse position. If we want to see the trail of circles while we are drawing a background we will need to keep track of the circle positions. To do this we will create a list. A list is a type of variable that holds many values in sequential order.  You can think of the variable like a street with mailboxes storing value. The name of the street is the variable name and the address in the list or index is the mailbox number. In a list the index starts with 0 and continues 1,2,3…. depending on how many values are in the list.

In processing their are lists for the three main types of varibales:

	
IntList wholenums = new IntList();
FloatList angles = new FloatList();;
StringList names = new StringList();

But in order to store the coordinates of the mouse position we will need to use an ArrayList. An ArrayList can store any other types of values or objects. In this case we want to store the position as vector or in processing PVector. Below is how we declare an Arraylist of PVectors.

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

To cycle through the values in an ArrayList we will need to use a loop. There are two types of loops in processing, for and while loops. We will almost always use a while loop. The basic structure of a loop is a counter and a condition. The loop will continue until this condition is met and that condition is usually the counter being over a certain value. The last part of the declaration of the loop will be to increment the counter by one each time the loop runs. Here is the basic structure of a loop:

for(int i = 0; i < 100; i++){ 
  Actions to execute each time the loop runs;
}

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

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

void draw(){
  background(0);
  int xpos = mouseX;
  int ypos = mouseY;
  trace.add(new PVector(xpos,ypos,0));
  for(int i = 0; i < trace.size(); i++){
    PVector newpos = trace.get(i);
    ellipse(newpos.x,newpos.y,100,100);
  }
}

ArrayList <PVector> trace = new ArrayList <PVector>();
ArrayList <PVector> RGB = new ArrayList <PVector>();

void setup(){
  size(800,800);
  int xpos = mouseX;
  int ypos = mouseY;
  trace.add(new PVector(xpos,ypos,0));
  
  float startR = random(255);
  float startG = random(255);
  float startB = random(255);
  
  RGB.add(new PVector(startR,startG,startB));
 
}

void draw(){
  background(0);
  
  PVector NewC = RGB.get(RGB.size()-1);
  
  float startR = NewC.x + random(-15,15);
  float startG = NewC.y + random(-15,15);
  float startB = NewC.z + random(-15,15);
  RGB.add(new PVector(startR,startG,startB));
  
  int xpos = mouseX;
  int ypos = mouseY;
  trace.add(new PVector(xpos,ypos,0));
  
  noStroke();
  for(int i = 2; i < trace.size(); i++){
    PVector newpos = trace.get(i);
    PVector newC = RGB.get(i);
    fill(newC.x,newC.y,newC.z);
    ellipse(newpos.x,newpos.y,100,100);
  }
}