Trabalho 1: Analise e Codificação da Logo da BMW

Logo BMW

Decidi reproduzir e analisar a logo da BMW por sua beleza e simplicidade.

A Logo da famosa de carros é formada por dois círculos:

Sendo o circulo do meio formado por quatro quartos de circulo, sendo dois brancos e dois azuis:

Somente com isso já é possível reconhecer a marca, fazendo uma analise dos raios dos círculos, considerando um modulo de 50px temos que o circulo interior teria 6 módulos de diâmetro, e o exterior teria 10 módulos, sabendo que o raio do circulo menor e 150px e o do maior é de 250px:

Para formar o circulo do meio usei a função arc(), tive que contornar alguns problemas dessa função, fazer um arco que comece em PI e termine em QUARTER_PI não funciona e o arco não aparece, mas colocando o equivalente em graus o arco aparece, mesmo problema quanto o arco começa em QUARTER_PI e termine em TWO_PI.

No mais foi bem rápida a reprodução da logo e estes foram os resultados:

Logo com a regra de criação final.

Logo com regra de criação Beta.

Logo seguindo o modelo de 1979.

Código-fonte:

int modulo=50;

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

void draw(){
    background(255);
    if(mousePressed){
    bmwLogo2(mouseX+45,mouseY+45,mouseX/16);
    }
}

void bmwLogo(int X,int Y){
   
    fill(0);
    ellipse(X,Y,10*modulo,10*modulo);
   
    stroke(255);
    strokeWeight(4);
    noFill();
    ellipse(X,Y,6*modulo,6*modulo);
   
    strokeWeight(1);
    //stroke(0);
    fill(77, 210, 255);
    arc(X, Y, 6*modulo, 6*modulo, 0, HALF_PI, PIE);
    arc(X, Y, 6*modulo, 6*modulo, PI, radians(270), PIE);
 
   fill(255);
    arc(X, Y, 6*modulo, 6*modulo, radians(270), TWO_PI,PIE);
    arc(X, Y, 6*modulo, 6*modulo, HALF_PI, PI, PIE);
   
}

void bmwLogo2(int X,int Y, int modulo){
 
    if(modulo>=1){

    fill(0);
    ellipse(X,Y,10*modulo,10*modulo);
   
    stroke(255);
    strokeWeight(4);
    noFill();
    ellipse(X,Y,6*modulo,6*modulo);
   
    strokeWeight(2);
    stroke(0);
    fill(77, 210, 255);
    arc(X, Y, 6*modulo, 6*modulo, 0, HALF_PI, PIE);
    arc(X, Y, 6*modulo, 6*modulo, PI, radians(270), PIE);
 
   fill(255);
    arc(X, Y, 6*modulo, 6*modulo, radians(270), TWO_PI,PIE);
    arc(X, Y, 6*modulo, 6*modulo, HALF_PI, PI, PIE);
 
   }
 
}

Exercício 10: Brekout Simplificado

Reprodução simplificada do jogo breakout, nessa versão o objetivo é evitar que a bola caia pelo maior tempo possível, ao deixar cair a bola o jogo reinicia, se o  tempo for maior que o ultimo recorde este é atualizado na tela.

Dependendo onde bata "bola" a direcção para onde ela vai é diferente, se bater a direita sempre ira para direita, e vice e versa; esse efeito é bem mais simples do que o do jogo real, mas já da um olhar mais fluido, a cada batida da bola, sua velocidade aumenta para aumentar a dificuldade do jogo.

Os códigos que foram reaproveitados de aulas anteriores foram:

Função ehbola: desloca a bola e quica onde for determinado(Aula 9).

Código para mover as barras: Dessa própria aula.

Código para limitar a movimentação das barras dentro da tela: Mesmo que faz quicar a bola modificado(Aula 9).

Código de contagem do tempo: tirado do código moveBolaMRU(Aula 5).

Código-fonte:

