One way to do it:

1. float posX, posY;
2. float ellipseDiameter;
3. //String timestamp;
4.  
5. //DECLARE COLOR ARRAY
6. int[] r = { 69, 231, 248, 137 };
7. int[] g = { 39, 99, 233, 224 };
8. int[] b = { 67, 94, 168, 173 };
9. int count;
10.  
11. //DEFINE SHAPE ARRAY LIST
12. ArrayList<Shape> shapeCollection = new ArrayList<Shape>();
13.  
14. void setup() {
15.   size(400, 400);
16.   frameRate(30);
17.   background(69, 39, 67);
18.   smooth();
19.   //timestamp = year() + nf(month(), 2) + nf(day(), 2) + nf(hour(), 2) + nf(minute(), 2)+".png";
20. }
21.  
22. void draw() {
23.   background (r[0], g[0], b[0]);
24.  
25.   //CALL SHAPE ARRAY LIST
26.   for (int i = 0; i < shapeCollection.size(); i++) {
27.     Shape myShape = shapeCollection.get(i);
28.     myShape.display();
29.   }
30. }
31.  
32. void mouseDragged() {
33.   //ADD NEW SHAPE TO ARRAY LIST
34.   color c = color(r[count], g[count], b[count]);
35.   count = ++count % r.length;
36.   Shape myShape = new Shape(mouseX, mouseY, pmouseX, pmouseY, c);
37.   shapeCollection.add(myShape);
38. }
39.  
40. class Shape {
41.   //GLOBAL VARIABLES
42.   float x;
43.   float y;
44.   float pX;
45.   float pY;
46.   color c;
47.  
48.   //CONSTRUCTOR
49.   Shape(float _x, float _y, float _pX, float _pY, color _c) {
50.     x = _x;
51.     y = _y;
52.     pX = _pX;
53.     pY = _pY;
54.     c = _c;
55.   }
56.  
57.   //FUNCTIONS
58.   void display() {
59.     stroke(255, 255, 255, 130);
60.     ellipseDiameter = 100/abs(sqrt(sq(x-pX)+sq(y-pY)));
61.     fill(c);
62.     ellipse(x, y, ellipseDiameter, ellipseDiameter);
63.   }
64. }

An alternative could have been to store in the class the index in the rgb arrays, but I prefer to reduce the dependency on global variables in classes, when possible.

You have already very neat code. I changed a few things:

• Using color array so you have only one int per color instead of three. Not only does this save typing later on, it also saves memory.
• Added currentColor variable that is increased safely in the mouseDragged method.
• Added ellipseDiameter variable inside class (it's specific to this Shape) and removed unused pX, pY.
• Added myColor int inside the Shape so each object can have it's own color.
• Specified type for arraylist so we can use the shorter for-each loop.
  

Adapted Code

1. //DECLARE COLOR ARRAY
2. color[] colors = {
3.   color( 69,  39,  67),
4.   color(231,  99,  94),
5.   color(248, 233, 168),
6.   color(137, 224, 173)
7. };
8.  
9. ArrayList <Shape> shapeCollection = new ArrayList <Shape> ();
10. int currentColor;
11.  
12. void setup() {
13.   size(400, 400);
14.   smooth();
15. }
16.  
17. void draw() {
18.   background (colors[0]);
19.  
20.   //DISPLAY EACH SHAPE IN ARRAYLIST
21.   for(Shape myShape : shapeCollection){
22.     myShape.display();
23.   }
24. }
25.  
26. void mouseDragged() {
27.   //ADD NEW SHAPE TO ARRAYLIST
28.   Shape myShape = new Shape(mouseX, mouseY, pmouseX, pmouseY);
29.   shapeCollection.add(myShape);
30.   //MOVE TO NEXT COLOR (OR BACK TO FIRST)
31.   currentColor = ++currentColor % colors.length;
32. }
33.  
34. class Shape{
35.   //CLASS VARIABLES
36.   float x, y, ellipseDiameter;
37.   int myColor;
38.  
39.   //CLASS CONSTRUCTOR
40.   Shape(float _x, float _y, float _pX, float _pY){
41.     x = _x;
42.     y = _y;
43.     ellipseDiameter = 100/abs(sqrt(sq(x-_pX)+sq(y-_pY)));
44.     myColor = currentColor;
45.   }
46.  
47.   //CLASS METHODS
48.   void display(){
49.     stroke(255, 255, 255, 130);
50.     fill(colors[myColor]);
51.     ellipse(x,y,ellipseDiameter,ellipseDiameter);
52.   }
53. }

Ah it seems PhiLho and I posted at the same time and were thinking about the same solution.

You guys are awesome, I was wondering if you could elaborate  a bit mr in the part that loops through the colors. 

Yeah, it's a bit cryptic, but we both chose this way of writing because it's short and gets the job done.

currentColor = ++currentColor % colors.length;

++currentColor can be used to add 1 to a variable, in this case the int currentColor

See here why we use pre-increment instead of the usual post-increment.

Alternatively you could use (currentColor+1)

Modulo % can be used to calculate the remainder when one number is divided by another. Modulo is extremely useful for keeping numbers within a boundary (in this case the maximum number of colors).

Alternatively to the whole line you could use:

1.   currentColor++;
2.   if (currentColor>=colors.length) {
3.     currentColor = 0;
4.   }

You can add a println(currentColor); to see the result is exactly what we want: 0, 1, 2, 3, 0, 1... etc.

Ah get it! Thanks you guys are awesome. 

  ++currentColor can be used to add 1 to a variable
Alternatively you could use (currentColor+1)

I guess I would preffer (currentColor+1) b/c it's just a sum math operation, whereas ++currentColor is like the previous, but w/ an additional assignment!

Anyways, I'd like to know which one is faster! 

Hey guys this worked like a charm.

Here's what I've come up with:

/*
 Dragged Circles
 by Ivan Cruz (2012/Nov)
 forum.processing.org/topic/loop-through-values-of-an-array-on-mouse-drag
 */

private final color[] colors = {
    color( 69, 39, 67), 
    color(231, 99, 94), 
    color(248, 233, 168), 
    color(137, 224, 173)
};
private final byte  colorLen = (byte) colors.length;
private static int  curColor;
private final color bg = colors[0];

private static final short shapeLim = 300;
private static final Shape[] shapeArray = new Shape[shapeLim];
private static int   currentShape;
private static short totalShape;

void setup() {
    size(700, 500);
    smooth();
    noLoop();

    stroke(255, 130);
}

void draw() {
    background (bg);

    for ( short idx=0; idx<totalShape; shapeArray[idx++].display() );
}

void mouseDragged() {
    shapeArray[currentShape] = new Shape(mouseX, mouseY, pmouseX, pmouseY);

    curColor = (curColor+1) % colorLen;
    currentShape = (currentShape+1) % shapeLim;
    if (totalShape < shapeLim)      ++totalShape;

    redraw();
}

class Shape {
    int x, y;
    float Diam;
    color myColor;

    Shape(int mx, int my, int px, int py) {
        x = mx;
        y = my;
        Diam = 100 / sqrt( sq(mx-px) + sq(my-py) );
        myColor = colors[curColor];
    }

    void display() {
        fill(myColor);
        ellipse(x, y, Diam, Diam);
    }
}

Thanks! 

In this case, I guess it's not even necessary to have an array to store all those circles. Rather, transplant background(bg) to setup() , and just draw circles, instead of keeping them in Shape[] !

P.S.: Alternatively, even the class itself could go away and be replaced by simple drawing functions, since there's no need to instance its field variables anymore in this version.

/*
 Dragged Circles (Arrayless Edition)
 by Ivan Cruz (2012/Nov)
 forum.processing.org/topic/loop-through-values-of-an-array-on-mouse-drag
 */

private final color[] colors = {
    color( 69, 39, 67), 
    color(231, 99, 94), 
    color(248, 233, 168), 
    color(137, 224, 173)
};

private final byte  colorLen = (byte) colors.length;
private static int  curColor;
private final color bg = colors[0];

void setup() {
    size(700, 500);
    smooth();
    noLoop();

    stroke(255, 130);
    background (bg);
}

void draw() {
}

void mouseDragged() {
    new Shape(mouseX, mouseY, pmouseX, pmouseY);
    curColor = (curColor+1) % colorLen;
    redraw();
}

class Shape {
    int x, y;
    float Diam;
    color myColor;

    Shape(int mx, int my, int px, int py) {
        x = mx;
        y = my;
        Diam = 100 / sqrt( sq(mx-px) + sq(my-py) );
        myColor = colors[curColor];

        display();
    }

    void display() {
        fill(myColor);
        ellipse(x, y, Diam, Diam);
    }
}

My very first version of this was done that way. The problem I found is that I wanted to have the functinality to fade in/out messages on top of everything and without a background in the draw() the messages never disappeared.

If that's so, the other option is to set a hard limit ( shapeLim) as my 1st sample. But rather than overwriting previous circles, just prohibit more drawings!