Cómo crear un patrón o mosaicos a partir de elementos rotados

Tengo un patrón geométrico, por ejemplo, una cruz:

Símbolo elemental a repetir

Que quiero repetir con algo de superposición y mosaico… fácil:

Repita el patrón con la ficha de la unidad marcada

El cuadrado azul marca el mosaico de unidad de 100 × 100 px.

Sin embargo, aquí viene el problema: quiero rotar la imagen unos 30° y luego colocarla en mosaico. Esto ha resultado sorprendentemente difícil; por supuesto, rotar la imagen es fácil, pero encontrar un mosaico de unidad perpendicular (el bloque azul en la imagen de arriba) no lo es:

Patrón de repetición girado

Claramente, el mosaico de 100 × 100 unidades no lo cortará. ¿Cómo elijo la ficha de unidad correcta? Presumiblemente, la posición no importa, solo el tamaño es importante, pero no sé cómo calcularlo. Intuitivamente, espero que el ángulo de rotación y el producto punto se presenten en gran medida, pero eso es todo lo que obtuve 1 . Lo que es peor, la rotación para ángulos arbitrarios no es exacta debido a la discreción inherente de los píxeles, por lo que incluso si calculo el tamaño matemáticamente correcto, no necesariamente dará como resultado un mosaico sin costuras.

Entonces, ¿cómo puedo calcular una combinación óptima de ángulo/tamaño dado el tamaño de la celda unitaria perpendicular (aquí, 100 × 100) y un ángulo deseado aproximado?

1 Pensé que (usando la notación de Wikipedia), ya que queremos que la proyección de A sobre B sea tan larga como B, tenemos |B|=|A|·cosϑ, y por lo tanto |A|=|B|/cosϑ . Lo cual, en mi caso, daría como resultado la nueva longitud |A|=115.470 pero un simple intento muestra que esto no puede ser correcto ni mucho menos, además de dar como resultado un número feo no entero. De hecho, con solo mirar la imagen rotada de arriba, podemos ver que la imagen completa de 200 × 400 no contiene una unidad perpendicular repetida.

En realidad, uno puede rotar patrones en Illustrator

Respuestas (2)

Encontré esto que podría ser de ayuda: Crear patrones enlosables rotados

Como mencionas, hay matemáticas involucradas que están mucho más allá de mi comprensión, así que solo traeré algunos de los principios que tienen que ver con el diseño.

Básicamente, la 'solución' sería:

  • Tome una textura enlosable sin rotar que se repita horizontal y verticalmente.
  • Mosaico a una imagen grande.
  • Gire la imagen grande en el ángulo deseado.
  • Encuentre el tamaño de la unidad repetible más pequeña de esta textura rotada (usando las matemáticas a continuación).
  • Recorte la imagen grande al tamaño de la unidad repetible.

La siguiente imagen muestra una textura rotada que se formó al colocar en mosaico el patrón original sin rotar y luego rotar el mosaico resultante. El elemento de textura básico sin rotar está resaltado y tiene un ancho w y un alto h. El ángulo de giro es el ángulo agudo que forma la recta w con la horizontal:

ingrese la descripción de la imagen aquí

Como queremos ángulos agudos, si giras en la otra dirección, entonces el diagrama de arriba se ve así:

ingrese la descripción de la imagen aquí

El tamaño de la imagen (ancho x alto) necesario para que la textura se pueda enlosar se puede encontrar de la siguiente manera:

ingrese la descripción de la imagen aquí

ingrese la descripción de la imagen aquí

La explicación continúa un poco más, por lo que si la encontró útil, siéntase libre de editar la respuesta (o publicar una nueva).

Es tranquilizador que mi enfoque fuera correcto en gran medida, al menos, incluso si no fue lo suficientemente lejos.
Curiosamente, toda esta teoría no llega a nada porque, aparentemente, Inkscape no funciona con píxeles perfectos, por lo que aunque creé el patrón usando valores exactos y rotaciones matemáticas, el mapa de bits resultante todavía tiene ligeras distorsiones, lo que hace imposible extraer mosaicos. :-(

Aquí hay un enfoque no matemático de cuando necesitaba hacer cosas similares:

  1. Haga un área masiva del patrón (los mosaicos no serán pequeños), gírelos como desee.
  2. Elija un punto visualmente simple y distintivo (por ejemplo, una esquina de la X)
  3. Haga que una línea de guía horizontal y vertical pase por ese lugar exacto.
  4. Siga la línea horizontal hasta llegar a un duplicado exacto del punto original en la línea. Ponga una guía vertical allí.
  5. Sigue la línea vertical (ambas líneas verticales deben cubrir un terreno idéntico) hasta llegar a un duplicado exacto del lugar original. Ponga una guía horizontal allí.

Ahora tiene lo que debería ser un rectángulo de 4 líneas alrededor del mosaico más pequeño posible (nuevamente, no será pequeño).

Luego hay un poco de prueba y error frustrante para que sea perfecto en píxeles, entonces deberías estar listo para comenzar.

Empecé a hacer esto, pensando "¿qué tan difícil puede ser"?. Oh, fue todo un desafío, y fracasé a lo grande. Tal vez mi ángulo estaba equivocado, o mi técnica era mala, pero mi lienzo era simplemente ENORME. Me di por vencido antes de descubrir el punto mágico de la creación de patrones xD (a unas 20x de mi tamaño original) - Edit: Ejemplo .
Desafortunadamente, ese método solo funcionará para unos pocos ángulos de rotación específicos (consulte la publicación vinculada en la respuesta de Yisela).
Cómo crear un patrón o mosaicos a partir de elementos rotados
RespuestasAquíPolítica de privacidad1y, 1v