Передзахист_Близнюк_v2

1.

Циклова комісія комп’ютерної інженерії та інформаційних технологій
Вебзастосунок для інтерактивної візуалізації
алгоритмів
Кваліфікаційна робота
Група №2П-22
Володимир Близнюк
Станіслав МАРЧЕНКО
11.06.2026
Черкаси 2026

2.

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

3.

Мета роботи
Проаналізувати, спроєктувати та імплементувати вебзастосунок для інтерактивної візуалізації алгоритмів
сортування, пошуку та базових алгоритмів на графах з використанням сучасних frontend-технологій.
Завдання
1. Проаналізувати існуючі методи візуалізації алгоритмів та виявити їх недоліки.
2. Спроєктувати зручний UI/UX інтерфейс для керування кроками алгоритму.
3. Розробити програмну логіку для покрокового виконання та відображення станів даних.
4. Реалізувати набір базових алгоритмів (наприклад, Bubble) та їх графічне представлення.
5. Розгорнути проєкт та протестувати коректність візуалізації на різних масивах даних.

4.

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

5.

Розділ 1 Огляд предметної області
У першому розділі було визначено сфери застосування інтерактивної візуалізації алгоритмів у навчанні та
розробці програмного забезпечення. Розглянуто методи покрокового аналізу обчислень за допомогою
колірного й просторового кодування станів на екрані. Описано базові математичні правила для оцінки
швидкості та ефективності сортування, роботи з графами та іншими структурами даних.

6.

Розділ 1 Огляд предметної області
Розглянуто критерії оцінювання якості систем візуалізації та сформовано класифікацію
метрик їхньої ефективності. Описано вимоги до правильного розташування елементів
на екрані задля зниження розумового навантаження на користувача. Визначено
оптимальну швидкість анімацій для комфортного сприйняття змін, а також вимоги до
зручного й гнучкого керування процесом.

7.

Розділ 1 Огляд предметної області
Проведено порівняльний аналіз існуючих платформ для візуалізації алгоритмів та виявлено їхні основні
недоліки, такі як застарілий інтерфейс або обмежений функціонал. На основі цього сформульовано чіткі
вимоги та поставлено задачу на розробку нового вебзастосунку. Продукт поєднуватиме високу
продуктивність, інтуїтивний дизайн та гнучке керування процесом навчання на базі бібліотеки React.js.

8.

Розділ 1 Огляд предметної
області
№ Тип алгоритму
Приклад алгоритму
Об'єкти візуалізації
Ключові візуальні акценти
1 Сортування
Bubble / Quick Sort
Масив (стовпці)
Анімація Swap, колірна індикація порівняння та відсортованих
зон.
2 Пошук
Binary Search
Масив / Дерево
Візуальне відсікання неактивних областей, фокус на медіані
(mid).
3 Графи (обхід)
BFS / DFS
Вузли та ребра
Зміна кольору відвіданих вершин, візуалізація стека/черги в
реальному часі.
4 Графи (шляхи)
Алгоритм Дейкстри
Зважений граф
Підсвічування найкоротшого шляху, динамічне відображення
ваги біля вузлів.
5 Структури даних
Binary Search Tree
Ієрархічне дерево
Анімація додавання вузла, балансування дерева, візуалізація
вказівників (pointers).
Динамічне
програмування
Задача про рюкзак
Таблиця (матриця)
Покрокове заповнення комірок, стрілки залежностей між
підзадачами.
Convex Hull
Точки на площині
Побудова периметра, анімація "сканування" площини лінією.
6
7 Геометричні
8 Рядкові
Пошук підрядка
Текстові стрічки
Зміщення вікна пошуку, підсвічування збігів символів, таблиця
Систематизація
методів візуалізації
залежно від типу
алгоритму

9.

Розділ 2 Проєктування та
реалізація Вебзастосунку
Обґрунтовано функціональні вимоги до вебзастосунку
та обрано технологічний стек (React.js, Tailwind CSS,
Vite). Це дозволило створити швидку компонентну
архітектуру для плавного відтворення анімацій.
Рисунок 1 - Компонентна
архітектура та потік даних
вебзастосунку

10.

Розділ 2 Проєктування та реалізація Вебзастосунку
Спроєктовано логіку взаємодії користувача із системою та реалізовано відповідний веб-інтерфейс застосунку
Рисунок 2 - Діаграма прецедентів UML та
інтерфейс користувача розробленого
застосунку

11.

Розділ 2 Проєктування та
реалізація Вебзастосунку
Відео 2 - Інтерфейс модуля візуалізації алгоритмів
сортування з інтерактивним трекером коду

12.

Розділ 2 Проєктування та
реалізація Вебзастосунку
Візуалізація алгоритмів реалізована через асинхронний
конвеєр обчислень. Буферизація кроків у visitedNodes
забезпечує плавність інтерфейсу (60 FPS) з можливістю
паузи та зміни швидкості.
Рисунок 3 – Комплекс UML-діаграм та блок-схем
проєктування логіки застосунку

13.

Розділ 3 Тестування й супровід програмного
продукту
Для перевірки якості вебзастосунку використано інструменти Jest, React Testing Library, та Lighthouse. Це
дозволило підтвердити коректність логіки сортування, стабільність інтерфейсу та надійність
мультимодального відгуку при роботі з даними.

14.

Розділ 3 Тестування й супровід програмного
продукту
Було проведено комплексне тестування вебзастосунку за допомогою Jest, React Testing Library, Google
Lighthouse на відповідність усіх функціональних вимог до його реальної поведінки, стабільність інтерфейсу,
продуктивність та якість коду.

15.

Розділ 3 Тестування й супровід
програмного продукту

16.

ВИСНОВКИ
• На основі проведеного аналізу існуючих рішень розроблено концепцію інтерактивної візуалізації, яка усуває
проблему статичності навчальних матеріалів шляхом впровадження динамічного графічного та звукового
відгуку.
• Спроектовано та реалізовано сучасну архітектуру застосунку на базі бібліотеки React та інструментарію Vite,
що забезпечило високу модульність системи та швидку обробку станів масивів даних.
• Розроблено інтуїтивно зрозумілий UI/UX інтерфейс, який дозволяє гнучко керувати процесом візуалізації:
змінювати розмір вхідних даних, регулювати швидкість виконання та відстежувати зміни в реальному часі.
• Реалізовано комплекс алгоритмів сортування та пошуку з інтеграцією Web Audio API, що забезпечує
мультимодальне сприйняття інформації та сприяє кращому засвоєнню алгоритмічної складової.
• Проведене оцінювання якості засобами Jest та RTL, а також аудит Google Lighthouse що підтвердили
коректність програмної реалізації, стабільність системи та її відповідність стандартам сучасного освітнього
ПЗ.

17.

Дякую за увагу!
Близнюк Володимир
Студент групи 2П-22
iterbleiker1@gmail.com