Ліплення пиксельного мульта Simpsons Coach Gag в Ексель

  Господа, хабровчане!
Протягом довгих років ув'язнення Дюфрейн пробивав тунель в стіні камери альпіністським молотком. Закриваючи діру плакатами із зображенням знаменитих американських красунь, під час втечі з тюрми Шоушенка він проліз в підвал, пробив каналізаційну трубу і проповз по ній за огорожу в'язниці.
Піксель — молоток Гасунса-Дюфрейна. П'ять років каторжної праці позаду. Це останній реліз іконок FatCow , 3926 шт… Ми знімаємо плакат з Монро-Мардж в білій сукні над каналізаційним люком. Що ми бачимо? 1428 лего-кубиків , гігапіксельних панорама Спрінгфільда ​​на 22848 пікселів . Перед вами відтворення в пікселях оголений диван Сімсон на 89 слайдах, без звуку. Через тиждень готові розповісти про the making of , а поки follow the white rabbit…
 
 
 
 
 
Ісходникі ролика:
  Папка зі слайдами з іконок 32х32 .
  Папка зі слайдами з іконок 16х16 .
 
 
Для початку потрібна була жертва для експериментів. Після перегляду 300 потенційних кандидатів, вибір припав на цікаву анимашку створення татуювання на крижах сімпсоновской мами Мардж. Класика жанру, ще один рімейк щодо дивана сімейства Сімпсонів . Ось наше твір мистецтва, а про те, як це було, читайте нижче. Лише щоб описати і усвідомити, що ж саме ми зробили і для чого, нам знадобилося 3 місяці роботи.
 
 
 Ідея пиксельной анімації за допомогою іконок, реально чи вигадка?!
Зараз модно збирати картинки Minecraft з кубиків. Тобто, ідея кубиків лего поза світом лего не нова і не забута. Однак реалізацію анімації з іконок подібного масштабу ніхто раніше не проводив — ні в ручну, ні напівавтоматично, ні яким іншим програмним автоматичним шляхом (виставляючи шари в фотошопі або будь-яким іншим способом). Вимоги — максимальна візуальна схожість з вище зазначеної анімацією (вихідної картинкою).
Тобто потрібно впізнаваність, в ідеалі — повна схожість.
 
 Поневіряння проб і помилок
Після неабияк випитого великої кількості кави і зібравшись з духом, почали придумувати анімацію з іконок. Думали вони три дні і три ночі, і нарешті придумали. Але спочатку ні чорта не виходило. Потім теж, поки не народилося.
Потрібно було знайти жертву для збочення, переглянувши сотні коротких роликів знайшли цікаву GIF анімацію на основі епохального мультфільму Simpsons . Далі думати довелося в посиленому режимі. Чим глибше в ліс, тим більше дров — кількість проблем зростала в геометричній прогресії.
 
Насамперед потрібно було отримати максимально якісну картинку з досить дрібної деталізацією. Дозвіл оригінальної картинки в нашому випадку становило незначне 500x281 px. Відповідно перед нами 140500 пікселів. Таким чином, якщо робити картинку з іконок 1 до 1, то картинка мала б складатися з 140 500 іконок. Попросту недоступний нам обчислювальний обсяг (навіть для 16 RAM DDR3 при i7) і обмеження софта. Що з двох, софт або залізо, лягло б першим, досі невідомо. Тому шляхом підбору (3-4 рази пробували із зменшенням кількості іконок на 20 000 — 30 000) було вибрано оптимальне "робоче" дозвіл. Воно зменшено порівняно з оригінальним в 11 разів, відповідно, складалося всього з 12 876 (замість вихідних 140 500) іконок.
Замість 1 пікселя ми підставляли іконку розміром 32х32 px з набір FatCow Farm Fresh . Сумарно ми отримували дозвіл картинки 148 осередків у ширину і 87 у висоту. Множачи кожну величину на 32 px ми отримували розширення картинки до вражаючих 4736х2784 px.
 Хвороба прогресувала…
