Botão de flash no Porcessing

O objetivo desse exercício é criar um botão que obedeça aos 3 principais estados de um botão animado de flash: Up, Down e Over.
O desafio aqui é saber se o Mouse está ou não dentro da circunferência do botão para tornar a aplicação mais realista.

Para o Up a cor é verde, para o Down é vermelho e pata o Over é roxo. Segue o código:

int Larg;

int Alt;

float x;

//função para determinar a distancia entre dois pontos

float distancia2D(int X1,int Y1, int X2,int Y2){

  float resposta;

  resposta = sqrt((X1*X1) -(2*X1*X2) + (X2*X2) + (Y1*Y1) - (2*Y1*Y2) + (Y2*Y2));

    

  return resposta;

}

void setup(){

size(100,100);

Larg = width/2;

Alt = height/2;

background(255);

//para desenhar a moldura do nosso botão

fill(0);

ellipse(Larg,Alt,60,60);

}

void draw(){

 x=(distancia2D(Larg,Alt,mouseX,mouseY));

 //para o estado UP do botão temos

 if (x > 25) { 

    fill(0,200,0);

    ellipse(Larg,Alt,50,50);

}

else{

  

//para o estado DOWN do botão

   if(mousePressed == true){ 

    fill(255,0,0);

    ellipse(Larg,Alt,50,50);

}

else { 

        

//para o estado OVER do botão

      fill(200,0,250);

       ellipse(Larg,Alt,50,50);

        }           

     }

}

Nostalgia: Jogando Pong

Pong é conhecido como um dos primeiros jogos de computador. Consiste em uma partida de tênis ou tênis de mesa (ping pong) em uma tela pixelada.
Os elementos de tela são bastante simples, consistindo apenas de uma linha central pontilhada que simboliza a rede e divide a área de cada jogador, uma "bola" que se movimenta pela tela ao ricochetear nas barras ou nas extremidades (em cima e em baixo), duas barras próximas as extremidades laterais da tela que são controladas pelos jogadores e, por fim, a pontuação exibida no topo da tela.

O jogo foi desenvolvido por Allan Alcorn em 1972 e lançado pela empresa Atari. Com o objetivo principal de divertir seus usuários possuía a opção de ser jogado em duplas ou a opção humano contra máquina.

A primeira máquina era movida a moedas e utilizava circuitos de placa para criar a lógica, inicialmente como porta aberta ou fechada traduzindo para 0 e 1.

Alguns bugs que não conseguiram ser consertados acabaram por ser identificados como desafios do jogo como, por exemplo, o fato das barras laterais não tocarem as extremidades da tela.

Toda essa simplicidade acabou se tornando um dos maiores sucessos da empresa nos anos 70, sendo lembrada até hoje com saudosismo por muitos usuários da época.
Para jogar um pouquinho e reviver a nostalgia de Pong acesse: http://www.ponggame.org/

Exercício: Jardim de flores

Utilizando a flor criada no exercício "Função flor" mostrado no blog anteriormente vamos imprimir na tela flores de cores e tamanhos diferentes, aleatoriamente.

Como a função da flor já estava criada só foi necessário dividir em uma função para o centro e outra para as pétalas, para que fosse possível colorir aleatoriamente e com cores diferentes cada uma das partes.
Depois foi só desenhar na tela com tamanhos também aleatórios. Segue o código completo:

 //definindo a nossa variável

float x;

void setup (){

size(600,600);

background(255);

frameRate(10);

}

//criei uma função para o círculo central da flor

 void circulo(float x,float y, float r){

     ellipse(x,y,r*2,r*2);

}

void flor(float x, float y, float r){ 

  //para colorir as pétalas com cores aleatórias

  fill(random(255),random(255),random(255));

  circulo(x+(2*r)*0.7,y+(2*r)*0.7,r);

  circulo(x-(2*r)*0.7,y-(2*r)*0.7,r);

  circulo(x-(2*r)*0.7,y+(2*r)*0.7,r);

  circulo(x+(2*r)*0.7,y-(2*r)*0.7,r);

  

  //agora colorindo o centro da flor com uma cor diferente das pétalas

  fill(random(255),random(255),random(255));

  circulo(x,y,r);

 }

//Desenhando aleatóriamente as flores na tela

void draw(){

  flor(random(600),random(600),random (20));

}

//temos o nosso jardim!

Implementando o Yin Yang

Por coincidência o mesmo símbolo que escolhi para representar matematicamente foi o mesmo que foi escolhido em aula para ser implantado no Processing. Que maravilha, meio caminho andado!!
Como já vimos o passo a passo de como desenhar só precisamos colocar as nossas elipses em seus lugares e definir as cores corretamente

Segue o código:

int x;           // coordenada x do centro do circulo principal
int y;           // coordenada y do centro do circulo principal
int r;           // raio do circulo pequeno
int centrox;     // coordenada x do centro da tela
int centroy;     // coordenada y do centro da tela

