title

Теория

Тайлинг — это повторение элементов по сетке. Один и тот же объект размещается много раз по правилу и собирается в структуру.Дисплейсмент — это смещение или изменение этих элементов. Вместе они позволяют превращать строгую сетку в более сложную и живую систему.

Тайлинг — это повторение элементов по сетке. Один и тот же объект размещается много раз по правилу и собирается в структуру.Дисплейсмент — это смещение или изменение этих элементов. Вместе они позволяют превращать строгую сетку в более сложную и живую систему.

Если начать менять положение элементов внутри сетки, появляется дисплейсмент. Смещение может зависеть от координаты, времени или положения мыши. Тогда структура остаётся узнаваемой, но перестаёт быть жёсткой. Именно так из повторения рождается более сложный визуальный язык.

let offsetX = sin(y * 0.05 + frameCount * 0.03) * 20;
ellipse(x + offsetX, y, 24);

Здесь смещение вычисляется отдельно и потом добавляется к позиции элемента. Функцияsin()создаёт плавное колебание, поэтому движение выглядит мягким. Если подставить такую формулу внутрь сетки, вся структура начнёт деформироваться. Это базовый принцип дисплейсмента в генеративной графике.

Ниже ты соберёшь деформированную сетку шаг за шагом. Сначала появится обычный тайлинг, потом — смещение по одной оси, а затем — более сложная волнообразная структура. Так будет видно, как из простой сетки рождается динамический паттерн.

Задача

Собери сетку из кругов и деформируй её так, чтобы ряды начали смещаться волной. В результате должна получиться структура, которая сохраняет ритм, но уже не выглядит статичной.

В финальном варианте круги повторяются по сетке, но каждая строка и каждый столбец слегка смещаются. Из-за этого композиция начинает пульсировать и выглядеть более сложной. В основе по-прежнему лежит простое повторение, но дисплейсмент меняет ощущение от всей системы.

Здесь сетка строится через два вложенных цикла, а затем для каждого круга вычисляется смещение. Оно зависит от координат и времени, поэтому структура движется плавно. Важный момент в том, что сами элементы не меняются — меняется только их положение. Так тайлинг и дисплейсмент работают вместе.

Сначала создаётся обычная сетка. Это базовый тайлинг без каких-либо отклонений. На этом этапе важно увидеть сам каркас и расстояние между элементами.

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

Теперь добавим дисплейсмент только по горизонтали. Каждая строка будет немного сдвигаться, и сетка начнёт выглядеть более живой. Это первый шаг от каркаса к деформации.

Здесь смещение вычисляется для каждой строки. Все элементы внутри одной строки получают одинаковый сдвиг, поэтому структура остаётся читаемой. Но уже появляется ощущение волны и движения.

На последнем этапе смещение становится сложнее: теперь оно зависит и от строки, и от столбца, и от времени. За счёт этого узор выглядит более текучим и объёмным.

Здесь деформация работает сразу в двух направлениях. Каждая ячейка получает своё положение, но общая сетка всё ещё ощущается. Именно это делает паттерн сложным, но не хаотичным.

Вывод

1. Тайлинг создаёт сетку и задаёт структуру повторения
2. Дисплейсмент смещает элементы и делает композицию более живой
3. Даже небольшое изменение координат может полностью изменить характер узора
4. Сложный паттерн часто строится из очень простого базового правила

Задание

Попробуй изменить характер деформации самостоятельно. В коде ниже уже есть подготовленные варианты — тебе нужно раскомментировать строки и посмотреть, как меняется структура. Обращай внимание на то, насколько сетка остаётся читаемой и как меняется ритм.

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