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

Question

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')，不知何故只有一种颜色支配了所有的花瓣。

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

Answer 1

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

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>

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

How to draw colorful rotating flower in p5.js?

javascript

animation

rotation

p5.js