Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Na tentativa de brincar com o While...

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo, no capítulo Extraindo funções e atividade Uma inofensiva flor...

por Estudante
| 33.9k xp | 5 posts

Olá amigos, na brincadeira de tentar me familiarizar com o "while" acabei por tentar fazer uma "borda" com a dita flor, primeiramente ficou horroroza por conta da falta de simetria, e por isso fui aumentando o código pra que ficasse tudo assim, simétrico! Nesse exemplo eu mantive então o miolo sempre vermelho, a alternância entre Laranja, Vermelho e Preto nas linhas, e os círculos internos Azuis e os externos Amarelos. Até aí tudo bem, fiz um loop infinito e travei o teste duas vezes, aprendi com meus erros e só por isso já valeu a prática. Minha dúvida aqui é se não tinha uma forma de eu "filtrar" essa informação, por exemplo, ao invés de eu fazer as flores, fazer de uma forma as bordas todas amarelas bem externas, depois as azuis mais ao centro e por fim as alternadas, ficando nesse mesmo formato e sem precisar fazer os 4xwhile (while de cima pra baixo, while de baixo pra direita, while da direita em cima pra baixo e por fim while de cima pra direita)? Ppra poder ficar simétrico tive q definir a cor de cada uma das "colunas/linhas" de "flores", depois fazer individualmente as "flores" nas bordas, já q elas sempre ficam com dois círculos amarelos e sem nenhum círculo azul...

Enfim, com o q foi passado até agora na aula, eu perdi alguma forma de fazer isso ficar mais "conciso"?

Muito obrigado!

<canvas width="624" height="480"></canvas>

