8. 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.
Código:
void setup(){
size(800,600);
}
void draw() {
background(100);
noStroke();
rectMode(CENTER);
fill(255);
rect(width/2, height/2, 320, 180);
correspondencia();
}
int t = 30;
void correspondencia(){
float dx = dist(0,0,mouseX,0);
float dy = dist(0,0,0,mouseY);
float x = map(dx, 0, width, 240+t/2, 560-t/2);
float y = map(dy, 0, height, 210+t/2, 390-t/2);
fill(0);
ellipse(x, y, t, t);
}
A função dist() recebe dois pares de parâmetros, duas coordenadas, começando do eixo X e depois o eixo Y. Esta instrução funciona para conseguir a distância exata entre dois pontos.
Já a função map() faz a conversão proporcional de uma distância em uma reta de tamanho qualquer, para outra distância em outra reta também de tamanho a sua escolha.
No código, temos duas execuções da função dist(), uma para definir a distância específica em cada eixo por vez, pois a função map() transforma proporcionalmente um eixo. Perceba também que afim de conseguir puramente a distância em um dos eixos, o outro eixo das duas coordenadas é zerado, quando procuramos no eixo X, zeramos no eixo Y e vice versa.
Outra curiosidade é que no segundo par de coordenadas dos usos das funções map(), temos onde exatamente o retângulo centralizado começa e terminar, então foi preciso calcular o espaço em pixels ocupado pelo retângulo no centro do canvas. A interação do t/2 é um detalhe, pois eu não queria que o círculo atravessasse o retângulo do centro de maneira alguma, como a ellipse() é orientada pelo centro da figura, aumentei metade do tamanho no inicio e subtrai a mesma quantidade no final, fazendo com que esta encoste no retângulo, mas não o ultrapasse.
Por fim temos o desenho da ellipse(), que com as coordenadas convertidas, ja se tornou simples, basta por os parâmetros. Lembrando que essa função deve ser chamada dentro do draw(), para atualizar a localização da bola a cada iteração.
Código:
void setup(){
size(800,600);
}
void draw() {
background(100);
noStroke();
rectMode(CENTER);
fill(255);
rect(width/2, height/2, 320, 180);
correspondencia();
}
int t = 30;
void correspondencia(){
float dx = dist(0,0,mouseX,0);
float dy = dist(0,0,0,mouseY);
float x = map(dx, 0, width, 240+t/2, 560-t/2);
float y = map(dy, 0, height, 210+t/2, 390-t/2);
fill(0);
ellipse(x, y, t, t);
}
A função dist() recebe dois pares de parâmetros, duas coordenadas, começando do eixo X e depois o eixo Y. Esta instrução funciona para conseguir a distância exata entre dois pontos.
Já a função map() faz a conversão proporcional de uma distância em uma reta de tamanho qualquer, para outra distância em outra reta também de tamanho a sua escolha.
No código, temos duas execuções da função dist(), uma para definir a distância específica em cada eixo por vez, pois a função map() transforma proporcionalmente um eixo. Perceba também que afim de conseguir puramente a distância em um dos eixos, o outro eixo das duas coordenadas é zerado, quando procuramos no eixo X, zeramos no eixo Y e vice versa.
Outra curiosidade é que no segundo par de coordenadas dos usos das funções map(), temos onde exatamente o retângulo centralizado começa e terminar, então foi preciso calcular o espaço em pixels ocupado pelo retângulo no centro do canvas. A interação do t/2 é um detalhe, pois eu não queria que o círculo atravessasse o retângulo do centro de maneira alguma, como a ellipse() é orientada pelo centro da figura, aumentei metade do tamanho no inicio e subtrai a mesma quantidade no final, fazendo com que esta encoste no retângulo, mas não o ultrapasse.
Por fim temos o desenho da ellipse(), que com as coordenadas convertidas, ja se tornou simples, basta por os parâmetros. Lembrando que essa função deve ser chamada dentro do draw(), para atualizar a localização da bola a cada iteração.
Comentários
Postar um comentário