Bem hoje vamos dar uma estudada a respeito da nova logo do Foursquare (manual de identidade visual da marca), um serviço muito famoso que faz algo muito “importante” para nossas vidas, dizer para o mundo onde estamos e o que estamos fazendo, mas isso não vem ao caso.

Vamos ver observar se o retângulo áureo (ou retângulo de ouro) está presente no logo, ou não. E caso ele não esteja, vamos fazer algumas alterações para ver como ficaria se ele respeitasse essa ideia de perfeição adotada por muitos designers. Para quem não sabe o que é o retângulo áureo, vale a pena ver esse vídeo aqui:

Agora que já viu o vídeo voltamos ao assunto em questão.

Será que o Foursquare tem algum retângulo áureo?

Veremos aqui pela divisão de largura/altura, caso essa divisão alcançar o resultado 1,618 ou próximo desse teremos o retângulo.

Comecemos pelo conjunto da obra, olhando o ‘F’ desenhado da logo vamos ver se ele é um retângulo áureo.

Bem pelo que vimos na imagem o retângulo formado não é o áureo e ainda está longe dele, basta ver que a divisão feita obteve o resultado de 1,390 que é diferente de 1,618.

E nos outros testes ele também não alcança.

Então vamos tentar fazer a representação de como seria ela nos moldes mais próximo da proporção áurea, lembrando que, não é porque a logo não está seguindo essa proporção que está errada, ela apenas utiliza de outra visão de apresentar a marca.

Nos deteremos apenas na proporção áurea do corpo do 'F' róseo. 

 

Primeiro criamos a logo com tamanhos aleatórios (dica desenhe antes no illustrator usando retângulos, elipses e triângulos, para facilitar o processo de desenho no illustrator).

O esboço do illustrator. Do lado direito a versão original, e do lado esquerdo a alteração sutil da logo.

E o código do logo sairá mais ou menos assim:

fill(229,74,120);
noStroke();
rect(100,100,242,319.455,30,0,0,0);
rect(342,100,48,33,0,30,0,0);
rect(314,386,48,33,0,0,30,0);
quad(342,100+33,314,386,314+48,386,342+48,100+33);
quad(100,319,100,540,142,559,262,319);
ellipse(125,540,50,50);
fill(255);
rect(144,144,196,72,0,15,15,0);
rect(144,144,81,189);
rect(144,261,175,72,0,15,15,0);
triangle(144,261+72,144+90,261+72,144,261+72+113);
fill(229,74,120);
rect(144+81-10,144+72,14,45,10,0,0,10);

Mas você precisa parametrizar os valores, então a brincadeira começa aí. Utilizando o seu desenho do illustrator, basei-se nos dados das informações dele para usar como os dados e crie um valor para o x e o y de onde a logo será gerado ao seu gosto. Desta forma ficando assim:

void fourSquare(float x,float y){
fill(229,74,120);
noStroke();
rect(x,y,41.724,55.172,15,0,0,0);
rect(x+40,y,9.5,6,0,15,0,0);
rect(x+41.724-10,y+55.172-5.69,8.276,5.69,0,0,15,0);
quad(x+41.724,y+5.69,x+41.724-10,y+55.172-5.69,x+41.724-10+8.276,y+55.172-5.69,x+41.724+8.276,y+5.69);
quad(x,y+55,x,y+55.172+20,x+7.5,y+55.172+24,x+27.7,y+55);
ellipse(x+4,y+55.172+20,8.621,8.621);
fill(255);
rect(x+7.6,y+7.6,33.8,12.5,0,10,10,0);
rect(x+7.6,y+7.6,14,32.6);
rect(x+7.6,y+7.6+7.6+12.5,30.17,12.4,0,10,10,0);
triangle(x+7.6,y+7.6+7.6+12.5,x+7.6+18,y+7.6+7.6+12.5,x+7.6,y+62.52);
fill(229,74,120);
rect(x+7.6+14,y+20,2.414,7.76,10,0,0,10);
}

Depois de criado a função vamos usa-la como um ponteiro, apontando a sua localização em um mapa, eu usei um mapa online de Fortaleza, você pode usar qualquer outro. Basta testar.

PImage webImg;
void setup(){
size(800,600);
String url = "http://www.packtours.com.br/dest/ceara/for/mapa-grande.jpg";
webImg = loadImage (url, "jpg");
image(webImg,0,0);
}