Програмою для вишивки Stitch Art Easy , — скачати тут відбувається первинне перетворення малюнка в піксельне зображення. Програму теж знайшли не відразу, довелося вибракувати десяток інших тулз. Отримане зображення зберігається в Excel, де 1 осередок = 1 px.
Програма створює ось такий вигляд [малюнок 1], де літерні позначення всередині картинки — це зіставлення колірної гами з вкладкою легенди квітів, буква на зображенні = букві на вкладці легенди квітів (стовпець "@") [малюнок 2]. Наприклад, жовта осередок з буквою С — це 30 рядок на легенді кольорів.
Малюнок отриманий в ході обробки програмою виглядає так
 
 
Рис. 1: Вид картинки в Ексель розкладеної за допомогою програми Stitch Art Easy
 
 
     
No — порядковий номер;
 @ — буква для визначення кольору на зображенні;
 Color — колір або відтінок зі складу палітри ниток;
 Code — цифровий код кольору в палітрі кольорів конкретної моделі ниток;
 Count — кількість пікселів охоплюють даний колір;
 Palette — фірма, виробник ниток муліне.
 
 
 
Рис. 2: Колірна легенда в програмі Stitch Art Easy
 
 
     
10 колірних наборів ниток різних фірм виробників муліне (Palette), вони ж є списками палітр;
 можливість створити свою власну палітру;
 кількість квітів в кожній палітрі фіксоване (наприклад, палітра Paterna Wool має 417 кольорів ниток). Але програма дозволяє закодувати максимально 125 буквено-символьних позначень.
 
Для нашого завдання вирішили використовувати 10 кольорів. Так як іконки були сформовані на 10 колірних груп.
Місяцем раніше ми ще не вміли розставляти іконки по приналежності до кольору. Народився наступний макрос, який працював спільно з ("ковротканной програмою iconset-preview-generator "). Макрос вмів обробляти малюнки прив'язуючи іконку до певного розташування. Місцезнаходження іконки задавалося за допомогою кольору комірки. Вміючи визначати місце розташування іконки за допомогою кольору, вирішено було поліпшити макрос наступною схемою: конкретний колір = відповідна кольором іконка.
 
У ході експлуатації макросу знадобилася конвертація відтінків пройшли фільтр програми для вишивки. Для цього по всій лінійці кольорів (125) Paterna Wool було вручну прописано відповідність 1 з 10 основних кольорів. З макросом можна ознайомитися тут
 
 
Рис. 3: Колірна легенда з зіставленими квітами
 
Макросом замінюємо відтінки на зображенні базовими 10-ма кольорами, що робить зображення ще на порядок гірше ніж було з відтінками. Дивимося [малюнок 4]. Ми не розглядали варіант збільшення базових кольорів за рахунок відтінків, так як ікони не можливо поділити на відтінки вручну, а програмного способу так само не існує. Тому було вирішено шукати інший спосіб створення картинки.
 
 
Рис 4: Малюнок 1 приведений до базових кольорів.
 
Трава вичерпала себе, переходимо на каторжне ручне допилювання.
Після тривалого перекуру було знайдено цікаве рішення. Для робітничо-селянських завдань було вирішено створити картинку безбарвну, тільки з обведеними контурами. Таким чином колір грав другорядну роль, так як його вже додавали вручну в Excel. Варіант створення простого об'єктного контурного малюнка був не прост, довелося пробувати і підбирати різні фільтри фотошопа, для того, щоб не перемальовувати всю картинку.
Перша спроба отримання контуру виглядала наступним чином. Після застосування пункту меню "Фільтр-> Стилізація-> Виділення країв". Ми отримуємо ось такий малюнок 5
 
 
Рис. 5: Застосування фільтру Стилізація-> Виділення країв
 
Після перетворення через програму вишивки, в Excel-е ми бачимо ось таку брудну картинку, [малюнок 6.]
 
 
Рис. 6: Вид картинки після обробки фільтром Стилізація-> Виділення країв у програмі вишивки.
 