int xP=50;
int yP;
float d=40;
float v=10;
float t;
int bolaX = 100;
int bolaY = 100;
float dY=5;
float dX=5;
float recorde;
void setup()
{
  size(1280,720);
  yP=height-40;
}
void draw()
{
    background(0);
    t+=0.1666666666667;
    text("Melhor pontuação: "+recorde,20,40);
     text("Tempo: "+t,20,20);
    ehbola();
   rect(xP,yP,80,20);
   if(keyPressed)
   {
     if(keyCode==RIGHT && xP<=width-80)
     {
         xP+=10;
     }
     if(keyCode==LEFT && xP>=0)
     {
         xP-=10;
     }
   }
}
void ehbola()
{
   rect(bolaX,bolaY,10,10);
   bolaY -= dY;
   bolaX+=dX;
   if(bolaY <=5){
     if(dX==0){
       dX=5;}
       dX+=1;
       dY=dY*-1;
   }
   if(bolaY>height)
   {
     recorde=t;
     t=0;
     dY=5;
     dX=5;
     bolaX=100;
     bolaY=100;
   }
   if(bolaX>=width-5 || bolaX <= 5){
     //bolaX = 10;
     if(bolaX>0){
     dX+=1;}else{
     dX-=1;}
     dX=dX*-1; 
  d=v*t; //calcula a distancia no tempo atual
}
  if(bolaX>=xP && bolaX<=xP+80 && bolaY==yP-10)
  {
    // Batendo na esquerda
    if(bolaX>=xP && bolaX<=xP+40 && dX>0){
      dX*=-1;
      dY*=-1;
    }
    if(bolaX>=xP && bolaX<=xP+40 && dX<0){
      dY*=-1;
    }
   if(bolaX>=xP+40 && bolaX<=xP+80 && dX<0){
     dX*=-1;
      dY*=-1;
    }
    if(bolaX>=xP+40 && bolaX<=xP+80 && dX>0){
      dY*=-1;
    }

   
   // dX*=-1;
   // dY*=-1;
  }
  if(bolaX<=xP && bolaX<=xP-5 && bolaY>=yP+5 || bolaX==xP && bolaY==yP)
  {
    dX*=-1;
    dY*=-1;
  }
 
  if(bolaX<=xP+80 && bolaX<=xP+85 && bolaY>=yP+5 || bolaX==xP+80 && bolaY==yP+80)
  {
    dX*=-1;
    dY*=-1;
  }
 
}

Exercício 9: Relação dos jogos Pong e Breakout com a fundação da Apple

Versão Arcade do Breakout.

Norland Bushnell propôs a criação de uma versão single-player do pong, onde o jogador deveria evitar que a bola saísse da tela, e fazendo com que essa quebrasse tijolos na parte de cima da tela. Bushnell colocou Alcorn como diretor do projeto que colocou um de seus funcionários para fazer a prototipagem do jogo, esse era Steve Jobs.

Steve Jobs receberia 750 dólares mais bonificações pelas otimizações referente ao numero de chips, Alcorn propôs isso, pois os jogos da Atari estavam na tendencia de terem mais de 150 chips. Jobs ganharia uma bonificação para cada chip a menos que 50, ele falou que viria com o protótipo em quatro dias.

Jobs sabia que seu amigo e futuro sócio, Steve Wozniak que trabalhava pra HP, tinha feito uma versão do Pong com algo em torno de 30 chips. Jobs o chamou para desenhar o esquema do jogo, enquanto ele faria o protótipo, prometendo dividir os lucros.

Wozniak desenho o esquema com 42 chips, que acabou sendo 44 no desenho final. Jobs ganhou uma bonificação de cerca de 5000 dólares, mas pagou apenas 350 para seu amigo. Esses 5000 dólares mais tarde seriam investidos na empresa que os dois fundaram, a Apple Inc.

O esquema apresentado não pode ser usado na fabricação em massa, Wozniak afirma que isso se deve ao fato dos engenheiros da a tari quererem modificar o esquema, o esquema usado para fabricação das maquinas tinha cerca de 100 chips, Wozniak jogou e não encontrou nenhuma diferença na jogabilidade.

Uma curiosidade sobre o jogo é que sua tela era preta-e-branca com plasticos celofane coloridos por cima para dar cor aos tijolos.

Versão do jogo para Atari 2600.

