Como você pôde ter visto no exemplo, nós temos dois retângulos em uma tela que mudam de posição e tamanho de acordo com a localização do mouse. Percebemos os dois retângulos mesmo um sobrepondo o outro, mostrando que há uma certa transparência neles. Acima temos o código completo e vamos dissecá-lo aos poucos para entender o que ele faz:
Na primeira parte do código está o setup, as configurações do exemplo. Na linha 2 é determinado o tamanho da tela. Os dois números são os parâmetros que respectivamente significam altura e largura (em pixels). Nossa tela portanto tem 640px de largura e 360px de altura. Na linha 3, o noStroke() é uma função que faz com que nenhuma figura desenhada tenha borda. E na linha 4 a função rectMode(CENTER) diz que quando eu for desenhar um retângulo, a posição na tela x,y pela qual
o programa deve iniciar o desenho deve ser pelo centro do retângulo, ou seja, por padrão os retângulos começam a ser desenhados pelo canto superior esquerdo, esta função modifica para exatamente o centro.
Agora veremos a parte mais complexa do código:
Tudo o que está dentro de void draw() será processado infinitamente até o programa ser fechado. Na linha 8 está a definição da cor do plano-de-fundo da tela. Deixá-lo dentro do draw é importante para que não tenhamos vários retângulos desenhados na tela. O parâmetro colocado (51), é um tom de cinza, no caso mais próximo do preto.
A função logo abaixo é a cor selecionada para "pintar" o elemento que virá a ser proposto no código, no caso, nosso primeiro retângulo. Os dois parâmetros colocados (255, 204) significam respectivamente o tom de cinza e a opacidade. 255 é o branco puro e 204 reduz de maneira suave a opacidade.
Agora vem o desenho dos retângulos. Isto é feito pela função rect(). Antes é necessária uma explicação de como ele é desenhado: São quatro parâmetros neste exemplo. Os dois primeiros referem-se a posição horizontal e vertical dele na tela, enquanto os dois últimos a sua largura e altura respectivamente. A posição X do mouse determina a origem X do retângulo, isso faz com que a figura acompanhe o movimento horizontal do ponteiro do mouse enquanto brincamos na tela. Já a posição Y é fixa. Ela foi proposta para ser da metade da altura da tela, ou seja, no centro da altura. Lembra que no setup os retângulos teriam seu início no centro? Pois bem, esta configuração é responsável por estes parâmetros de origem serem alocados ao centro da figura.
Para a largura e altura foi colocada uma fração que tem como base a posição do mouse quanto sua altura divida por dois e logo após acrescenta-se 10px. Isso faz com que quanto mais abaixo da tela o mouse estiver, maior será o retângulo, e quanto mais acima, menor. A divisão foi feita para que a figura desenhada não tomasse toda a altura da tela:
Mouse o mais baixo possível na tela
Mouse o mais alto possível na tela
Logo após mais um fill() do mesmo do primeiro, agora para o segundo retângulo. Só que para o segundo, foi pensado no efeito inverso. Enquanto um fica grande o outro deve ficar pequeno, de maneira inversamente proporcional.
Para isso foram criadas duas variáveis, para as posições X e Y do mouse com base na largura e altura da tela, causando assim o efeito inversamente proporcional que será incluso nos parâmetros do segundo retângulo.
E assim nos parâmetros do segundo retângulo para ser desenhado a diferença para o primeiro foi que no lugar de colocar as posições X e Y do mouse, as variáveis inversas foram alocadas, causando assim o efeito visto.
Apenas quando o mouse encontra-se exatamente no centro da tela as figuras ficam o mesmo tamanho causando assim a imagem de apenas uma figura.
Farei uma modificação deste exemplo e a farei em outra postagem para não deixar isto aqui tão gigante. Um abraço continua comigo!
Nenhum comentário:
Postar um comentário