Живо лице от една рисунка

01Какво ще научиш

• Защо произвеждаш части, а не състояния — и как пет състояния стават около петнайсет малки файла.
• Защо генерираните кадри не се подравняват и защо слоевете се режат от един-единствен кадър.
• Как се мери геометрията, преди да режеш, и защо 3 пиксела разлика имат значение.
• Ригът „око отзад, лице отпред“ — как да подрежеш слой, под който няма нарисувано нищо.
• Кое не се реже, а се рисува: устата.

02Преди да започнеш

• Python с библиотеката Pillow 🔒 локално (рязане, огледало, наслагване на PNG със прозрачност).
• Няколко PNG кадъра с прозрачност (RGBA) на една и съща глава — например покой, говорене, слушане, мислене, гледане.
• Право да ползваш рисунката: твоя е, или имаш лиценз. Не работи върху чужди защитени герои; ако кадрите са от генератор на изображения 🌐 глобален, провери условията му за ползване.
• Копие на оригиналите — те не се пипат, режеш само от копията.

03Стъпки

1. Части, не състояния

   Изходният материал са пет пълни PNG кадъра на една и съща глава. Между тях се менят само три неща: цветът, очите и устата, и надграденият знак. Всичко останало е една база, изрисувана пет пъти.

   Обръщаме сметката: една база + очи + клепачи + уста + знак × цвят от CSS — вместо пет пълни изображения, около 15 малки файла. Ново състояние струва един цвят и един знак, не нов рендер.

   ✅

   Преносимо правило

   Не произвеждай състояния — произвеждай частите, от които се сглобяват. Пет състояния са продукт; петнайсет части са система.

2. Кадрите не се подравняват

   Допускането, че петте кадъра са пиксел-подравнени, е грешно. Мерените силуети (след изрязване по прозрачността):

   Кадър	Размер	Силует	Съвпадение с базата
   покой (база)	1254×1254	889×1113	—
   говорене	1312×1199	925×1148	96,7%
   мислене	1221×1289	1054×1224	96,7%
   гледане	1199×1312	1172×1229	85,3%
   слушане	1173×1341	1200×1192	76,9%

   ⚠️

   Свойство на генератора, не пропуск

   Два независимо генерирани кадъра на практика никога не съвпадат пиксел в пиксел — дори при заявка „същото, само промени еди-какво“. Затова режи слоевете от ЕДИН кадър (базовия), не от смес. Това е наше наблюдение върху един набор кадри, не твърдение за всички генератори.

3. Мери, преди да режеш

   Геометрията на всяка черта се мери, не се отгатва, и живее на едно място — файл geom.json, откъдето кодът я чете. В нашата рисунка: ирис r≈36 при (462, 692) и (786, 693); зеница r≈23; ос на симетрия x = 624, докато центърът на изображението е 627; устни x 489–761, шев y 942.

   geom.json · пример за формата (стойности от нашата рисунка)копирай

   {
     "iris_centres": [[462, 692], [786, 693]],
     "iris_radius": 36,
     "pupil_radius": 23,
     "axis_x": 624,
     "lips_x_range": [489, 761],
     "seam_y": 942
   }

   📏

   3-пикселовата разлика има смисъл

   Оста между ирисите (x = 624) и центърът (x = 627) не съвпадат. Именно тази разлика прави огледалния ляв слой точния десен. Приемеш ли 627 за ос, очите изглеждат кривогледи. Твоите числа ще са други — важи принципът: измери оста.

   По избор можеш да ползваш автоматичен сегментатор, който предлага маски — например Segment Anything на Meta 🔒 локално, чийто код и модел са под лиценз Apache 2.0. Ние не сме го пробвали за този урок; приеми маските като чернова и ги прегледай на око.

4. Ригът „око отзад, лице отпред“

   Първата идея — „изрежи ириса и го плъзгай“ — не работи: под ириса не е нарисувано нищо, плъзгането отваря дупка. Работещото решение: цяло око отзад, което се плъзга свободно, и лице с прозорци в прозрачността отгоре, което го подрязва до формата на цепката. Нищо не се дорисува — горният слой скрива излишъка. Редът е: очи → клепачи → лице отпред.

   В браузъра подрязването е обикновено наслагване на PNG със прозрачност; за по-сложни форми има и CSS mask-image.

   ✅

   Преносима поука

   Когато слой не може да се движи, защото под него няма нищо, питай не „как да дорисувам под него“, а „какво да сложа ОТГОРЕ, което да го подрязва“.

5. Кое НЕ се реже: устата

   Устните са затворени и плътни; зад тях няма нарисувана кухина, която подрязването да разкрие. Отварянето на устата не се изрязва — рисува се. Затова устата е единственият слой, вързан за нов рендер; останалите шест се правят без генератор.

   🔁

   Кодът не чака изкуството

   Кодът приема четири степени на отвореност според силата на звука и пада към наличния кадър, докато другите дойдат. Непълен комплект работи още днес.
   bash · възпроизвеждане (скриптовете се пишат сам — не са публикувани)копирай

   # Оригиналите не се пипат; работиш върху копие
   cd <папка-на-проекта>
   python cut_layers.py    # → layers/ (по geom.json)
   python build_page.py    # → самостоятелен HTML с вградени слоеве

04Проверка

05Какво следва

06Източници

1. Pillow: Image — документация на alpha_composite и работата с RGBA изображения.
2. MDN: mask-image — подрязване на елемент по маска в CSS.
3. Segment Anything (Meta) — сегментатор с маски; кодът и моделът са под Apache 2.0 (по README на проекта).
4. Собствени измервания на КАГАМИ върху пет генерирани кадъра на една глава (таблицата и координатите в урока).