Tarefa 13 - Aula 16

Ulisses Silva
4 de nov. de 2018
3 min de leitura

Criar o movimento de um barco no mar e discutir os resultados no blog. Use a função "rotate" para animar o barco.

Iniciando

Bem vamos lá! Para começar, peguei na internet 3 imagens, uma para o barco, outra para o mar e outra pra ser o fundo. Usei o tamanho de 600 x 400 pixels como base e levei as imagens para o photoshop para deixá-las em tamanhos proporcionais.

O céu (que eu utilizei como fundo) não sofreu tantas alterações, apenas redimensionei e cortei algumas partes das bordas. E salvei a imagem já com o tamanho que utilizaria na tela (600 x 400).

O barco precisou de um tratamento para retirar o fundo branco, pois eu precisava que ele tivesse um fundo transparente para não parecer um adesivo colado na tela.

Peguei imagens mais cartunescas para combinar umas com as outras.

O mais complicado de editar foi a imagem do mar. Como eu decidi ir além, e animar não apenas o barco, eu quis fazer uma animação para o mar também. Reforçando assim a ideia de movimento. Para tanto, eu precisei fazer um "parallax", ou seja, o mar precisava reaparecer continuamente na tela de maneira que juntasse uma imagem com a outra. Para tanto, foi preciso editar a imagem para que o começo juntasse com o fim, de forma a criar uma imagem que ao ser posicionada ao lado da outra, geraria o efeito de infinitude. Depois, separei também as ondas do mar em duas partes, uma ficaria atrás do barco e a outra na frente, e cada uma com seu próprio movimento de animação. Abaixo a imagem das duas camadas do mar.

Bem, passemos agora para a parte divertida. A programação!

Codificando

As primeiras variáveis criadas foram as de imagem, para receber no setup as 4 imagens previamente editadas. E para cada imagem, com exceção do céu (pois não se move), criei duas variáveis para as posições X e Y. Outras duas variáveis foram criadas para os ângulos do mar e do barco.

Para movimentar o mar fiz um procedimento chamado "moveSea", que fica incrementando a variável X de ambas imagens do mar com valores diferentes, para dar a impressão de um estar mais rápido do que o outro. No entanto, apenas na variável Y do mar que fica atrás do barco fiz uma oscilação através do uso da função seno, tendo como base o ângulo criado para o mar, que fica sendo incrementado a todo instante. O resultado visual é de que o mar atrás do barco fica subindo e descendo num movimento pendular ao mesmo tempo que se move para frente.

Como o mar é contínuo, e precisa ficar se repetindo, criei um procedimento chamado "parallax" para fazer esse efeito. Ele recebe como parâmetro uma image, um X e um Y. Dentro dele, a imagem recebida é desenhada na posição X, Y. E outra imagem igual é chamada na posição X-largura da imagem, Y. De forma que tenho sempre duas imagens coladas e contínuas.

Por fim, o último procedimento criado foi para mover o barco, "moveBoat". A primeira coisa que ele faz é checar a posição X do barco, se ela for maior que a largura da tela, a posição X dele volta a ser 0, do contrário, a posição X dele é incrementada. Com essas linhas de código gero o efeito de movimentação horizontal, e faz com que o barco reapareça no início da tela após sair da tela. E para dar um efeito mais realista, o barco precisava oscilar de acordo com o movimento no mar, para tanto, usei o "pushMatrix" e o "popMatrix", para dentro dessa nova camada desenhar o barco e rotacioná-lo usando a função "rotate". Dentro do rotate, passei como parâmetro o cos do ângulo do barco para gerar um movimento pendular, já que o valor de seno e cosseno variam de 1 à -1, indo e voltando. Por fim, a última linha de código do procedimento incrementa o ângulo para que ele fique constantemente rotacionando.

Abaixo segue o exemplo do resultado final da aplicação.