# Help! Struggling with an IF statement to change color

**URL:** <https://discourse.processing.org/t/help-struggling-with-an-if-statement-to-change-color/687>\
**Category:** Coding Questions\
**Created:** [June 3, 2018, 7:55pm UTC](https://discourse.processing.org/t/help-struggling-with-an-if-statement-to-change-color/687 "2018-06-03T19:55:40Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![rolando](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/rolando/32/324_2.png) [@rolando](https://discourse.processing.org/u/rolando)\
**Post date:** [June 3, 2018, 7:55pm UTC](https://discourse.processing.org/t/help-struggling-with-an-if-statement-to-change-color/687/1 "2018-06-03T19:55:40Z")

</div>

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?

```auto
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);
}

```

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [June 3, 2018, 9:20pm UTC](https://discourse.processing.org/t/help-struggling-with-an-if-statement-to-change-color/687/2 "2018-06-03T21:20:50Z")

</div>

> [@rolando](#):
>
> what I would like to do is to change to a random color every time the full arc is drawn

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()`:

```auto
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

---

<div class="post-metadata">

**Author:** ![nicolaskellum](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/nicolaskellum/32/15860_2.png) [@nicolaskellum](https://discourse.processing.org/u/nicolaskellum)\
**Post date:** [June 3, 2018, 9:46pm UTC](https://discourse.processing.org/t/help-struggling-with-an-if-statement-to-change-color/687/3 "2018-06-03T21:46:00Z")

</div>

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.

```auto
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);
}

```

---

<div class="post-metadata">

**Author:** ![rolando](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/rolando/32/324_2.png) [@rolando](https://discourse.processing.org/u/rolando)\
**Post date:** [June 6, 2018, 3:37am UTC](https://discourse.processing.org/t/help-struggling-with-an-if-statement-to-change-color/687/4 "2018-06-06T03:37:16Z")

</div>

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);  
stroke©;  
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);  
}  
}

---

<div class="post-metadata">

**Author:** ![nicolaskellum](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/nicolaskellum/32/15860_2.png) [@nicolaskellum](https://discourse.processing.org/u/nicolaskellum)\
**Post date:** [June 6, 2018, 6:30am UTC](https://discourse.processing.org/t/help-struggling-with-an-if-statement-to-change-color/687/5 "2018-06-06T06:30:54Z")

</div>

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!

[![](https://img.youtube.com/vi/s3Facu6ZVeA/maxresdefault.jpg "8.2: Fractal Recursion - The Nature of Code") ](https://www.youtube.com/watch?v=s3Facu6ZVeA)