Как создать узор или плитку из повернутых элементов

У меня есть геометрический узор — скажем, крест:

Элементарный символ, который нужно повторить

Что я хочу повторить с некоторым перекрытием и плиткой… легко:

Повторите шаблон с отмеченной плиткой единицы

Синий квадрат отмечает плитку размером 100×100 пикселей.

Однако здесь возникает загвоздка: я хочу повернуть изображение примерно на 30°, а затем разбить его на мозаику. Это оказалось на удивление трудным; конечно, повернуть изображение легко, но найти перпендикулярную единичную плитку (синий блок на изображении выше) не так-то просто:

Повернутый повторяющийся шаблон

Ясно, что тайл 100×100 не подойдет. Как выбрать правильную плитку юнитов? Позиция предположительно не имеет значения, важен только размер, но я не знаю, как это вычислить. Интуитивно я ожидаю, что угол поворота и скалярное произведение будут сильно отличаться, но это то, что я получил 1 . Что еще хуже, поворот для произвольных углов не является точным из-за присущей дискретности пикселей, поэтому даже если я вычислю математически правильный размер, это не обязательно приведет к бесшовной плитке.

Итак, как я могу рассчитать оптимальную комбинацию угла/размера, учитывая размер перпендикулярной элементарной ячейки (здесь 100×100) и приблизительный желаемый угол?

1 Я думал, что (используя обозначения Википедии), поскольку мы хотим, чтобы проекция A на B была такой же длины, как B, мы имеем |B|=|A|·cosϑ, и, таким образом, |A|=|B|/cosϑ . Что, в моем случае, дало бы новую длину |A|=115,470, но простая попытка показывает, что это не может быть правильным с большой вероятностью, помимо получения уродливого нецелого числа. На самом деле, просто взглянув на приведенное выше повернутое изображение, мы можем увидеть, что все изображение размером 200×400 не содержит повторяющихся перпендикулярных единиц.

На самом деле можно вращать узоры в иллюстраторе

Ответы (2)

Я нашел это, что может помочь: Создание повернутых мозаичных шаблонов.

Как вы упомянули, здесь задействована математика, которая находится далеко за пределами моего понимания, поэтому я приведу только некоторые принципы, имеющие отношение к ее разработке.

В принципе, «решение» будет:

  • Возьмите невращающуюся мозаичную текстуру, которая повторяется по горизонтали и вертикали.
  • Разместите его на большом изображении.
  • Поверните большое изображение на нужный угол.
  • Найдите размер наименьшей повторяемой единицы этой повернутой текстуры (используя математику ниже).
  • Обрежьте большое изображение до размера повторяемой единицы.

На изображении ниже показана повернутая текстура, которая была сформирована путем наложения исходного неповернутого узора на мозаику, а затем поворота полученной мозаики. Основной невращающийся тексель выделен и имеет ширину w и высоту h. Угол поворота — это острый угол, образованный линией w с горизонтом:

введите описание изображения здесь

Поскольку нам нужны острые углы, если вы вращаетесь в другом направлении, то схема выше выглядит так:

введите описание изображения здесь

Размер изображения (w' x h'), необходимый для того, чтобы сделать текстуру мозаичной, можно найти следующим образом:

введите описание изображения здесь

введите описание изображения здесь

Объяснение продолжается немного больше, поэтому, если вы нашли его полезным, не стесняйтесь редактировать ответ (или опубликовать новый).

Обнадеживает то, что мой подход был в значительной степени правильным, по крайней мере, даже если он не зашел достаточно далеко.
Любопытно, что все эти теоретические размышления ни к чему не привели, поскольку, по-видимому, Inkscape не работает с идеальной точностью до пикселя, поэтому, хотя я создал шаблон с использованием точных значений и математических поворотов, результирующее растровое изображение все еще имеет небольшие искажения, что делает невозможным извлечение тайлов. :-(

Вот нематематический подход, когда мне нужно было делать подобные вещи:

  1. Сделайте массивную область узора (плитки не будут маленькими), поверните как хотите.
  2. Выберите визуально простое, характерное место (например, один угол X).
  3. Проведите горизонтальную и вертикальную направляющие линии через это точное место.
  4. Следуйте по горизонтальной линии, пока не достигнете точной копии исходного места на линии. Поставьте туда вертикальную направляющую.
  5. Следуйте по вертикальной линии (обе вертикальные линии должны охватывать одинаковую землю), пока не достигнете точной копии исходного места. Поставьте туда горизонтальную направляющую.

Теперь у вас есть то, что должно быть 4-строчным прямоугольником вокруг наименьшей возможной плитки (опять же, она не будет маленькой).

Затем есть немного разочаровывающих проб и ошибок, чтобы сделать его идеальным в пикселях, и тогда вы должны быть готовы к работе.

Я начал это делать, думая "как это может быть сложно"?. О, это был настоящий вызов, и я потерпела неудачу по-крупному. Может быть, мой ракурс был неправильным, или моя техника была плохой, но мой холст был просто ОГРОМНЫМ. Я сдался, прежде чем обнаружил волшебную точку паттернизации xD (примерно в 20 раз больше моего исходного размера) - Редактировать: Пример .
К сожалению, этот метод будет работать только для очень немногих конкретных углов поворота (см. связанный пост в ответе Yisela).
Как создать узор или плитку из повернутых элементов
СпросиСетьПолитика конфиденциальности1y, 0v