Tarefa 7 - Aula 8
- Ulisses Silva
- 15 de set. de 2018
- 3 min de leitura
Atualizado: 16 de set. de 2018
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 um retângulo com proporção 16:9 centralizado na tela.
Primeiramente, vamos discutir sobre as duas funções "dist" e "map" do Processing para entender como usá-las e porque.
A função "dist" é a mais simples de entender das duas, pois simplesmente calcula a distância entre dois pontos. É necessário que ela receba quatro parâmetros, sendo eles as posições X e Y dos dois pontos em questão.
O "map" pode ser associado a uma regra de 3. Ao usá-lo você precisa colocar um parâmetro inicial que deve ser uma variável numérica. Ela irá remapear esse valor tomando como base um novo limite mínimo e máximo. Portanto, após a variável, deve-se colocar mais quatro parâmetros na chamada da função. São eles, o alcance mínimo e máximo dessa variável, e os alcances mínimo e máximo da nova conversão. Por exemplo, se usarmos os seguintes parâmetros "map (X, 0, 1000, 45, 500)", onde X seja igual a 500 (a metade entre 0 e 1000), o valor retornado pelo mapeamento será 272,5 porque esse é o valor que também está na metade entre 45 e 500.
A tarefa consiste em fazer um retângulo 16:9 centralizado em uma tela 4:3 e fazer um círculo mover-se dentro desse retângulo de acordo com o movimento do mouse na tela (proporcionalmente).
Utilizaremos essa imagem que foi retirada da internet para usarmos como plano de fundo. Ela simplesmente ficará estática do tamanho da tela em 4:3.
Para criar o retângulo
Para criar o retângulo central no entanto, não basta que ele tenha proporções de 16:9. Por se tratar de uma resolução maior, precisamos tomar cuidado para que as suas medidas não ultrapassem a medida da tela. Com o auxílio de um editor de imagens, criei essa imagem que será usada pro retângulo centralizado.
Para isso, precisamos estabelecer as coordenadas do retângulo como: metade da largura da tela menos a metade da largura do retângulo, e o mesmo para a altura. Pois a imagem é desenhada pelo canto superior esquerdo.
Usando as variáveis que nos dão a posição do mouse (mouseX e mouseY), temos que criar novas variáveis (bolaX e bolaY) que baseado nessas duas variáveis do mouse consigam fazer uma conversão de valores. Para isso, usaremos então a função "map", pois ela se adéqua perfeitamente para esse problema.
A lógica que cada variável das coordenadas da bola receberá será usando um "map" que recebe como parâmetros o mouseX (no caso da variável bolaX), e os alcances mínimo e máximo serão o tamanho da própria tela, ou seja, 0 e largura da tela. O valor para o novo alcance mínimo deve ser a posição onde o retângulo é desenhado, ou seja, no caso do eixo X, a metade da largura da tela menos a metade da largura do retângulo. E no alcance máximo a mesma ideia, mas ao invés de diminuir deve-se somar a metade da largura do retângulo. Usando o mesmo pensamento no eixo Y, teremos então as duas variáveis retornando valores remapeados de acordo com a posição do mouse.
GIF do funcionamento do programa.
OBS: O procedimento que desenha a estrela no centro da bola foi retirado dos exemplos do site oficial do Processing. No código é possível notar que as medidas que geram o tamanho da tela e do retângulo central são aleatórias, mas respeitando as respectivas proporções.
Link da pasta do código em Processing: Baixar a pasta do código!
Link do código somente em texto: Baixar o texto do código!
Comments