Le principe de la cigale et pourquoi il est important pour les concepteurs Web (mis à jour)

Je vais commencer sur une tangente apparemment folle aujourd’hui, mais restez avec moi – je fais avoir un but.

Il y a quelques années, j’ai lu des choses intéressantes sur cigales périodiques. Nous ne voyons généralement pas beaucoup de ces petits gars car ils passent la grande majorité de leur vie à creuser tranquillement des tunnels sous terre et à grignoter des racines d’arbres.

Cependant, tous les 7, 13 ou 17 ans (selon les espèces), ces cigales périodiques émergent toutes soudainement en masse, se transforment en créatures bruyantes et volantes, trouvent un compagnon et s’éloignent pour expirer peu de temps après.

Bien qu’il s’agisse d’une disparition choquante de « punk rock » pour notre ancienne cigale ringard, cela soulève une question évidente : est-ce par pur hasard qu’ils ont adopté des cycles de vie de 7, 11 ou 13 ans, ou ces chiffres sont-ils en quelque sorte spéciaux ?

Il s’avère que ces chiffres FAIS avoir quelque chose en commun. Ils sont tous nombres premiers— nombres qui ne peuvent être divisés que par eux-mêmes et 1 (c’est-à-dire 2, 3, 5, 7, 11, 13, 17, 19, 23, etc.).

Mais pourquoi est-ce important ?

La recherche a montré que la population de créatures qui mangent des cigales – généralement des oiseaux, des araignées, des guêpes, des poissons et des serpents – se reproduit généralement dans leurs propres cycles plus courts de 2 à 6 ans d’expansion et de récession.

Donc, si nos cigales devaient émerger, disons, tous les 12 ans, tout prédateur qui travaille dans des cycles de 2, 3, 4 ou 6 ans serait capable de synchroniser progressivement ses propres années de boom avec ce festin prévisible de cigales. En fait, ils en feraient probablement un jour férié appelé «Journée nationale de la cigale» avec des barbecues et tout le monde se déguisait.

Évidemment, ce n’est pas si festif si vous êtes une cigale.

D’autre part, si une couvée de cigales de 17 ans a eu la malchance d’émerger pendant une saison de guêpes exceptionnelle de 3 ans, ce sera une autre 51 ans avant que cet événement ne se reproduise. Dans les années qui suivent, nos cigales peuvent joyeusement émerger par dizaines de milliers, submerger complètement la population de prédateurs locaux et être la plupart laissé en paix.

Quels petits gars débrouillards, hein !?!

C’est génial. Mais qu’est-ce que tout cela a à voir avec la conception Web?

Il y a quelques semaines, nous avons examiné le processus de fabrication de tuiles sans couture. Aussi super utiles que soient les tuiles sans couture, il peut être difficile d’obtenir l’équilibre juste droit.

D’une part, vous souhaitez que les dimensions du fichier image soient aussi petites que possible pour tirer le meilleur parti de cet effet de mosaïque. Cependant, lorsque vous remarquez une caractéristique distinctive – par exemple, un nœud dans un grain de bois – se répétant à intervalles réguliers, cela brise vraiment l’illusion du hasard organique.

Peut-être empruntons-nous quelques idées à ces cigales pour rendre notre carrelage moins répétitif ?

Générer du hasard organique avec CSS

Exemple 1 : La tuile magique

Assez parlé. Voici une preuve de concept rapide. Ce n’est pas censé être visuellement splendide, mais cela montre bien ce qui se passe. En gardant à l’esprit le «principe de la cigale», j’ai créé trois PNG carrés semi-transparents de 29px, 37px et 53px respectivement (tous des nombres premiers) et les ai configurés comme arrière-plans multiples sur l’élément DIV large d’une page de test .

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

Et voici le résultat. Faites glisser cette barre de défilement horizontale vers la droite pour voir le nouveau motif que nous avons généré.

Voir le stylo
Exemple de principe de base de la cigale par SitePoint (@SitePoint)
sur CodePen.

Comme vous pouvez le voir, les tuiles se chevauchent et interagissent pour générer de nouveaux motifs et couleurs. Et comme nous utilisons des nombres premiers magiques, ce modèle ne se répétera pas pendant très, très longtemps.

