Rikyu Crest Blueprint

¿Qué hace Rikyu Crest Blueprint?

Transforma imágenes de referencia o conceptos textuales en crestas heráldicas minimalistas y emblemas kamon japoneses presentados como láminas de construcción arquitectónica de compás y regla en SVG puro. Cada salida combina una silueta central translúcida superpuesta con sus círculos de construcción geométrica sincronizados y rayos tangentes extendidos, una cuadrícula milimétrica desvaneciente, una nota conceptual concisa y una vista previa sólida del emblema en la esquina inferior derecha.

Recursos Incluidos

• assets/rikyu_origami_crane_kamon.svg: Póster SVG de referencia completo que demuestra el Kamon de la Grulla Voladora Inspirada en Origami (cresta Orizuru y Maizuru), que incluye la cuadrícula milimétrica desvaneciente de 10px/50px, la instanciación de doble estado <defs><g id="crest-shape">, círculos osculadores sincronizados con indicaciones de radio, rayos de regla extendidos, la marca de encabezado Rikyu y el pie de página editorial conceptual.
• scripts/build_crane_svg.py: Script generador de Python de referencia que muestra cómo calcular puntos finales de arco circular exactos (x = cx + r * cos(theta), y = cy + r * sin(theta)), recortes espirales continuos reales y proyecciones de líneas tangentes/secantes extendidas (P1 +/- 1200 * u) a partir de un único Registro de Construcción Primitiva.

Cuándo Usar

• El usuario sube una imagen (foto, estatua, animal, objeto o póster de referencia) y pide convertirla o replicarla como un boceto geométrico SVG o plano de construcción estilo Rikyu.
• El usuario desea un póster de construcción geométrica estilo Rikyu, un plano de kamon japonés o una lámina de logotipo de proporción áurea en SVG.
• El usuario pide diseñar un animal, criatura mitológica, motivo botánico o símbolo abstracto con líneas y círculos de construcción visibles de compás y regla.

Pasos

1. Descomponer la Imagen o Concepto de Entrada en Primitivas Geométricas

Antes de escribir rutas SVG, extrae el esqueleto matemático subyacente de la imagen o sujeto cargado:

• Seleccionar el Arquetipo de Enmarque:

  • Kamon Circular Cerrado: Envuelve el sujeto dentro de un anillo circular exterior (r="165" a r="185"), ideal para motivos alados, enrollados, en espiral o rotacionales (como el kirin alado de Nihonbashi o la grulla voladora de origami en assets/rikyu_origami_crane_kamon.svg).
  • Cresta Heráldica Independiente: Ancla el sujeto sobre una línea de base horizontal fuerte (y="120" relativo al centro) y construye alrededor de un eje diagonal dominante, ideal para bestias erguidas, estatuas o formas arquitectónicas (como el león rugiente sobre una roca).

• Destilar en Masas Planas Mínimas: Convierte el sombreado fotográfico y las texturas complejas en 4 a 8 islas de silueta geométrica plana de alto contraste separadas por canales de espacio negativo uniformes (6px a 10px de ancho a escala completa) en lugar de líneas de boceto internas.

• Construir un Registro de Construcción Primitiva: Define cada curva de contorno primaria usando arcos circulares explícitos (cx, cy, r) y cada borde recto, línea de base o eje de postura usando puntos finales de línea (x1, y1, x2, y2) en un espacio de coordenadas local centrado en (0, 0) que abarca [-185, 185]. Registra estas coordenadas primero para que la <path> de la silueta y la superposición de construcción compartan geometría idéntica.

2. Configurar el Lienzo SVG y la Cuadrícula Milimétrica Desvaneciente

Usa una relación de aspecto de póster vertical (viewBox="0 0 800 1000"):

• Tokens de Color:

  • Papel de fondo: #F4F1EA
  • Subcuadrícula (10px): #E2DDD3 (stroke-width="0.6")
  • Cuadrícula mayor (50px): #D2CCC0 (stroke-width="0.9")
  • Líneas finas del marco exterior y borde de vista previa: #C6C0B4 (stroke-width="1")
  • Motivo central translúcido: fill="#8C877E" fill-opacity="0.38" stroke="#4A463F" stroke-width="1.25"
  • Círculos de construcción y rayos extendidos: stroke="#5C574F" stroke-width="0.75" stroke-opacity="0.72"
  • Emblema final sólido y marca de encabezado: #3A3631
  • Texto del cuerpo conceptual: #6E6A63

• Máscara de Desvanecimiento de Cuadrícula: Aplica una máscara <linearGradient> (y1="0" a y2="1") a la capa de la cuadrícula para que la cuadrícula milimétrica cubra el área superior del plano (y="40" a y="740") y se desvanezca suavemente hacia el fondo de papel liso entre y="640" y y="750".

3. Construir el Emblema Reutilizable <g id="crest-shape">

