Tarefa da aula 08: Criando uma "Cintic virtual"

Objetivo:
Empregando as funções dist e map do Processing, explicar e exemplificar como a posição do mouse, numa janela com proporção 4:3, pode mover um círculo no interior de uma retângulo com proporção 16:9 centralizado na tela.

A primeira coisa a ser feita era desenhar os retângulos na tela e centraliza-los. Para fazer isso, eu criei funções, um pouco mais complexas do que eu precisaria ter feito, mas que me dariam mais controle sobre os retângulos e permitiria testar as funções dist e map em várias situações posteriormente.

Em chamei o retângulo que controlaria o círculo de "Mesa" e o retângulo onde o círculo seria desenhado de "Tela".

Primeiro os grupos de variáveis usados para as funções dos retângulos, além da função que desenharia o círculo:

Em seguida, as funções dos retângulos, que se comportariam de um jeito muito parecido. A ideia é que os parâmetros de entrada das funções fossem a posição X e Y onde os retângulos seriam desenhados (a partir do centro, para facilitar que fossem centralizados), e a altura de cada retângulo. A largura seria calculada dentro da própria função (com base na altura) para as proporções 16:9 para a Tela e 4:3 para a Mesa.

Agora, a parte mais importante do código, as funções dist e map. A dist basicamente calcula a distância em pixels entre dois pontos. Simples assim. E a função map pega um valor e o re-mapeia de um intervalo para outro, como por exemplo pegar um valor dentro de um intervalo da largura da nossa Mesa, e escaloná-lo para outro valor dentro da largura da nossa Tela.

Pois bem, mas que valor é essa? É aqui onde entra a função dist. Ela foi usada para dizer que os valores a serem convertidos deveriam ser as distância entre os eixos x e y do canvas e as posições x e y do mouse, armazenados nas variáveis mapX e mapY, como visto na imagem abaixo. A ideia é pegar os valores obtidos com a função dist, converte-los com a função map, e depois armazená-los nas variáveis bolaX e bolaY, que serão usadas para desenhar o círculo mais tarde.

Extras: O ultimo paço agora seria apenas preparar o canvas e chamar dentro do void draw() as funções da Tela, da Mesa e ellipse(), mas usando sistemas de flag e caixa de colisão eu modifiquei o código para fazer o mapeamento apenas quando o mouse estivesse dentro do retângulo da Mesa, caso contrário, o círculo seria desenhado, na tela, mas sem sofre influência da posição do mouse.

Primeiro eu precisava detectar a colisão do mouse com a Mesa:

Segundo, era preciso fazer a conversão com map e dist apenas se essa colisão acontecesse, além de, caso o mouse não estivesse sobre a Mesa, fazer com que as posições X e Y do círculo fossem as mesmas das bordas da Tela, claro, guardando o lado por onde o mouse saiu da tela:

O resultado final:

Código completo:

 Download do código