Na aula anterior foi visto como criar uma função que retorna a distância de dois pontos, uma ou duas dimensões, e outra que cria vários retângulos proporcionais.
Para fazer uma parametrização é necessário utilizar-se desses dois conhecimentos para que um ponto seja convertido de forma correta em uma outra proporção. Uma plataforma responsiva utiliza-se dessa parametrização dos pontos para adaptar-se a proporções diferentes.
A atividade consiste em:
"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"
01 - Dist
A função dist do processing recebe como parâmetro o par ordenado de dois pontos, seja de duas ou três dimensões, e retorna a distância entre eles.
OBS: a função retorna um valor do tipo float.
- 2D: dist(x1,y1,x2,y2)
- 3D: dist(x1,y1,z1,x2,y2,z2)
Essa função irá simplificar a nossa aplicação, visto que na função feita em sala de aula para calcular a distância entre dois pontos foi preciso utilizar o teorema de Pitágoras, e a função dist já faz todo esse processo, economizando linhas e tempo. Assim podemos criar um texto que mostre a distância entre o círculo e o mouse.
02 - Map
A função map remapeia um número de um intervalo para o outro. Ela recebe 5 parâmetros:
map(v,amin,amax,bmin,bmax)
- v: valor de entrada a ser convertido
- amin: limite mínimo do intervalo atual do valor
- amax: limite máximo do intervalo atual do valor
- bmin: limite mínimo do intervalo de limitação do valor
- bmax: limite máximo do intervalo de limitação do valor
03 - Aplicação
A proporção que iremos utilizar da tela é 800 x 600(4:3) e do retângulo é de 480 x 270(16:9). Iremos criar uma função chamada desenhaCirculo que vai criar o círculo com a função ellipse com o ponto de origem (x,y) utilizando a função map. Serão duas funções map para remapear o mouseX e mouseY. Os limites máximos e mínimos do mouseX e mouseY estão representados com os pontos verdes na figura abaixo:
mouseX:
- Limite mínimo do intervalo atual: 0
- Limite máximo do intervalo atual: 800
- Limite mínimo do intervalo de limitação: 160
- Limite máximo do intervalo de limitação: 640
mouseY:
- Limite mínimo do intervalo atual: 0
- Limite máximo do intervalo atual: 600
- Limite mínimo do intervalo de limitação: 165
- Limite máximo do intervalo de limitação: 435
O diâmetro do círculo terá o valor de 10.
Além disso, iremos utilizar a função dist passando como parâmetro o mouseX, mouseY e as coordenadas x e y da elipse para criar um texto que mostre a distância entre o mouse e o círculo. E assim temos a nossa aplicação:
Para fazer uma parametrização é necessário utilizar-se desses dois conhecimentos para que um ponto seja convertido de forma correta em uma outra proporção. Uma plataforma responsiva utiliza-se dessa parametrização dos pontos para adaptar-se a proporções diferentes.
"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"
01 - Dist
A função dist do processing recebe como parâmetro o par ordenado de dois pontos, seja de duas ou três dimensões, e retorna a distância entre eles.
OBS: a função retorna um valor do tipo float.
- 2D: dist(x1,y1,x2,y2)
- 3D: dist(x1,y1,z1,x2,y2,z2)
Essa função irá simplificar a nossa aplicação, visto que na função feita em sala de aula para calcular a distância entre dois pontos foi preciso utilizar o teorema de Pitágoras, e a função dist já faz todo esse processo, economizando linhas e tempo. Assim podemos criar um texto que mostre a distância entre o círculo e o mouse.
02 - Map
A função map remapeia um número de um intervalo para o outro. Ela recebe 5 parâmetros:
map(v,amin,amax,bmin,bmax)
- v: valor de entrada a ser convertido
- amin: limite mínimo do intervalo atual do valor
- amax: limite máximo do intervalo atual do valor
- bmin: limite mínimo do intervalo de limitação do valor
- bmax: limite máximo do intervalo de limitação do valor
03 - Aplicação
A proporção que iremos utilizar da tela é 800 x 600(4:3) e do retângulo é de 480 x 270(16:9). Iremos criar uma função chamada desenhaCirculo que vai criar o círculo com a função ellipse com o ponto de origem (x,y) utilizando a função map. Serão duas funções map para remapear o mouseX e mouseY. Os limites máximos e mínimos do mouseX e mouseY estão representados com os pontos verdes na figura abaixo:
- Limite mínimo do intervalo atual: 0
- Limite máximo do intervalo atual: 800
- Limite mínimo do intervalo de limitação: 160
- Limite máximo do intervalo de limitação: 640
mouseY:
- Limite mínimo do intervalo atual: 0
- Limite máximo do intervalo atual: 600
- Limite mínimo do intervalo de limitação: 165
- Limite máximo do intervalo de limitação: 435
O diâmetro do círculo terá o valor de 10.
Além disso, iremos utilizar a função dist passando como parâmetro o mouseX, mouseY e as coordenadas x e y da elipse para criar um texto que mostre a distância entre o mouse e o círculo. E assim temos a nossa aplicação:
Como foi visto na aplicação, o círculo atravessa um pouco o retângulo. Para consertar isso iremos ou aumentar ou diminuir em 5 nossos limites, já que o diâmetro do círculo é 10.
mouseX:
- Limite mínimo do intervalo atual: 0
- Limite máximo do intervalo atual: 800
- Limite mínimo do intervalo de limitação: 165
- Limite máximo do intervalo de limitação: 635
mouseY:
- Limite mínimo do intervalo atual: 0
- Limite máximo do intervalo atual: 600
- Limite mínimo do intervalo de limitação: 170
- Limite máximo do intervalo de limitação: 430
- Limite máximo do intervalo atual: 800
- Limite mínimo do intervalo de limitação: 165
- Limite máximo do intervalo de limitação: 635
mouseY:
- Limite mínimo do intervalo atual: 0
- Limite máximo do intervalo atual: 600
- Limite mínimo do intervalo de limitação: 170
- Limite máximo do intervalo de limitação: 430
Comentários
Postar um comentário