Trabalho de MAMI

Para o primeiro trabalho da disciplina de Matemática Aplicada escolhi implementar o simbolo ou logo do herói Batman no Processing.
Como temos algumas variantes do simbolo deixo esta como referência para o trabalho:

Vamos começar com uma análise matemática do simbolo.

Podemos desenhá-lo de várias formas, a que eu escolhi consiste em iniciar o desenho com 3 elipses horizontais sobrepostas.

A maior em preto, a intermediária em amarelo e a menor em preto novamente, essa com o raio 200 para facilitar os próximos cálculos.

Feito isso é hora de começar a desenhar o morcego, utilizando apenas elipses amarelas para recortar a elipse preta menor do desenho inicial.

Para a parte de cima temos uma esfera de raio 45 que é duplicada para o outro lado (notem que o desenho é espelhado, o que facilita o posicionamento dos elementos nessa etapa).

Na parte inferior temos duas elipses sobrepostas, a primeira levemente inclinada e a segunda na vertical. Para simplificar a implementação deixei a segunda elipse um pouco menor para que sua forma não ultrapassasse o limite inferior do desenho.

Da mesma forma é só espelhar para o outro lado e obter a forma desejada.

Já está parecido? Quase!

Agora é a hora de dar o acabamento, precisamos de alguns quadriláteros para nos ajudar a desenhar as pontas de maneira correta, vamos lá?

Que tal o meu Batman? Ficou parecido, vai!

Olha só um comparativo do meu resultado final com o simbolo original:

Segue o código completo:

//vamos desenhar a logo do Batman

void setup(){

  

size(600,600); 

background(255);

noStroke();

fill(0);

//comaçando com as 3 primeiras elipses como base

ellipse(300,300,238,145);

fill(255,241,0);

ellipse(300,300,224,136);

fill(0);

ellipse(300,300,200,120);

fill(255,241,0);

//Agora vamos iniciar os recortes para dar forma ao desenho

ellipse(268,261,45,47);

ellipse(335,261,45,47);

//acabamento da "cabeça" do morcego com quadriláteros

rect(312,240,20,20);

rect(270,240,20,20);

rect(296,240,11,12);

//desenhando os "chifrinhos" com triangulos

triangle(291,240,296,253,296,240);

triangle(305,253.4,312,240,307,240);

fill(0);

/*agora é hora de trabalhar a parte inferior do desenho,

começando com 4 elipses iguais */

ellipse(300,258,20,20);

fill(255,241,0);

ellipse(250,340,35,40);

ellipse(275,345,30,40);

ellipse(325,345,30,40);

ellipse(350,340,35,40);

//Agora é só afiar as pontas com a ajuda dos nossos quadrados e triangulos...

rect (280, 345, 10,20);

rect (310, 345, 10,20);

quad(300,365,290,360,290,350,288,340);

quad(340,365,300,360,340,350,300,340);

//e pronto, temos o nosso Batsinal no Processing!

}

Pong vs Bearkout e a sua ligação com a Apple

Já explicamos um pouquinho de como funciona o jogo Pong aqui no blog.
O jogo Breakout segue a mesma linha e também é um clássico do Atari, ganhando releituras até os dias de hoje.

Mas qual seria a relação entre os dois jogos e a empresa Apple?
Primeiramente o desenvolvedor Allan Alcorn, que desenvolveu o Pong, contou com a ajuda de Steve Jobs para projetar o novo jogo. O Breakout chegou com uma arquitetura mais elaborada e menos hardware.

Essa mesma arquitetura, tempos depois, serviu de modelo para a criação do Apple 1, conhecido como o primeiro produto de sua empresa, apresentado no ano de 1976.

E com isso desvendamos o mistério na ligação entre esses dois marcos na história da tecnologia.

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);

  

}