Color fill in rotation

Processing Coding Questions
1

Hi everyone,

I am creating an incrementing circle that is drawn with rectangles ( see the code ), and every time the angle reaches HALF_PI, the color is changed. My problem is, the drawn color (green) gets bigger as the circle expands, but I would like the size of the drawn color(green) to stay the same.
For any hint of how to resolve it, I would be very thankful! And props to the Processing Community :slight_smile:

float radius = 30;
float angle = 0;
float increment = 0.2;
 float size = 5;

void setup() {
  size(800, 800);
  background(255);
}


void draw() {
  
  translate(width/2, height/2);
  rotate(angle);

  translate(radius, 0);

  noStroke();
  

if (((angle/0.5)%HALF_PI) >0.5) {
    fill(#7A67E8);
  }else {
    
    
    fill(#7CFF99);
  }
 
  stitch();


  angle += increment;

  if (angle>TWO_PI) {
    angle -= TWO_PI;
    radius += 5;
    increment *= 0.9;
    
  }

}



void stitch() {
  pushMatrix();
  rotate(-0.3);
  rect(0, 0, 3, 10, 3, 3, 3, 3);
  popMatrix();
}
2 Likes
2

You have to change this :

if (((angle/0.5)%HALF_PI) >0.5 - decrement) {
    fill(#7A67E8);
  }else {
    fill(#7CFF99);
  }

Where decrement is relative to radius. As for how that Relation looks like, idk… it‘s either directly radius/1000 which came quite close, or you’ll have to go with something like pow(radius/1000, 2.7) or something like that…

1 Like
3

Well, trying a little bit, this is what I got :sweat_smile::

float radius = 30;
float angle = 0;
float increment = HALF_PI/10;
float tolerance = 4;
float size = 5;

void setup() {
  size(800, 800);
  background(255);
}


void draw() {
  
  translate(width/2, height/2);
  rotate(angle);
  translate(radius, 0);

  noStroke();
  
  if(radius > 65)
  tolerance = 2;

  if (dist(degrees(angle),0,0,0) < tolerance || dist(degrees(angle),0,90,0) < tolerance || dist(degrees(angle),0,180,0) < tolerance ||dist(degrees(angle),0,270,0) < tolerance ||dist(degrees(angle),0,360,0) < tolerance) {
    fill(#7CFF99);
  }else {   
    fill(#7A67E8);
  }
 
  stitch();


  angle += increment;

  if (angle>TWO_PI) {
    angle = 0;
    radius += 5;
    increment *= 0.9;
    
  }

}



void stitch() {
  pushMatrix();
  rotate(-0.3);
  rect(0, 0, 3, 10, 3, 3, 3, 3);
  popMatrix();
}

I think that maybe the problem is the increment, not being constant, the angles that you get aren’t passing trough 0,90,180,270,360 always, so you have to be more or less tolerant depending on how the increment is ( having a little increment, is more probably to pass over that angles) and the rectangles overlaps each others… maybe this gives you an idea about how to fix it, good luck :hugs:

1 Like
4

Found the perfect Solution! Add one global variable decrement. Set it to 0.5. Use it to replace the 0.5 in the if statement. And multiply it * 0.9 exactly like the increment (just put it in the line after it).

Works like a charm :wink:

3 Likes
5

Thank you so much for the help! It certainly helped me a lot!

1 Like
6

I am thankful for your help!

2 Likes