Plan de Blason Rikyu

Que fait Plan de Blason Rikyu ?

Transformez les images de référence téléchargées ou les concepts textuels en blasons héraldiques minimalistes et en emblèmes japonais kamon, présentés sous forme de feuilles de construction architecturale au compas et à la règle en SVG pur. Chaque sortie combine une silhouette centrale translucide superposée à ses cercles de construction géométrique synchronisés et à ses rayons tangents étendus, une grille millimétrique dégradée, une note de concept concise et un aperçu d'emblème solide dans le coin inférieur droit.

Ressources Incluses

• assets/rikyu_origami_crane_kamon.svg : Affiche SVG de référence complète démontrant le kamon de la grue en plein vol inspiré de l'origami (blason Orizuru et Maizuru), comprenant la grille millimétrique dégradée 10px/50px, l'instanciation à deux états <defs><g id="crest-shape">, les cercles osculateurs synchronisés avec appels de rayon, les rayons de règle étendus, la marque d'en-tête Rikyu et le pied de page éditorial conceptuel.
• scripts/build_crane_svg.py : Script générateur Python de référence montrant comment calculer des extrémités d'arc circulaire exactes (x = cx + r * cos(theta), y = cy + r * sin(theta)), des découpes en spirale continue réelles et des projections de lignes tangentes/sécantes étendues (P1 +/- 1200 * u) à partir d'un registre de construction primitif unique.

Quand l'utiliser

• L'utilisateur télécharge une image (photo, statue, animal, objet ou affiche de référence) et demande de la convertir ou de la reproduire en un croquis géométrique SVG ou un plan de construction de style Rikyu.
• L'utilisateur souhaite une affiche de construction géométrique de style Rikyu, un plan de kamon japonais ou une feuille de logo au nombre d'or en SVG.
• L'utilisateur demande de concevoir un animal, une créature mythologique, un motif botanique ou un symbole abstrait avec des lignes et des cercles de construction visibles au compas et à la règle.

Étapes

1. Déconstruire l'Image ou le Concept d'Entrée en Primitives Géométriques

Avant d'écrire les chemins SVG, extrayez le squelette mathématique sous-jacent de l'image ou du sujet téléchargé :

• Sélectionnez un Archétype de Cadre :

  • Kamon Circulaire Fermé : Enveloppez le sujet à l'intérieur d'un anneau circulaire externe (r="165" à r="185"), idéal pour les motifs ailés, enroulés, tourbillonnants ou rotatifs (comme le kirin ailé de Nihonbashi ou la grue en plein vol en origami dans assets/rikyu_origami_crane_kamon.svg).
  • Blason Héraldique Autonome : Ancrez le sujet sur une ligne de base horizontale solide (y="120" par rapport au centre) et construisez autour d'un axe diagonal dominant, idéal pour les bêtes debout, les statues ou les formes architecturales (comme le lion rugissant sur un rocher).

• Distiller en Masses Minimales Plates : Convertissez les ombrages photographiques et les textures complexes en 4 à 8 îlots de silhouette géométrique plats à fort contraste, séparés par des canaux d'espace négatif uniformes (6px à 10px de large à l'échelle réelle) plutôt que par des lignes de croquis internes.

• Construire un Registre de Construction Primitif : Définissez chaque courbe de contour principale en utilisant des arcs circulaires explicites (cx, cy, r) et chaque bord droit, ligne de base ou axe de posture en utilisant des extrémités de ligne (x1, y1, x2, y2) dans un espace de coordonnées local centré en (0, 0) couvrant [-185, 185]. Enregistrez d'abord ces coordonnées afin que le <path> de la silhouette et la superposition de construction partagent une géométrie identique.

2. Configurer le Canvas SVG et la Grille Millimétrique Dégradée

Utilisez un rapport d'aspect d'affiche vertical (viewBox="0 0 800 1000") :

• Jetons de Couleur :

  • Papier de fond : #F4F1EA
  • Sous-grille (10px) : #E2DDD3 (stroke-width="0.6")
  • Grille principale (50px) : #D2CCC0 (stroke-width="0.9")
  • Lignes fines du cadre externe et de l'aperçu : #C6C0B4 (stroke-width="1")
  • Motif central translucide : fill="#8C877E" fill-opacity="0.38" stroke="#4A463F" stroke-width="1.25"
  • Cercles de construction et rayons étendus : stroke="#5C574F" stroke-width="0.75" stroke-opacity="0.72"
  • Emblème final solide et marque d'en-tête : #3A3631
  • Texte du corps du concept : #6E6A63

• Masque de Dégradé de la Grille : Appliquez un masque <linearGradient> (y1="0" à y2="1") au calque de la grille afin que la grille millimétrique couvre la zone de plan supérieure (y="40" à y="740") et s'estompe doucement dans le fond de papier uni entre y="640" et y="750".

3. Construire l'Emblème Réutilisable <g id="crest-shape">

Définissez la géométrie de l'emblème à l'intérieur de <defs> comme <g id="crest-shape"> centré en (0, 0) afin qu'il puisse être instancié deux fois sans dérive géométrique :

