УДК 004.42:004.94

ПРОГРАМНЕ ЗАБЕЗПЕЧЕННЯ РЕДАКТОРА ДВОМІРНОЇ

ГРАФІКИ ТА АНІМАЦІЇ

Герасименко В., науковий керівник Недьошев М.В.

Актуальність теми. Сучасні засоби створення двомірної графіки та покадрової анімації часто потребують встановлення спеціалізованого програмного забезпечення, що ускладнює швидкий початок роботи, доступ до проєкту з різних пристроїв і колективне редагування. Тому розроблення веборієнтованого редактора, який поєднує засоби малювання, керування кадрами, шари та спільну роботу в реальному часі, є актуальним прикладним завданням.

Об’єкт дослідження. Процес створення та редагування двомірної графіки і покадрової анімації у вебсередовищі.

Предмет дослідження. Методи, моделі та програмні засоби реалізації вебредактора, що підтримує роботу з кадрами, шарами, засобами малювання, спільним доступом і експортом результатів.

Мета дослідження. Підвищення доступності та ефективності створення двомірної графіки й анімації шляхом розроблення вебзастосунку з інтерактивним редактором і функціями колективної взаємодії.

Завдання дослідження. Проаналізувати вимоги до редактора; спроєктувати клієнт-серверну архітектуру; реалізувати модулі кадрів і шарів; забезпечити спільний доступ, presence та блокування конфліктних змін; реалізувати експорт анімації та оцінити практичну придатність системи.

Розроблена система реалізована як клієнт-серверний вебзастосунок. Серверна частина побудована на Django з ASGI-розгортанням, що дає змогу поєднати HTTP-запити та двосторонній обмін повідомленнями через WebSocket. Для зберігання даних використано PostgreSQL, а для передавання подій у реальному часі — Redis і Channels. Клієнтська частина працює безпосередньо у браузері та використовує canvas-орієнтований інтерфейс, який забезпечує малювання, керування кадрами, шарами і параметрами проєкту. На рис. 1 наведено UML-схему основних варіантів використання та інтерфейс редактора.

Рис. 1 – Узагальнена архітектура вебредактора двомірної графіки та анімації

Модель даних охоплює сутності проєкту, кадру, шару, учасника, запрошення до спільної роботи, сесії присутності користувача та блокувань кадру або шару. Така структура забезпечує збереження творчого результату, розмежування прав доступу та контроль колективного редагування. Для власника проєкту передбачено надсилання запрошень із ролями editor і viewer, а для підключених користувачів — відстеження активної сесії, поточного кадру та статусу участі. Підсистема блокувань запобігає конфліктним змінам одного й того самого елемента.

Рис. 2 – Інтерфейс вебредактора двомірної графіки й анімації

Функціональність редактора орієнтована на типові дії, необхідні для створення двомірної анімації. У системі реалізовано інструменти пензля, гумки, заливки, піпетки, побудови лінії, прямокутника та еліпса, режими панорамування і виділення, палітру кольорів, історію дій, список шарів і таймлайн кадрів. Користувач може додавати, дублювати, видаляти та впорядковувати кадри, змінювати властивості шару, перемикати видимість і прозорість, а також користуватися режимом onion-skin для перегляду сусідніх кадрів.

Важливою перевагою системи є підтримка взаємодії у реальному часі. Через WebSocket передаються події присутності, переходи між кадрами, блокування шарів і кадрів та допоміжні сигнали спільного перегляду процесу редагування. Реалізовано експорт результатів у форматах GIF та PNG sequence у ZIP-архіві. Отже, розроблене програмне забезпечення забезпечує доступне браузерне середовище для створення двомірної графіки та анімації і має практичну цінність для навчання, студентських проєктів і невеликих творчих команд.

СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ

1. Django documentation [Електронний ресурс]. – Режим доступу до ресурсу: https://docs.djangoproject.com/

2. Channels documentation [Електронний ресурс]. – Режим доступу до ресурсу: https://channels.readthedocs.io/

3. Canvas API [Електронний ресурс] // MDN Web Docs. – Режим доступу до ресурсу: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API

4. PostgreSQL documentation [Електронний ресурс]. – Режим доступу до ресурсу: https://www.postgresql.org/docs/