O princípio da cigarra e por que ele interessa para web designers

Texto
original disponível em http://designfestival.com/the-cicada-principle-and-why-it-matters-to-web-designers/

?

Vou
começar por uma tangente aparentemente maluca, mas confie em mim – eu tenho um
propósito.

Alguns
anos atrás, eu li algumas coisas interessantes no periodical cicadas (cigarras periódicas). Nós não
vemos muitos desses pequenos seres normalmente, porque eles passam a maior
parte de suas vidas criando túneis embaixo da terra e em raízes de árvores.

No
entanto, dependendo de sua espécie, a cada 7, 13 ou 17 anos essas cigarras
periódicas emergem em massa, transformando-se em criaturas voadoras e
barulhentas, que encontram um parceiro e morrem pouco depois disso.

Apesar de
esse ser um final bastante rock’n’roll para nossa cigarra nerd, ele levanta uma
questão obvia: é possível que elas tenham adotado ciclos de vida de 7, 11 ou 13
anos, ou esses números são de alguma forma especiais?

Na
verdade, esses números têm algo em comum. Eles são todos números primos – números que só podem ser
divididos por eles mesmos e por 1 (sendo,1,
2, 3, 5, 7, 11, 13, 17, 19, 23, e assim por diante).

Mas por
que isso interessa?

Pesquisas
têm mostrado que a população de criaturas que comem cigarras – tipicamente
pássaros, aranhas, vespas, peixes e cobras – geralmente tem ciclos de vida de
2-6 anos.

Então,
digamos que se nossas cigarras emergissem de 12 em 12 anos, qualquer predador
que tem ciclos de vida de 2, 3, 4 ou 6 anos seria capaz de sincronizar
seus anos de auge com a festa regular das cigarras. Na verdade, eles
provavelmente nomeariam um feriado público por isso, chamando-o de Dia da
Cigarra.

Isso não
é muito legal se você for uma cigarra.

Por outro
lado, se uma ninhada de cigarras de 17 anos fosse azarada o suficiente para
emergir durante uma temporada cheia de vespas de 3 anos, demoraria 51 anos para
esse evento acontecer de novo. Nos outros anos, nossas cigarras poderiam
alegremente emergir em seus milhares, completamente infestar a população do
predador local e serem deixadas em paz.

Pequenos
caras engenhosos, não?

Isso é ótimo. Mas o que tudo isso
tem a ver com web design?

Algum tempo atrás, vimos o processo de criar tiles contínuos. Como tiles
contínuos são super úteis, pode ser difícil encontrar o equilíbrio
perfeito. 

Por um
lado, você quer manter as dimensões do arquivo as menores possível, para tirar
a melhor vantagem do efeito tiling. No entanto,
quando você notar um recurso distintivo – por exemplo, um nó em alguns woodgrains (granulados de madeira) – repetindo
em intervalos regulares, ele realmente quebra a ilusão de aleatoriedade
orgânica.

Talvez
possamos pegar emprestadas algumas idéias das cigarras para quebrar esse
padrão?

Gerando aleatoriedade
orgânica com CSS

Exemplo
1:

Chega de
papo. Aqui temos uma rápida prova-de-conceito. Isso não tem o objetivo de ser
visualmente esplêndido, mas faz um bom trabalho ao mostrar o que está
acontecendo. Mantendo o princípio da cigarra em mente, eu fiz três quadrados,
semi-transparentes, em PNG, de 29px, 37px, e 53px, respectivamente, e os
configurei como backgrounds múltiplos
no elemento HTML de uma página de teste.

29-a.png (2.0kb) 37-a.png (1.7kb) 53-a.png (2.5kb)

html {
background-image: url(29-a.png),url(37-a.png), url(53-a.png);
padding:0;
margin:0;
height: 100%;
}

E aqui está o resultado.

Menos de
7kb de imagens geraram uma área teórica de uma textura original de quase 57 mil
pixels quadrados.

