Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Textooriginal disponível em http://designfestival.com/the-cicada-principle-and-why-it-matters-to-web-designers/
?
Voucomeçar por uma tangente aparentemente maluca, mas confie em mim ? eu tenho umpropósito.
Algunsanos atrás, eu li algumas coisas interessantes no periodical cicadas (cigarras periódicas). Nós nãovemos muitos desses pequenos seres normalmente, porque eles passam a maiorparte de suas vidas criando túneis embaixo da terra e em raízes de árvores.
Noentanto, dependendo de sua espécie, a cada 7, 13 ou 17 anos essas cigarrasperiódicas emergem em massa, transformando-se em criaturas voadoras ebarulhentas, que encontram um parceiro e morrem pouco depois disso.
Apesar deesse ser um final bastante rock?n?roll para nossa cigarra nerd, ele levanta umaquestão obvia: é possível que elas tenham adotado ciclos de vida de 7, 11 ou 13anos, ou esses números são de alguma forma especiais?
Naverdade, esses números têm algo em comum. Eles são todos números primos - números que só podem serdivididos por eles mesmos e por 1 (sendo,1,2, 3, 5, 7, 11, 13, 17, 19, 23, e assim por diante).
Mas porque isso interessa?
Pesquisastêm mostrado que a população de criaturas que comem cigarras ? tipicamentepássaros, aranhas, vespas, peixes e cobras ? geralmente tem ciclos de vida de2-6 anos.
Então,digamos que se nossas cigarras emergissem de 12 em 12 anos, qualquer predadorque tem ciclos de vida de 2, 3, 4 ou 6 anos seria capaz de sincronizarseus anos de auge com a festa regular das cigarras. Na verdade, elesprovavelmente nomeariam um feriado público por isso, chamando-o de Dia daCigarra.
Isso nãoé muito legal se você for uma cigarra.
Por outrolado, se uma ninhada de cigarras de 17 anos fosse azarada o suficiente paraemergir durante uma temporada cheia de vespas de 3 anos, demoraria 51 anos paraesse evento acontecer de novo. Nos outros anos, nossas cigarras poderiamalegremente emergir em seus milhares, completamente infestar a população dopredador local e serem deixadas em paz.
Pequenoscaras engenhosos, não?
Isso é ótimo. Mas o que tudo issotem a ver com web design?
Algum tempo atrás, vimos o processo de criar tiles contínuos. Como tilescontínuos são super úteis, pode ser difícil encontrar o equilíbrioperfeito.
Por umlado, você quer manter as dimensões do arquivo as menores possível, para tirara melhor vantagem do efeito tiling. No entanto,quando você notar um recurso distintivo ? por exemplo, um nó em alguns woodgrains (granulados de madeira) ? repetindoem intervalos regulares, ele realmente quebra a ilusão de aleatoriedadeorgânica.
Talvezpossamos pegar emprestadas algumas idéias das cigarras para quebrar essepadrão?
Gerando aleatoriedadeorgânica com CSS
Exemplo1:
Chega depapo. Aqui temos uma rápida prova-de-conceito. Isso não tem o objetivo de servisualmente 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 osconfigurei como backgrounds múltiplosno elemento HTML de uma página de teste.
/applications/core/interface/imageproxy/imageproxy.php?img=http://conteudo.imasters.com.br/21188/37463.png&key=391be2a556b30a07b8bc5e47d3eaeb4465bd7c7d5f54fabbc712d990c080a7c4" alt="37463.png" />29-a.png (2.0kb) /applications/core/interface/imageproxy/imageproxy.php?img=http://conteudo.imasters.com.br/21188/37467.png&key=38eb980990bca68d1f6cc949139e1800859931887ed4ff054234a9529e72cd51" alt="37467.png" />37-a.png (1.7kb) /applications/core/interface/imageproxy/imageproxy.php?img=http://conteudo.imasters.com.br/21188/37472.png&key=75946b7477c839a7fb4ce4d4fe1cd570f1087b0d0aabef71b5b75fe2acec55b4" alt="37472.png" />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.
/applications/core/interface/imageproxy/imageproxy.php?img=http://conteudo.imasters.com.br/21188/37464.jpg&key=9d8de8969350612c1d72e0e3bbe9fea5880d703eae610884f8f6c7ec9006293c" alt="37464.jpg" />
Menos de7kb de imagens geraram uma área teórica de uma textura original de quase 57 milpixels quadrados.
Como vocêpode ver, os tiles se sobrepõem einteragem para gerar novos patterns ecores. Como estamos usando números primos mágicos, esse pattern não vai se repetir por muito tempo.
Exatamentepor quanto tempo? 29px × 37px × 53px? ou 56,869px!
Isso foiuma revelação para mim. Eu tive que checar três vezes os meus cálculos, mas amatemática está perfeita. Lembre-se de que esses gráficos são minúsculos, menos de7kb no total ? e mesmo assim eles estão gerando uma área de textura original dequase 57 mil pixels de largura.
Você podeimaginar 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 osnúmeros começam a ficar um pouco brutos e são capazes de te dar um tapa nasorelhas se você olhar para eles por muito tempo.
Bastadizer que você terá um numero mais relevante para a planet terraformation (?terraformação do planeta?) do que para owebdesign.
Ok. Entãotiras abstratas e geométricas são legais e tudo, mas de que outras maneirasvocê pode aplicar esta idéia?
Exemplo 2
/applications/core/interface/imageproxy/imageproxy.php?img=http://conteudo.imasters.com.br/21188/37462.jpg&key=71d68179718751a13e7b3d41794846ab14eb10cb0b659b975b0faf9cd662f044" alt="37462.jpg" />
Cunhando um novo sistema de medição - a *?**unidade ruffle'*
Vamospegar um exemplo mais foto-realístico, que provavelmente nós já vimos em algumponto: a cortina vermelha de veludo do teatro. Eu achei um gráfico muito bom de cortina aqui para usar como pontoinicial. Ao olhar para nossa cortina, podemos ver que ela quebra em unidadesverticais aproximadamente iguais.
Para esteexemplo, vou me referir a esta distancia como uma ?unidade ruffle' e, diferentemente do primeiro exemplo, será maisimportante que as dimensões exatas em pixel das imagens com as quais estamostrabalhando.
Primeiramente, vouescolher um desses ruffles econvertê-los em um tile contínuo. É um JPEG e pesa 8kb.
/applications/core/interface/imageproxy/imageproxy.php?img=http://conteudo.imasters.com.br/21188/37471.jpg&key=04d77d70d41e28000259723c46c757bb292b574105a3aaadd2f17a412d66cda7" alt="37471.jpg" />
Umacamada de tiles de cortinas: não muito impressionante
Renderizadosozinho, 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 poucoconvincente.
/applications/core/interface/imageproxy/imageproxy.php?img=http://conteudo.imasters.com.br/21188/37469.png&key=202e6ba0f22e13fa6790fd2a8d2f412b1d740802c9596250f614747bd0134b83" alt="37469.png" />
Um tile de largura de 3 unidades
Para asegunda camada, o número primo que iremos usar é três. Vou escolher uma novaseçã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 umtamanho menor que15kb.
/applications/core/interface/imageproxy/imageproxy.php?img=http://conteudo.imasters.com.br/21188/37475.jpg&key=0d232825d4baa8711d0714237fe7362dc94d67e0ee923d90c13a51b3e82c643e" alt="37475.jpg" />
Duascamadas de tiles de cortina ? umamelhora
Quandosobrepomos este tile na nossa camadade baixo, nós certamente temos um resultado melhor. Ainda existe um pattern regular aparentementeartificial, mas ele está começando a ser quebrado.
O númeromágico para nossa terceira camada é sete.
/applications/core/interface/imageproxy/imageproxy.php?img=http://conteudo.imasters.com.br/21188/37476.png&key=3e4e80258fb50a0fef982a81205043b816367c15146bf44a6458470973d8c19c" alt="37476.png" />
Nossaterceira camada é um tile de 7unidades de largura
Estamoscriando um novo PNG transparente com 7 unidadesruffle de largura, e eu vou colocá-lo em duas novas seções de imagens ruffle nas posições 3 e 6. Se issoparecer confuso, o diagrama acima deveria clarear um pouco as coisas.Mais uma vez, eu usei o feather (???) nasbordas nesta imagem para ajudá-lo a se misturar comas camadas de baixo.
Obviamenteessa é uma imagem maior tanto em dimensões em pixel como em tamanho do arquivo, masainda somente com cerca de 32kb?- uma medida nada exagerada.
/applications/core/interface/imageproxy/imageproxy.php?img=http://conteudo.imasters.com.br/21188/37468.jpg&key=229fbd8cba1cd9130a19254480d9171bf26937d7062953c6ce0c748181e9d9a1" alt="37468.jpg" />
Oresultado final
Aquiestá o que acontece quando o usamos o tileneste 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 adjacentese torna tão complicado que seus olhos param de buscar por outrassimilaridades.
Seolharmos de outro ângulo, se tratarmos cada rufflepuramente como um número, o número do patternque 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 umpattern, mas é muito difícil depercebê-lo.
Nesteexemplo, um background de cortinapraticamente infinito nos custou o grande total de 53kb. E, claro, seriarelativamente trivial adicionar uma quarta camada ? talvez usando 11 unidades ?se quiséssemos. No entanto, não estou convencido de que isso é garantido aqui.
Tenhatambém isto em mente: este exemplo usa um dos conjuntos de números primos maissimples possíveis ? 1, 3, e 7. Se fôssemos usar, digamos, 11, 13, e 17, poderíamosconstruir com uma variação muito mais complexa para um determinada distância.Na verdade, tudo se resume à escala da cortina que escolhemos versus alargura da tela.
Exemplo 3
Meuúltimo exemplo é menos sobre aplicações puramente práticas, e mais sobre sedivertir com alguns números primos. Não vou discorrer sobre o conceito básiconovamente, pois ele é o mesmo dos dois primeiros exemplos, mas fique à vontadepara desconstruí-lo no FireBug.
Há 2.200 anos, o Imperador Qin Shi Huang construiuum exército de terracota de 8 mil homens para vigiar sua tumba. Cada soldado, carruagem earma é uma criação feita à mão.
Usando umCSS simples, números primos e várias imagens, vamos criar nosso próprioexército. O que talvez falte em estatura é compensado pelo peso absoluto dosnúmeros.
Eu dou avocês? minha poderosa legião de Lego!
/applications/core/interface/imageproxy/imageproxy.php?img=http://conteudo.imasters.com.br/21188/37470.jpg&key=e08486c5b58ff5ce63458d591477f849a84f625d51dd4c55427ca8803f30c5d5" alt="37470.jpg" />
Apoderosa Legião de Lego
A legiãoé construída a partir de oito imagens que se misturam e se entrelaçam juntaspara produzir milhares de permutas. Ela usa:
Resumo
Brincandocom essa idéia, eu descobri alguns princípios básicos que parecem funcionar.Primeiramente, sua ordem de empilhamento tende a funcionar melhor se forconstruída como uma pirâmide de cabeça para baixo.
/applications/core/interface/imageproxy/imageproxy.php?img=http://conteudo.imasters.com.br/21188/37466.jpg&key=e014ca3d20ff940610c65eab811e32996a1576593187a3e86c098ff596f53900" alt="37466.jpg" />
O modelode ordem de empilhamento
Você podefazer a camada do fundo bem pequena e repetitiva, uma vez que a maior partedela será sobreposta pelas camadas de cima. Na verdade, é provável que apenas 20?-?40%permaneçam visíveis.
Por outrolado, sua camada mais ao topo deve sempre ter as maiores dimensões da imagem, mastambém deve ter as imagens dispersadas mais finas, uma vez que esses elementosde imagem nunca serão bloqueados por outras camadas. É melhor não incluirdetalhes bastante distintivos e que o olho consegue perceber na sua camada superior.Mantenha-a escassa e genérica.
Dequalquer 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.
Noentanto, 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.
Essestrês exemplos são as primeiras ideias que eu tive, mas tenho certeza de queexistem abordagens muito mais interessantes sobre eles. Talvez:
Se vocêtiver uma ideia legal, eu adoraria conferir.
Carregando comentários...