Пользователь
102,0
рейтинг
10 апреля 2011 в 00:44

Разработка → Принцип цикады и почему он важен для веб-дизайнеров перевод

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

Однако, в зависимости от вида, каждые 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. Теоретически, геометрические фигуры хорошо работают, но как ещё можно использовать эту идею?

Пример 2


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

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

Во-первых, я собираюсь выбрать один из таких блоков и превратить его в элемент для бесшовного фона. Это JPEG размером всего 8kb.

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

Элемент шириной в три блокаДля второго уровня используем простое число три. Я собираюсь выбрать новую секцию занавески и разместить её внутри прозрачного PNG, который будет шириной в три блока сборки. Я размыл левый и правый края, так что он плавно сливается с фоном. Результирующий файл вместился в 15kb.

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

Волшебное число нашего третьего слоя — семь.

Наш третий слой шириной в семь блоковМы делаем новый прозрачный PNG шириной в семь блоков, и я собираюсь поместить две новые секции оригинального изображения на позициях 3 и 6. Если это звучит непонятно, диаграмма слева должна слегка прояснить ситуацию. Опять же, я размыл края изображения, чтобы облегчить стыковку с предыдущими слоями.

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

Окончательный результатВот что получилось, когда мы накрываем этой графикой два предыдущих слоя. Я вполне доволен результатом. Конечно, ваш глаз может заметить небольшие фрагменты изображения, которое якобы повторяется (потому что оно на самом деле повторяется), но нижние слои настолько случайны, что вскоре глаз перестаёт искать паттерн.

Если посмотреть на этот фон с численной стороны и представить каждый каждый блок в виде числа, то получится следующее: 1, 2, 3, 1, 2, 6, 1, 2, 1, 3, 2, 1, 6, 2, 1, 1, 3, 1, 1, 6, 1, 1, 2, 3…

Паттерн там есть, но его очень сложно распознать.

В этом примере практически бесконечный фон в виде театральной завесы стоил нам всего лишь 53kb. И конечно, можно без труда добавить четвёртый слой — возможно, размером в 11 блоков — если нужно. Однако, я не думаю, что здесь это требуется.

Также имейте в виду: в этом примере используются самые минимальные простые числа — 1, 3 и 7. Если бы мы взяли, скажем, 11, 13 и 17, то могли бы сделать гораздо более сложную вариацию на заданном размере. В реальности всё сводится к масштабу текстуры относительно ширины экрана.

Пример 3


Мой последний пример не столько практического плана, сколько ради развлечения с простыми числами. Я не собираюсь снова разбирать теорию, потому что базовая концепция такая же, как и в предыдущих двух примерах, но я буду рад, если вы попробуете отредактировать его в FireBug.

2 200 лет назад китайский император Цинь Шихуанди создал терракотовую армию численностью 8000 человек для охраны своей могилы. Полноразмерная статуя каждого воина, лошади и оружия представляет собой уникальное изделие ручной работы.

Используя простой CSS, простые числа и набор изображений, мы собираемся собрать нашу собственную могучую армию. Может ей и не хватает роста, но зато она берёт своей многочисленностью.

Я покажу вам… Мой Могучий легион Лего!
Могучий легион ЛегоЛегион составлен всего из восьми изображений, которые соединяются вместе для создания тысяч комбинаций. В нём используются:
  • 2 картинки для бэкграунда
  • 2 изображения ног
  • 2 изображения торса
  • 2 изображения головы

Резюме


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

Модель порядка наложения текстурВполне можно сделать нижний слой довольно маленьким и повторяющимся, поскольку он перекрывается всеми слоями сверху. В реальности, он будет виден всего на 20–40%.

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

В любом случае, почти всегда нужно использовать метод проб и ошибок.

Поддержка браузеров


Я оставил разметку простой, используя множественные бэкграунды в элементе HTML. Такой вариант поддерживается всеми современными браузерами (Firefox 4, Chrome 10, IE9, Opera 11, Safari 5), но, очевидно, не всеми старыми версиями.

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

Эти три примера первыми пришли мне в голову, но я уверен, что есть много более грамотных способов использовать идею. Например:
  • Бесконечный городской пейзаж
  • Неповторяющаяся текстура дерева
  • Звёздное небо
  • Плотные джунгли
  • Облачное небо
