перевод статьи
Сегодня я собираюсь начать с, казалось бы, дикой темы, но потерпите — обещаю, у меня есть цель. Несколько лет назад я прочитал интересное исследование о жизни периодических цикад. Обычно мы не видим многих из этих маленьких ребят, поскольку они проводят большую часть своей жизни, тихо копаясь под землей и пережёвывая корни деревьев. Однако каждые 7, 13 или 17 лет (в зависимости от вида) эти периодические цикады внезапно массово выходят из своих нор, превращаясь в шумных летающих существ, находя себе пару и, наконец, вскоре уходят, чтобы умереть. Хотя это шокирующая «панк-роковая» гибель наших бывших занудных цикад, возникает очевидный вопрос: случайно ли они приняли эти 7, 11 или 13-летние жизненные циклы? Или эти цифры какие-то особенные? Как оказалось, у этих чисел ДЕЙСТВИТЕЛЬНО есть что-то общее. Все они простые числа — числа, которые можно разделить только на себя и на 1 (то есть 2, 3, 5, 7, 11, 13, 17, 19, 23 и так далее).
Но почему это имеет значение?
Исследования показали, что популяции существ, которые охотятся на цикад – обычно птицы, пауки, осы, рыбы и змеи – обычно размножаются в своих собственных более коротких 2-6-летних циклах бума и спада. Итак, если бы наши цикады появлялись, скажем, каждые 12 лет, любой хищник, который действует в 2, 3, 4, 6 или 12-летних циклах, смог бы постепенно синхронизировать свои собственные годы бума с этим предсказуемым праздником цикад. На самом деле, они, вероятно, сделают это государственным праздником под названием «Национальный день цикад» с барбекю и всеми наряжающимися. Конечно, если вы цикада, это не так уж и празднично. С другой стороны, если выводку 17-летних цикад не повезло появиться во время обильного трехлетнего сезона ос, пройдет еще 51 год (т. е. 3 x 17), прежде чем это событие произойдет снова. За прошедшие годы наши цикады могут счастливо появиться в количестве десятков тысяч, полностью подавить местную популяцию хищников и в основном остаться в покое. Какие находчивые ребята, а!?!
Замечательно. Но какое отношение все это имеет к веб-дизайну?
Не так давно мы рассматривали процесс изготовления бесшовной плитки. Какими бы суперполезными ни были бесшовные плитки, может быть сложно найти правильный баланс.
С одной стороны, вы хотите, чтобы размеры файла изображения были как можно меньшими, чтобы максимально эффективно использовать эффект мозаики. Однако, когда вы замечаете отличительную черту (например, сучок на каком-нибудь деревянном узоре), повторяющуюся через равные промежутки времени, это действительно разрушает иллюзию органической случайности. Может быть, мы позаимствуем некоторые идеи у этих цикад, чтобы наша плитка выглядела менее повторяющейся?
Генерация органической случайности с помощью CSS
Пример 1: Волшебная плитка
Хватит разговоров. Вот краткое подтверждение концепции. Это не должно быть визуально великолепно, но оно хорошо показывает, что происходит. Помня о «принципе цикады», я создал три квадратных полупрозрачных PNG-изображения размером 29, 37 и 53 пикселей соответственно (все простые числа) и настроил их как несколько фонов в широком элементе DIV на тестовой странице.
И вот результат. Перетащите горизонтальную полосу прокрутки вправо, чтобы увидеть новый созданный нами узор.
Как видите, плитки перекрываются и взаимодействуют, создавая новые узоры и цвета. И поскольку мы используем магические простые числа, эта закономерность не будет повторяться в течение долгого времени. Как долго? 29 пикселей × 37 пикселей × 53 пикселей… или 56 869 пикселей! Для меня это было своего рода откровением. Это было безумием. На самом деле мне пришлось трижды проверить свои расчеты, но математика надежна. Помните, что это крошечная графика — менее 7 КБ.
В общей сложности — однако они генерируют область исходной текстуры шириной почти 57 000 пикселей. Вы можете себе представить, что произойдет, если вы добавите четвертый слой плитки — скажем, плитку размером 43 пикселя. Или, может быть, вы не можете себе этого представить, поскольку цифры начинают становиться немного жестокими и могут дать вам пощечину, если вы будете смотреть на них слишком долго. Достаточно сказать, что вы получите число, более подходящее для терраформации планеты, чем для веб-дизайна. Хорошо. Итак, абстрактные геометрические полосы — это хорошо, но как еще можно применить эту идею?
Пример 2: Красный занавес
Давайте возьмем более фотореалистичный пример, который мы, вероятно, все когда-либо видели: красный бархатный театральный занавес. Я нашел здесь красивое изображение занавески, любезно предоставленное Unsplash, которое можно использовать в качестве отправной точки. Глядя на нашу занавеску, вы можете видеть, что она распадается на примерно равные вертикальные блоки.
В этом примере я буду называть это расстояние одной «единицей рюшей», и (в отличие от первого примера) эта единица будет более важной, чем строгие размеры изображений, с которыми мы работаем, в пикселях. Во-первых, я собираюсь выбрать один из этих оборок и превратить его в бесшовную плитку. Это PNG, и он весит очень прилично — 7 КБ.
Эта графика, представленная в виде одной плитки, представляет собой все, что нам не нравится в мозаичном фоне. Стыки очевидны, они очень механические и неубедительные, как настоящая занавеска.
Для второго слоя мы будем использовать простое число — три. Я собираюсь выбрать новую «единицу рюшей» занавески и поместить ее в прозрачный PNG-файл шириной в три единицы рюшей. Я растушевал правый и левый края, чтобы они плавно сливались со слоем мозаики ниже. Получаемый файл получается размером менее 15кб. Когда мы наложим эту плитку на наш нижний слой, мы, безусловно, получим улучшенный результат. Неестественно регулярная закономерность все еще сохраняется, но она начинает понемногу разрушаться.
Магическое число нашего третьего слоя — семь. Мы создаем новый прозрачный PNG-изображение шириной в семь единиц рюшей, и я собираюсь добавить две новые части изображения рюшей в позициях 3 и 6. Если это звучит запутанно, диаграмма слева *должна* прояснить ситуацию. Опять же, я растушевал края этого изображения, чтобы оно сливалось с нижними слоями. Очевидно, что это изображение больше как по размеру в пикселях, так и по размеру файла, но его размер по-прежнему составляет лишь около 32 КБ, что ни в коем случае не является возмутительным. Вот что происходит, когда мы размещаем это изображение поверх первых двух слоев. Я очень доволен таким результатом. Это правда, ваш глаз, вероятно, может выделить небольшие участки изображения, которые кажутся повторяющимися (потому что они повторяются), но основной узор становится настолько сложным, что ваши глаза перестают искать сходство. Прокрутите вправо, чтобы увидеть, что я имею в виду.
Если посмотреть на это с другой стороны, если рассматривать каждую оборку просто как число, то числовой шаблон, который она создает, будет выглядеть следующим образом: 1, 2, 3, 1, 2, 6, 1, 2, 1, 3, 2, 1, 6, 2, 1, 1, 3, 1, 1, 6, 1, 1, 2, 3,.. Закономерность ЕСТЬ, но ее очень сложно различить. В этом примере практически бесконечный фон занавеса обошелся нам всего в 53 КБ. И, конечно же, было бы относительно просто добавить четвертый слой — возможно, используя 11 единиц — если бы мы этого захотели. Однако я не уверен, что здесь это оправдано. Также имейте в виду: в этом примере используется один из простейших возможных наборов простых чисел — 1, 3 и 7. Если бы мы использовали, скажем, 11, 13 и 17, мы могли бы построить гораздо более сложный набор простых чисел. вариация на заданном расстоянии. На самом деле все зависит от размера шторы, которую мы выбираем, и ширины экрана.
Пример 3: Легион Лего
Мой последний пример не столько о чисто практическом применении, сколько о развлечении с простыми числами. Я не собираюсь снова разбирать теорию, поскольку основная концепция такая же, как и в первых двух примерах, но вы всегда можете разобрать ее в DevTools. 2200 лет назад император Цинь Шихуан построил терракотовую армию численностью 8000 человек для охраны своей могилы. Каждый солдат, колесница и оружие — уникальное творение ручной работы. Используя базовый CSS, простые числа и несколько изображений, мы собираемся собрать собственную могучую армию. То, чего ему может не хватать в росте, он компенсирует огромным количеством цифр. Я дарю тебе... мой Могучий Легион Лего!
Легион состоит всего из восьми изображений, которые смешиваются и переплетаются вместе, создавая тысячи перестановок. Оно использует:
- 2 изображения для фоновых плиток
- 2 изображения для ног
- 2 изображения для туловищ
- 2 изображения для голов
Резюме
Обдумывая эту идею, я пришел к некоторым основным принципам, которые, похоже, работают. Во-первых, ваш порядок расположения работает лучше всего, когда он построен в виде перевернутой пирамиды.
Вы можете позволить себе сделать нижний слой довольно маленьким и повторяющимся, поскольку большая часть его будет перезаписана слоями выше. На самом деле, вполне вероятно, что только 20-40% останутся незамеченными. С другой стороны, ваш самый верхний слой всегда должен иметь самые большие размеры изображения, но также и наиболее тонко разбросанные изображения, поскольку эти элементы изображения никогда не будут заблокированы другими слоями. Также, вероятно, лучше не включать в самый верхний слой выдающиеся, привлекательные детали. Держите его редким и более общим. В любом случае почти всегда требуется метод проб и ошибок.
Поддержка браузера
Я сохранил разметку простой, применив к элементу HTML несколько фонов. Это поддерживается всеми современными основными браузерами (Firefox, Chrome, Edge, Opera и Safari), но, очевидно, не всеми более старыми версиями. Однако, если обратная совместимость является обязательным условием, жизнеспособным вариантом может быть объединение HTML, тела и, возможно, одного элемента div контейнера. Хотя элемент контейнера может быть несемантическим, он потенциально дает вам огромную ценность для всего сайта за небольшую уступку. Это ваш звонок. Эти три примера — первые идеи, которые пришли мне в голову, но я уверен, что есть и гораздо более умные варианты этой идеи. Возможно: Бесконечный городской пейзаж Неповторяющаяся текстура дерева Звездные поля Густослоистые джунгли Облачные пейзажи Если вы придумаете хороший взгляд на это, я буду рад это увидеть.