Ainda não tem acesso? Estude com a gente! Matricule-se
Ainda não tem acesso? Estude com a gente! Matricule-se

Solucionado (ver solução)

Indo um pouco mais longe na Flor

Gostaria primeiramente de parabenizar a Alura e o professor incrível, me sinto apegado e estimulado com a aula de uma forma que deixei até acumular trabalho (que o chefe não leia) Sempre que percebo que ele vai mais longe eu pauso e vídeo e tento fazer antes, depois vejo o que ele vai fazer, isso me faz fazer coisas que não achei que conseguiria. O exercício da flor é um exemplo, terminei indo mais longe do que o exercício, na função desenha flor a gente coloca o local da flor e o tamanho do raio e ela se ajusta "responsivamente".

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

<script>

    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){
      desenhaCirculo(x,y,z,"red");
      desenhaCirculo(x,y-z*2,z,"yellow");
      desenhaCirculo(x,y+z*2,z,"blue");
      desenhaCirculo(x-z*2,y,z,"orange");
      desenhaCirculo(x+z*2,y,z,"black");
    }
    desenhaFlor(300,200,20);
    desenhaFlor(200,100,10);


</script>
7 respostas

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>
solução

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

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software