3 × 7 × 11 = 231: бесшовный фон из трёх маленьких плиток

Возьмите сетку 3×3 из ячеек по 8 пикселей и положите в каждую одну из двух деталей: две четверти окружности в противоположных углах — либо в левом верхнем и правом нижнем, либо в правом верхнем и левом нижнем. Это плитки Трюше. Каждая дуга начинается и кончается в середине стороны ячейки, поэтому любые две ячейки стыкуются друг с другом, как их ни поверни. Линия не рвётся нигде.

Вот она одна, в двадцать раз крупнее. Пунктир — границы ячеек. Линия, которая упирается в край плитки, продолжится в соседней копии.

Отдайте такую плитку фоном. Шва не будет.

А повтор будет.

В плитке всего девять ячеек, и через каждые 24 пикселя те же девять дуг идут снова, в том же порядке. Глаз находит это за секунду, и дальше лабиринт выглядит как клетчатая ткань.

Можно нарисовать плитку побольше. А можно положить сверху ещё одну.

Сверху — плитка 7×7, но не вся

Возьмите вторую плитку, 7×7, и заполните в ней не все ячейки, а 25 из 49. Заполненная ячейка непрозрачная: деталь Трюше на своём фоне. Остальные прозрачные — сквозь них видна нижняя плитка.

Шахматка — это прозрачные ячейки. Дуга, которая упирается в прозрачную ячейку, не обрывается: её продолжит дуга нижней плитки, которая выходит к той же границе в той же точке — ровно в середине.

Пунктир здесь — через каждые 21 ячейку, 168 пикселей. Повтор никуда не делся, он отодвинулся: с 24 пикселей до 168.

И ни одного шва на границах слоёв. Это не случайность, а то, ради чего выбраны именно эти детали, — об этом ниже.

И ещё одна — 11×11

Третья плитка: 11×11, заполнено 60 ячеек из 121. Кладётся на самый верх.

Прозрачных здесь чуть больше половины — 61 из 121.

Пунктира нет — рисовать его негде. Следующий повтор через 231 ячейку, это 1848 пикселей, а картинка шириной 800.

Чтобы было видно, как это устроено, вот то же самое, только у каждого слоя свой фон: светлый — нижняя 3×3, песочный — 7×7, серо-зелёный — 11×11.

Почему 231. Нижняя плитка начинается заново на ячейках 0, 3, 6… Средняя — на 0, 7, 14… Верхняя — на 0, 11, 22… Весь узор повторится там, где все три начнутся заново одновременно, то есть на первом числе, которое делится и на 3, и на 7, и на 11. Это наименьшее общее кратное, и оно равно 231.

Приём называют принципом цикады. Периодические цикады выходят из земли раз в 13 или 17 лет, и по одной из гипотез периоды у них простые именно поэтому: так они реже совпадают с хищниками, у которых цикл в два, три или четыре года. У плиток та же задача — совпадать как можно реже.

Я проверил это не формулой, а перебором — строил видимый узор и искал наименьший сдвиг p, при котором он совпадает сам с собой:

3 : period 3  lcm 3
3 + 7 : period 21  lcm 21
3 + 7 + 11 : period 231  lcm 231
4 + 6 + 10 : period 60  lcm 60

Почему именно Трюше

Ячейка верхнего слоя оказывается рядом с ячейкой любого другого слоя — с какой именно, решает арифметика, а не вы. Значит, деталь в ячейке должна стыковаться с любой соседней деталью.

У произвольного узора такого свойства нет. Возьмите в ячейку крестик, ромб или кусок орнамента — и каждая граница между слоями станет швом, на котором линия обрывается или упирается в чужую. Наложение спрятало бы повтор и нарисовало бы вместо него сетку швов.

У Трюше линия пересекает каждую сторону ячейки ровно в середине, как деталь ни поверни. Детали всё равно, из какого слоя её сосед: стык с ним будет таким же.

Это и есть всё требование к узору. Не «красивый», а «стыкуется с любым соседом».

Какие ячейки заполнены — не видно

Какие ячейки слоя заполнены, а какие прозрачны, — это его маска. Выше маски случайные. Возьмём вместо них правило: заполнены ячейки, где (x + y) mod n < n/2, — диагональная полоса через каждую плитку. В 7×7 это 21 ячейка из 49, в 11×11 — 55 из 121.