void fourSquare(float x,float y){
fill(229,74,120);
noStroke();
rect(x,y,41.724,55.172,15,0,0,0);
rect(x+40,y,9.5,6,0,15,0,0);
rect(x+31.724,y+55.172-5.69,8.276,5.69,0,0,15,0);
quad(x+41.724,y+5.69,x+41.724-10,y+55.172-5.69,x+41.724-10+8.276,y+55.172-5.69,x+41.724+8.276,y+5.69);
quad(x,y+55,x,y+55.172+20,x+7.5,y+55.172+24,x+27.7,y+55);
ellipse(x+4,y+55.172+20,8.621,8.621);
fill(255);
rect(x+7.6,y+7.6,33.8,12.5,0,10,10,0);
rect(x+7.6,y+7.6,14,32.6);
rect(x+7.6,y+7.6+7.6+12.5,30.17,12.4,0,10,10,0);
triangle(x+7.6,y+7.6+7.6+12.5,x+7.6+18,y+7.6+7.6+12.5,x+7.6,y+62.52);
fill(229,74,120);
rect(x+7.6+14,y+20,2.414,7.76,10,0,0,10);
}

void mouseClicked(){
fourSquare(mouseX,mouseY);
}
void draw(){
}

O resultado é da imagem ao lado:

Bem vamos falar da relação do Breakout do Pong e da Apple.

Mas vocês devem estar se perguntando o que raios a Apple tem haver com esses dois clássicos da atari? Simples fato é, o Apple I foi desenvolvido usando a mesma arquitetura do Breakout, que por sua vez usou a mesma arquitetura do Pong, isso nos termos de hardware da epoca.

Vamos destrinchar um pouco melhor essa história.

Quando foram desenvolver o Breakout, o Allan Alcorn (Engenheiro da Atari, que trabalhou no desenvolvimento do Pong) contratou o Steve Jobs para desenvolver o projeto do jogo com uma arquitetura mais bem elaborada que o Pong, com menos chips, então ele confirma que conseguiria em menos tempo do que eles precisavam, mas o Jobs lembrou de um amigo dele o Steve Wozniak que foi quem fez toda a arquitetura por trás desse aparelho.

Tanto o Jobs quanto o Wozniak eles trabalharam na Atari e na HP, e foram eles que fundaram a Apple.

E apos criar o Breakout, Wozniak continuou seus experimentos ate que criou o Apple I com a mesma arquitetura das maquinas do Breakout.

E com essa criação foi algo bastante grandioso e ao mesmo tempo inovador, já que dessa vez ele melhorou o projeto, já que dessa vez ele criou um terminal no Apple I e assim o aparelho teve não só questão de hardware, mas software também.

Olá pessoal, hoje iremos brincar de criar clássicos do atari, e o escolhido da vez foi ele, o Breakout. Com uma arquitetura simples e bem similar ao Pong, o breakout consiste em você acerta a bolinha em varios blocos que estão acima de você.

Mas vamos para a parte de programar o jogo. E nela você precisará criar vários boleanos para identificar a colisão da bola em sua barrinha, e nos "inimigos". Serão cerca de 16 inimigos para o tamanho da tela que será usada, caso queiram fazer em uma tela maior, basta aumentar a quantidade também. Para as cores dos bloquinhos criasse alguns floats, e neles atribuísse a função random(0, 255) para que varie de 0 a 255 da escala de cor. 

Depois fazemos as funções de colisões possivel, e logo em seguida faremos a leitura das funções e criando todos os nossos objetos do jogo, nos seus devidos lugares.

O código encontra-se logo abaixo:

float bolaY=250 ;// onde a bola nasce, posição da bola
float bolaX=250 ;// onde a bola nasce, posição da bola
float dX=1; // velocidade da bola
float dY=1; // velocidade da bola
float tamBola=10;
float xP = 110; //posição da barra
float yP = 210; // posição da barra
float x1,x2,y1,y2;// variaveis para a função colisão
float xB=80; // tamanho da barra
float yB=10; // altura da barra
boolean x,z1,mz1,z2,mz2,z3,mz3,z4,mz4,mz5,z5,mz6,z6,mz7,z7,mz8,z8,mz9,z9,mz10,z10,mz11,z11,mz12,z12,mz13,z13,mz14,z14,mz15,z15,mz16,z16;
float xB1=20;// tamanho do inimigo
float yB1=10;//altura do inimigo
float xP1=0;//posição do inimigo
float yP1=20;//posição do inimigo
float xP2=20;
float xP3=40;//posição do inimigo
float xP4=60;
float xP5=80;
float xP6=100;//posição do inimigo
float xP7=120;
float xP8=140;
float xP9=160;
float xP10=180;//posição do inimigo
float xP11=200;
float xP12=220;
float xP13=240;//posição do inimigo
float xP14=260;
float xP15=280;
float xP16=300;
float corz11,corz12,corz13;
float corz21,corz22,corz23;
float corz31,corz32,corz33;
float corz41,corz42,corz43;

