Java Divertido: #25) Animações em HTML

Bom dia,

Hoje venho apresentar rapidamente uma ferramenta que descobri para desenvolver animações em HTML, o Canvas, muito semelhante à biblioteca Graphics que utilizamos na linguagem Java.

Para utilizá-la, basta simplesmente invocá-la na estrutura .html de sua página:

<canvas id="myCanvas" width="200" height="100" ></canvas>

Depois, no código Javascript, criamos uma variável que faça referência ao Canvas criado, sendo que já se torna possível criar desenhos básicos com ele, como na ferramenta Graphics:

Desenhando um retângulo no Canvas.


var c = document.getElementById("myCanvas");

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

ctx.fillStyle = "#FF0000";

ctx.fillRect(0,0,150,75);

Torna-se possível agora desenhar linhas, textos, circunferências, imagens, etc, permitindo-nos construir animações simples com auxílio da linguagem javascript. Para obter mais informações, consulte uma das referências indicadas.

Podemos assim, adicionar vários elementos Javascript ao nosso projeto, para a leitura de inputs do usuário (fazer o bloco se mover, por exemplo), realizar conexão de dados (como no projeto de jogo Web Bizuca Online) ou mesmo animações paralelas.

Como eu odeio explicações incompletas, resolvi adaptar o código da referência do site do mozilla (animação planetária) e adicionar inputs a essa animação, permitindo ao usuário controlar seu próprio planeta :)

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="input.js"></script>
        <title>Animação</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body onload="init();" onkeydown="press(event);" onkeyup="release(event);">
        <canvas id="myCanvas" width="600" height="600" ></canvas>
        <script type="text/javascript">
            var x = 300, y = 300;
            var sun = new Image();
            var moon = new Image();
            var earth = new Image();
            function init() {
                sun.src =
'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';
                moon.src =
'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
                earth.src =
'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
                window.requestAnimationFrame(draw);
            }

            function draw() {
                var ctx = document.getElementById('myCanvas').getContext('2d');

                ctx.globalCompositeOperation = 'destination-over';
                ctx.clearRect(0, 0, 500, 500); // clear canvas

                ctx.fillStyle = 'rgba(0,0,0,0.4)';
                ctx.strokeStyle = 'rgba(0,153,255,0.4)';
                ctx.save();
                ctx.translate(150, 150);

                // Earth
                var time = new Date();
                ctx.rotate(((2 * Math.PI) / 60) * time.getSeconds() + ((2 *
                        Math.PI) / 60000) * time.getMilliseconds());
                ctx.translate(105, 0);
                ctx.fillRect(0, -12, 50, 24); // Shadow
                ctx.drawImage(earth, -12, -12);

                // Moon
                ctx.save();
                ctx.rotate(((2 * Math.PI) / 6) * time.getSeconds() + ((2 *
                        Math.PI) / 6000) * time.getMilliseconds());
                ctx.translate(0, 28.5);
                ctx.drawImage(moon, -3.5, -3.5);
                ctx.restore();

                ctx.restore();

                ctx.beginPath();
                ctx.arc(150, 150, 105, 0, Math.PI * 2, false); // Earth orbit
                ctx.stroke();


  // Earth
                ctx.drawImage(earth, x, y);

                ctx.drawImage(sun, 0, 0, 300, 300);

                processInput();
                window.requestAnimationFrame(draw);
            }

            function processInput()
            {
                this.idle = true;

                if (window.inLeft()) {
                    x--;
                    this.idle = false;
                }
                if (window.inRight()) {
                    x++;
                    this.idle = false;
                }
                if (window.inUp()) {
                    y--;
                    this.idle = false;
                }
                if (window.inDown()) {
                    y++;
                    this.idle = false;
                }
            }
            init();
        </script>
    </body>
</html>

Somente para ilustrar o resultado de um curto código usando Canvas e para dar ao leitor um pontapé inicial, temos o pequeno exemplo compilável abaixo:

<html>
<head></head>
<body onload="init();">
 <canvas id="myCanvas" width="200" height="100" ></canvas>
 <script type="text/javascript">
 var c = document.getElementById("myCanvas");
 var ctx = c.getContext("2d");
 function init()
 {
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(0,0,150,75);
 }
 </script>
</body>
</html>

Não esqueça de incluir o arquivo input.js no mesmo diretório deste arquivo .html:

var KEY = {
  D: 68,
  W: 87,
  A: 65,
  S:83,
  RIGHT:39,
  UP:38,
  LEFT:37,
  DOWN:40,
  Q:81
};

var input = {
  right: false,
  up: false,
  left: false,
  down: false,
  quit: false
};

window.inLeft = function(){
    return input.left;
};
window.inRight = function(){
    return input.right;
};
window.inDown = function(){
    return input.down;
};
window.inUp = function(){
    return input.up;
};

function press(evt) {
  var code = evt.keyCode;
  switch(code) {
    case KEY.RIGHT:
    case KEY.D: input.right = true; break;

    case KEY.UP:
    case KEY.W: input.up = true; break;

    case KEY.LEFT:
    case KEY.A: input.left = true; break;
 
    case KEY.DOWN:
    case KEY.S: input.down = true; break;
 
    case KEY.Q: input.quit = true; break;
  }
}

function release(evt) {
  var code = evt.keyCode;
  switch(code) {
    case KEY.RIGHT:
    case KEY.D: input.right = false; break;

    case KEY.UP:
    case KEY.W: input.up = false; break;

    case KEY.LEFT:
    case KEY.A: input.left = false; break;

    case KEY.DOWN:
    case KEY.S: input.down = false; break;

    case KEY.Q: break;

    default: trace('unrecognized key code: ' +code); break;
  }
}

Quando criamos uma função do tipo window.função = function () {...}, estamos na verdade criando uma função global que pode ser chamada de outros arquivos .js. Não existem variáveis globais em javascript, porém o conceito de funções globais pode ser utilizado. Outro meio de codificar é usar um método main() no arquivo .html, centralizando as operações de vários arquivos .js do projeto.

Bem, o interesse aqui não é aprofundar muito na nova ferramenta, mas apenas anunciar a sua descoberta, que será utilizada para a construção do nosso projeto.

Referências:

http://www.w3schools.com/html/html5_canvas.asp

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/A_basic_ray-caster

Countdown

Final Countdown

sábado, 6 de junho de 2015

#25) Animações em HTML - Canvas

Referências:

Um comentário: