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.
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>