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>¿Cómo puedo colorear esas hojas?
Agregué fill('red') , fill('blue') delante de cada elipse y, de alguna manera, solo un color domina todos los pétalos.
Además, quiero que gire a una velocidad constante.
El relleno parece funcionar bien. (y agregó un bucle para ser más conciso)...
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>