Dynamic particle interactive visualization algorithms to enhance user engagement
Алгоритмы интерактивной визуализации динамических частиц для повышения вовлеченности пользователя
Цель: Разработка математической модели и программной реализации алгоритмов интерактивной визуализации динамических частиц на базе Canvas API для повышения вовлеченности пользователя.
Методы: Использованы методы векторной нормализации для управления движением частиц, модульной арифметики для обработки границ холста и алгоритм контроля частоты кадров для оптимизации производительности. Программная реализация выполнена на языке TypeScript с использованием Canvas API.
Результаты: Разработана объектно-ориентированная модель системы частиц, реализован алгоритм взаимодействия с курсором через векторную нормализацию. Проведённые тесты подтверждают стабильную работу системы при 10 000 частиц с частотой 45–55 FPS, а также эффективность контроля частоты кадров для снижения нагрузки на пользовательское устройство.
Выводы: Предложенные алгоритмические решения демонстрируют высокую производительность и могут быть использованы при создании интерактивных веб-приложений, требующих динамической 2D-визуализации с большим количеством независимых объектов для повышения вовлеченности пользователя.
Object: Development of a mathematical model and software implementation of an interactive visualization algorithms for dynamic particles based on the Canvas API to improve user engagement.
Methods: Vector normalization methods for particle motion control, modular arithmetic for canvas boundary handling, and a frame rate control algorithm for performance optimization were used. The software implementation is written in TypeScript using the Canvas API.
Findings: An object-oriented model of the particle system was developed, and an algorithm for mouse cursor interaction through vector normalization was implemented. Tests confirm stable system operation at 10,000 particles with 45–55 FPS, as well as the effectiveness of frame rate control for reducing the load on the user device.
Conclusions: The proposed algorithmic solutions demonstrate high performance and can be used in the development of interactive web applications requiring dynamic 2D visualization with a large number of independent objects to enhance user engagement.
интерактивная визуализация; динамические частицы; Canvas API; векторная нормализация; модульная арифметика; оптимизация производительности.
interactive visualization; dynamic particles; Canvas API; vector normalization; modular arithmetic; performance optimization.
ВВЕДЕНИЕ
Современные веб-технологии активно развиваются, что приводит к повышению требований пользователей не только к функциональности, но также к визуальному оформлению интерфейсов [1]. Интерактивные фоны, анимированные переходы, динамические эффекты, реагирующие на движения курсора, становятся неотъемлемой частью успешных цифровых продуктов.
Внимание молодой аудитории, которая является основным будущим потребителем цифровых продуктов, в условиях информационного перенасыщения легче удерживать динамическими элементами, нежели статичным контентом [2, 3]. Исследования показывают, что среднее время концентрации внимания у представителей новых поколений составляет около 8 секунд, что требует от разработчиков интерфейсов использования эффективных визуальных инструментов для привлечения и удержания внимания [4].
На рынке существуют решения, упрощающие создание подобных эффектов [5-7]. Однако они предлагают ограниченный набор поведений, зачастую не ориентированных на алгоритмическую сложность, не предоставляют облачного хранилища для сохранения и обмена конфигурациями, а также привязаны к конкретным платформам.
Таким образом, возникает противоречие между потребностью рынка в уникальных визуальных решениях и отсутствием инструмента, сочетающего алгоритмическую базу с удобным управлением. Разработка веб-сервиса с открытой библиотекой и модульной архитектурой поведений является актуальной задачей [8].
Актуальность разработки интерактивных систем на основе частиц подтверждается недавними публикациями, в частности работой С. Тенкхоффа и соавторов, представленной на конференции Eurographics 2025, где описывается платформа для симуляции частиц в браузере с возможностью настройки параметров в реальном времени [9].
Настоящая статья посвящена математической модели и программной реализации алгоритмов интерактивной визуализации динамических частиц, которые лягут в основу создаваемой библиотеки.
Материалы и методы
Для визуализации выбран Canvas API как сбалансированное решение, сочетающее производительность при обработке большого числа объектов, гибкость работы с пикселями и кроссбраузерную поддержку, в отличие от более сложного WebGL и менее производительного SVG.
Для реализации выбран TypeScript, обеспечивающий строгую типизацию математических вычислений, и requestAnimationFrame для синхронизации анимации с частотой обновления экрана.
Тестирование производительности проводилось на устройстве с процессором Intel Core i5-12450H и GPU Intel ARC Graphics с использованием встроенного инструмента Chrome DevTools Performance Tab, версии браузера 149.0.7827.104. Измерялись средняя частота кадров FPS и время отрисовки одного кадра при различном количестве частиц N: 1000, 5000, 10000, 15000.
References
1. Sutcliffe A. Designing for User Engagement: Aesthetic and Attractive User Interfaces / A. Sutcliffe. – Cham : Springer Nature, 2022. – 47 p.
2. Prensky M. Digital Natives, Digital Immigrants / M. Prensky // On the Horizon. – 2001. – Vol. 9, No. 5. – P. 1–6.
3. Twenge J.M. iGen: Why Today's Super-Connected Kids Are Growing Up Less Rebellious, More Tolerant, Less Happy – and Completely Unprepared for Adulthood / J.M. Twenge. – New York : Atria Books, 2017. – 352 p.
4. Microsoft Corp. Attention Spans. – URL: https://sherpapg.com/wp-content/uploads/2017/12/MAS.pdf (дата обращения: 01.06.2026).
5. Garreau V. Particles.js [Электронный ресурс]. – URL: https://vincentgarreau.com/particles.js/ (дата обращения: 03.06.2026).
6. Framer [Электронный ресурс]. – URL: https://www.framer.com (дата обращения: 03.06.2026).
7. ReactBits [Электронный ресурс]. – URL: https://www.reactbits.dev (дата обращения: 03.06.2026).
8. Bruni M. Why everyone should stop using particles.js right now [Электронный ресурс]. – URL: https://dev.to/tsparticles/why-everyone-should-stop-using-particlesjs-right-now-5eb6 (дата обращения: 03.06.2026).
9. Tenckhoff S., Stauss S., Neumann F. Interactive Particle System with Integrated Marching Cubes Algorithm // Eurographics 2025 – Education Papers / ed. by R. Kuffner dos Anjos, K. Rodriguez Echavarria. – London : The Eurographics Association, 2025. – 3 p. – DOI: 10.2312/eged.20251011.
10. Reeves W.T. Particle Systems – A Technique for Modeling a Class of Fuzzy Objects / W.T. Reeves // ACM Transactions on Graphics. – 1983. – Vol. 2, No. 2. – P. 91–108.
11. Sandin J. Optimering av partikelsystem för webben : En jämförelse mellan objektorienterad och dataorienterad design på webben : Bachelor's thesis. – Skövde : Högskolan i Skövde, 2023. – 45 p. – URL: http://urn.kb.se/resolve?urn=urn:nbn:se:his:diva-22798 (дата обращения: 05.06.2026).
12. Литовский В.А. Визуализация взрывов с помощью систем частиц // Молодой учёный. – 2020. – № 25 (315). – С. 108–112.