Como você
pode ver, os tiles se sobrepõem e
interagem para gerar novos patterns e
cores. Como estamos usando números primos mágicos, esse pattern não vai se repetir por muito tempo.

Exatamente
por quanto tempo? 29px × 37px × 53px… ou 56,869px!

Isso foi
uma revelação para mim. Eu tive que checar três vezes os meus cálculos, mas a
matemática está perfeita. Lembre-se de que esses gráficos são minúsculos, menos de
7kb no total – e mesmo assim eles estão gerando uma área de textura original de
quase 57 mil pixels de largura.

Você pode
imaginar o que acontece se você adicionar uma quarta camada de tiling?—?digamos um tile de 43px. Ou talvez você não consiga imaginar, uma vez que os
números começam a ficar um pouco brutos e são capazes de te dar um tapa nas
orelhas se você olhar para eles por muito tempo.

Basta
dizer que você terá um numero mais relevante para a planet terraformation (‘terraformação do planeta’) do que para o
webdesign.

Ok. Então
tiras abstratas e geométricas são legais e tudo, mas de que outras maneiras
você pode aplicar esta idéia?

Exemplo 2

Cunhando um novo sistema de medição – a ‘unidade ruffle’

Vamos
pegar um exemplo mais foto-realístico, que provavelmente nós já vimos em algum
ponto: a cortina vermelha de veludo do teatro. Eu achei um  gráfico muito bom de cortina aqui para usar como ponto
inicial. Ao olhar para nossa cortina, podemos ver que ela quebra em unidades
verticais aproximadamente iguais.

Para este
exemplo, vou me referir a esta distancia como uma ‘unidade ruffle‘ e, diferentemente do primeiro exemplo, será mais
importante que as dimensões exatas em pixel das imagens com as quais estamos
trabalhando.

Primeiramente, vou
escolher um desses ruffles e
convertê-los em um tile contínuo. É um JPEG e pesa 8kb.

Uma
camada de tiles de cortinas: não muito impressionante

Renderizado
sozinho, esse gráfico representa tudo que não gostamos nos backgrounds de tiling.
Apesar de não existirem junções visíveis óbvias, é bastante mecânico e pouco
convincente.

Um tile de largura de 3 unidades

Para a
segunda camada, o número primo que iremos usar é três. Vou escolher uma nova
seção da cortina e colocá-la dentro de um PNG transparente que tem 3 unidades ruffles de largura. Eu suavizei as bordas direita e esquerda para que elas se misturem com o fundo. O arquivo resultante vem com um
tamanho menor que15kb.

Duas
camadas de tiles de cortina – uma
melhora

Quando
sobrepomos este tile na nossa camada
de baixo, nós certamente temos um resultado melhor. Ainda existe um pattern regular aparentemente
artificial, mas ele está começando a ser quebrado.

O número
mágico para nossa terceira camada é sete.

Nossa
terceira camada é um tile de 7
unidades de largura

Estamos
criando um novo PNG transparente com 7 unidades
ruffle de largura, e eu vou colocá-lo em duas novas seções de imagens ruffle nas posições 3 e 6. Se isso
parecer confuso, o diagrama acima *deveria* clarear um pouco as coisas.
Mais uma vez, eu usei o feather (???) nas
bordas nesta imagem para ajudá-lo a se misturar com
as camadas de baixo.

Obviamente
essa é uma imagem maior tanto em dimensões em pixel como em tamanho do arquivo, mas
ainda somente com cerca de 32kb?- uma medida nada exagerada.

O
resultado final

Aqui
está o que acontece quando o usamos o tile
neste gráfico sobre as duas primeiras camadas. Eu estou bastante feliz com esse resultado.
Claro, seu olho pode perceber pequena seções da imagem que parece se repetir
(porque elas se repetem), mas o pattern adjacente
se torna tão complicado que seus olhos param de buscar por outras
similaridades.

