the code below draws flowers to the canvas, 

but their petals are not rotated properly. 

add rotations where marked to spread the 

petals out as shown in the example gif.

*/

​

let angle = 0;

​

function setup(){

  createCanvas(600,600);

  noStroke();

  smooth();

  ellipseMode(CENTER);

  frameRate(5);

}

​

function draw(){

  background(255);

  angle++

  push();

  rotate(angle*5);

  translate(3*width/4, 3*width/4);

  flower(255,3,214,3*width/4);

  pop();

  push();

  translate(width/2, width/2);

  rotate(angle);

  flower(2,232,255,width/2);

  pop();

  push();

  translate(width/4, width/4);

  rotate(angle);

  flower(255,247,3,width/4);

  pop();

//   angle += 1;

}

​

function flower(r, g, b){

  for(i = 0;i<180; i+=45);

  rotate(radians(i));

  fill(r,g,b,50);

  ellipse(25, 0, 50, 20);

  ellipse(-25, 0, 50, 20);

  ellipse(0, 25, 20, 50);

  ellipse(0, -25, 20, 50);

​

​

//   // add rotation

//   ellipse(25, 0, 50, 20);

//   ellipse(-25, 0, 50, 20);

​

//   // add rotation

//   ellipse(25, 0, 50, 20);

//   ellipse(-25, 0, 50, 20);

​

//   // add rotation

//   ellipse(25, 0, 50, 20);

//   ellipse(-25, 0, 50, 20);

//   ellipse(0,0,20,20);

//   pop();

}