Atividade 16 - Barco no mar (seno)

Na aula 17 foi visto a importância da função seno para diversas aplicações em multimídia. Logo, a atividade dessa aula consiste em fazer do uso dessa função:
"Criar o movimento de um barco no mar e discutir os resultados no blog. Use a função rotate para animar o barco."

01 - Revisando o código da aula

Antes de iniciarmos a aplicação, vamos revisar o código da onda feito em sala de aula para que possamos relembrar o conteúdo.

O código basicamente desenha uma senoide com várias elipses.

Inicialmente, é criado uma variável x do tipo float igual a 0.

No draw, é criado uma variável y também do tipo float que recebe o seno da variável x como valor. Então, é feito um incremento de 0.1 no valor de x e depois criado uma elipse que utiliza dessas variáveis como parâmetro. Além disso, o valor do raio dessas elipses é 5.

Logo, o par ordenado y das elipses sempre variam de -1 a 1, já que o seno tem essa variação.

função seno

Ademais, é possível verificar que os pares ordenados(x,y) das elipses foram multiplicados por 10. Isso ocorre para que se possa mudar a amplitude e o período das ondas. Também foi somado o y em 300 para que a onda inicie no centro da tela, já que as dimensões usadas para a tela nessa aplicação é de (800,600).

utilizando os valores x e y

utilizando os valores x e y multiplicados por 10

Assim, são criadas várias elipses que formam uma senoide.

OBS: é importante ressaltar que o processing por padrão utiliza os valores dos ângulos em radianos!

02 - Imagens
Para a aplicação, utilizei de imagens encontradas no google:

barco

ambiente

castelo

03 - Mar

Antes de partidos nosso barquinho, precisamos criar uma imagem de fundo para o mar. Para que o barco siga direitinho a onda do mar, vamos usar o mesmo código da senoide para os dois, de modo a criar duas ondas iguais.

Em vez de multiplicar os pares ordenados(x,y) por 10, optei por multiplicá-los por 20 afim de deixar a onda mais parecida com a onda de um mar.

Ademais, usei a função fill com os parâmetros (97,205,228) para pintar a onda de azul.

Por último, adicionei uma condição(if) que quando o par ordenado(x) atingir um valor maior ou igual a 40, o processing vai salvar a imagem nesse instante através da função  save, que salva a imagem gerada como jpg, png etc dentro da pasta.

Ou seja, quando a nossa onda chegar a extremidade direita da tela, o processing vai salvar essa imagem dentro da pasta, gerando nossa onda.

imagem salva pelo processing

Feito isso, agora é só usar o photoshop para pintar a parte de baixo com o mesmo azul e retirar o fundo da parte cima:

imagem editada pelo photoshop

04 - Barco

Depois de criar uma função cenario() que monta o cenário na ordem correta para nossa aplicação, vamos usar o mesmo código que utilizamos para criar o mar e aplicar a função translate(), função que basicamente move a origem(0,0) que desenha no canto superior esquerdo para uma nova posição, depois da função ellipse() com os mesmos parâmetros da nossa elipse:

- x: x*20

- y: y*20 + 300

Depois da função translate(), vamos chamar a imagem do nosso barco com os pares ordenados (0,-25) e 100 de largura e altura. Por fim, na condição estabelecida anteriormente, vamos substituir a função save para setar o valor de x igual a 0. Assim, quando o nosso barco atingir a extremidade direita da tela, ele vai reiniciar a posição partindo de novo da origem.

OBS: o -25 utilizado no par ordenado y do barco foi somente para fazer com que o barco fique em cima da onda.

05 - Rotate

Nosso barco está navegando pela onda, mas ainda falta ele rotacionar para deixar o movimento mais realista. Então vamos utilizar a função rotate() sugerida no enunciado da atividade. 

A função rotate() gira a imagem recebendo ângulos, em radianos, como parâmetros. 

Então, visto que o eixo dos senos é o eixo y e o eixo dos cossenos é o eixo x, passei como parâmetro o cosseno do par ordenado x, variando assim ângulo do par ordenado x do barco de 1 até -1.

função cosseno

A aplicação finalizada fica assim:

DOWNLOAD DO CÓDIGO