title

Содержание

Название раздела

Мозаика начинается с сетки, но не обязана выглядеть сухо: в этом уроке ты соберёшь управляемые модульные композиции на Vanilla JS, p5.js и Three.js, а затем пройдёшь три итерации сложной p5.js-мозаики — от ровных плиток к живому орнаменту с ритмом, смещением и контрастом.

Теория

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

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

Сетка даёт дисциплину, а мозаика показывает, как много разных решений может жить внутри одной дисциплины

Для мозаики почти всегда нужны четыре параметра. step задаёт расстояние между центрами плиток. padding удерживает композицию от краёв фрейма. row и col дают каждой ячейке адрес. А дальше этот адрес можно превратить в графику: например, поворачивать элементы через (row + col) % 2, менять цвет по диагонали, увеличивать размер к центру или создавать шахматный ритм.

for (let row = 0; row < rows; row++) {
  for (let col = 0; col < cols; col++) {
    let x = startX + col * step;
    let y = startY + row * step;
    drawTile(x, y, row, col);
  }
}

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

Сначала проектируется модуль: что может происходить внутри одной ячейки.
Затем проектируется правило повторения: как модуль меняется от строки к строке и от колонки к колонке.
В финале настраивается композиция: поля, плотность, палитра, центр тяжести и степень хаоса.

Практика: техника и вариация

Начнём с трёх вариантов одной идеи: мозаика строится из плиток, а плитка меняет поведение в зависимости от своего адреса в сетке. Vanilla JS показывает базовую геометрию, p5.js добавляет плавное движение, а Three.js превращает сетку в объёмный рельеф.

Vanilla JS: средне-простая мозаика на Canvas. Чередование строки и колонки управляет формой, цветом и поворотом плитки.

В первом примере почти нет случайности: композиция держится на адресе ячейки. Это важный приём для мозаик: row и col уже являются данными. Их можно складывать, сравнивать, брать остаток от деления и получать ритм без дополнительных массивов.

p5.js: средняя мозаика с волной. Плитки остаются на сетке, но их размер и поворот мягко меняются по диагонали.

Во втором примере сетка становится временной системой. Мы не ломаем координаты, а меняем параметры внутри ячейки: поэтому композиция движется, но не разваливается. Такой подход хорошо работает для заставок, интерактивных фонов и динамических плакатов.

Three.js: мозаика превращается в 3D-рельеф. Каждая плитка получает высоту, цвет и лёгкое вращение, а камера показывает сетку как объект.

В Three.js та же логика становится пространственной: строка и колонка задают положение по осям x и z, а дополнительная формула управляет высотой по оси y. Так обычная сетка превращается в рельефную мозаичную поверхность.

Практика: задача

Теперь задача: собрать сложную p5.js-мозаику, где сетку видно, но она не выглядит механической. Сначала посмотрим на финальную цель, а потом придём к ней за три итерации: модуль, вариативность и композиционное поле.

Финальная цель: плотная мозаика с диагональным ритмом, мягким полем размера и двумя типами плиток. Дальше разберём, как она собирается.

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

Итерация 1: чистая сетка. Все плитки одинаковые, зато понятно, где находится композиция и какой у неё шаг.

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

Итерация 2: адрес ячейки управляет вариантом плитки. Чередование создаёт диагонали, а поворот добавляет движение.

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

Итерация 3: поле меняет масштаб и лёгкий сдвиг плиток. Так мозаика становится сложнее, но сохраняет читаемый порядок.

Вывод

Мозаики и сетки полезны тем, что соединяют алгоритм и композицию. Сетка даёт контроль: одинаковый шаг, поля, ряды и колонки. Мозаика даёт выразительность: вариативные плитки, диагонали, пустоты, рельеф и пульсацию. Чем точнее правило, тем смелее можно делать визуальный результат.

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

const cols = floor((width - padding * 2) / step); // количество колонок
const rows = floor((height - padding * 2) / step); // количество строк
const x = startX + col * step; // центр плитки по горизонтали
const y = startY + row * step; // центр плитки по вертикали
const isEven = (row + col) % 2 === 0; // шахматное чередование
const d = dist(x, y, width / 2, height / 2); // расстояние до центра

Задание

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

Начни с step: сделай плотную, среднюю и воздушную версию сетки.
Затем настрой fieldPower: проверь, когда поле почти незаметно, а когда начинает вести всю композицию.
После этого выбери tileMode: только круги, только квадраты или смешанную систему.
В финале зафиксируй лучшую палитру и подбери motionSpeed, чтобы анимация была частью рисунка, а не просто эффектом поверх него.