Интерактивные часы Aura

Интерактивные часы на p5.js

Интерактивные часы Aura на базе библиотеки p5.js представляют собой уникальный визуальный проект, который объединяет точность хронометража с художественной визуализацией. Технология p5.js позволяет создавать динамические графические элементы прямо в браузере без необходимости установки дополнительных плагинов. Каждая частица на экране движется по векторному полю, создавая эффект живого, дышащего полотна вокруг цифрового табло.

Как работают particle-часы

В основе визуализации лежит алгоритм шумового поля Перлина. Сотни частиц следуют за векторами потока, которые непрерывно меняются с течением времени. При нажатии курсором происходит взрыв цвета — расходящиеся кольца расширяются и затухают, создавая эффект фейерверка. Пользователь может переключать между пятью темами оформления: Aura, Cosmos, Forest, Sunset и Ice, каждая из которых использует собственную цветовую палитру в HSB-пространстве.

Часы отображают точное время в часовом поясе UTC+5, что соответствует тюменскому времени. Секунды показываются в отдельном круглом бейдже над основным табло, который пульсирует при каждом тике. Это создаёт ритмичный визуальный эффект, синхронизированный с реальным ходом времени. Точность обеспечивается синхронизацией с системными часами устройства, которые, в свою очередь, сверяются с NTP-серверами.

Практическое применение

Интерактивные часы Aura идеально подходят для следующих сценариев использования. Во-первых, их можно вывести на полный экран и использовать в качестве заставки на телевизорах, мониторах или проекторах в публичных пространствах — холлах, конференц-залах, учебных аудиториях. Во-вторых, страница может служить учебным пособием для изучения Creative Coding и визуального программирования на JavaScript. В-третьих, часы функциональны как инструмент отображения точного времени с секундами.

Полноэкранный режим активируется кнопкой в верхнем правом углу и работает во всех современных браузерах, поддерживающих Fullscreen API. На мобильных устройствах поддерживается сенсорное управление: касание экрана вызывает тот же эффект взрыва цвета, что и клик мышью на десктопе. Плотность частиц можно увеличивать кнопкой, что усиливает визуальный эффект на мощных устройствах.

Технические детали реализации

Проект построен на библиотеке p5.js версии 1.x. Используется HSB-цветовая модель для плавных переходов между оттенками. Векторное поле рассчитывается на сетке ячеек размером 22 пикселя, что обеспечивает баланс между детализацией и производительностью. Базовое количество частиц — 220, но пользователь может увеличить его до 400. Каждая частица имеет собственную скорость, размер и оттенок, что создаёт ощущение глубины и многослойности композиции.

Рендеринг выполняется на canvas-элементе, который автоматически масштабируется под размер окна. При изменении размеров окна происходит перерасчёт сетки векторного поля. Текст часов отрисовывается с эффектом свечения через shadowBlur, что создаёт эффект неонового табло. Дата и день недели отображаются под основным временем в более мелком шрифте.

Часовой пояс UTC+5 (МСК+2) постоянен для Тюмени с 2014 года, когда в России был окончательно отменён переход на летнее время. Это означает, что разница с Москвой всегда составляет 2 часа, с Калининградом — 3 часа, с Самарой — 0 часов. Тюмень находится в одной временной зоне с Екатеринбургом, Челябинском, Уфой, Пермью и Курганом.

Совместимость и производительность

Часы Aura тестировались во всех современных браузерах: Chrome, Firefox, Safari, Edge, Opera. На мобильных устройствах производительность может снижаться при большом количестве частиц, поэтому по умолчанию включён консервативный режим с 220 частицами. Библиотека p5.js весит около 800 КБ и загружается с локального сервера, что обеспечивает быстрый запуск. Все вычисления выполняются на стороне клиента, серверные запросы не требуются после загрузки страницы.

Обновлено: 2026-08-19.