# How do I change the random color for each petal of the flower?

**URL:** <https://discourse.processing.org/t/how-do-i-change-the-random-color-for-each-petal-of-the-flower/28084>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [February 25, 2021, 9:53pm UTC](https://discourse.processing.org/t/how-do-i-change-the-random-color-for-each-petal-of-the-flower/28084 "2021-02-25T21:53:17Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![batmm](https://avatars.discourse-cdn.com/v4/letter/b/a587f6/32.png) [@batmm](https://discourse.processing.org/u/batmm)\
**Post date:** [February 25, 2021, 9:53pm UTC](https://discourse.processing.org/t/how-do-i-change-the-random-color-for-each-petal-of-the-flower/28084/1 "2021-02-25T21:53:18Z")

</div>

> please format code with \</\> button \* [homework policy](https://discourse.processing.org/faq/#homework) \* [asking questions](https://discourse.processing.org/t/2147)

//The constants needed in the equations for the “rose”  
final float K = 4; //The factor that controls the number of “petals”  
final float RATE = 0.02; //The change in t each frame. Controls speed and smoothness.  
final float ROSE\_RADIUS = 200; //The radius, in pixels, of the “rose”

//The “state” variables that remember what’s happening  
float t = 0; //The “parameter” t which will slowly change from 0 to 2PI  
float prevX; //What were x…  
float prevY; //…and y last time?

boolean movingToward = true;//the line is moving toward the center, otherwise it’s moving away from center

void setup() {  
size(500, 500); //Usual window size  
background(0); //Use a black background, and…  
strokeWeight(2); //nice thick lines

//Precalculate the first point (with t=0). This must be done  
//after the size command because width and height are needed.  
prevX=width/2+ROSE\_RADIUS;  
prevY=height/2;  
}

void draw() {  
//Calculate the new point  
float x = cos(K\*t)\*cos(t)_ROSE\_RADIUS+width/2;  
float y = cos(K_t)\*sin(t)\*ROSE\_RADIUS+height/2;

if (x \> width/2 && y \< height/2) {  
movingToward = !movingToward;  
}

if (movingToward) {  
stroke(random(255), random(255), random(255));  
}

line(prevX, prevY, x, y); //draw the next line

//Keep all the information needed for next time  
prevX = x;  
prevY = y;

//Advance t  
t += RATE;  
}//draw

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [February 26, 2021, 8:36am UTC](https://discourse.processing.org/t/how-do-i-change-the-random-color-for-each-petal-of-the-flower/28084/2 "2021-02-26T08:36:32Z")

</div>

> [@batmm](#):
>
> line(prevX, prevY, x, y); //draw the next line

prior to this say

`stroke(random(255),random(255),random(255));`

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [February 26, 2021, 9:26am UTC](https://discourse.processing.org/t/how-do-i-change-the-random-color-for-each-petal-of-the-flower/28084/3 "2021-02-26T09:26:19Z")

</div>

err… I just understood your question.

You need to change the color when you are in the center

```auto

// Petal.
// Registers when drawing is at the center and changes color then

//The constants needed in the equations for the “rose”
final float K = 4; //The factor that controls the number of “petals”
final float RATE = 0.02; //The change in t each frame. Controls speed and smoothness.
final float ROSE_RADIUS = 200; //The radius, in pixels, of the “rose”

//The “state” variables that remember what’s happening
float t = 0; //The “parameter” t which will slowly change from 0 to 2PI
float prevX; //What were x…
float prevY; //…and y last time?

boolean changeColor = true;//the line is moving toward the center, otherwise it’s moving away from center
boolean allowed = true; 

void setup() {
  size(500, 500); //Usual window size
  background(0); //Use a black background, and…
  strokeWeight(2); //nice thick lines

  //Precalculate the first point (with t=0). This must be done
  //after the size command because width and height are needed.
  prevX=width/2+ROSE_RADIUS;
  prevY=height/2;
}

void draw() {
  //Calculate the new point
  float x = cos(K*t)*cos(t)*ROSE_RADIUS+width/2;
  float y = cos(K*t)*sin(t)*ROSE_RADIUS+height/2;

  // When we are at the center we set a marker 
  //if (x == width/2 && y == height/2) {
  if (allowed && dist(x, y, width/2, height/2)<8.92) {
    println("here"); 
    changeColor = true;
    allowed = false;
  }

  if (changeColor) {
    if (random(1) > 0.9)
      stroke(random(222, 255), random(0, 25), random(0, 5));
    else 
    stroke(random(100, 255), random(90, 255), random(100, 255));
    changeColor = false;
  }

  if (dist(x, y, width/2, height/2)>144.92) {
    allowed = true;
  }

  //draw the next line
  line(prevX, prevY, x, y); 

  //Keep all the information needed for next time
  prevX = x;
  prevY = y;

  //Advance t
  t += RATE;
  
}//draw

```

---

<div class="post-metadata">

**Author:** ![batmm](https://avatars.discourse-cdn.com/v4/letter/b/a587f6/32.png) [@batmm](https://discourse.processing.org/u/batmm)\
**Post date:** [February 26, 2021, 4:25pm UTC](https://discourse.processing.org/t/how-do-i-change-the-random-color-for-each-petal-of-the-flower/28084/5 "2021-02-26T16:25:52Z")

</div>

I am a beginner and I stuck on this for a whole day. Now I understand how things worked! Thanks, my life saver.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [February 26, 2021, 4:47pm UTC](https://discourse.processing.org/t/how-do-i-change-the-random-color-for-each-petal-of-the-flower/28084/6 "2021-02-26T16:47:16Z")

</div>

Yeah, the formula never gives you exact width/2,height/2 therefore I use the dist() command

Also I use “`allowed`” as a 2nd boolean var to avoid that the Sketch runs the random color statement multiple times during one movement through the center

---

<div class="post-metadata">

**Author:** ![batmm](https://avatars.discourse-cdn.com/v4/letter/b/a587f6/32.png) [@batmm](https://discourse.processing.org/u/batmm)\
**Post date:** [February 26, 2021, 8:07pm UTC](https://discourse.processing.org/t/how-do-i-change-the-random-color-for-each-petal-of-the-flower/28084/7 "2021-02-26T20:07:35Z")

</div>

Found a question, why do you use if (random(1) \>0.9), what’s the meaning by using this condition?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [February 26, 2021, 8:26pm UTC](https://discourse.processing.org/t/how-do-i-change-the-random-color-for-each-petal-of-the-flower/28084/8 "2021-02-26T20:26:41Z")

</div>

Good question!

I wanted to make your colors more beautiful.

First in the else part

> [@Chrisir](#):
>
> ```auto
> stroke(random(100, 255), random(90, 255), random(100, 255));
>     
> 
> ```

makes for colors more bright (random starts at 100)

Then in 10% of the cases - that’s what the if clause does - we choose a color almost red (with only a small amount of randomness)

---

<div class="post-metadata">

**Author:** ![ash](https://avatars.discourse-cdn.com/v4/letter/a/f19dbf/32.png) [@ash](https://discourse.processing.org/u/ash)\
**Post date:** [March 16, 2021, 12:08am UTC](https://discourse.processing.org/t/how-do-i-change-the-random-color-for-each-petal-of-the-flower/28084/9 "2021-03-16T00:08:36Z")

</div>

Can you please explain how did you calculate and compare the numbers (8.92 and 144.92) with distance. Thanks in advance.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 16, 2021, 8:27am UTC](https://discourse.processing.org/t/how-do-i-change-the-random-color-for-each-petal-of-the-flower/28084/10 "2021-03-16T08:27:37Z")

</div>

The small number is used to test if the number is near the center (the values are never exactly 0)

The bigger number is to check if we are far outside of a petal

Both values are found by trial and error

There might be more elegant ways, maybe cos(t) is zero at one point