Ходят слухи, что он, танцуя по небу разит мечом словно ветер, что даже во тьме звёздный свет отражается от его меча солнечным днём
Читаю изредка Хабр, и узнаю для много интересного, но это статья приятно удивила, хотя и естественно логична по сути. На оригинальность не рассчитываю, буду экономить свое время.

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

Однако, в зависимости от вида, каждые 7, 11, 13 или 17 лет периодические цикады одновременно массово вылезают на свет и превращаются в шумных летающих тварей, спариваются и вскоре умирают.

Хотя наши странные цикады весело уходят в иной мир, возникает очевидный вопрос: это просто случайность, или числа 7, 11, 13 и 17 какие-то особенные?

Оказывается, у этих чисел есть кое-что общее. Все они простые числа, которые делятся только на себя и на единицу (это 1, 2, 3, 5, 7, 11, 13, 17, 19, 23 и так далее).

Почему это так важно?

Исследования показали, что численность животных, которые питаются цикадами — обычно птицы, пауки, осы, рыбы и змеи — часто демонстрируют более короткий цикл 2–6 лет между пиком и спадом популяции. Таким образом, если бы наши цикады появлялись, например, каждые 12 лет, то каждый хищник с жизненным циклом 2, 3, 4 или 6 лет мог бы синхронизировать циклы подъёма своей численности с регулярным появлением цикад. На самом деле, они наверное объявили бы всеобщий праздник обжорства под названием День Цикады.

Это не очень весело, если вы — цикада.

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

Находчивые малые, правда?

Замечательно. Но как это относится к веб-дизайну?

Пару недель назад мы рассматривали, как делать бесшовную заливку (тайлинг). Это суперполезная вещь, но бывает трудно соблюсти правильный баланс.

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

Может быть, можно позаимствовать какие-то идеи у цикад, чтобы сломать этот паттерн?

Генерация натуральной случайности средствами CSS

Пример 1


Хватит болтовни. Вот маленькая проверка концепции. Тест не должен выглядеть идеально красиво, но он хорошо демонстрирует суть. Помня о «принципе цикады», я сделал три квадратных полупрозрачных PNG размером 29, 37 и 53 пикселя, соответственно, и установил их как фоновые изображения в элементе HTML на тестовой странице.

29-a.png (2.0kb) 37-a.png (1.7kb) 53-a.png (2.5kb)

html {
background-image: url(29-a.png),url(37-a.png), url(53-a.png);
padding:0;
margin:0;
height: 100%;
}

И вот результат.

Результат


Менее 7kb изображений сгенерировали оригинальную текстуру теоретической размером почти 57 000 пикселейКак видите, эти квадратики перекрывают друг друга и взаимодействуют, генерируя новые паттерны и цвета. И поскольку мы используем волшебные простые числа, паттерн не будет повторяться очень долго.

Насколько именно долго? 29 × 37 × 53… или 56 869 пикселей!

Это для меня была какая-то революция. Я проверил свои вычисления трижды, но математика полностью надёжная. Помните, ведь это крошечные графические файлы, менее 7 килобайт вместе, при этом генерируют текстуру почти 57 000 пикселей в ширину.

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

Ok. Теоретически, геометрические фигуры хорошо работают, но как ещё можно использовать эту идею?

читать дальше

@темы: фон, урок, математика, идея, дизайн, css