# Color fill in rotation

**URL:** <https://discourse.processing.org/t/color-fill-in-rotation/16320>\
**Category:** Coding Questions\
**Created:** [December 11, 2019, 1:25pm UTC](https://discourse.processing.org/t/color-fill-in-rotation/16320 "2019-12-11T13:25:31Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Eban](https://avatars.discourse-cdn.com/v4/letter/e/b487fb/32.png) [@Eban](https://discourse.processing.org/u/Eban)\
**Post date:** [December 11, 2019, 1:25pm UTC](https://discourse.processing.org/t/color-fill-in-rotation/16320/1 "2019-12-11T13:25:31Z")

</div>

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 🙂

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

```

---

<div class="post-metadata">

**Author:** ![Lexyth](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lexyth/32/7403_2.png) [@Lexyth](https://discourse.processing.org/u/Lexyth)\
**Post date:** [December 11, 2019, 6:30pm UTC](https://discourse.processing.org/t/color-fill-in-rotation/16320/2 "2019-12-11T18:30:52Z")

</div>

You have to change this :

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

---

<div class="post-metadata">

**Author:** ![Waboqueox](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/waboqueox/32/5643_2.png) [@Waboqueox](https://discourse.processing.org/u/Waboqueox)\
**Post date:** [December 12, 2019, 9:03am UTC](https://discourse.processing.org/t/color-fill-in-rotation/16320/3 "2019-12-12T09:03:37Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![Lexyth](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lexyth/32/7403_2.png) [@Lexyth](https://discourse.processing.org/u/Lexyth)\
**Post date:** [December 12, 2019, 10:41am UTC](https://discourse.processing.org/t/color-fill-in-rotation/16320/4 "2019-12-12T10:41:41Z")

</div>

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 😉

---

<div class="post-metadata">

**Author:** ![Eban](https://avatars.discourse-cdn.com/v4/letter/e/b487fb/32.png) [@Eban](https://discourse.processing.org/u/Eban)\
**Post date:** [December 18, 2019, 1:42pm UTC](https://discourse.processing.org/t/color-fill-in-rotation/16320/5 "2019-12-18T13:42:04Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Eban](https://avatars.discourse-cdn.com/v4/letter/e/b487fb/32.png) [@Eban](https://discourse.processing.org/u/Eban)\
**Post date:** [December 18, 2019, 1:42pm UTC](https://discourse.processing.org/t/color-fill-in-rotation/16320/6 "2019-12-18T13:42:58Z")

</div>

I am thankful for your help!