Atividade 7

- empregando Processing, implemente e discuta uma solução que simule o tratamento dos estados up, over e down de um botão circular na plataforma Adobe Flash.

código:

Para a criação da Elipse e do sensor dentro dela, precisaremos de duas funções.

primeiramente, a função distancia2D(), com ela é possível encontrar a distância entre dois pontos.

estabelece-se os parâmetros para os dois pontos da cordenada x e da cordenada y.

a formula usada é essa:

float distancia2D(float x1, float y1, float x2, float y2){
  float d = sqrt(pow(x2 - x1,2) + pow(y2 - y1,2));

depois, para evitar que um numero negativo seja mostrado, modulariza-se o resultado.

  d = sqrt(d*d);

Depois, criamos a função circulo(), que criará o nosso botão em forma de ellipse.

estabele-se os paramêtros (x,y, raio)

void circulo (float x, float y, float r){
  ellipse(x,y,2*int(r),2*int(r));

para fazer o sensor que muda a cor do botao ao passar o mouse por cima e ao clicar nele, usamos uma condicional:

  if(distancia2D(mouseX,mouseY,width/2,height/2) < r){
    fill(255,0,255);
    ellipse(x,y,2*int(r),2*int(r));

então chama-se a função distancia2D e estabelece-se os parâmetros dela, as cordenadas x1 e y1 para onde o mouse estiver, e x2 e y2 para o centro da tela que é a posição onde o centro do botão é criado. Por o botão ser em formato de ellipse, para saber que se o mouse está dentro ou fora dele, compara-se a distância e o raio, então, se a distância for menor que o raio, significa que o mouse está dentro do círculo, fazendo com que sua cor mude.

Botão normal (posição Up)

Botão com o mouse em cima (posição Over)

para mudar a cor quando o mouse é clicado dentro da mesma área, basta acrescentar uma condicional usando o mousePressed.

    if (mousePressed){
      fill(0,0,255);
      ellipse(x,y,2*int(r),2*int(r));
    }

Botão com o mouse clicando dentro (posição Down)

depois função setup() para estabeler o tamanho da tela.

e a função draw() para chamar a função circulo() e nela colocamos os valores que serão utilizados,

no caso, para o circulo ser criado no centro da tela e o valor do raio.