Na aula 19 vimos a última principal função trigonométrica: Tangente.
Para a atividade foi pedido:
" Criar um olho (círculo preto pequeno no interior de círculo branco grande) que se encontra sempre voltado para o cursor do mouse."
- E porquê essa função é tão importante para multimídia?
Porque é através dessa função que podemos obter um ângulo entre dois pontos.
Sabendo isso, vamos mostrar na prática o valor que essa função tangente tem dentro da nossa aplicação.
Inicialmente, nosso código será dividido em duas condições:
- Mouse dentro da área do olho: a posição da pupila vai seguir o mouse.
- Mouse fora da área do olho: a posição da pupila vai variar apenas na sua angulação para seguir o mouse.
01 - Mouse dentro da área do olho
Antes de estabelecer essa condição, vamos criar inicialmente o olho.
O tamanho da nossa tela será 600 x 600. Sabendo disso, vamos criar uma função chamada olho() que irá desenhar as duas elipses utilizando as funções width e height divididas por 2 para que o ponto de origem seja no centro da tela.
A íris(parte branca) do olho terá o diâmetro de 200 pixels, já a pupila(parte preta) terá 75 pixels.
Para a atividade foi pedido:
" Criar um olho (círculo preto pequeno no interior de círculo branco grande) que se encontra sempre voltado para o cursor do mouse."
Porque é através dessa função que podemos obter um ângulo entre dois pontos.
tangente
Sabendo isso, vamos mostrar na prática o valor que essa função tangente tem dentro da nossa aplicação.
Inicialmente, nosso código será dividido em duas condições:
- Mouse dentro da área do olho: a posição da pupila vai seguir o mouse.
- Mouse fora da área do olho: a posição da pupila vai variar apenas na sua angulação para seguir o mouse.
01 - Mouse dentro da área do olho
Antes de estabelecer essa condição, vamos criar inicialmente o olho.
O tamanho da nossa tela será 600 x 600. Sabendo disso, vamos criar uma função chamada olho() que irá desenhar as duas elipses utilizando as funções width e height divididas por 2 para que o ponto de origem seja no centro da tela.
A íris(parte branca) do olho terá o diâmetro de 200 pixels, já a pupila(parte preta) terá 75 pixels.
olho gerado no processing
Feito isso, vamos estabelecer a condição para verificar quando o mouse está dentro da íris. Utilizando do papel e da caneta vamos estabelecer os valores de acordo com o tamanho da tela:
No processing, vamos criar duas variáveis para os pares ordenados (x,y) da pupila, xPupila e yPupila, respectivamente.
Na condição iremos restringir os valores do mouseX e mouseY com base no quadrante que calculamos:
- x: maior ou igual a 200 e menor que 400.
- y: maior ou igual a 200 e menor que 400.
Quando essa condição for verdadeira, as variáveis xPupila, yPupila vão ser iguais, respectivamente, aos valores de mouseX e mouseY. E assim fica a aplicação:
É percebido que há um erro. Quando estabelecemos para o ponto de origem da pupila ser o mouseX e mouseY, não calculamos o raio dela e a mesma consegue sair da íris.
Para resolver esse problema vamos utilizar a função map() para mapear o mouseX e mouseY para os valores limites que incluam o valor do diâmetro da pupila(75):
Agora vemos que a íris não consegue sair da pupila. Porém, se nós movermos o mouse na diagonal, vamos perceber que mesmo com o map() a pupila vai conseguir sair da íris.
E porquê isso acontece?
Simples!
No quadrante que calculamos acima, é possível ver que há espaços(destacados em verde) saindo da íris. Quando movemos o mouse na diagonal atingimos esses espaços e a pupila consegue sair do olho.
E como resolver isso?
Vamos criar uma variável raioIris que receba a função dist(), passando como parâmetro o centro da tela para o valores x e y do mouse.
Como sabemos que o diâmetro da íris é 200, o seu raio máximo é 100 pixels e o diâmetro da pupila é 75 e seu raio é 37.5, vamos substituir a condição anterior para enquanto o raio da íris for menor que 62.5 (100 - 37.5) a pupila vai seguir o mouse com o mapeamento do mouseX e o mouseY:
Como sabemos que o diâmetro da íris é 200, o seu raio máximo é 100 pixels e o diâmetro da pupila é 75 e seu raio é 37.5, vamos substituir a condição anterior para enquanto o raio da íris for menor que 62.5 (100 - 37.5) a pupila vai seguir o mouse com o mapeamento do mouseX e o mouseY:
02 - Mouse fora da área do olho
Para a área fora do olho, a pupila deve somente variar a angulação e para isso vamos utilizar do código das coordenadas polares.
Mas antes, vamos criar uma variável "ang" que irá calcular a tangente, através da função atan2(), entre o valor (mouseY - width/2) e o valor (mouseX - height/2) do mouse. Esse será o ângulo do mouse.
Por fim, as variáveis xPupila e yPupila vão receber os seguintes valores:
- xPupila = width/2 + p2cx(62.5,ang);
- yPupila = height/2 + p2cy(62.5,ang);
Dessa forma quando o mouse estiver fora do olho, a pupila vai seguir apenas o ângulo do mouse e não irá sair do olho, visto que passamos o raio como 62.5 que é o raio limite para que a pupila não saia da íris.
03 - Mais olhos
Para complementar a atividade, alterei a função olho() para que receba dois valores de entrada: xIris e yIris. Dessa forma substitui todos os cálculos que utilizam o centro da tela, para as variáveis xIris e yIris. Agora temos uma função olho() que pode ser chamada diversas vezes e criar vários olhos.
Mudei o tamanho da tela para (800,800) no setup() e no draw(), coloquei o background com os parâmetros (129,125,123) e chamei a função olho() cinco vezes, mudando seus pontos de oriem(xIris, yIris):
Comentários
Postar um comentário