Після цього просто спробували конвертувати колір не вносячи жодних ручних правок.
Конвертація відтінків в базові кольори призводить до скоєного провалу, [малюнок 7].
 
 
Рис. 7: Вид картинки після приведення до базових квітам.
 
Після подібного фіаско ми відсунули дану стратегію і взялися переглядати інші варіанти. З'явилася думка про масштабування! Всі задумалися, а чи та ця думка, що нам потрібна?! Вирішено було перевірити.
 
Для перевірки цієї гіпотези ми заново перетворили малюнок, але на цей раз ми не зменшували розмір, як робили це раніше. При цьому ми забули, що жахливу якість перетворених і конвертованих контурів вийшло унаслідок зменшення картинки в 11 разів. Продовжуємо пробувати, нічого не змінюючи, обробляти даний малюнок. З іншого боку вирішено випробувати доступні ресурси комп'ютера, на якому це все зароджувалося. Після отримання картинки в MS Excel ми отримали 3 листа — 3 частини картинки. Дані частини після обробки повинні були скластися у величезний панорамний знімок, причому для обробки тільки 1-го такого фрагмента знадобиться близько 10-15 операцій. Потім необхідно знову склеїти 3 фрагмента назад в 1 малюнок.
 
Планувалося взяти велику картинку і перетворити її в іконочние килим. Здавалося, що іконки будуть настільки дрібні на загальному тлі, що створять єдиний колір.
Заздалегідь повідомляємо, що малюнок з отриманим великою роздільною здатністю (мається на увазі малюнок, який вже створений на основі ікон) не виправдав своїх очікувань. І він практично не читабельний через те, що комп'ютер просто не може обробити такий обсяг картинки.
Для більш наочного прикладу наведемо [малюнок 8] — малюнок не стиснене масштабуванням.
 
 
Рис. 8: Картинка в реальних розмірах.
 
Як видно з [малюнка 8], який сформований за допомогою програми для вишивки і приведений до базових квітам в Excel-е, для обробки великого дозволу нам необхідно або збільшити кількість квітів і додати відтінки до існуючих 10 квітам, або створити менш засмічену картинку, навести контури і привести кольору всередині контурів до єдиного кольором.
 
Але використовувати такі картинки для створення анімації нереально, так як важать вони дуже багато. Одна лише така панорама важить більше 100 Мб. Приклад подібної панорамної картинки
 
  — Панорама .
 Повернення на круги своя…
Після не вірних думок про дозвіл, ми знову повертаємося до думок про контурах і створенні безбарвних картинок. Після дня блукань і пробних обробок прийнято рішення використовувати gif анимашку
 
Поділяємо анімацію на кадри будь-яким онлайн сервісом .;
Отримані кадри приводимо до затурного увазі;
 
Беремо вихідний кадр, [малюнок 9].
 
 
Рис. 9: Оригінальний кадр.
 
Далі необхідно очистити кожен кадр від сміттєвих пікселів. Так як ми отримали картинку з gif, то при цьому ми отримали і все сміття, який можемо спостерігати на [малюнку 10].
 
 
Рис. 10: Частина вихідного кадру в наближеному варіанті.
 
Виходячи з декількох позицій обробок для отримання контурів було прийнято використовувати фільтр заливки сірим. У фотошопі це меню Зображення -> корекція -> Знебарвити (Shift + Ctrl + U) [малюнок 11].
 
 
Рис. 11: Застосування фільтру Зображення -> Корекція -> Знебарвити
 
Далі відбувається виділення країв, меню Фільтр — Стилізація — Виділення країв [рисунок 12].
 
 
Рис. 12: Застосування фільтру Стилізація — Виділення країв
 
Після виділення країв, чарівною паличкою чистяться всі області [малюнок 13].
 
 
Рис. 13: Застосування фільтру Зображення -> Корекція -> Знебарвити
 
Далі зафарбовували єдиними квітами без відтінків [малюнок 14]
 
 
Рис. 14: Ручна обробка картинки.
 
Хоча пізніше відмовилися від зафарбовування кольором, і залишили лише контура. Чому? Тому що, при проходженні через програму вишивки накладається фільтр і доводиться докладати додаткових зусиль для повернення картинки до первісного вигляду.
 