<script>


    var tela = document.querySelector("canvas");
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'lightgrey';
    pincel.fillRect(0, 0, 624, 480);
    var radius = 8;

    function drawCircle(x, y, radius, color){

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

    function drawFlowerTop(x, y){

        drawCircle(x, y-16, radius, 'yellow');
        drawCircle(x, y+16, radius, 'blue');
        drawCircle(x+16, y, radius, 'black');
        drawCircle(x-16, y, radius, 'orange');
        drawCircle(x, y, radius, 'red');
    }

    function drawFlowerLeft(x, y){

        drawCircle(x, y-16, radius, 'black');
        drawCircle(x, y+16, radius, 'orange');
        drawCircle(x+16, y, radius, 'blue');
        drawCircle(x-16, y, radius, 'yellow');
        drawCircle(x, y, radius, 'red');
    }

    function drawFlowerBottom(x, y){

        drawCircle(x, y-16, radius, 'blue');
        drawCircle(x, y+16, radius, 'yellow');
        drawCircle(x+16, y, radius, 'orange');
        drawCircle(x-16, y, radius, 'black');
        drawCircle(x, y, radius, 'red');
    }

    function drawFlowerRight(x, y){

        drawCircle(x, y-16, radius, 'orange');
        drawCircle(x, y+16, radius, 'black');
        drawCircle(x+16, y, radius, 'yellow');
        drawCircle(x-16, y, radius, 'blue');
        drawCircle(x, y, radius, 'red');
    }

    z=radius*3;
    x=z*3;
    y=z;

    /TopLeftFlower/
    drawCircle(x/3, y-16, radius, 'yellow');
    drawCircle(x/3, y+16, radius, 'orange');
    drawCircle(x/3+16, y, radius, 'black');
    drawCircle(x/3-16, y, radius, 'yellow');
    drawCircle(x/3, y, radius, 'red');

    while (x < 580){
        drawFlowerTop(x, y);
        x = x + (z*2);
    }

    /TopRightFlower/
    drawCircle(x, y-16, radius, 'yellow');
    drawCircle(x, y+16, radius, 'black');
    drawCircle(x+16, y, radius, 'yellow');
    drawCircle(x-16, y, radius, 'orange');
    drawCircle(x, y, radius, 'red');

    x=z;
    y=z*3;
    while (y < 450){
        drawFlowerLeft(x, y);
        y = y + (z*2);
    }

    /BottomLeftFlower/
    drawCircle(x, y-16, radius, 'black');
    drawCircle(x, y+16, radius, 'yellow');
    drawCircle(x+16, y, radius, 'orange');
    drawCircle(x-16, y, radius, 'yellow');
    drawCircle(x, y, radius, 'red');


    x=z*3;
    y=z*19;
    while (x < 580){
        drawFlowerBottom(x, y);
        x = x + (z*2);
    }
    /BottomRightFlower/
    drawCircle(x, y-16, radius, 'orange');
    drawCircle(x, y+16, radius, 'yellow');
    drawCircle(x+16, y, radius, 'yellow');
    drawCircle(x-16, y, radius, 'black');
    drawCircle(x, y, radius, 'red');


    x=z*25;
    y=z*3;

    while (y < 450){
        drawFlowerRight(x, y);
        y = y + (z*2);
    }


</script>
2 respostas
solução!
por Akashi
| 220.4k xp | 284 posts

Achei legal você tentar se desafiar a fazer algo com um grau maior de dificuldade com os elementos ensinados Thiago. Acho que a gente aprende mais nesses momentos. Vi seu código, e me desafiei também a juntar partes que pareciam se repetir reduzindo em funções. Das instruções usadas, apenas uma não está no curso, para poder reordenar a variável array das cores (tive que pesquisar fora). E estava tendo dificuldade de entender o posicionamento de x e y, então acrescentei variáveis e alterei uns nomes pra ficar mais fácil.

<canvas width="624" height="480"></canvas>

<script>

    var tela = document.querySelector("canvas");
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'lightgrey';
    pincel.fillRect(0, 0, 624, 480);
    var raioCirc = 8;
    var meiaFlor = raioCirc * 3;
    var diamCirc = 2 * raioCirc;
    var umaFlor = meiaFlor * 2;
    const paleta = ["blue", "black", "orange","red", "yellow"];


    function desenhaCirculo(x, y, raioCirculo, color){

        pincel.fillStyle = color;
        pincel.beginPath();
        pincel.arc(x, y, raioCirc, 0, 2*Math.PI);
        pincel.fill();
    }

    function desenhaFlor(x, y, cores){      //as cores de cada pétala e centro são pintadas com as cores da variável paleta sempre na mesma ordem. O que muda é a ordem das cores dentro da paleta

        desenhaCirculo(x, y, raioCirc, cores[0]);
        desenhaCirculo(x + diamCirc, y, raioCirc, cores[1]);
        desenhaCirculo(x - diamCirc, y, raioCirc, cores[2]);
        desenhaCirculo(x, y + diamCirc, raioCirc, cores[3]);
        desenhaCirculo(x, y - diamCirc, raioCirc, cores[4]);  
    }

    function mudaPaleta(ordem) {    //reordena as cores da paleta de acordo com os valores de ordem
        var index = ordem;
        cores = index.map(i => paleta[i]);
    }


    x = meiaFlor;    //posiciona o centro da flor superior esquerda
    y = meiaFlor;

    var ordem = [3, 1, 4, 2, 4];    //red, black, yellow, orange e yellow - para mudar a ordem das cores da paleta.
    mudaPaleta(ordem);
    desenhaFlor(x, y, cores); //desenha flor canto superior esquerdo

    while (x < 11 * umaFlor){   //desenha 10 flores
        x = x + umaFlor;        //posiciona o centro das flores da fila superior
        ordem = [3, 1, 2, 0, 4];    //muda a ordem da paleta para esta fila superior
        mudaPaleta(ordem);
        desenhaFlor(x, y, cores);   //desenha flores superiores
    }

    x = x + umaFlor;    //posiciona o centro da flor superior direita

    ordem = [3, 4, 2, 1, 4];
    mudaPaleta(ordem);
    desenhaFlor(x, y, cores); //desenha flor canto superior direito

    x = meiaFlor;
    y = meiaFlor;

    while (y < 8 * umaFlor){
        y = y + (umaFlor);
        ordem = [3, 0, 4, 2, 1];
        mudaPaleta(ordem);
        desenhaFlor(x, y, cores); //desenha flores esquerda
    }

    y = y + (umaFlor);

    ordem = [3, 2, 4, 4, 1];
    mudaPaleta(ordem);
    desenhaFlor(x, y, cores); //desenha flor inferior esquerda

    x = meiaFlor;
    y = 9 * umaFlor + meiaFlor;

    while (x < 11 * umaFlor){
        x = x + umaFlor;
        ordem = [3, 2, 1, 4, 0];
        mudaPaleta(ordem);
        desenhaFlor(x, y, cores); //desenha flores inferiores
    }

    x = x + umaFlor;

    ordem = [3, 4, 1, 4, 2];
    mudaPaleta(ordem);
    desenhaFlor(x, y, cores);   //desenha flor inferior direita

    x = 12 * umaFlor + meiaFlor;
    y = meiaFlor;

    while (y < 8 * umaFlor){
        y = y + umaFlor;
        ordem = [3, 4, 0, 1, 2];
        mudaPaleta(ordem);
        desenhaFlor(x, y, cores);
    }

</script>
por Akashi
| 220.4k xp | 284 posts

Ou o mesmo código com 2 'for' ao invés de 4 'while':

<canvas width="624" height="480"></canvas>

<script>

    var tela = document.querySelector("canvas");
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'lightgrey';
    pincel.fillRect(0, 0, 624, 480);
    var raioCirc = 8;
    var meiaFlor = raioCirc * 3;
    var diamCirc = 2 * raioCirc;
    var umaFlor = meiaFlor * 2;
    const paleta = ["blue", "black", "orange","red", "yellow"];


    function desenhaCirculo(x, y, raioCirculo, color){

        pincel.fillStyle = color;
        pincel.beginPath();
        pincel.arc(x, y, raioCirc, 0, 2*Math.PI);
        pincel.fill();
    }

    function desenhaFlor(x, y, cores){      //as cores de cada pétala e centro são pintadas com as cores da variável paleta sempre na mesma ordem. O que muda é a ordem das cores dentro da paleta

        desenhaCirculo(x, y, raioCirc, cores[0]);
        desenhaCirculo(x + diamCirc, y, raioCirc, cores[1]);
        desenhaCirculo(x - diamCirc, y, raioCirc, cores[2]);
        desenhaCirculo(x, y + diamCirc, raioCirc, cores[3]);
        desenhaCirculo(x, y - diamCirc, raioCirc, cores[4]);  
    }

    function mudaPaleta(ordem) {    //reordena as cores da paleta de acordo com os valores de ordem
        var index = ordem;
        cores = index.map(i => paleta[i]);
    }

    x = meiaFlor;    //posiciona o centro da flor superior esquerda
    y = meiaFlor;

    var ordem = [3, 1, 4, 2, 4];    //red, black, yellow, orange e yellow - para mudar a ordem das cores da paleta.
    mudaPaleta(ordem);
    desenhaFlor(x, y, cores); //desenha flor canto superior esquerdo

    x = 12 * umaFlor + meiaFlor;    //posiciona o centro da flor superior direita

    ordem = [3, 4, 2, 1, 4];
    mudaPaleta(ordem);
    desenhaFlor(x, y, cores); //desenha flor canto superior direito

    x = meiaFlor;
    y = 9 * umaFlor + meiaFlor;

    ordem = [3, 2, 4, 4, 1];
    mudaPaleta(ordem);
    desenhaFlor(x, y, cores); //desenha flor inferior esquerda

    x = 12 * umaFlor + meiaFlor;

    ordem = [3, 4, 1, 4, 2];
    mudaPaleta(ordem);
    desenhaFlor(x, y, cores);   //desenha flor inferior direita


    for(x = umaFlor + meiaFlor; x <= 11 * umaFlor + meiaFlor; x = x + umaFlor)    {
        y = meiaFlor;
        ordem = [3, 1, 2, 0, 4];    //muda a ordem da paleta para esta fila superior
        mudaPaleta(ordem);
        desenhaFlor(x, y, cores);   //desenha flores superiores

        y = 9 * umaFlor + meiaFlor;
        ordem = [3, 2, 1, 4, 0];
        mudaPaleta(ordem);
        desenhaFlor(x, y, cores); //desenha flores inferiores
    }

    for(y = umaFlor + meiaFlor; y <= 8 * umaFlor + meiaFlor; y = y + umaFlor)   {
        x = meiaFlor;
        ordem = [3, 0, 4, 2, 1];
        mudaPaleta(ordem);
        desenhaFlor(x, y, cores); //desenha flores esquerda

        x = 12 * umaFlor + meiaFlor;
        ordem = [3, 4, 0, 1, 2];
        mudaPaleta(ordem);
        desenhaFlor(x, y, cores);   //desenha flores direita
    }

</script>