Диагонали нет. Лабиринт ничем не отличается от того, что был со случайной маской.

А она есть — стоит подкрасить слои. Полосы двух ширин, от 7×7 и от 11×11, и рисунок, который они вместе складывают, повторяется через 77 ячеек.

Причина — то же свойство, ради которого выбраны Трюше. Деталь верхнего слоя неотличима от детали нижнего: две четверти окружности остаются двумя четвертями окружности, на каком бы слое они ни лежали. Глаз видит только линии, а по линиям не понять, из какого слоя ячейка.

Так что, пока слои нарисованы одинаково, маску можно брать любую: диагональ, рамка, крест, ромб — на глаз разницы нет. Стоит развести слои по цвету, и маска становится частью рисунка, а у цвета появляется свой период — 77, а не 231. Почему — ниже.

Не любые три числа

Первое, что хочется сделать, — взять размеры покруглее. Скажем, 4, 6 и 10.

Повтор через 60 ячеек, а не через 4 × 6 × 10 = 240. На картинке его видно: пунктир на 480-м пикселе, справа от него всё сначала.

Дело в общих множителях. У 4 и 6 общий множитель 2, у 4 и 10 — тоже 2, у 6 и 10 — снова 2. Общие множители сокращаются, и период выходит вчетверо меньше произведения. Произведение целиком получается, только когда общих делителей нет ни у одной пары.

Здесь легко ошибиться. Мало, чтобы у трёх чисел не было делителя, общего для всех трёх: у 6, 10 и 15 его нет, а период — всего 30, потому что у каждой пары он есть — 2, 3 и 5. Числа должны быть взаимно простыми попарно. Простыми им быть не обязательно: 8, 9 и 25 тоже подойдут.

Каждая тройка встречается ровно один раз

Самая незаметная часть — и самая полезная.

У плиток 9, 49 и 121 ячейка. Период 231×231 — это 53361 ячейка, и 9 × 49 × 121 тоже 53361. Не совпадение: каждая ячейка периода — это какая-то ячейка нижней плитки, какая-то ячейка средней и какая-то ячейка верхней, и каждая такая тройка встречается ровно один раз. Китайская теорема об остатках, если хочется названия.

triples: 53361 of 53361 each seen {1}
cells: 53361 visible from {3: 13176, 7: 13725, 11: 26460}

Отсюда следует, что состав узора считается заранее, без картинки. Нижняя плитка видна там, где средняя и верхняя обе прозрачны: 9 × 24 × 61 = 13176. Средняя — где она заполнена, а верхняя прозрачна: 9 × 25 × 61 = 13725. Верхняя — везде, где она заполнена: 9 × 49 × 60 = 26460. Хотите, чтобы нижний слой проступал реже, — заполните в верхних больше ячеек. Сколько именно, считается на бумажке.

В CSS это одно правило

.texture {
  background-color: #f4f1ea;
  background-image: url(tile-11.svg), url(tile-7.svg), url(tile-3.svg);
}

Первая картинка в списке рисуется сверху. background-repeat по умолчанию repeat, размер берётся из самих SVG, так что больше ничего не нужно. Все картинки с узором в этой статье — скриншоты такого правила в headless Chrome.

Три плитки весят 5634 байта, 1808 после gzip. Тот же узор одним SVG на весь период — 2946356 байт, 543673 после gzip.

Где это ломается

Подкрашенные слои повторяются раньше. На картинках с подкраской повтор виден снова, и это не ошибка рисования. Какой слой виден в ячейке, зависит только от масок 7×7 и 11×11 — нижняя плитка сплошная и в этом не участвует. Значит, у раскраски по слоям период 7 × 11 = 77, а не 231. Линии не повторяются 1848 пикселей, цвет — уже через 616.

Нижняя плитка всё ещё повторяется — там, где её видно. Четверть ячеек — это 3×3 с периодом в 24 пикселя. Глаз этого не ловит, потому что окна, через которые она проступает, маленькие и разбросаны с периодом 77. Но если заполнить верхние слои слишком скупо, окна станут большими, и в них проступит клетка 3×3.

Бесшовность — заслуга детали, а не наложения. Если деталь не стыкуется с любым соседом, на каждой границе между слоями будет шов. Наложение только удлиняет период.

Три плитки — 231.

Лишь бы у размеров не было общих делителей. Ни у одной пары.