Muitas das funções do Apple II, foram adicionadas por Wozniak por sua experiencia no design de Breakout, como o suporte a gamepads e som, e comandos graficos em BASIC, tudo isso fora adicionado pois Wozniak teve a experiencia de desenvolver o jogo em hardware e queria faze-lo em software, e o fez, dando o nome de Little Brick Out, escrito em BASIC, ele afirmava que poder escrever jogos com BASIC mudaria o mundo, certamente o desenvolvimento de jogos foi facilitado com o uso das linguagens de programação.

O jogo também teve ports para outras plataformas como o Atari 2600 e versões aprimoradas do mesmo.

Exercício 8: Criação do Pong

Tela Do Pong.

Após a fundação da Atari, Norland Bushnell chamou um ex colega de trabalho, Allan Alcorn, para trabalhar com ele, e lhe deu um projeto que dizia ser grande, na verdade era um teste, ele teria que criar um jogo com duas barras um ponto representando a bola e números representando o placar.

Alcorn tentou usar como base o jogo Computer Space de Bushnell, mas considerou o esquema ilegível e projetou o seu próprio. No esquema decidiu que dependendo do ponto onde a "bola" encostasse nas barras, o angulo de retorno da bola seria diferente, no meio seria de 90° em relação a barra se fosse a acima seria menor, dando assim mais dinamismo ao jogo, senão seria muito previsível; além disso, cada vez que a bola atingia uma paleta a velocidade desta era aumentada, e era reiniciada a cada ponto marcado, isso foi adicionado para limitar o tempo de jogo, e para também deixar o jogo dinâmico; outra característica mantida por Alcorn, foi que as paletas não chegavam até o topo da tela, isso era causado por um defeito em um dos chips usados, ao invés de tentar soluciona-lo ele o manteve, pois acreditava que isso adicionava dificuldade e limitava o tempo de jogo, senão jogadores habilidosos poderiam jogar "pra sempre".

Depois do jogo pronto, Bushnell propôs que o jogo tivesse sons, quando a bola atingisse as paletas e as bordas da tela, e ao marcar um ponto uma "plateia" iria vaiar ou comemorar, Alcorn só precisou de meio chip para faze-lo, e apresentou um protótipo.

Ao contrario, do que estamos acostumados, o Pong não foi programado com uma linguagem de programação, ele o fez usando transistores basicamente, que se comunicavam entre si, foram mais de 100 chips.

O jogo deixou um legado e até hoje lembrado, por sua simples funcionalidade

Exercício 7: Yin-Yang

Output da Primeira Função(yinYang):

Seguindo a regra de criação citada nos slides das aulas, este código cria símbolos yin-yang.

A Regra de Criação é a seguinte:

As duas metades de circulo grandes tem 5 módulos de raio.
Os dois círculos que formam as curvas tem 2.5 módulos de raio, e e posicionada no centro X e Y mais (ou menos) 2.5 módulos.
Os pequenos círculos ficam no meio dos dois círculos anteriores e possuem raio de 1 módulo.

A primeira função cria um simbolo na posição passada(no caso X e Y no Mouse) com módulo fixo de 40; a segunda função faz o mesmo mas recebe um modulo dinâmico(no caso posição X do mouse dividido por 16); A terceira função faz o mesmo da segunda, com a diferença que ele gera três números randômicos de 0 até 255 e guarda em três posições de um vetor chamado cores1, e faz o mesmo para um vetor chamado cores2, e os números desse vetor são usados para dar cores diferentes ao simbolo, mas que ele continue fazendo sentido.

Output da Ultima Função(yinYang3):

Código-fonte:

int modulo = 40;

void setup() {
  size(400,400);
 
}
void draw(){
  //background(205);
  //yinYang(mouseX,mouseY);
  yinYang2(mouseX,mouseY,mouseX/16);
  //yinYang3(mouseX,mouseY,mouseX/16);

}

void yinYang(int X,int Y){
 
  noStroke();
 
  //Circulo Maior
  fill(255);
  arc(X, Y, 2*5*modulo, 2*5*modulo, PI,TWO_PI, OPEN);
  fill(0);
  arc(X, Y, 2*5*modulo, 2*5*modulo, 0, PI, OPEN);
 
  //Circulos que formam as curvas
  fill(255);
  ellipse(int(X-2.5*modulo),Y,2*2.5*modulo,2*2.5*modulo);
  fill(0);
  ellipse(int(X+2.5*modulo),Y,2*2.5*modulo,2*2.5*modulo);
 
  //Circulos Pequenos
  fill(0);
  ellipse(int(X-2.5*modulo),Y,2*modulo,2*modulo);
  fill(255);
  ellipse(int(X+2.5*modulo),Y,2*modulo,2*modulo);

}

