Пару років тому я прочитав цікаві факти про життєвий цикл періодичних цикад. Зазвичай ми не бачимо навколо себе багато цих комах, тому що більшу частину свого життя вони проводять під землею і тихо собі смокчуть коріння рослин.
Проте, в залежності від виду, кожні 7, 11, 13 або 17 років періодичні цикади одночасно масово вилізають на поверхню і перетворюються в шумних летючих тварюк, розмножуються та незабаром помирають.
Хоча наші дивні цикади весело «відкидають копита», виникає очевидне запитання: це просто випадковість, чи числа 7, 11, 13 і 17 якісь особливі?
Виявляється, у цих чисел є дещо спільне. Всі вони прості числа, тобто такі, що діляться тільки на себе і на одиницю.
Чому це так важливо?
Досліди показали, що чисельність тварин, які харчуються цикадами — зазвичай птахи павуки, оси, риби та змії — часто демонструють більш короткий цикл у
Це не дуже весело, якщо ви — цикада.
З іншої точки зору, якщо виводок цикад був настільки невдалий, щоб з’явитися під час трирічного піку чисельності ос, то наступний раз це трапиться тільки через 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%;
}
Результат
Як бачите, ці квадратики перекривають один одного і взаємодіють, генеруючи нові шаблони та кольори. І оскільки ми використовуємо магічні прості числа, шаблон не буде повторюватись дуже довго.
Як саме довго? 29 × 37 × 53… або 56869 пікселів!
Це для мене було якоюсь революцією. Я перевірив свої обчислення тричі, математика повністю надійна штука. Пам’ятайте, адже це крихітні графічні файли, менші за 7 Кб сумарно, і при цьому генерують текстуру майже в 57000 пікселів шириною.
Ви можете представити, що відбудеться, якщо добавити ще й четвертий квадратик, наприклад, 43 пікселі? Чи не можете представити, тому що числа стають дещо неймовірними і можуть загіпнотизувати, якщо дивитись на них занадто довго. Достатньо сказати, що ви отримаєте цифру, яка більш підходить для тераформування планет, ніж для веб-дизайну.
Ок. Теоретично, геометричні фігури гарно працюють, а як іще можна використати цю ідею?
Приклад 2
Візьмемо більш фотореалістичний приклад, котрий кожен з нас міг бачити в тому чи іншому вигляді: театральна завіса. Для початку я знайшов непогану графіку тут. Якщо подивитись на нашу штору, то можна помітити рівномірні вертикальні блоки.
Для цього прикладу я буду називати цей проміжок «блоком збору» (ruffle unit), і на відміну від першого прикладу, він буде важливішим за строгі розміри в пікселях тих зображень, з якими ми працювали.
По-перше, я збираюсь вибрати один з таких блоків і перетворити його в елемент для безшовного фону. Це JPEG розміром всього 8 Кб.
Під час рендерінгу одного блоку, ця графіка уособлює собою все те, що ми ненавидимо в безшовному фоні. Крім явно помітних стиків, вона виглядає дуже механічною і абсолютно непереконливою.
Для другого рівня використовуємо просте число три. Я збираюся вибрати нову секцію штори і розмістити її всередині прозорого 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
Мій останній приклад не стільки практичного плану, скільки заради розваги з простими числами. Я не збираюся знову розбирати теорію, тому що базова концепція така ж сама, як і попередніх двох прикладах.
2200 років тому китайський імператор Цінь Шіхуанді створив теракотову армію чисельністю 8000 чоловік для охорони своєї могили. Кожна статуя — унікальний витвір ручної роботи.
Використовуючи простий CSS, прості числа та набір зображень, ми зберемо свою потужну армію з брекджеком і шлюхами. Можливо, їй і не вистачає зросту, але вона бере своєю численністю.
Я покажу вам… Мій Потужний легіон Лего! Легіон створений всього з восьми зображень, які поєднуються разом для створення тисяч комбінацій. В ньому використовуються:
- 2 зображення для фону;
- 2 зображення ніг;
- 2 зображення торсу;
- 2 зображення голови.
Резюме
Експериментуючи з цією ідеєю, я виявив декілька принципів, котрі, здається, працюють. По-перше, порядок накладення текстур краще, якщо організований у вигляді перевернутої піраміди.
Цілком можна зробити нижній прошарок доволі маленьким і повторюваним, оскільки він перекривається усіма прошарками зверху. У реальності, його буде видно всього на
З іншої сторони, верхній прошарок обов’язково повинен бути найбільшого розміру, але при цьому найменш насиченим, оскільки він ніколи не буде перекриватися іншими. Також, ймовірно, краще не інтегрувати у верхній прошарок деталі, які легко чіпляють погляд. Залиште його вбогим і узагальненим.
У будь-якому випадку, майже завжди потрібно використовувати метод проб та помилок.
Підтримка браузерів
Я залишив розмітку простою, використовуючи численні фони і елементі HTML. Такий варіант підтримується усіма сучасними браузерами (Firefox 4, Chrome 10, IE9, Opera 11, Safari 5), але не усіма старими версіями.
Однак, якщо ставити за умову зворотну сумісність, то нормальним варіантом може бути тайлінг в html, body и контейнер div. Можливо, контейнер може бути не семантичним, але ця маленька поблажка потенційно може відобразитися на всьому сайті. Вирішувати вам.
Ці три приклади першими прийшли мені в голову, але я впевнений, що є багато більш грамотних способів використання цієї ідеї. Наприклад:
- Нескінченний міський пейзаж;
- Неповторна текстура дерева;
- Зоряне небо;
- Густі джунглі;
- Хмарне небо.
Можливо є ще якісь ідеї?
Першоджерело — «The Cicada Principle and Why It Matters to Web Designers».
2 коментарів
Было на Хабре давненько уже.
Ну і тут тепер буде :)