Может, есть ещё какие-то идеи?
Перевод: Alex Walker
Анатолий Ализар @alizar
карма
743,5
рейтинг 102,0
Пользователь
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (119)

  • +125
    Это гениально.
    • –9
      Тогда вам точно понравятся некоторые моменты из книги Дэна Браун «Код да Винчи», а именно о божественной пропорции (когда он лекцию студентам читает).
      И автору тоже :)
      • +2
        Ну тогда лучше отсылать к первоисточнику Луки Пачоли.
    • –2
      Поддерживаю.
  • +59
    Это лучшее, что я читал на Хабре
  • +8
    Года два назад стояла подобная задача, тогда не решил её. Теперь я знаю как это сделать! Спасибо!

    Зря House M.D. не любит простые числа.
  • +7
    Великолепно.
  • +10
    Как хорошо, что я не цикада, а статья действительно гениальная, как и цикады.
  • +4
    Весьма интересно да и бесспорно полезно. Действительно гениальная находка!
  • +3
    Просто нет слов
  • +119
    Первый полезный топик от Ализара в природе.
    • +47
      Я только со второго раза решил глянуть кто автор и у меня дыхание перехватило.
      • –4
        А кто такой Ализар? :-)
        • +20
          Известный новостник-желтушник-копипастер на хабре, его имя уже стало нарицательным.
      • +25
        Вы не поверите, я даже страницу пару раз обновил, дабы удостовериться в том, что я_ставлю_плюс_посту_ализара.
    • 0
      Не-не, уже второй или третий за последнее время!
      • +12
        Ну так ведь теперь за это платят :)
    • +19
      Успокойтесь, это просто перевод :)
    • +3
      И тот переводной :-)
      • +1
        Да хоть что-то, лучше, чем то, что он обычно пописывал.
    • +1
      Ализар совершенствуется и адаптируется! :-)
    • +1
      За это я ему простил все зло, что он сделал раньше на хабре! :)
  • +10
    Эх, если б все дизайнеры оперировали такими приёмами… А то пришлют же бывают #@#@@$%!!!
  • +11
    Математика это такая наука, которая таит в себе столько сюрпризов, что порой хочется бросить все и (очередной раз) начать изучать ее подробнее, чтобы узнать больше. Однако, этот порыв обычно скоро натыкается на сложные или занудные вещи и гаснет (по крайней мере в моем случае). Эта статья — хороший повод опять вспомнить математику. Побольше бы таких статей.
    • –7
      Если често — это скорее арифметика. Математика — это классные фракталы-интегралы.
      • +8
        Арифметика — это частный случай математики, как и высшая математика, о которой вы говорите.
  • 0
    Прекрасная идея! Спасибо большое!
  • +5
    Я всегда восхищался тем, что в природе часто можно встретить что-либо, тесно связанное с простыми числами, числами Фибоначчи и т.п.

    Топик интересный и полезный, спасибо автору.
    • +7
      Я вообще всегда восхищался тем, насколько в природе все идеально и продумано. Колоссальной сложности живые организмы в огромном разнообразии и уникальности сосуществуют вместе, находясь в полной гармонии друг с другом и со всей неживой природой. И все это скрывается за неприметным словом «эволюция».
      • +9
        Иногда мне кажется, что у всего этого есть единый архитектор. Уж слишком много математических закономерностей.
  • +2
    Класс! Автору респект! Надо это попробовать использовать при генерации фона для игр.
    • +5
      Я думаю, если обратиться к опыту демомейкеров, то наверняка можно найти этот прием в каких-нибудь демках.
  • –32
    Зачем ссылка на английскую википедию? автор у тебя рак яичек мозга?
    • –25
      Sorry!!! не заметил что автор alizar, прошу прощения!
      • +20
        Вообще-то, вы и ещё кое чего не заметили: в русском варианте статьи в вики нет описания периодичности жизненного цикла цикад. Да и вообще английские статьи более обширные, чем русские, которые зачастую представляют собой частичный перевод английских.
  • +4
  • 0
    Вы меня окатили ушатом холодной воды! Спасибо. тебе жалею, что не зоолог (или как там). Но одиня заметил, что у вас квадраты не очень квадратные? ))
    • +2
      попробуйте выделить их — они квадратные, просто по бокам у них прозрачность (если не ошибаюсь)
      • +1
        Семён Семёныч! Как можно было не догадаться!
  • +53
    Статья идеальна по множеству параметров. Присутствуют:
    1. Любопытная вводная
    2. Формулировка проблемы
    3. Исследование проблемы
    4. Решение проблемы
    А также: Дизайн и Математика, которые вместе встречаются редко…

    Почему-то большинство статей содержат любые два пункта, но не все четыре сразу:)
    • НЛО прилетело и опубликовало эту надпись здесь
      • +9
        5) Структуирован, мысли не сливаются в одну кучу, а чётко разделены и преподнесены читателю.
    • +18
      Не хватает только фотографии кота.
  • +1
    Присоединюсь к благоговению многих, правда интересно и полезно, очень понравилось, молодцом.
  • 0
    Круто. Еще одно подтверждение, что природа знает как надо!)

  • +8
    За всю историю хабра таких крутых постов по веб-дизайну было не более трех.
    • +18
      Можно ссылки на еще две?
  • +3
    Это гениально… Просто нет слов…
    Хоть я и не дизайнер, но я читал статью затаив дыхание…
  • +1
    Это же отличная идея! Всякие деревянные и бумажные текстуры можно таким образом делать вообще не повторяющимися!

    p.s. Статья про терракотовую армию тоже впечатляет.
  • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    Спасибо за перевод отличной статьи! Было интересно почитать, да и в работе может пригодится.
  • +4
    Как физик, получил истинное удовольствие от прочтения статьи. Одна из лучших, что мне попадалась на хабре.
    И особенно доставило «Это не очень весело, если вы — цикада.» :)
    • НЛО прилетело и опубликовало эту надпись здесь
      • +1
        Угу, Фейнмана вспомнил :)
      • +1
        Да, с этим полностью согласен!
  • 0
    круто. спасибо за перевод
  • 0
    феноминальная статья, отмногих голлвных болей избавила
  • +3
    alizar — молодец! И автор оригинальной статьи — тоже!
  • +3
    Круто. Но с завесой есть проблема — глаз всё равно цепляется за абсолютно одинаковые паттерны. То есть, видимо, нужно делить на большее количество частей чтобы не так явно улавливалась схожесть. Вот с лего клёво, да
  • +1
    Сижу и ахреневаю. Иногда завидую людям, которые способны на столько хорошо связывать явления и действия и так изящьно переносить природу в человеческую дейятельность.
    Тем не менее есть моменты критики: именно дизайнеру придумывать дизайн с преминением такого свособа довольно сложно. А если сделать без участия дизайнера такой фон (которые стопроцентно будет отличаться своей природной неоднородностью от того, что нарисовал дизайнер), то тот начнет ругаться. =)
  • +1
    Давно знал об этой идее (наверное потому что я математик ;) ), но зато узнал новые способы ее реализации.
  • +1
    Впечатляет! Еще бы еще и другие результаты применения данной идеи.
    • +2
      Идея не нова, хотя используют её редко. В Morrowind набор из 10 голов+10 причёсок получали уже 100 уникальных NPC.
      OpenGL позволяет накладывать 2 (или даже больше) текстуры — если по координатам делать во взаимнопросто соотношении, то получится результирующий размер получится также очень немаленьким. Правда этот способ почему-то редко применяют. В современных игрушках лучше сделать агромадные текстуры для видюх с гигом памяти. А такие хитрости забываются.
      А ведь делается очень просто:
      * текстура кирпича
      * текстура пятен большого размера
      * текстура мелкого шума для взгляда вблизи (опционально)
      готова кирпичная стенка
      • 0
        простите, очень плохо могу представить визуально. можно по примеру для первого и для второго случая, если не затруднит? или хотя бы точные названия — что гуглить.

        спасибо.
        • 0
          Ну, первое — это немного не то, а частный случай более общего — получение разнообразия путём комбинации.
          А второе — multitexturing. Используется для многих вещей, вроде карты освещения в Quake тоже на основе multitexturing были.
  • +2
    Мне кажется, что этот пример нужно вставлять во все учебники веб-дизайна. Он учит творчески использовать базовые возможности. Ведь самое очевидное решение для этой задачи — загнать огромную картинку в бэкграунд. А после таких статей у людей, при решении задачи, будет появляться мысль — «А можно это сделать проще? А еще проще?». Впечатлен!
  • НЛО прилетело и опубликовало эту надпись здесь
    • +3
      «Высшая математика в жизни мне пригодилась только один раз — когда ключи упали в унитаз, пришлось скрутить из проволоки интеграл»
    • +5
      На самом деле — это проблема нашего образования. Оно рассказывает нам математику как она есть, как абстрактную науку, но не рассказывает где её можно применить. Из-за этого многие начинают считать, что математика никому не нужна.
      • 0
        Есть определенные специальности, на которых объясняют. Например, прикладная математика :-)
        • +1
          К сожалению, даже не на всех таких специальностях и близких к ним это объясняют. Многие знаю где преобразование Фурье можно применить? У нас большинство считают это просто мутью. Про школу я вообще молчу.
          • –1
            И правильно молчите про школу. Там надо, чтобы материал освоили все, а не только самые сообразительные.

            >Многие знаю где преобразование Фурье можно применить
            — Кхм. Преобразование Фурье в чистом виде вообще-то мало где применяется, но это мелочи :-)
            • +1
              Так может как раз и усваивали бы лучше, если знали, что всё это имеет применение, а не просто «игры ума». Ну а насчёт чистого вида Фурье — как бы основа для кучи методов/алгоритмов DSP. Хоть и не так полезно как кажется, но всё же.
              • –1
                Педагогика — тонкая тема. Простые решения типа «а давайте побольше прикладного» не спасут систему образования в целом.

                >основа для кучи методов/алгоритмов DSP
                — Ну как бы вейвлеты чаще используются, но опять же, в рамках нашей дискуссии это мелочи :-)
                • +1
                  Согласен, что в педагогике не так всё просто. Я просто исхожу из того, какая реакция у людей, когда им просто начинаешь втюхивать про поиск в ширину, Дейкстры, то же Фурье. Или когда им попутно говоришь где это применяется.
                  • –1
                    Интересно, какой-то порочно замкнутый круг получается — чтобы любить математику нужно знать как она применяется, а чтобы знать как она применяется, нужно её упорно изучать, т.е без любви никуда.

                    Вот почему в России мало классных прикладников :-)
  • +1
    Всё гениальное — просто.
  • 0
    Шедевр!
  • +7
    Наименьшее общее кратное.
    Кто-то должен был написать эти слова.
    • +8
      Это очень актуально для взаимно простых.
  • +1
    Мда, не ожидал, что можно написать такую хорошую статью о текстурах. Спасибо за перевод!
  • 0
    Что-то FireFox не показывает примеры лего и занавески
    • +1
      Может быть, следует вовремя обновляться?
      min.us/lkGOvu
  • 0
    а никто не заметил, что в Примере 1 указаны 3 картинки, а в демке 4, и, убирая эту четвертую картинку, все рушится?
    • 0
      А убирая 4-ю текстуру (первую в списке) вы убираете для ее правило в свойстве background-size?
      • 0
        намек понял — был не прав :-)
  • +3
    Я, конечно, человек далёкий от веб-дизайна, но, может быть, кто-нибудь сможет мне объяснить: почему все писают кипятком от, в общем-то, тривиальной идеи?
    • +4
      Просто потому, что в большинстве случаев человекам проще сфоткать 20 метровую текстуру, чем применить мозги и уложить это всё в 200 кб. Вот и забываются маленькие хитрости.
    • +1
      Потому что в оригинальной (http://designfestival.com/the-cicada-principle-and-why-it-matters-to-web-designers) статье тоже все писают кипятком, они то лучше знают…
    • +1
      Потому как едва прочитав статью, идея кажется тривиальной и наверняка-уже-где-то-было. Но на практике я ни разу не видел похожей техники, т.е. фактически это новый прием в верстке веб-сайтов.

    • +1
      Потому что у нее потенцильно большой спектр применений и все всё поняли.
  • 0
    Если это перевод, то где ссылка на оригинал? Хочется почитать на оригинальном языке и узнать автора, может у него есть ещё что-нибудь интересное.
    • +2
      Каюсь за невнимательность, давно не был на хабре, ещё не привык к изменениям в интерфейсе.
  • 0
    очень интересная статья. только определение простых чисел неправильное:) а так отлично.
    • 0
      Неправильное? Серьёзно?
      • +3
        да:) в статье написано, что простые числа — это числа, которые делятся только на себя и на единицу.
        как понимаете, единица тоже подходит под это определение.
        правильное определение такое: простое число — это натуральное число, которое имеет ровно два натуральных делителя.
        но в статье дана ссылка на википедию, где приводится правильно определение, так что это мелочь.
        • +1
          Вы зануда. Ставлю плюсик, люблю таких.
        • –2
          А я поставлю минус, ибо ровно 2 различных натуральных делителя.
          • 0
            всегда меня смущало это уточнение. как вы себе можете представить ровно два одинаковых натуральных делителя у числа? и чем они будут отличаться от ровно трех одинаковых натуральных делителей?
            • 0
              «Различные», чтобы отмести единицу, если Вы всё еще не поняли.

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

                    да, с этим определением все понятно. но на мой чисто субъективный взгляд, единица отсекается на словах «ровно два». и никаких дополнительных слов типа «различных» уже не нужно — это такая логическая перестраховка уже получается.

                    про два и три одинаковых делителя: если мы говорим, что у единицы ровно два одинаковых делителя (единица и единица), и пытаемся словом «различных» в определении эту самую единицу отсечь, то почему мы не можем сказать, что у нее ровно три одинаковых делителя (единица, единица и единица)? ну, и так далее.

                    хотя, как я уже писал выше, — это все мелочи:)
                    • +1
                      Дьявол же в деталях, как обычно :-)

                      >почему мы не можем сказать, что у нее ровно три одинаковых делителя
                      — Ну говорят-то же про само число и единицу, значит максимум два.

                      >единица отсекается на словах «ровно два»
                      — Естественно. Но если бы мне в школе такое сказали, я бы за это был готов убить :-)
                      С точки зрения алгоритмизации, Ваше определение — самое то.
  • +3
    Можно попробовать что-то вроде такого:
    
    <style type="text/css">
    body {
    	background: url(http://i2.sitepoint.com/examples/primes/29-a.png);
    }
    body:before {
    	background: url(http://i2.sitepoint.com/examples/primes/37-a.png);
    	position: absolute;
    	top: 0; left: 0;
    	width: 100%;
    	height: 100%;
    	content: ' ';
    }
    
    body:after {
    	background: url(http://i2.sitepoint.com/examples/primes/53-a.png);
    	position: absolute;
    	top: 0; left: 0;
    	width: 100%;
    	height: 100%;
    	content: ' ';
    	z-index: -1;
    }
    </style>
    
  • –6
    Спасибо автору за перевод, но с каких пор на Хабре не принято ставить ссылок на первоисточник? designfestival.com/the-cicada-principle-and-why-it-matters-to-web-designers/
    • +3
      Это топик-перевод. Источник указан там, где и должен быть по правилам.
      • 0
        И правда, не заметил. Спасибо за минусы.
  • 0
    Забавно, но ИЕ8 хочет упорно скачать пример с полосками www.sitepoint.com/examples/primes/
    нежели его открыть.
  • +1
    Затравка www.youtube.com/watch?v=oQ1sZSCz47w#t=0m25s

    и конец — www.youtube.com/watch?v=KgAyj18gn34

    99% хабраюзеров, уверен, смотерли эту ленту.

    Только тут чувак был математиком, а не веб-девелопером, но смысл не меняется )
  • –5
    Это охуенная статья! Первый раз по-настоящему захотелось добавить что-то в избранное.
  • 0
    Что-то я про Лего не понял. Очевидно, что там больше двух паттернов головы.
    • 0
      Фаербаг вам в помощь.
  • 0
    Следующий шаг — движение паттернов в зависимости от действий пользователя.

    Это правда уже из области программирования. Однако было бы интересно увидеть колыхающийся занавес в фоне сайта при скроллинге или движении мышью.
  • +1
    Использую эту «фишку» в планировщике задач (кроне, например), чтобы не создавать частых пиковых нагрузок, либо, что тоже интересно, повторяющихся паттернов (снижается частота повторения ошибки из-за особой очередности задач).

    Не уверен, что здесь нужны именно простые числа, но интуитивно использую их.
  • 0
    Это бы понравилось белорусским производителям обоев. 50000 рулонов без повторов.
    • 0
      Чтобы было много и без повторов, можно использовать конгруэнтный генератор вида (aX+b) mod c, где a и b взаимопростые числа.
  • 0
    image
  • 0
    Клёвый пост, обожаю его.

    Посоветовали применить для конструктора кирпичной кладки.

    Вот думаю, как сформировать много изображений кирпичей из уже готового набора.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.