Help! Struggling with an IF statement to change color

Processing Coding Questions
1

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);
}
2

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
3

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
4

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

1 Like
5

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