Hi all,

I've been adjusting a sketch from the Processing Handbook (32_02 two circles moving around each other.) I'm no good with maths so I've adjusted it to my own needs. What I want is to have 5 circles moving in separate directions from each other depending on the 'breathStatus' (view below.) This is a simplified sketch, the real thing will work with dynamic data coming from the web but I just want to get my head round how I can have the dots move independently from each other.
In the code below the red dots should move counter clockwise and the blue once clockwise.

1. float angle = 0; // Current angle
2. float speed = 0.003; // Speed of motion
3. float radius = 200.0; // Range of motion
4. float sx = 1.0;
5. float sy = 0.0;
6. float increase = 20.0;
7. String[] breathStatus = {"in", "out", "in", "out", "in"};
8. void setup() {
9.   size(768, 768);
10.   noStroke();
11.   smooth();
12.   background(255);
13. }
14. void draw() {
15.   for(int i=0; i<5; i++){
16.     //println(increase);
17.     fill(255, 4);
18.     rect(0, 0, width, height);
19.     if(breathStatus[i] == "out"){
20.       fill(0, 0, 200, 20);
21.       angle += speed; // Update the angle
22.     }
23.     else{
24.       fill(200, 0, 0, 20);
25.       angle -= speed; // Update the angle
26.     }
27.     float sinval = sin(angle);
28.     float cosval = cos(angle);
29.     float x = width/2 + (cosval * radius+(increase*i));
30.     float y = width/2 + (sinval * radius+(increase*i));
31.     //fill(255);
32.     ellipse(x, y, 20, 20); // Draw circle
33.   }
34. }

Any suggestions on how to tackle this are highly appreciated, TIA, d