MAMI - Aula #9

Essa tarefa é a 2ª mais simples até agora, ela é basicamente sobre proporção.

Primeiro vou criar 2 variáveis para pegar as posições x e y relativas do mouse, a ideia é encontrar a fração do tamanho da tela onde o mouse está:

  mouseXrelative = 1.0*mouseX/width;
  mouseYrelative = 1.0*mouseY/height;

A multiplicação do primeiro valor por 1.0 é para transformar ele em floar, senão o programa vai retornar sempre o valor 0.

Depois eu poderia apenas por os valores que a tarefa pediu, mas acho que é interessante mostrar uma ideia que usei em uma das telas do jogo feito no primeiro semestre do curso:

if((propY)*width<(propX)*height){
   widthRes = width;
   heightRes = (propY/propX)*widthRes;
}
else{
   heightRes = height;
   widthRelative = (propX/propY)*heightRes;
  
}

A propX e a propY são variáveis onde eu ponho o tamanho do objeto, nesse caso eu usei a proporção de 14:9 que a tarefa pediu, o widthRes e o heightRes aqui vão ser a largura e a altura resultantes.

Pra explicar a ideia eu vou precisar desenhar(até porque foi a forma como eu pensei):

Suponhamos que temos um retângulo dentro de outro e queremos aumentar o tamanho dele proporcionalmente, de forma que nem a altura e nem a largura ultrapassem a do retângulo maior.

Nós aumentamos proporcionalmente até pararmos no limite da largura ou da altura. Até que um dos lados do retângulo menor se torne igual a um dos lados do maior.

A equivalência " 16/9 = largura/altura " ou "16*altura = 9*largura" é válida para o retângulo menor que estamos tentando achar, mas repare que para o retângulo maior, a diferença entre a largura ou a altura dele dentro dessa proporção vão transformar o "=" em "<" ou ">", é daí que surge o "if((propY)*width < (propX)*height)".

Explicando de forma mais simples, se o lado da largura é o menor, isso significa que, na hora de aumentar o retângulo menor, a largura dele chega na largura do maior antes da altura dele chegar na altura do maior, nesse caso nós usamos a largura do maior como base, caso contrário, usamos a altura do maior.


Voltando à tarefa, já que tenho uma representação da tela na proporção escolhida, vou aproveitar ela e fazer o retângulo pedido na tarefa a partir de 1 quarto dela, já aproveitar para pegar a posição x e y dele, que vão ser usadas jajá:

rect(x=(width/2-largura/2),y= (height/2-altura/2), largura, altura);

O outro pedido da tarefa é desenhar uma bolinha dentro deste retângulo de forma que a posição dela seja proporcional à posição do mouse na tela, pra isso vamos usar as posições relativas criadas lá no início do post:

ellipse(x+(mouseXrelative*largura), y+(mouseYrelative*altura), 10, 10);

E pronto, a tarefa está feita!

Download do arquivo do processing aqui!