15° Atividade - Aula 17: Barco no Mar

Para essa atividade, temos que criar o movimento de um barco no mar e discutir os

resultados. Para animar o barco, precisamos usar a função rotate().

Durante a aula, aprendemos sobre o seno e como utilizar a função sin() para retornar valores entre -1 e 1, assim podendo fazer ondulações, assim construindo a base do código. Usei um for para criar um valor de x que é incrementado em 0.1 a cada ciclo e representa a posição em no eixo x, a cada ciclo do for, é calculado o seno de x, e esse valor é utilizado para a posição no eixo y. Com essa parte do código pronta, precisamos definir o período e a amplitude, que são duas grandezas que definem o espaçamento entre as elipses que compõem onda tanto na vertical quanto na horizontal, pois se não houvesse esse espaçamento, a onda viraria basicamente uma linha reta.

Agora precisamos pegar uma imagem qualquer para representar o barco. Para anima-lo, precisamos primeiramente entender o funcionamento da função rotate(). Ela funciona rotacionando os elemento em volta da origem (ponto (0,0) originalmente) de acordo com o valor em graus dado como parâmetro. Mas para o nosso código, precisamos que o barco rotacione em volta do próprio centro, para isso vamos utilizar a função translate() junto a ela. Essa função muda o ponto da origem para a coordenada dada como parâmetro, sendo assim, se mudarmos a origem para a posição onde o barco deve estar a cada frame. Para fazer isso, precisamos apenas misturar o código que usamos para criar a onda junto com o translate() e rotate(), mas dessa vez, como não estamos usando for, precisamos utilizar uma variável que seja incrementada a cada ciclo do draw().

Como resultado, temos o gif ao lado, mas ainda podemos melhorar mais o código, fazendo um background que pareça o mar.

E esse é o resultado final.

Link para a pasta no drive.

Link para o código no github.