如何在p5.js画出七彩的旋转花?

How to draw colorful rotating flower in p5.js?

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  petals();
  noStroke(); //the center of flower = white circle
  fill(255);
  ellipse(200, 200, 130, 130);

  function petals() { //flower leaves -> I wanna fill them with rainbow colors each in shortly
    push()
      translate(200, 200);
      rotate(radians(90));
      noStroke();
      rotate(radians(45));
      ellipse(100, 0, 250, 60)
      rotate(radians(45));
      ellipse(100, 0, 250, 60)
      rotate(radians(45));
      ellipse(100, 0, 250, 60)
      rotate(radians(45));
      ellipse(100, 0, 250, 60)
      rotate(radians(45));
      ellipse(100, 0, 250, 60)
      rotate(radians(45));
      ellipse(100, 0, 250, 60)
      rotate(radians(45));
      ellipse(100, 0, 250, 60)
      rotate(radians(45));
      ellipse(100, 0, 250, 60)
    pop()

  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script>

我怎样才能给那些叶子上色?

我在每个椭圆前面添加了fill('red')fill('blue'),不知何故只有一种颜色支配了所有的花瓣。

另外,我希望它以恒定的速度旋转。

填充似乎工作正常。 (并添加了一个循环更简洁)...

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  petals();
  noStroke(); //the center of flower = white circle
  fill(255);
  ellipse(200, 200, 130, 130);

  function petals() { //flower leaves -> I wanna fill them with rainbow colors each in shortly
    push()
    translate(200, 200);
    noStroke();
    const colors = ['red', 'yellow', 'blue', 'green'];
    for (let i=0; i<8; i++) {
      let color = colors[i%4];
      fill(color)
      ellipse(100, 0, 250, 60)
      rotate(radians(45));
    }
    pop()

  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script>