Define la geometría del emblema dentro de <defs> como <g id="crest-shape"> centrado en (0, 0) para que pueda instanciarse dos veces sin desviación geométrica:

1. Instancia Central del Plano: Instancia mediante <use href="#crest-shape" transform="translate(400, 385)" fill="#8C877E" fill-opacity="0.38" stroke="#4A463F" stroke-width="1.25"/>.
2. Instancia del Emblema Terminado Inferior Derecho: Instancia dentro del cuadro de vista previa mediante <use href="#crest-shape" transform="translate(660, 860) scale(0.32)" fill="#3A3631" stroke="none"/>.

Construye todos los elementos <path> usando comandos de arco circular exactos (A r r 0 large-arc-flag sweep-flag x y) y segmentos rectos (L x y) calculados directamente desde el Registro de Construcción Primitiva (x = cx + r * cos(theta), y = cy + r * sin(theta)). Usa rutas compuestas (fill-rule="evenodd") o recortes <mask> para canales de espacio negativo y espirales internas, de modo que tanto el estado central translúcido como la vista previa sólida se rendericen limpiamente.

4. Renderizar Círculos de Construcción Sincronizados y Rayos Extendidos

Recorta toda la geometría de construcción al marco interior (<clipPath id="blueprint-clip"><rect x="40" y="40" width="720" height="720"/></clipPath>) y agrúpalos bajo transform="translate(400, 385)":

• Círculos de Construcción Osculadores: Para cada arco circular en el Registro de Construcción Primitiva (típicamente 14 a 24 círculos con radios de r="10" a r="240"), dibuja <circle cx="..." cy="..." r="..." fill="none" stroke="#5C574F" stroke-width="0.82" stroke-opacity="0.76"/>.
• Crucetas de Centro e Indicaciones de Radio: En cada centro de círculo (cx, cy), renderiza una cruceta de 7px (M cx-3.5 cy H cx+3.5 M cx cy-3.5 V cy+3.5) con stroke="#4A463F" stroke-width="0.85", y agrega líneas de indicación de radio horizontales ((cx, cy) a (cx+r, cy)) con una marca final vertical de 6px en círculos primarios clave.
• Rayos Secantes y Tangentes Extendidos: Para cada borde recto, línea de base y eje de postura principal (típicamente 12 a 20 líneas), proyecta el vector de dirección de la línea (dx, dy) a través de todo el lienzo (P1 - 1200 * u a P1 + 1200 * u, donde u es el vector unitario) para que clip-path="url(#blueprint-clip)" recorte cada rayo limpiamente en el borde del marco.

5. Componer el Diseño del Encabezado Editorial y Pie de Página

• Marco Exterior: Dibuja <rect x="40" y="40" width="720" height="920" fill="none" stroke="#C6C0B4" stroke-width="1"/>.

• Encabezado Superior (y="85"): Centra el icono de silueta mínima y el título de marca serif (Rikyu por defecto, o un título especificado por el usuario) alrededor de x="400".

• Bloque Conceptual Inferior Izquierdo (x="76", y="810"):

  • Renderiza CONCEPT en sans-serif mayúscula (font-size="13", letter-spacing="2.8", font-weight="600", fill="#4A463F").
  • Debajo (y="846"), coloca de 3 a 4 líneas de <text> explicando cómo la postura de la imagen cargada, el eje principal y las masas geométricas planas se destilaron en el emblema (en chino, japonés o inglés según la preferencia del usuario).

• Cuadro de Vista Previa Inferior Derecho:

  • Dibuja el cuadrado insertado <rect x="560" y="760" width="200" height="200" fill="#F4F1EA" stroke="#C6C0B4" stroke-width="1"/>.
  • Renderiza el #crest-shape sólido escalado centrado en (660, 860).

Trampas

• Nunca dibujes círculos decorativos arbitrarios: Cada círculo de construcción y rayo extendido debe ser matemáticamente tangente o secante a una curva o borde real de la silueta. Deriva los puntos finales del arco de la ruta directamente de (cx, cy, r) para que los círculos de construcción se ajusten con precisión a los contornos de la silueta.
• Evita trazos opacos del color del papel dentro de grupos translúcidos: Si usas trazos #F4F1EA para tallar espacio negativo, aplicar fill-opacity="0.38" al grupo revela el trazo sobre la cuadrícula. En su lugar, usa islas <path> cerradas separadas, rutas compuestas (fill-rule="evenodd") o una <mask> SVG para canales de espacio negativo.
• Mantén un ancho de espacio negativo legible y un equilibrio de fondo abierto: Mantén los espacios entre 6px y 10px a escala completa ([-185, 185]) para que no se cierren al escalarse a 0.32 en el cuadro de vista previa inferior derecho, y preserva un espacio negativo abierto generoso alrededor de la cabeza y la cola para que el emblema se lea como una cresta icónica en lugar de una rueda radial.