Одним з етапів обробки був підбір кольорів з ручною коригуванням;
 
Робота макросу заміни квітів описана на початку статті
На [малюнку 15] представлений фрагмент великого малюнка. Навіть по одному тільки контуру видно, що через заломлення квітів відбувається розмноження відтінків. Що несе за собою додаткові обробки.
 
Як бачимо на [малюнку 15] кольорів досить багато. Однак на такому малюнку, ми можемо чітко виділити всі елементи, видалити не значимі і підкоригувати колір по потребі. Але обробляти їх не так просто, адже потім доведеться привести до базових квітам, а значить все поміняється, потрібно думати далі.
Рис. 15: Отримання картинки як є.
 
На [малюнку 16] той же кадр з обробкою в сірому, зображення виходить трохи згладжена, але теж не особливо підходить.
 
 
Рис. 16: Отримання картинки в сірому.
 
[Малюнок 17] після виділення контуру. На дрібних деталях фільтр марний, обриси зливаються.
 
 
Рис. 17: Вид малюнка після виділення контуру.
 
[Малюнок 18] видалення зайвої фонової складової. Як бачимо залишилися лише кордони і дрібне сміття.
 
 
Рис. 18: Вид малюнка після видалення зайвої фонової складової.
 
[Малюнок 19] ручна обробка і заливка кольором.
 
 
Рис. 19: Ручна обробка.
 
Заміна квітів на іконки;
 
Підставляння іконок замість кольорових осередків. Спочатку використовувалося 2 розміру іконок 16х16 і 32х32, але так як навіть при великому збільшенні виглядало не гарно, а головне — виходило не зрозуміло [малюнок 20].
 
 
Рис. 20: Малюнок після заміни осередків на іконки.
 
Те що у нас вийшло, нас не вразило і продовжуючи обробку далі ми залишили тільки іконки розміром 32х32 з межіконочним відстанню в 3 px, а після деякого розгляду малюнка під іншим кутом, спробували зовсім без нього. Підсумок виявився жахливий [малюнок 21].
 
 Рис. 21: Спроба № 1 вплинути на візуальне сприйняття.
 
Не добившись необхідного результату (іконки сильно "злиплися"), ми експериментували далі. Було знайдено рішення вставити однопиксельний пробіл між осередками / іконками. Стало набагато краще [малюнок 22].
 
 
Рис. 22: Спроба № 2 вплинути на візуальне сприйняття.
 
Однак і в такому ракурсі все зливалося і було негарно. Вирішили для посилення візуального сприйняття видалити іконки, які були частиною фонового зображення інтер'єру. А так само додати фонову підкладку під іконки. Це дало шуканий ефект. Фінальний результат на [малюнку 23].
 
 
Рис. 23: Фінальний результат.
 
Створення анімації відбувається за допомогою програми imagemagick. Для створення анімації досить перебуваючи в папці з кадрами ввести команду
c:\Gif_ani>convert -delay 40 -loop 0 00*.png Full_animation.gif
докладніше читати тут
 Підіб'ємо підсумки роботи:
Сподіваюся описане вище було досить детально і все ж досить захоплюючим. Можливо десь були допущені помилки у формуванні якихось доводів, просимо пробачити.
Сподіваємося Ви отримали заряд бадьорості та не захочете самі повторити подібне і зрозумієте, що цим займатися не слід.
 
 
     
Підсумок отриманої роботи — № 1, анімація Сімпсони, 1-й варіант, іконки 32х32
 Підсумок отриманої роботи — № 2, анімація Сімпсони, остання версія , іконки 16х16 тривалість 0:59
 Як це було — № 3, покрокова обробка малюнків (ручна обробка)
 Як це було 2 — № 4, покрокова обробка малюнків (один з видів автоматизації)
 
 
 
 
 Всім дякую за увагу!
 
До цього кращою статтею була Талмуд за формулами в Google SpreadSheet , але тепер все інакше. Тепер у нас новий хіт.

  
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.