void yinYang2(int X,int Y,int modulo){
 
  noStroke();
 
  //Circulo Maior
  fill(255);
  arc(X, Y, 2*5*modulo, 2*5*modulo, PI,TWO_PI, OPEN);
  fill(0);
  arc(X, Y, 2*5*modulo, 2*5*modulo, 0, PI, OPEN);
 
  //Circulos que formam as curvas
  fill(255);
  ellipse(int(X-2.5*modulo),Y,2*2.5*modulo,2*2.5*modulo);
  fill(0);
  ellipse(int(X+2.5*modulo),Y,2*2.5*modulo,2*2.5*modulo);
 
  //Circulos Pequenos
  fill(0);
  ellipse(int(X-2.5*modulo),Y,2*modulo,2*modulo);
  fill(255);
  ellipse(int(X+2.5*modulo),Y,2*modulo,2*modulo);

}

void yinYang3(int X,int Y,int modulo){
 
  noStroke();
 
  int[] cores1 = new int[3];
  int[] cores2 = new int[3];
  for(int cont=0;cont<3;cont++){
    cores1[cont] = int(random(255));
    cores2[cont] = int(random(255));
  }
 
  //Circulo Maior
  fill(cores1[0],cores1[1],cores1[2]);
  arc(X, Y, 2*5*modulo, 2*5*modulo, PI,TWO_PI, OPEN);
  fill(cores2[0],cores2[1],cores2[2]);
  arc(X, Y, 2*5*modulo, 2*5*modulo, 0, PI, OPEN);
 
  //Circulos que formam as curvas
  fill(cores1[0],cores1[1],cores1[2]);
  ellipse(int(X-2.5*modulo),Y,2*2.5*modulo,2*2.5*modulo);
  fill(cores2[0],cores2[1],cores2[2]);
  ellipse(int(X+2.5*modulo),Y,2*2.5*modulo,2*2.5*modulo);
 
  //Circulos Pequenos
  fill(cores2[0],cores2[1],cores2[2]);
  ellipse(int(X-2.5*modulo),Y,2*modulo,2*modulo);
  fill(cores1[0],cores1[1],cores1[2]);
  ellipse(int(X+2.5*modulo),Y,2*modulo,2*modulo);

}

Exercício 6: Botão

No seguinte código do Processing, é simulado um botão, como no Flash ou em outros ambientes que usam botões para interação.

Geralmente botões possuem três estados:

Não Apertado, Pra Cima(Up).
Não Apertado e Com Mouse Em Cima(Hover).
Apertado, Clicado(Click).

Nesse exemplo, um circulo representa o botão. Sua cor quando não esta pressionado e o mouse não está em cima, é branca. Quando não esta pressionado e o mouse esta sobre ele, sua cor é cinza. E quando pressionado o circulo muda pra preto.

Para saber se o mouse esta na área do circulo, é usada a função distancia2D, que retorna um valor inteiro, é passado a posição X e Y do Mouse e o Centrro X e Y do circulo, se o valor retornado for menor que o raio do circulo, o mouse esta dentro do circulo e sua cor é mudada pra  cinza, e se o mouse for pressionado quando o cursor estiver dentro do circulo este fica preto, simulando assim os três estados básicos de um botão.

Código-fonte:

 int r=50;
void setup()
{
  size(800,800);
}
int distancia2D(int X1, int Y1, int X2, int Y2)
{
  int resposta;
  resposta=(int)sqrt(pow(X2-X1,2)+pow(Y2-Y1,2));
  return resposta;
}
void draw()
{
  ellipse(width/2,height/2,2*r,2*r);
  if(distancia2D(mouseX,mouseY,width/2,height/2)<r)
  {
    fill(125);
    if(mousePressed){
        fill(0);
    }
  }
  else
  fill(255);
}