void setup(){
size(200,200);


centrox = width/2;
centroy= height/2;

yinYang(10,centrox,centroy);

}
void yinYang(int r,int x,int y){
  fill(255);
 
  // circulo branco principal
  ellipse(x,y,(r*5)*2,(r*5)*2);
  fill(0);
 
  // Dividindo ao meio com um semi circulo preto
  arc(x,y,(r*5)*2,(r*5)*2,PI,2*PI,PIE);
 
  // circulo preto médio
  ellipse(x+(2.5*r),y,(2.5*r)*2,(2.5*r)*2);
  fill(255);
  noStroke();
 
  // circulo branco médio
  ellipse(x-(2.5*r),y,(2.5*r)*2,(2.5*r)*2);
 
  // circulo branco pequeno
  ellipse(x+(2.5*r),y,r*2,r*2);
  fill(0);
 
  // circulo preto pequeno
  ellipse(x-(2.5*r),y,r*2,r*2);
}

Função flor

Em aula aprendemos a desenhar uma flor de esferas iguais alinhadas com o diâmetro da esfera central.

Segue o código:

void setup (){
  size (600, 600);
}

void draw() {
 flor2 (300, 300, 60);
}

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

void flor (int x, int y, int r) {
  circulo (300, 300, 20);
  circulo (300 + 40, 300, 20);
  circulo (300, 300 + 40, 20);
  circulo (300 - 40, 300, 20);
  circulo (300, 300 - 40, 20);
}

/* com esse código a flor é desenhada proporcionalmente em qualquer tamanho, dependendo do valor atribuído à variável "r" */

void flor2 (int x, int y, int r) {
  circulo (300, 300, r);
  circulo (300 + 2*r, 300, r);
  circulo (300, 300 + 2*r, r);
  circulo (300 - 2*r, 300, r);
  circulo (300, 300 - 2*r, r);
}


Agora o desafio da atividade é desenhar uma flor com as quatro "pétalas" na diagonal em relação ao círculo central.

Segue o código:

void setup (){

  size (600, 600);

}

void draw() {

 florDiag (300, 300, 40);

}

void circulo (int x, int y, int r) {

  ellipse (x, y, 2*r, 2*r);

}

void florDiag(int x, int y, int r)

{

//a variável "d" corresponde ao diâmetro

  int d = 2*r;

  float diag = d * sqrt(2); 

  circulo(x, y, r);

  circulo(x + int(diag/2), y + int(diag/2), r);

  circulo(x - int(diag/2), y - int(diag/2), r);

  circulo(x + int(diag/2), y - int(diag/2), r);

  circulo(x - int(diag/2), y + int(diag/2), r);

  

}

Fórmula matemática para calcular um símbolo

Para esse exercpicio escolhi o símbolo do Yin Yang. Para simplificar a explicação fiz um passo a passo.

Na primeira imagem iniciamos o desenho com um círculo de raio "r", logo em seguida desenhamos dois círculos menores no seu interior. Os círculos estão centralizados com o diâmetro do maior, logo concluímos que seu raio é metade do raio do primeiro círculo pois "r" corresponde ao seu diâmetro.

Na segunda imagem recortamos um semi círculo de cada um dos círculos menores, o de cima do lado direito e o de baixo do lado esquerdo.

Na terceira imagem desenhamos outros 2 círculos, também alinhados com o diâmetro do círculo maior. Agora eles possuem 1/3 do raio das esferas médias, o que corresponde a 1/6 de "r". 

Esses círculos estão centralizados dentro dos círculos médios, sendo a distância entre seus centros igual a "r".

Na quarta imagem vemos o símbolo finalizado com suas características cores opostas.

Simulador de Balística

A ideia era simular o lançamento de um objeto implantando as fórmulas de MRU e MRUV.
O objeto deveria ter a trajetória de parábola e no meu decidi traçar 1/4 de círculo ou elipse.

Segue o código bonitinho:

//definição das variáveis

float t = 0;   //tempo
float dx;      //distancia horizontal
float dy;      //distancia vertical
float a = -5;   //aceleracao
int v0 = 60;   //velocidade


void setup()
{
   frameRate(60);
   size(600,600);
   noStroke();
}

void draw()
{
  background(0);

  // um jeito menos penoso de desenhar a tal da grade
  drawGrade();
  fill(255);

  //exibindo as coordenadas na tela
  text ("Tempo: " + t + "s", 20, 20);
  text ("Distancia: " + dx, 20, 60);
  text ("Velocidade: " + (v0 + a*t), 20, 40);

  lancamentoBalistico();
  t = t + 0.0166666666666667;
}

// desenhando a grade
void drawGrade()
{
  for(int i=0; i<(width/50); i++)
 {
   stroke(100, 100, 100);
   line(i * 50, 0, i * 50, width);
   line(0, i * 50, height, i * 50);
 }

 //Fórmula do Movimento Retilíneo Uniforme da bolinha
void moveBolaMRU()
{
   dx = v0 * t;
   ellipse(dx, 150, 20, 20);
}


//Fórmula do Movimento Retilíneo Uniforme Variado da bolinha
void moveBolaMRUV()
{
   dx = v0*t + a*(pow(t,2)/2);
   noStroke();
   fill(124,252,0);
   ellipse(300, height - dx, 20, 20);
}

//lançando a bolinha
void lancamentoBalistico()
{
  dx = v0 * t;
  dy = v0*t + a*(pow(t,2)/2);
  float lanc = dx + dy;
   ellipse(dx, 600 - dy, 20, 20);
}

}