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

Dúvida sobre lógica - Aula 4 - Animação

Referente ao curso Lógica de Programação II: Funções, Desenhos e um Jogo

por Lucas Monteiro Lucchesi
| 46.8k xp | 20 posts

Pessoal,

Gostaria de criar uma animação que respeite os seguintes quesitos:

  • bola se deslocando no eixo X, de 0 até o limite;
  • eixo y=100, ao longo de todo trajeto;
  • raio da bola cresça(++) de 1 até 50 e quando raio== 50, que volte a diminuir(--) até raio==1;
  • mantenha esse loop de cresce/encolhe;

Preciso que o programa dispare a função de crescimento quando raio==1, que dispare a função de encolhimento quando raio==50 e que fique nesse loop.

Como faço?

Segue o código até o momento:

<meta charset = "UTF-8">
<canvas id="tela" width="600" height="400"></canvas>

<script>

    var tela = document.getElementById("tela");
    var c = tela.getContext("2d");

    var circulo = function(x, raio){
        c.strokeStyle = "blue";
        c.beginPath();
        c.arc(x, 100, raio, 0, 2*Math.PI);
        c.stroke();
    }

    var limpa = function(){
        c.clearRect(0, 0, 600, 400);
    }

    var x = 0;
    var raio = 1;

    var desenha = function(){
        limpa();
        circulo(x, raio);
        x++;

    }

    setInterval(desenha, 30);

