Marque
Kreis veut dire cercle en allemand. Le logo est un cercle tracé d'un seul coup de pinceau, puis lu par une grille de pixels, par un petit programme qui prend un seul nombre. Essayez-le ci-dessous ; la suite de la page explique comment il fonctionne.
Essayer
Changez la graine pour un autre tracé du même logo, ou déplacez les valeurs choisies pour voir ce que fait chacune. Les valeurs déduites suivent d'elles-mêmes.
Déduit: W/R = π × 30/360 = 0.262 · rayon moyen 19.0 · trait 10.0 cellules
L'en-tête de cette page utilise la graine 1762839841.
L’idée
Kreis veut dire cercle en allemand, et c’est mon nom de famille : le logo est donc un cercle. Plus précisément, c’est un ensō, un cercle peint d’un seul coup de pinceau et laissé légèrement ouvert, un motif courant de la calligraphie japonaise. Je lui ai emprunté trois règles, et rien d’autre : un seul trait, aucune retouche, une ouverture.
L’autre moitié de l’idée, c’est la grille de pixels. Un coup de pinceau est continu ; une grille ne connaît que des cellules entières, encrées ou non. Le logo est ce qu’on obtient quand une grille lit un coup de pinceau. Ce couple, un geste humain saisi par un système qui ne comprend que des valeurs exactes, résume d’ailleurs assez bien mon travail.
Le logo n’est pas un dessin. Il est généré par un petit programme à partir d’une seule entrée, un nombre appelé la graine. Chaque page de ce site dessine le sien.
Comment il est dessiné
- Le canevas est une grille de 64 cellules sur 64.
- Le chemin est un cercle centré sur le canevas, son bord extérieur aux trois quarts de la largeur. Il part d’une heure et tourne dans le sens horaire jusqu’à midi. L’heure qui manque, c’est l’ouverture.
- Le pinceau a une largeur qui change le long du chemin : large où il se pose, mince où il se lève (la formule est plus bas).
- L’encrage : une cellule est encrée si son centre tombe dans le pinceau. Pas d’anticrénelage, pas de gris : chaque cellule est pleine ou vide.
- Le grain : un champ de bruit lisse pousse le bord du pinceau vers l’intérieur ou l’extérieur, pour que le bord ait l’air fait à la main plutôt que calculé.
- Le nettoyage : une cellule isolée, sans voisine encrée, est retirée.
La graine ne contrôle que les parties aléatoires : où tombe le grain, comment la largeur varie le long du trait, et un léger décalage du cercle entier. La même graine donne toujours le même logo.
Les nombres, et d’où ils viennent
Le but était de choisir le moins de nombres possible et de déduire le reste. Trois valeurs sont déduites.
L’épaisseur du trait découle de l’ouverture. L’ouverture doit être exactement aussi large que le trait est épais : plus large, l’écart se lirait comme une encoche dans un anneau fermé ; plus étroite, le cercle ne tiendrait plus ensemble. Avec R le rayon moyen et W la demi-largeur du trait, et une ouverture d’un douzième du cercle :
2W = 2(pi)R / 12 donc W / R = pi / 12 = 0,2618...
Avec le bord extérieur aux trois quarts du canevas, cela donne, sur la grille de 64 :
| cellules | |
|---|---|
| rayon moyen | 19 |
| demi-largeur | 5 |
| bord intérieur | 14 |
| bord extérieur | 24 |
| arc de l’ouverture | 10 |
| largeur du trait | 10 |
Le profil du pinceau découle de trois conditions. La largeur, rapportée à sa
valeur nominale, vaut 4/3 là où le pinceau se pose (t = 0), 1/3 là où il se lève
(t = 1) et exactement 1 à mi-chemin (t = 1/2). Un profil de la forme 4/3 - t^p
respecte les deux premières pour tout p ; la troisième fixe p, puisque
4/3 - (1/2)^p = 1 donne (1/2)^p = 1/3 :
width(t) = 4/3 - t^log2(3)
(Une version antérieure prenait 3/2 pour l’exposant, ce qui plaçait le point milieu à 0,98 au lieu de 1.)
Le chemin s’arrête plus tôt, de la taille des bouts du pinceau. Une pointe de pinceau est ronde : chaque bout du trait dépasse d’une demi-largeur la fin du chemin. La première version mesurait l’ouverture entre les bouts du chemin, et les pointes la refermaient presque. L’ouverture se mesure maintenant entre les bouts de l’encre, et le chemin est raccourci d’autant.
Un comportement n’est pas programmé du tout. Vers la fin, le trait ne fait plus qu’environ trois cellules, et le même grain qui ne faisait que rendre le bord rugueux au départ le traverse maintenant : le trait s’effiloche, comme un pinceau sec. Rien dans le code ne le demande ; cela découle de la largeur.
Ce qui est déduit et ce qui est choisi
| Valeur | Statut | Pourquoi |
|---|---|---|
| épaisseur du trait | déduite | égale à l’ouverture |
| profil du pinceau | déduit | trois conditions sur la largeur |
| longueur du chemin | déduite | la taille des bouts du pinceau |
| grille de 64 | convention | 2⁶, et un favicon fait 64 pixels : une cellule par pixel |
| ouverture de 30° | convention | une heure sur un cadran |
| grain, ½ | réglé à l’œil | déplace le bord d’au plus un quart de la demi-largeur |
| respiration, ⅙ | réglée à l’œil | combien la largeur varie le long du trait |
| décalage, 3 % | réglé à l’œil | une main pose rarement un cercle pile au centre |
Cinq nombres sont choisis, contre huit réglages indépendants dans le premier prototype. La démonstration plus haut permet de changer exactement ces cinq-là, plus la graine ; les valeurs déduites suivent.
Comment le site s’en sert
Le logo de l’en-tête est généré au moment de construire le site, un par page, sous forme d’un seul chemin SVG d’environ un kilo-octet et demi. Il n’a besoin d’aucun JavaScript. Touchez-le et un court script en dessine un nouveau, en 32 étapes, dans l’ordre où le pinceau les a posées. Il prend toujours la couleur du texte : noir sur blanc, blanc sur noir.
Le générateur fait environ trois cents lignes de TypeScript, dans le dépôt de ce site, qui est privé.