# Help with drawing a "rose" that draws each "petal" with a different random color

**URL:** https://discourse.processing.org/t/help-with-drawing-a-rose-that-draws-each-petal-with-a-different-random-color/24654
**Category:** Coding Questions
**Tags:** homework
**Created:** [October 16, 2020, 11:02pm UTC](https://discourse.processing.org/t/help-with-drawing-a-rose-that-draws-each-petal-with-a-different-random-color/24654 "2020-10-16T23:02:27Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![kimchi](https://avatars.discourse-cdn.com/v4/letter/k/45deac/32.png) [@kimchi](https://discourse.processing.org/u/kimchi)
#### Post date: [October 16, 2020, 11:02pm UTC](https://discourse.processing.org/t/help-with-drawing-a-rose-that-draws-each-petal-with-a-different-random-color/24654/1 "2020-10-16T23:02:27Z")

</div>

Hi I need some help on this one program that draws a mathematical rose where it draws each petal of the rose as a different random color. When I run my code it only draws half of each petal as a random color and the other halves as striped rainbows. I’m pretty new to booleans and I’m unsure how to approach this problem.

```auto
//constants
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"

//state variables
float t = 0; //The "parameter" t which will slowly change from 0 to 2PI
float prevX; 
float prevY; 
float distance;
float previousDistance;
boolean moveTowardsCenter;

void setup() {
  size(500, 500); //make a 500x500 canvas
  background(0); //Use a black background
  strokeWeight(2); //make thicker lines
  stroke(255); //make lines white

  //Precalculate the first point
  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;

  distance = sqrt(pow((x-prevX), 2) + pow((y-prevY), 2));
  println(distance);

  if (distance>previousDistance) {
   stroke(random(255), random(255), random(255));
  }
  
  previousDistance = distance;

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

```

---

<div class="post-metadata">

### Author: ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)
#### Post date: [October 17, 2020, 12:32am UTC](https://discourse.processing.org/t/help-with-drawing-a-rose-that-draws-each-petal-with-a-different-random-color/24654/2 "2020-10-17T00:32:55Z")

</div>

Hello,

Suggestion using your “distance” approach:

- translate(width/2, height/2) so center of canvas is (0,0)

- If distance from (0, 0) to (x, y) \< threshold then random color

You can pick the threshold you want to trigger a color change.

Not perfect so I put a circle in the middle.

You can also check for t every increment of TWO\_PI/8; that is a bit more complicated.

Also take a look at the random() function in the reference:  
_[https://processing.org/reference/random\_.html](https://processing.org/reference/random_.html)_  
You will only get a random number up to 255 but not including 255.

`:)`

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/29b0017c5e8bf5790f867c7f72e528207af899c2.png)

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/22b3407d4febed19df5792f319eaf4855aa3641e.png)

---

<div class="post-metadata">

### Author: ![kimchi](https://avatars.discourse-cdn.com/v4/letter/k/45deac/32.png) [@kimchi](https://discourse.processing.org/u/kimchi)
#### Post date: [October 17, 2020, 4:25am UTC](https://discourse.processing.org/t/help-with-drawing-a-rose-that-draws-each-petal-with-a-different-random-color/24654/3 "2020-10-17T04:25:58Z")

</div>

Thanks for the suggestions! When would I use the translate() function? Sorry I’m taking an introductory course and we’ve never used translate yet

---

<div class="post-metadata">

### Author: ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)
#### Post date: [October 17, 2020, 11:26am UTC](https://discourse.processing.org/t/help-with-drawing-a-rose-that-draws-each-petal-with-a-different-random-color/24654/4 "2020-10-17T11:26:41Z")

</div>

Hello,

> [@kimchi](#):
>
> When would I use the translate() function?

It is up to you if you choose to use it; it was easier for me when working through your code to have origin at center (width/2, height/2) of screen.

_[translate() / Reference / Processing.org](https://processing.org/reference/translate_.html)_  
_[2D Transformations / Processing.org](https://processing.org/tutorials/transform2d/)_  
_[width / Reference / Processing.org](https://processing.org/reference/width.html)_

```auto
void setup() 
  {
  size(200, 200);
  }

void draw() 
 {
  background(0);
  translate(width/2, height/2);
  textSize(24);
  textAlign(CENTER, CENTER);
  text("0,0", 0, 0); // Prints at x = 0, y = 0
  }

```

There is a dist() function:  
_[dist() / Reference / Processing.org](https://processing.org/reference/dist_.html)_

You are already doing the math `:)` and dist() is the same thing wrapped in a function.  
Stick to what you are comfortable with and requirements of your academic assignment.

`:)`
