09 - Proporções

Nesta atividade, devemos 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.

Interface do programa.

Para trabalhar com a proporção escolhi usar o a divisão da tela em módulos. Calculando o tamanho e posição de cada elemento baseada em uma quantidade de módulos específica. Também apliquei conhecimentos adquiridos de outras atividades para realizar a aplicação. Vejamos as variáveis:

int raio;
int modX, modY;

Essas são as variáveis de inicialização. Na função setup() é onde elas terão seu valor definido:

void setup() {
  modX = largura/10;
  modY = altura/10;
  raio = 25;
}

Cumpridas as declarações básicas, vamos ver as funções:

void circulo(float x, float y) {
  ellipseMode(RADIUS);
  ellipse(x, y, raio, raio);
}

Nesta função é desenhado o círculo central no retângulo. Por ser uma função simples, é de se esperar que seja usada dentro de outra função mais abrangente.
Relembrando: A função ellipseMode(RADIUS) interpreta os dois primeiros parâmetros como centrais, porém usa o terceiro e quarto parâmetros para especificar metade da largura e altura das formas.

void janela(int x, int y) {
  rectMode(CENTER);
  rect(x, y, 4 * modX, 3 * modX);
  control();
  circulo(mouseX, mouseY);
} 

O primeiro passo para desenhar a janela com a proporção 4:3 foi centralizar os eixos x e y do rect() utilizando a função rectMode(CENTER). Os eixos x e y do retângulo são declarados na função draw() como centrais, ou seja: width/2 e height/2. Para a largura e altura do retângulo é usado o modX, que equivale a décima parte da largura total da tela multiplicados por 4, e 3, respectivamente.

A função control() é responsável pode definir os limites da movimentação do círculo para dentro do retângulo. Delimita o mouseX e mouseY e também desenha uma linha que vai do centro da tela até a posição atual do círculo.

Posição do círculo em relação ao retângulo.

Acesse o programa aqui: Proporção