</script>
`
6 respostas
solução!
por Elieden Estevam Garcia Barbosa
| 98.7k xp | 13 posts

Lucas Monteiro Lucchesi, eu fiz um codigo parecido, porém não atende uns quesitos, mas eu acho que vai mesma ideai. De uma olhada: 

<!DOCTYPE html>
<html>
    <head>
        <title>Logica Programação</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <canvas id="tela" width="600" height="400">
        </canvas>
    </body>
    <script>
        /* 
         * Bola se deslocando no eixo X, de 0 até o limite;
         * Eixo y=100, ao longo de todo trajeto.
         * Raio da bola cresça(++) de 1 até 50 e quando raio== 50, que volte a diminuir(--) até  
         * raio==1.
         * mantenha esse loop de cresce/encolhe
         * Preciso que o programa dispare a função de crescimento quando raio==1, que dispare a
         * função de encolhimento quando raio==50 e que fique nesse loop.
         *
         * Esse codigo foi feito de maneira rapida, podemos reaproveitar muitas partes,
         * porém espero ter atendido o objetivo.
         **/


        var tela = document.getElementById("tela");
        var widthCanvas = tela.getAttribute("width");
        var c = tela.getContext("2d");

        // Função que aumenta o raio!
        function aumentaRaio(widthCanvas, limiteRaio) {
            // Precisamos saber o tamanho width do canvas, e um limite de raio no seu caso 50.
            var i = 0;
            var h = setInterval(function() {
                c.clearRect(0, 0, widthCanvas, tela.getAttribute("height")); // limpamos para os proximo quadros
                c.beginPath();
                c.arc(i, 100, i/(widthCanvas/limiteRaio), 0, 2 * Math.PI);
                c.fillStyle = "blue";
                c.fill();
                if( i == (widthCanvas-limiteRaio)) {
                    // Se i for igual a largura do canvas - limite do raio (ou seja bolinha visivel!).
                    clearInterval(h); // limpamos esse setInterval que deixamos na variavel h.
                    diminueRaio(widthCanvas, limiteRaio); // e logo disparamos o diminueRaio.
                }
                i++;
            }, 1);
        };
        function diminueRaio(widthCanvas, limiteRaio) {
            // Precisamos saber o tamanho width do canvas, e um limite de raio no seu caso 50.
            var i = (widthCanvas-limiteRaio); //Eixo x = no maximo do limite da largura mas a bolinha visivel.

            var h = setInterval(function() {
                c.clearRect(0, 0, widthCanvas, tela.getAttribute("height"));
                i--;
                if( i == 0) {    
                    clearInterval(h);
                    c.beginPath();
                    c.arc(i, 100, 1, 0, 2 * Math.PI);
                    c.fillStyle = "blue";
                    c.fill();
                    aumentaRaio(widthCanvas, limiteRaio);

                }
                c.beginPath();
                c.arc(i, 100, i/(widthCanvas/limiteRaio), 0, 2 * Math.PI);
                c.fillStyle = "blue";
                c.fill();


            }, 1);
        };

        // Somente precisamos chamar uma função. Podemos começar diminuindo ou aumentando tanto faz.
        diminueRaio(widthCanvas, 50);
    </script>
</html>
por Lucas Monteiro Lucchesi
| 46.8k xp | 20 posts

Oi, Elieden! Eu dei uma olhada no código e ele faz algo parecido, mas ele vai e volta no eixo x...

Eu gostaria de um código no qual o círculo apenas fosse e não voltasse, mas que ficasse crescendo e diminuindo.

Tem como aprimorar o código a seguir, usando no máximo if/else/while/for (que é o que eu aprendi até agora)?

<meta charset = "UTF-8">
<canvas id="tela" width="600" height="400"></canvas>

<script>

    var tela = document.getElementById("tela");
    var c = tela.getContext("2d");

    //CRIA O CÍRCULO
    var circulo = function(x, raioIn){
        c.fillStyle = "blue";
        c.beginPath();
        c.arc(x, 100, raioIn, 0, 2*Math.PI);
        c.fill();
    }

    //LIMPA A TELA
    var limpa = function(){
        c.clearRect(0, 0, 600, 400);
    }

    var x = 0; //eixo x
    var raioIn = 1; //raio inicial
    var raioMax = 50; //raio máximo
    var raioMin = 1; //raio mínimo

    //FAZ O CÍRCULO CRESCER
    var desenhaC = function(){
        limpa();
        circulo(x, raioIn);
        x++;
        raioIn++;
        console.log("raio+: " + raioIn);
        console.log("x: " + x);
    }

    //FAZ O CÍRCULO DIMINUIR
    var desenhaD = function(){
        limpa();
        circulo(x, raioIn);
        x++;
        raioIn--;
        console.log("raio-: " + raioIn);
        console.log("x: " + x);
    }


    //setInterval(desenhaC, 30); //teste
    //setInterval(desenhaD, 30); //teste

</script>
por Elieden Estevam Garcia Barbosa
| 98.7k xp | 13 posts

Desculpe eu me confundi. Veja esse codigo, a bolinha aumenta, diminui e depois volta com eixo x = 0. Se não conseguir entende alguma parte me avisa.

<!DOCTYPE html>
<html>
    <head>
        <title>Logica Programação</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <canvas id="tela" width="600" height="500">
        </canvas>
    </body>

    <script>
        var tela = document.getElementById("tela");

        var c = tela.getContext("2d");

        var desenhoAumentaDiminui = function() {

            var x = 0;

            var cresce = 0;

            var diminui = 50;

            setInterval(function() {
                c.clearRect(0, 0, 600, 400);
                c.beginPath();
                if (cresce > 50) {
                    // Quando cresce o suficiente.
                    c.arc(x*2, 100, diminui, 0, 2 * Math.PI);
                    diminui--;

                } else {
                    // Se não cresceu o suficiente, continua aumentando
                    c.arc(x*2, 100, cresce, 0, 2 * Math.PI);
                    cresce++;
                    diminui = 50; // Caso começe crescer novamente
                }
                if (diminui == 0){
                    // Se diminuio suficiente, então podemos volta a crescer.
                    cresce = 0;
                }

                c.fillStyle = "blue";
                c.fill();

                if( x == 200) {
                    // devemos zerar o eixo x
                    x = 0;
                }
                x++;
            }, 10);
        };
        desenhoAumentaDiminui();
    </script>
</html>
por Lucas Monteiro Lucchesi
| 46.8k xp | 20 posts

Agora sim!

Uma dúvida... Porque, de fato, o correto foi colocar x*2 na formação dos círculos? Eu fiz o teste sem fazer a multiplicação e realmente fica diferente... Qual foi o raciocínio?

por Elieden Estevam Garcia Barbosa
| 98.7k xp | 13 posts

Veja x aumenta 1 em 1 (x++). Porém quero que isso seja mais rapido, então eu multiplico o valor do x por 2. Entendeu ? Eu podia de vez fazer x++, fazer x += 3; e tirar todos os x *2 por somente x. O x vai controla a velocidade do eixoX então eu multipliquei por dois para ficar um pouco mais rapido. Teste o codigo dessa forma: 

<script>
    var tela = document.getElementById("tela");

    var c = tela.getContext("2d");

    var desenhoAumentaDiminui = function() {

        var x = 0;

        var cresce = 0;

        var diminui = 50;

        setInterval(function() {
            c.clearRect(0, 0, 600, 400);
            c.beginPath();
            if (cresce > 50) {
                // Quando cresce o suficiente.
                c.arc(x, 100, diminui, 0, 2 * Math.PI);
                diminui--;

            } else {
                // Se não cresceu o suficiente, continua aumentando
                c.arc(x, 100, cresce, 0, 2 * Math.PI);
                cresce++;
                diminui = 50; // Caso começe crescer novamente
            }
            if (diminui == 0){
                // Se diminuio suficiente, então podemos volta a crescer.
                cresce = 0;
            }

            c.fillStyle = "blue";
            c.fill();

            if( x >= 400) {
                // devemos zerar o eixo x
                console.log(x);
                x = 0;
            }
            x = x + 2;
        }, 10);
    };
    desenhoAumentaDiminui();
</script>

Veja que mudei a condição para if( x >= 400). Enfim eu fiz esse codigo, e talveis não pensei muito. Você pode encontra o mesmo resuldado, mas de volta mais simples. Você conseguio entende todo agora ?

por Lucas Monteiro Lucchesi
| 46.8k xp | 20 posts

Beleza! Obrigado pela ajuda, Elieden!