Tarefa 15 - Aula 18

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

Explicar, com base na trigonometria, a criação de uma aplicação que move um olho (bitmap circular pequeno no interior de um círculo branco grande) que se

encontra sempre voltado para o cursor do mouse.

Trigonometria?

Bem, lembram das coordenadas polares que usamos na tarefa passada? Elas serão muito úteis também para a resolução dessa tarefa. No entanto, a novidade é o uso também da função arco tangente. Mas o que é isso? Bem, sabemos que a função tangente de um determinado ângulo é a divisão do seno pelo cosseno desse mesmo ângulo. Mas e se eu tiver a tangente, e desejo saber qual ângulo resulta naquele determinado valor de tangente? Isso é o arco tangente! Uma função trigonométrica que responde qual o ângulo. Ângulo esse que varia de -90º à +90º. Aqui segue um link com um vídeo de um professor que explica bem detalhadamente a função arco tangente (Link do vídeo).

Como usar isso no Processing?

Como preciso posicionar um olho que segue a posição do mouse, inicialmente pensei em criar o desenho de acordo com a posição X e Y do mouse. No entanto, existe uma barreira que não pode ser ultrapassada, a região do globo ocular. Meu olho não pode ser desenhado além dessa região.

É aí que entra a função arco tangente! Como ela me retorna um ângulo de acordo com uma posição, basta calcular esse ângulo usando a função de arco tangente "atan2" do Processing, que retorna um valor de -PI até +PI e converter em graus. Dessa forma meu ângulo varia de -180º à +180º. Feito isso, soma-se à esse ângulo + 180º, para que ele varie de 0º à 360º, e posicionar o meu olho de acordo com essa posição que varia circularmente.

Para tanto, usei a função da tarefa passada de coordenadas polares, usando como parâmetros esse ângulo calculado, e o raio máximo do olho dentro do globo ocular. Também foi preciso adicionar a condição de que, caso o mouse esteja na região do globo ocular, simplesmente desenhar o olho pela posição X e Y do mouse. (ao lado o código das funções criadas)

Sharingan!

Como a tarefa também exigia o uso de uma imagem para o olho. Decidi usar o olho do personagem Itachi do anime "Naruto". Criei 3 variáveis do tipo imagem (PImage) que chamei de "globo", "rosto" e "olho".

Imaginem que o desenho terão 3 camadas, e cada uma precisa ser desenhada em ordem específica para causar a ilusão de que o olho não está fora do rosto, logo, a imagem do "globo" é chamada primeiro, e depois a função que posiciona o "olho", para depois desenhar o "rosto" por cima.

Um detalhe que fiz à mais, foi criar 5 tipos diferentes de olhos para simular o poder da habilidade ocular do personagem (sharingan). Fiz um olho todo preto para representar seu olho normal, e as 4 variações da ativação do Sharingan. Usei o photoshop para criação dessas imagens. O rosto do personagem simplesmente peguei na internet e dei um tratamento.

Por último só adicionei uma interação através das setas do teclado para cima e para baixo, para o usuário mudar o estágio do sharingan e na função que desenha o olho coloquei também para ele ser rotacionado em seu próprio eixo, pois no desenho o olho do personagem rotaciona quando seu poder é ativado.

Abaixo segue um exemplo da aplicação sendo executada.