Se
olharmos de outro ângulo, se tratarmos cada ruffle
puramente como um número, o número do pattern
que ele produz parece com isto:1, 2, 3, 1, 2, 6, 1, 2, 1, 3, 2, 1, 6, 2, 1, 1,
3, 1, 1, 6, 1, 1, 2, 3,..

Existe um
pattern, mas é muito difícil de
percebê-lo.

Neste
exemplo, um background de cortina
praticamente infinito nos custou o grande total de 53kb. E, claro, seria
relativamente trivial adicionar uma quarta camada – talvez usando 11 unidades –
se quiséssemos. No entanto, não estou convencido de que isso é garantido aqui.

Tenha
também isto em mente: este exemplo usa um dos conjuntos de números primos mais
simples possíveis – 1, 3, e 7. Se fôssemos usar, digamos, 11, 13, e 17, poderíamos
construir com uma variação muito mais complexa para um determinada distância.
Na verdade, tudo se resume à escala da cortina que escolhemos versus a
largura da tela.

Exemplo 3

Meu
último exemplo é menos sobre aplicações puramente práticas, e mais sobre se
divertir com alguns números primos. Não vou discorrer sobre o conceito básico
novamente, pois ele é o mesmo dos dois primeiros exemplos, mas fique à vontade
para desconstruí-lo no FireBug.

Há 2.200 anos, o Imperador Qin Shi Huang construiu
um exército de terracota de 8 mil homens para vigiar sua tumba. Cada soldado, carruagem e
arma é uma criação feita à mão.

Usando um
CSS simples, números primos e várias imagens, vamos criar nosso próprio
exército. O que talvez falte em estatura é compensado pelo peso absoluto dos
números.

Eu dou a
vocês… minha poderosa legião de Lego!

A
poderosa Legião de Lego

A legião
é construída a partir de oito imagens que se misturam e se entrelaçam juntas
para produzir milhares de permutas. Ela usa:

• 2 imagens para os tiles do background
• 2 imagens para as pernas
• 2 imagens para os torsos
• 2 imagens para as cabeças

Resumo

Brincando
com essa idéia, eu descobri alguns princípios básicos que parecem funcionar.
Primeiramente, sua ordem de empilhamento tende a funcionar melhor se for
construída como uma pirâmide de cabeça para baixo.

O modelo
de ordem de empilhamento

Você pode
fazer a camada do fundo bem pequena e repetitiva, uma vez que a maior parte
dela será sobreposta pelas camadas de cima. Na verdade, é provável que apenas 20?-?40%
permaneçam visíveis.

Por outro
lado, sua camada mais ao topo deve sempre ter as maiores dimensões da imagem, mas
também deve ter as imagens dispersadas mais finas, uma vez que esses elementos
de imagem nunca serão bloqueados por outras camadas. É melhor não incluir
detalhes bastante distintivos e que o olho consegue perceber na sua camada superior.
Mantenha-a escassa e genérica.

De
qualquer maneira, alguns testes de erros são sempre necessários.

Suporte de browser

Mantive o HTML simples usando vários backgrounds para o elemento.
Isso é suportado por todos os principais browsers atuais (Firefox 4, Chrome 10,
IE9, Opera 11, Safari 5), mas obviamente não por todas as versões antigas.

No
entanto, se a compatibilidade com versões antigas for um pré-requisito, usar o tiling no HTML, no body e talvez em um container único de elemento div pode ser uma opção viável. Mesmo que o elemento container não tenha sentido semântico nesse caso, pontencialmente agrega um grande valor ao site. A decisão é sua.

Esses
três exemplos são as primeiras ideias que eu tive, mas tenho certeza de que
existem abordagens muito mais interessantes sobre eles. Talvez:

• Uma visão de prédios infinita
• Granulados de madeira não repetitivos
• Campos estelares
• Camadas de selva densa
• Céu nebuloso

Se você
tiver uma ideia legal, eu adoraria conferir.