Veremos se a nova marca do Foursquare esta nos padrões áureos.

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: