Поля и шум

Клеточный шум

Расстояния до ближайших случайных точек (шум Уорли): пузыри, грани, кракелюр, мозаика с затиркой, галька, чешуя.

  • шейдер на GPU
  • бесшовный тайл
  • зацикленная анимация
Открыть в редакторе →

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

Как это устроено

Плоскость режется на квадратную сетку («Масштаб» — сколько клеток по короткой стороне), и в каждую клетку бросают одну случайную точку. «Разброс» решает, далеко ли она уйдёт от центра клетки: при 0 точки стоят ровной решёткой, при 1 — почти свободно. Для каждого пикселя достаточно осмотреть девять соседних клеток и найти расстояния до двух ближайших точек, F₁ и F₂.

F₁(x) = minᵢ |x − pᵢ| F₂(x) — второй минимум F₂ − F₁ = 0 на границе клеток

Из этих двух чисел собраны все виды. «F1 — пузыри»: расстояние растёт от центра, и клетки кажутся выпуклыми. «F2 — грани» похожи на огранённые кристаллы. «F2 − F1 — кракелюр»: разность обнуляется ровно на границах, поэтому швы тонкие и резкие. «Мозаике» и «гальке» нужно точное расстояние до края клетки — его считают по методу Иниго Килеса через серединные перпендикуляры к соседним точкам, а «Скругление» смешивает эти перпендикуляры и сглаживает углы. Мозаика выходит плоской, с фаской и прозрачной затиркой («Швы»), галька — выпуклой. «Чешуя» устроена иначе: диски на смещённых рядах, верхние ряды лежат на нижних и бросают на них тень, так что видны только полумесяцы. «Рельеф» освещает всё это слева сверху, с бликом. Сетка периодична — тайл получается точным, а при анимации точки описывают маленькие круги и возвращаются на места.

Немного истории

Области ближайших центров рисовал ещё Декарт в 1644 году — так он представлял вихри материи вокруг звёзд. В 1850 году ими пользовался Дирихле, в 1908-м их подробно изучил Георгий Вороной, а врач Джон Сноу, разбирая лондонскую вспышку холеры 1854 года, очертил на карте район, откуда ближе всего идти к колонке на Брод-стрит, — по сути, клетку Вороного. В компьютерную графику идею принёс Стивен Уорли: его статья «A Cellular Texture Basis Function» вышла на конференции SIGGRAPH в 1996 году и сразу дала текстуры камня, кожи и чешуи. Подробнее — в статье о диаграмме Вороного.

Что покрутить

  • «Галька», «Скругление» 0,7–0,9, «Рельеф» 0,8 — дорожка из обкатанных речных камней.
  • «Кракелюр» со «Швами» 0,05 и приглушённой палитрой — растрескавшийся лак или высохший такыр.
  • «Разброс» 0 в «мозаике» даёт ровную квадратную плитку, 0,3–0,5 — старую неровную кладку.
  • «Чешуя» с «Разбросом» около 0,2 и «Раскраской» «по расстоянию» — рыбья чешуя или черепичная крыша.
  • Сделайте клеточный шум маской другого слоя: например, «Искажение пространства» в стиле «мрамор» проявится только там, где маска светлая.

Параметры

Масштаб
Сколько клеток по короткой стороне
Разброс
0 — ровная сетка, 1 — точки разбросаны свободно
Вид
F1 — пузыри · F2 — грани · F2 − F1 — кракелюр · мозаика · галька · чешуя
Швы
Ширина швов между клетками
Рельеф
Сила объёма и освещения
Скругление
Насколько скруглены углы камней и плиток
Раскраска
по клетке · по расстоянию
Скорость
Сколько кругов описывают точки за петлю анимации