Combien de temps exactement ? 29px × 37px × 53px… ou 56 869 pixels !

Maintenant, ce fut une sorte de révélation pour moi. C’était fou. En fait, j’ai dû revérifier mes calculs, mais les calculs sont solides. N’oubliez pas que ce sont de minuscules graphiques – moins de 7kb au total – mais ils génèrent une zone de texture originale de presque 57 000 pixels de large.

Vous pouvez imaginer ce qui se passerait si vous deviez ajouter une quatrième couche de mosaïque – disons une mosaïque de 43 pixels. Ou peut-être que vous ne pouvez pas l’imaginer, car les chiffres commencent à devenir un peu brutaux et risquent de vous gifler les oreilles si vous les regardez trop longtemps.

Qu’il suffise de dire que vous obtiendrez un nombre plus pertinent pour terraformation de la planète que la conception de sites Web.

D’accord. Ainsi, les rayures abstraites et géométriques sont agréables et tout, mais comment pouvez-vous appliquer cette idée autrement ?

Exemple 2 : Le rideau rouge

Prenons un exemple plus photoréaliste que nous avons probablement tous vu à un moment donné : le rideau de théâtre en velours rouge. j’ai trouvé un joli graphique de rideau ici gracieuseté de Unsplash à utiliser comme point de départ. En regardant notre rideau, vous pouvez le voir se briser à peu près unités verticales égales.

Pour cet exemple, je vais faire référence à cette distance comme un ‘unité de volants‘, et (contrairement au premier exemple) cette unité va être plus importante que le strict dimensions en pixels des images avec lesquelles nous travaillons.

Tout d’abord, je vais choisir l’un de ces volants et le convertir en une tuile sans couture. C’est un PNG et il pèse 7kb très bien rangé.

Rendu comme une seule tuile, ce graphique est tout ce que nous ne le faites pas comme sur les arrière-plans de carrelage. Les jointures sont évidentes et c’est très mécanique et peu convaincant comme un vrai rideau.

Une dalle de 3 unités de large

Pour la couche deux, le nombre premier que nous allons utiliser est Trois. Je vais choisir une nouvelle « unité de volants » de rideau et la placer dans un PNG transparent qui est trois unités de volants de large.

J’ai adouci les bords droit et gauche pour qu’il se fonde en douceur avec la couche de carrelage ci-dessous. Le fichier résultant est livré en une coche de moins de 15 Ko.

Lorsque nous superposons cette tuile sur notre couche inférieure, nous obtenons certainement un résultat amélioré. Il y a toujours un schéma anormalement régulier apparent, mais il commence à se décomposer un peu.

Voir le stylo
Rideau rouge – deux couches par Alex (@alexmwalker)
sur CodePen.

Notre troisième couche est une tuile de 7 unités de large

Le nombre magique pour notre troisième couche est Sept.

Nous créons un nouveau PNG transparent de sept unités de volants de large, et je vais déposer deux nouvelles sections d’image de volants aux positions 3 et 6. Si cela semble déroutant, le diagramme à gauche * devrait * clarifier les choses un bit. Encore une fois, j’ai adouci les bords cette image pour l’aider à se fondre dans les couches inférieures.

Évidemment, il s’agit d’une image plus grande à la fois en dimensions de pixels et en taille de fichier, mais elle ne fait toujours pencher l’échelle qu’à environ 32 Ko – ce qui n’est en aucun cas scandaleux.

Voici ce qui se passe lorsque nous plaçons ce graphique sur les deux premières couches. Je suis assez content de ce résultat. C’est vrai, votre œil peut probablement repérer de petites sections d’image qui semblent se répéter (parce qu’elles le font), mais le motif sous-jacent devient si compliqué que vos yeux cessent de rechercher les similitudes. Faites défiler vers la droite pour voir ce que je veux dire.

Voir le stylo
Rideau rouge – deux couches par Alex (@alexmwalker)
sur CodePen.