void setup (){
size(320,240);
mz1=false;
mz2=false;
mz3=false;
mz4=false;
mz5=false;
mz6=false;
mz7=false;
mz8=false;
corz11=random(0, 255);
corz12=random(0, 255);
corz13=random(0, 255);
corz21=random(0, 255);
corz22=random(0, 255);
corz23=random(0, 255);
corz31=random(0, 255);
corz32=random(0, 255);
corz33=random(0, 255);
bolaX=100;
bolaY=100;
}

Boolean colisao (float x1,float y1,float x2, float y2){
if(x1>x2 && x1<(x2+80) && y1>y2 && y1<(y2+10)){
  return true;
  } else {
    return false;  
         }
  }
  
Boolean colisaoInimigo (float x1,float y1,float x2, float y2){
if(x1>x2 && x1<(x2+20) && y1>y2 && y1<(y2+10)){
  return true;
  } else {
    return false;  
         }
  }

  
void bloco (float x1, float x2,float y1,float y2){
if (x==true){
  
    dY= -dY-(dY*0.01);
  }

}

void draw(){
  background(0);
  
 //bola em movimento
  
  ellipse(bolaX,bolaY,tamBola,tamBola);
  bolaY=bolaY+dY;
  bolaX=bolaX+dX;
  
  if(bolaY>=(height-(tamBola/2))){
  bolaX=40;
  bolaY=40;
  ellipse(40,40,tamBola,tamBola);
  bolaY=bolaY+dY;
  bolaX=bolaX+dX;
  
  }
  
  if(bolaY<=(tamBola/2)){
  dY= -dY-(dY*0.01);
  }
  
    if(bolaX>=(width-(tamBola/2))){
  dX= -dX-(dY*0.01);
  }
  
  if(bolaX<=(tamBola/2)){
  dX= -dX-(dY*0.01);
  }
 



  rect(xP, yP, xB, yB);  // barra inferior
  if(keyPressed == true) {   
      if(keyCode == RIGHT) {
         if(xP<=(320-xB)) 
          xP+=8; 
          } else if(keyCode == LEFT) {
               if(xP>=0){ 
                xP-=8; 
               }
          } 
   } 


// colisão
x = colisao(bolaX,bolaY,xP,yP);
if (x==true){
  if(bolaX>xP && bolaX

O resultado do jogo é mais ou menos esse.

Botão no processing? E existe uma função disso? Bem vamos criar uma função só pra animar um botão simples circular. Então ele vai ter na tela de desenho um botão.
Criaremos os 3 principais estados do botão o UP, OVER e DOWN. Com um calculo de distancia em duas dimensões, sabemos se o cursor do mouse esta dentro ou fora do nosso botão. Para o resultado estar dentro de uma unica equação vamos usar o produto notável da diferença.

 Então vamos começar a programar no processing. Para cada estado do nosso botão eu atribui uma cor para ele, assim sabemos em que estado ele se encontra. E finalmente, o código ficará assim como está logo abaixo:

int MLargura;
int MAltura;
int diametro;
float x;

//função para determinar a distancia entre dois pontos (usando produtos notaveis)

float distancia2D(int X1,int Y1, int X2,int Y2){
  float R;
  R = sqrt((X1*X1) -(2*X1*X2) + (X2*X2) + (Y1*Y1) - (2*Y1*Y2) + (Y2*Y2));
  return R;
}

void setup(){
size(600,600);
MLargura = width/2;
MAltura = height/2;
diametro = 100;
}



void draw(){
 x=(distancia2D(MLargura,MAltura,mouseX,mouseY));
 if (x > diametro/2) {    // status UP do botão
      fill(246,172,95);
      noStroke();
      ellipse(MLargura,MAltura,diametro,diametro);
      } else if(mousePressed == true){ // status DOWN do botão       
        fill(183,245,102);
        ellipse(MLargura,MAltura,diametro,diametro);
        }  else { // status OVER do botão
           fill(102,245,206);
           ellipse(MLargura,MAltura,100,100);
           }           
}

Hoje vamos fazer não apenas um simbolo Yin-Yang, mas vamos a loucura fazendo 100 aparecendo em uma tela, lotando a tela.

Começando com o processing.
Vamos fazer o seguinte. Criaremos uma função para desenhar ele, utilizando um único parâmetro para todos os raios das circunferências que serão 5 ao todo, e um arco. Fica assim a função:

void yinYang(float r,float x,float y){       // r é o raio dos circlos menores, x e y as coordenadas do centro da figura.
  fill(255);
  ellipse(x,y,(r*5)*2,(r*5)*2);                 // circulo branco grande
  fill(0);
  arc(x,y,(r*5)*2,(r*5)*2,PI,2*PI,PIE);         // Meio circulo preto, metade de cima
  ellipse(x+(2.5*r),y,(2.5*r)*2,(2.5*r)*2);    // circulo preto de raio 2,5 x raio do circulo menor
  fill(255);
  noStroke();
  ellipse(x-(2.5*r),y,(2.5*r)*2,(2.5*r)*2);    // circulo branco de raio 2,5 x raio do circulo menor
  ellipse(x+(2.5*r),y,r*2,r*2);                // circulo branco de raio r, é o circulo menor
  fill(0);
  ellipse(x-(2.5*r),y,r*2,r*2);                // circulo preto de raio r, é o circulo menor
}

Depois de fazer essa função, faremos ela aparecer 100 vezes, como ela aparecerá apenas as 100 vezes, iremos por tudo no "setup()". E o codigo se finalizará assim:

float r;           // raio da menor ellipse
float x;           // coordenada x do centro da ellipse grande
float y;           // coordenada y do centro da ellipse grande 
float altura;     // altura da janela
float largura;   // altura da largura 


void yinYang(float r,float x,float y){                // r é o raio dos circlos menores, x e y as coordenadas do centro da figura.
  fill(255);
  ellipse(x,y,(r*5)*2,(r*5)*2);                 // circulo branco grande
  fill(0);
  arc(x,y,(r*5)*2,(r*5)*2,PI,2*PI,PIE);         // Meio circulo preto, metade de cima
  ellipse(x+(2.5*r),y,(2.5*r)*2,(2.5*r)*2);    // circulo preto de raio 2,5 x raio do circulo menor
  fill(255);
  noStroke();
  ellipse(x-(2.5*r),y,(2.5*r)*2,(2.5*r)*2);    // circulo branco de raio 2,5 x raio do circulo menor
  ellipse(x+(2.5*r),y,r*2,r*2);                // circulo branco de raio r, é o circulo menor
  fill(0);
  ellipse(x-(2.5*r),y,r*2,r*2);                // circulo preto de raio r, é o circulo menor
}
 
void setup(){
size(1000,600);   
largura = width;
altura = height;
  
  for (int i = 0; i < 100; i++){
    yinYang(random(5,20),random(largura),random(altura));
    }
}

O resultado em imagem é algo próximo disso.

Olá pessoal, hoje vamos brincar um pouco de processing, vamos criar um belo jardim na sua tela. Bem é claro que o resultado não será esse da foto, ela é apenas ilustrativa.

Pois bem vamos por partes:
Da maneira que eu desejo fazer (claro que existem varias maneiras de se desenhar uma flor, e varias maneiras de se desenhar no processing), eu preciso desenhar alguns círculos, representando as pétalas da flor e o seu centro. Para facilitar fazemos dentro de uma função, e para nossa facilidade, fazemos a flor em outra função variando a cor do centro com as petalas.
O código ficará dessa forma a seguir:

int altura;
int largura;
void setup (){
size(800,600);
frameRate(5);  //diminui o framerate para 5FPS
altura = height;
largura = width;
}

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


void flor(float x, float y, float r){ 
  fill(random(255),random(255),random(255));  // cor do centro da flor
  circulo(x,y,r);
  fill(random(255),random(255),random(255));  // cor das pétalas
  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);
}

void draw(){
  flor(random(largura),random(altura),8);
}

 Clique no botão para ver.

Arcade do Pong

Pong, um dos jogos mais nostálgicos de todos os tempos. Mas vocês já pararam para pensar como foi pra fazer essa faceta? Pois bem, vamos contar um pouco da história da criação do game, sendo o primeiro arcade do mundo, o inicio de uma nova industria milionária. 

Com apenas um pequeno aparelho movido a moedas dentro de um bar, a Atari iniciou sua ascensão com um jogo bem simples feito com o gênio chamado Ralph Baer, desenvolveu toda a logica do jogo, que consistia simplesmente de duas barrinhas laterais(como se fossem as raquetes de um ping-pong) que subiam e desciam na tela controladas por um botão no arcade, uma bolinha (era um quadrado na realidade, mas representa uma bola), uns tracejados no meio da tela, e um contador em cima. Ganhava pontos quem fizesse uma especie de gol, o que foi uma febre nos anos 70. 

O jogo Pong de 1972

Ele usou os circuitos da placa para criar a logica. Colocando o sistema de porta aberta e fechada como 0 e 1. Assim foi acionando para a bolinha ganhar velocidade conforme ele vai batendo na barra(apesar que isso foi um defeito que ele criou e virou como forma de dificultar o jogo), também a barra não chegar no máximo da tela(ele não conseguia fazer ela chegar de fato e usou isso ao seu favor como uma forma a mais de desafio) Então depois de muito sacrifício, ele consegue montar o primeiro de que seriam muitos. Assim foi a história do pong de forma resumida.