How to draw colorful rotating flower in p5.js?-CodePudding

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>

How can I color those leaves?

I added fill('red'), fill('blue') in front of each ellipse and somehow only one color dominates all of the petals.

Plus, I want it to rotate at a constant speed.

CodePudding user response：

Fill seems to work fine. (and added a loop to be more concise)...

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>