1. Instance Centrale du Plan : Instanciez via <use href="#crest-shape" transform="translate(400, 385)" fill="#8C877E" fill-opacity="0.38" stroke="#4A463F" stroke-width="1.25"/>.
2. Instance d'Emblème Fini en Bas à Droite : Instanciez à l'intérieur de la boîte d'aperçu via <use href="#crest-shape" transform="translate(660, 860) scale(0.32)" fill="#3A3631" stroke="none"/>.

Construisez tous les éléments <path> en utilisant des commandes d'arc circulaire exactes (A r r 0 large-arc-flag sweep-flag x y) et des segments droits (L x y) calculés directement à partir du Registre de Construction Primitif (x = cx + r * cos(theta), y = cy + r * sin(theta)). Utilisez des chemins composés (fill-rule="evenodd") ou des découpes <mask> pour les canaux d'espace négatif et les spirales internes afin que l'état central translucide et l'aperçu solide soient rendus proprement.

4. Rendre les Cercles de Construction Synchronisés et les Rayons Étendus

Découpez toute la géométrie de construction au cadre intérieur (<clipPath id="blueprint-clip"><rect x="40" y="40" width="720" height="720"/></clipPath>) et regroupez-la sous transform="translate(400, 385)" :

• Cercles de Construction Osculateurs : Pour chaque arc circulaire dans le Registre de Construction Primitif (généralement 14 à 24 cercles avec des rayons de r="10" à r="240"), dessinez <circle cx="..." cy="..." r="..." fill="none" stroke="#5C574F" stroke-width="0.82" stroke-opacity="0.76"/>.
• Croisillons Centraux et Appels de Rayon : À chaque centre de cercle (cx, cy), rendez un croisillon de 7px (M cx-3.5 cy H cx+3.5 M cx cy-3.5 V cy+3.5) avec stroke="#4A463F" stroke-width="0.85", et ajoutez des lignes d'appel de rayon horizontales ((cx, cy) à (cx+r, cy)) avec une marque de fin verticale de 6px sur les cercles primaires clés.
• Rayons Sécants et Tangents Étendus : Pour chaque bord droit, ligne de base et axe de posture principal (généralement 12 à 20 lignes), projetez le vecteur de direction de la ligne (dx, dy) à travers tout le canvas (P1 - 1200 * u à P1 + 1200 * u, où u est le vecteur unitaire) afin que clip-path="url(#blueprint-clip)" coupe proprement chaque rayon à la bordure du cadre.

5. Composer la Mise en Page Éditoriale de l'En-Tête et du Pied de Page

• Cadre Externe : Dessinez <rect x="40" y="40" width="720" height="920" fill="none" stroke="#C6C0B4" stroke-width="1"/>.

• En-tête Haut (y="85") : Centrez l'icône de silhouette minimaliste et le titre de marque en sérif (Rikyu par défaut, ou un titre spécifié par l'utilisateur) autour de x="400".

• Bloc Conceptuel en Bas à Gauche (x="76", y="810") :

  • Rendez CONCEPT en sans-sérif majuscule (font-size="13", letter-spacing="2.8", font-weight="600", fill="#4A463F").
  • En dessous (y="846"), placez 3 à 4 lignes de <text> expliquant comment la posture de l'image téléchargée, son axe principal et ses masses géométriques plates ont été distillés en l'emblème (en chinois, japonais ou anglais selon la préférence de l'utilisateur).

• Boîte d'Aperçu en Bas à Droite :

  • Dessinez le carré encadré <rect x="560" y="760" width="200" height="200" fill="#F4F1EA" stroke="#C6C0B4" stroke-width="1"/>.
  • Rendez le #crest-shape solide mis à l'échelle centré en (660, 860).

Pièges à Éviter

• Ne jamais dessiner de cercles décoratifs arbitraires : Chaque cercle de construction et rayon étendu doit être mathématiquement tangent ou sécant à une courbe ou un bord réel de la silhouette. Déduisez les extrémités d'arc de chemin directement de (cx, cy, r) afin que les cercles de construction épousent précisément les contours de la silhouette.
• Évitez les traits de couleur papier opaque dans les groupes translucides : Si vous utilisez des traits #F4F1EA pour sculpter l'espace négatif, l'application de fill-opacity="0.38" au groupe révèle le trait sur la grille. Utilisez plutôt des îlots <path> fermés séparés, des chemins composés (fill-rule="evenodd") ou un <mask> SVG pour les canaux d'espace négatif.
• Maintenez une largeur d'espace négatif lisible et un équilibre du fond ouvert : Gardez les espaces entre 6px et 10px à l'échelle réelle ([-185, 185]) afin qu'ils ne se referment pas lorsqu'ils sont réduits à 0.32 dans la boîte d'aperçu en bas à droite, et préservez un espace négatif ouvert généreux autour de la tête et de la queue pour que l'emblème se lise comme un blason emblématique plutôt que comme une roue radiale.