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

Processing Coding Questions
1

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.

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

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
You will only get a random number up to 255 but not including 255.

:)

image
image502×527 18.8 KB

image
image502×527 18.5 KB

3

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

4

Hello,

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
2D Transformations / Processing.org
width / Reference / Processing.org

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

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.

:)