Pour le voir d’une autre manière, si nous traitons chaque volant uniquement comme un nombre, le modèle de nombre qu’il produit ressemble à ceci : 1, 2, 3, 1, 2, 6, 1, 2, 1, 3, 2, 1, 6, 2, 1, 1, 3, 1, 1, 6, 1, 1, 2, 3,..

Là EST un modèle là-bas, mais il est très difficile à discerner.

Dans cet exemple, un fond de rideau pratiquement sans fin nous a coûté un grand total de seulement 53 Ko. Et bien sûr, il serait relativement trivial d’ajouter une quatrième couche – peut-être en utilisant 11 unités – si nous le voulions. Cependant, je ne suis pas convaincu que ce soit justifié ici.

Gardez également ceci à l’esprit : cet exemple utilise le l’un des plus simples possibles ensembles de nombres premiers – 1, 3 et 7. Si nous devions utiliser, disons, 11, 13 et 17, nous pourrions intégrer une variation beaucoup plus complexe pour une distance donnée. Cela dépend vraiment de l’échelle du rideau que nous choisissons par rapport à la largeur de l’écran.

Exemple 3 : La Légion de Lego

Mon dernier exemple concerne moins les applications pratiques pures que le plaisir de s’amuser avec les nombres premiers. Je ne vais pas décomposer à nouveau la théorie, car le concept de base est le même que les deux premiers exemples, mais vous êtes plus que bienvenu pour le déconstruire dans DevTools.

il y a 2200 ans L’empereur Qin Shi Huang a construit une armée de terre cuite de 8 000 hommes pour garder son tombeau. Chaque soldat, char et arme est une création artisanale unique.

En utilisant un CSS de base, des nombres premiers et une poignée d’images, nous allons lever notre propre armée puissante. Ce qui lui manque peut-être en stature, il le compense par le simple poids du nombre.

Je te donne… ma puissante légion de Lego !

Voir le stylo
Légion de Lego par Alex (@alexmwalker)
sur CodePen.

La légion est construite à partir de seulement huit images qui se mélangent et s’entremêlent pour produire des milliers de permutations. Il utilise:

• 2 images pour les carreaux de fond
• 2 images pour les jambes
• 2 images pour les torses
• 2 images pour les têtes

Sommaire

En jouant avec cette idée, j’ai trouvé quelques principes de base qui semblent fonctionner. Premièrement, votre ordre d’empilement a tendance à mieux fonctionner lorsqu’il est construit comme une pyramide à l’envers.

Règles de construction de vos calques

Vous pouvez vous permettre de rendre la couche inférieure assez petite et répétitive, car une grande partie de celle-ci est écrasée par les couches supérieures. En fait, il est probable que seulement 20 à 40 % resteront visibles.

D’un autre côté, votre calque le plus haut doit toujours avoir les plus grandes dimensions d’image, mais aussi le le plus épars l’imagerie, car ces éléments d’image ne seront jamais bloqués par d’autres calques. C’est aussi probablement le meilleur ne pas pour inclure des détails très distinctifs et accrocheurs sur votre couche supérieure. Gardez-le rare et plus générique.

Dans tous les cas, des essais et des erreurs sont presque toujours nécessaires.

Prise en charge du navigateur

J’ai gardé le balisage simple en appliquant plusieurs arrière-plans à l’élément HTML. Ceci est pris en charge par tous les principaux navigateurs actuels (Firefox, Chrome, Edge, Opera et Safari) mais évidemment pas toutes les anciennes versions.

Toutefois, si la rétrocompatibilité est une condition préalable, la mosaïque du html, body et peut-être un seul conteneur div élément pourrait être une option viable. Bien que l’élément de conteneur puisse être non sémantique, il vous offre potentiellement une énorme valeur à l’échelle du site pour une petite concession. C’est votre décision.

Ces trois exemples sont les premières idées qui me sont venues à l’esprit, mais je suis sûr qu’il existe des versions beaucoup plus intelligentes de l’idée. Peut-être:

• Un paysage urbain sans fin
• Grain de bois non répétitif
• Champs d’étoiles
• Jungle dense
• Paysages nuageux

Si vous trouvez une belle version, j’adorerais la voir.