InMy.Live

Je vais commencer sur une tangente apparemment sauvage aujourd’hui, mais soyez indulgent – je vous promets que je faire avoir un but.

Il y a quelques années, j’ai lu une étude intéressante sur la vie des 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 sous terre et à grignoter les racines des arbres.

Cependant, tous les 7, 13 ou 17 ans (selon l’espèce), ces cigales périodiques émergent brusquement de leurs terriers en masse, se transformant en créatures bruyantes et volantes, trouvant un compagnon et finissant par errer pour expirer peu de temps après.

Bien qu’il s’agisse d’une disparition choquante et « punk rock » pour notre ancienne cigale ringard, cela soulève une question évidente : est-ce par pur hasard qu’ils ont adopté ces 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 FAIRE avoir quelque chose en commun. Ce sont tous des nombres premiers – des 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 se nourrissent de 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 (c’est-à-dire 3 x 17) 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 principalement laissé en paix.

Quels petits gars débrouillards, hein !?!

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

Il n’y a pas si longtemps, nous avons examiné le processus de fabrication de carreaux sans soudure. Aussi super utiles que soient les tuiles sans couture, il peut être difficile d’obtenir l’équilibre juste droite.

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 de l’aléatoire 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.

Inutile de dire que vous obtiendrez un nombre plus pertinent pour la terraformation de la planète que pour 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 avec l’aimable autorisation 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.

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.

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.

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 de cette image pour l’aider à se fondre avec 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 2 200 ans, l’empereur Qin Shi Huang a construit une armée de terre cuite de 8 000 hommes pour garder sa tombe. 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 vous 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

Résumé

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.

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 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.