# Help! Struggling with an IF statement to change color

Hello! I am writing a sketch to animate the drawing of a circle (arc); what I would like to do is to change to a random color every time the full arc is drawn, I have so far gotten to change it once only, how to continue this behaviour within the setup draw () loop?

``````float centerX;
float centerY;
float startArc = 0;
float endArc = 0;
float speed = .0125;
float L1;
float L2;
int r;
int g;
int b;
color c = color(r,g,b);

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

void draw(){
background(120);
animate();
display();
}

void animate (){
// startArc = startArc + speed;
endArc = endArc + speed;
centerX = width/2;
centerY = height/2;
L1 = width/2;
L2 = height/2;
r = 255;
g = 0;
b = 0;
c = color(r,g,b);

if (endArc >= TWO_PI) {
r = r *-1;
g = r *-1;
b = r *-1;
c = color(r,g,b);
}
}

void display() {
noFill();
stroke(c);
arc(centerX, centerY, L1, L2, startArc, endArc);
}
``````

I believe you are doing it ok. However, it seems you are resetting the r g b values in `animate()`. move these next lines to `setup()`:

``````r = 255;
g = 0;
b = 0;
``````

You still need to manage the values of r,g,b when they reach the end of their ranges during increment/decreasing operations.

Kf

1 Like

Hey Rolando!

Not sure what you were looking for but I tried it out. In my code, you can add or remove the call to `background()` in the if statement depending if you want to see the previous drawn arc. This effect is done by not having it in `draw()` but instead only calling it when you want to. Let me know if this is what you were going for.

``````float centerX;
float centerY;
float startArc = 0;
float endArc = 0;
float speed = .0125;
float L1;
float L2;
color c = color(255, 0, 0);

void setup() {
size (600, 600);
background(0);
}

void draw() {
animate();
display();
}

void animate () {
endArc = endArc + speed;
centerX = width/2;
centerY = height/2;
L1 = width/2;
L2 = height/2;

if (endArc >= TWO_PI) {
c = color(random(255), random(255), random(255));
endArc = 0;
//background(0); // see previous arc or not
}
}

void display() {
noFill();
stroke(c);
arc(centerX, centerY, L1, L2, startArc, endArc);
}

``````
1 Like

Hey Nic!

That works beautifully and it hit the nail of what I was aiming to achieve; the next step I am looking for is to introduce fractal recursion on this definition (1) and to have the smaller circles draw themselves after the bigger ones (2). I am conscious that may involve arrayLists of which Im not yet familiar. This is how far I have gotten, I am also curious on why Im only getting one level of recursion:

float centerX;
float centerY;
float startArc = 0;
float endArc = 0;
float speed = .025;
float D;
color c = color(255,0,0);

void setup(){
size (600,600,P3D);
pixelDensity(2);
background(0);
}

void draw(){
animate();
display();
}

void animate (){
endArc = endArc + speed;
centerX = width/2;
centerY = height/2;
D = width/2;

if (endArc >= TWO_PI) {
c = color((255),random(255),random(255));
endArc = 0;
}
}

void display() {

noFill();
strokeWeight(1);
arc(centerX, centerY, D, D, startArc, endArc);
if (D > 50){
arc(centerX, centerY, D/2, D/2, startArc, endArc);
arc(centerX+D/2, centerY, D/2, D/2, startArc, endArc);
arc(centerX-D/2, centerY, D/2, D/2, startArc, endArc);
}
}

1 Like

Hey Rolando!

Take a look at one of Dan Shiffman’s videos on this topic, this should point you in the right direction if you want to do fractal recursion!

1 Like