Псевдослучайные фоны

Оцените материал
(0 голосов)

Проблема

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

 

Когда характерная черта — например, завиток в текстуре древесины — повторяется через равные интервалы, это сразу разрушает иллюзию природной случайности. Воспроизвести случайность — задача непростая, так как в CSS не предусмотрено никаких встроенных возможностей генерации случайных значений. Рассмотрим пример с полосами. Предположим, что мы хотим создать вертикальные полосы разных цветов и ширины (для простоты ограничимся четырьмя цветами) без каких-либо видимых «швов» между повторяющимися плитками. Первой мыслью может быть создание одного градиента со всеми четырьмя полосами, например, так:

background: linear-gradient(90deg, #fb3 15%, #655 0, #655 40%, #ab4 0, #ab4 65%, hsl(20, 40%, 90%) 0);
background-size: 80px 100%;


Как видно  повторения очевидны, так как шаблон воспроизводится каждые  80px (это значение  background-size ). Можно ли добиться чего-то лучшего?

 


Решение

 

Первая идея — создать иллюзию случайности, разбив плоскую полосатую плитку на два слоя: один базовый слой и три слоя полосок, повторяющихся с разными интервалами. Это легко реализовать, жестко закодировав ширину полос в границах перехода цвета и используя  background-size для управления расстоянием между полосами. Код может выглядеть примерно так:

background: hsl(20, 40%, 90%);
background-image: linear-gradient(90deg, #fb3 10px, transparent 0), linear-gradient(90deg, #ab4 20px, transparent 0), linear-gradient(90deg, #655 20px, transparent 0);
background-size: 80px 100%, 60px 100%, 40px 100%;

Так как повторение самой верхней плитки будет наиболее заметно (ведь ее ничто не заслоняет), наверх следует поместить плитку с самым большим интервалом повторения (в нашем случае это оранжевые полоски).

Как демонстрирует на  рисунке, теперь результат намного более похож на случайный набор полосок, но если приглядеться, все же можно заметить, что одна и та же плитка повторяется каждые  240px . Конец первой повторяющейся плитки для такой композиции приходится на точку, до которой все наши отдельные фоновые изображения были воспроизведены целое число раз. Как вы помните из школьного курса математики, если у нас есть несколько чисел, то минимальное число, которое нацело делится на каждое из них, — это их наименьшее общее кратное (часто это название сокращают до аббревиатуры НОК). Следовательно, здесь размер плитки — это наименьшее общее кратное размеров фона, то есть НОК для 40, 60 и 80, и это значение равно 240. Отсюда логически вытекает, что для того, чтобы сделать узор еще более визуально хаотичным, необходимо максимизировать размер повторяющейся плитки. Благодаря математике нам не приходится долго и тяжело размышлять, как же это сделать, так как ответ уже известен. Чтобы НОК был максимальным, Обратите внимание, что здесь слово плитка» используется в абстрактном смысле: мы говорим не о повторяющемся изображении каждого отдельного градиента, а о воспринимаемой взглядом повторяющейся плитке, представляющей собой композицию градиентов (то есть если бы мы не использовали решение с несколькими фонами, то какого размера повторяющееся фоновое изображение потребовалось бы нам для того, чтобы добиться того же результата?). Числа должны быть взаимно простыми. 1 В этом случае их НОК будет равно их произведению. Например, 3, 4 и 5 взаимно простые, поэтому их НОК равно 3 × 4 × 5 = 60. Самый простой способ подобрать подходящие значения — воспользоваться простыми числами, так как они всегда взаимно просты с любыми другими числами. Списки простых чисел вплоть до очень больших значений легко можно найти на различных веб-сайтах в Сети.

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

background: hsl(20, 40%, 90%);
background-image:linear-gradient(90deg, #fb3 11px, transparent 0),linear-gradient(90deg, #ab4 23px, transparent 0), linear-gradient(90deg, #655 41px, transparent 0);
background-size: 41px 100%, 61px 100%, 83px 100%;

Да, код не самый красивый, но попробуйте найти швы! Размер повторяющейся плитки теперь равен 41 × 61 × 83 = 207 583 пикселов — больше, чем любое разрешение экрана, какое только можно вообразить! Эту технику Алекс Уолкер, который впервые догадался использовать простые числа для создания впечатления случайно сгенерированного фона, назвал «Принципом цикады». Обратите внимание, что она может пригодиться не только для фонов, но и для любых других элементов, с которыми хорошо работают повторения. Варианты использования включают:
Простые числа — это целые числа, которые не делятся без остатка ни на какие другие числа, кроме 1 и самих себя. Например, первые 10 простых чисел — это 2, 3, 5, 7, 11, 13, 17, 19, 23, 29. С другой стороны, «взаимно простые» относится к взаимосвязи между числами, то есть это не характеристика отдельного числа. У взаимно простых чисел нет общих делителей, но в целом делители у них присутствовать могут (например, 10 и 27 — взаимно простые, но ни одно из них простым не является). Разумеется, простое число будет взаимно простым с любым другим числом. ‰ небольшие псевдослучайные повороты изображений в фотогалерее с несколькими  :nth-child(an) , где  a — простое число; ‰ создание анимации, в которой фрагменты не повторяются всегда одним и тем же образом. Используйте несколько анимированных изображений, длительность которых равна простым числам.

ПОПРОБУЙТЕ САМИ!
http://play.csssecrets.io/cicada-stripes

Десерт на сегодня - классное видео с квадрокоптера, стремительно летающего по разрушенному зданию:

Прочитано 274 раз Последнее изменение Воскресенье, 05 февраля 2017 12:47
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Оставить комментарий

Убедитесь, что вы вводите (*) необходимую информацию, где нужно
HTML-коды запрещены

Поиск по сайту

Google+