Indo um pouco mais longe na Flor

Legal Bruno, ficou muito bom!

Se quiser ter mais um desafio pode passar as cores das pétalas na função por um array. Assim ficaria mais responsivo ainda.

function desenhaFlor(x,y,z,corPetalas)

Preciso rever esses Arrays, ainda não entendi completamente, me bati bastante no exercício posterior a esse onde eu tive que fazer os arrays e espalha-los. To bem travado nessa parte.

Entendi, se quiser eu poderia fazer o que tinha em mente no desafio pra vc ver como seria.

Consigo usar o array chamando separadamente, mas o contador não entrou na cabeça... Eu teria que isola-lo e depois chamar as cores separadas? Não faria sentido né? Como seria o código original, vou parar de avançar até aprender isso.

<canvas width="600" height="400"></canvas>

<script>
    var cor = ["red","yellow","blue","orange","black"];
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'lightgray';
    pincel.fillRect(0, 0, 600, 400);

    function desenhaCirculo(x, y, raio, cor) {

        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2*3.14);
        pincel.fill();
    }


    function desenhaFlor(x,y,z){
      for (var i = 0; i < cor.length; i++) {

        desenhaCirculo(x,y,z,cor[0]);
        desenhaCirculo(x,y-z*2,z,cor[1]);
        desenhaCirculo(x,y+z*2,z,cor[2]);
        desenhaCirculo(x-z*2,y,z,cor[3]);
        desenhaCirculo(x+z*2,y,z,cor[4]);
    }
  }

    desenhaFlor(300,200,20);
    desenhaFlor(200,100,10);

</script>

Não precisa usar loops nesse caso. Então eu tirei o for do seu código, e coloquei um parâmetro novo na sua função chamado cor. E criei 2 array lá em cima, cor1 e cor 2 . Agora podemos criar flores de outras cores.

<canvas width="600" height="400"></canvas>

<script>
    var cor1 = ["red","yellow","blue","orange","black"];
    var cor2 = ["pink","yellow","cyan","purple","gray"];

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'lightgray';
    pincel.fillRect(0, 0, 600, 400);

    function desenhaCirculo(x, y, raio, cor) {

        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2*3.14);
        pincel.fill();
    }


    function desenhaFlor(x,y,z,cor){

        desenhaCirculo(x,y,z,cor[0]);
        desenhaCirculo(x,y-z*2,z,cor[1]);
        desenhaCirculo(x,y+z*2,z,cor[2]);
        desenhaCirculo(x-z*2,y,z,cor[3]);
        desenhaCirculo(x+z*2,y,z,cor[4]);

  }

    desenhaFlor(300,200,20,cor1);
    desenhaFlor(200,100,10,cor2);

</script>

Eu gosto de imaginar os array como gavetinhas dentro de um armário. Eu tenho um armário que chamei de cor1 e dentro dele tenho 5 gavetinhas numeradas de 0 a 4. E dentro de cada gavetinha tenho uma tinta diferente.

Então no caso do cor2

    var cor2 = ["pink","yellow","cyan","purple","gray"];

Se quero pegar a tinta roxa(purple) eu conto para ver qual posição ela está e chamo ela assim cor2[3] .

O pessoal usa for quando dá para comprimir mais ainda o código, mas como a lógica das posições das pétalas não dá para comprimir a gente coloca uma embaixo da outra mesmo. Então não precisei de um contador, chamei pelos números da posição diretamente.

Entendeu?

Entendi sim, achei que de alguma forma desse pra criar a distribuição das cores por loops. Mas nem sempre o array vai necessitar um loop. Obrigado

Disponha e bons estudos!!!