55 симуляцій онлайн
Усі симуляції проіндексовано у simulations.json з метаданими, тегами, складністю та полями статусу.
Дорожня Карта 2026
Публічний план розробки 3D Симуляцій у браузері. Функції згруповано за кварталами — статус оновлюється в міру виконання роботи.
Завершено
Service Worker + PWA
Стратегія CDN «cache-first», офлайн-сторінка-замінник, HTML у режимі stale-while-revalidate. PWA встановлюється.
ARIA на всіх полотнах + повзунках
aria-label/role=img на кожному полотні, aria-valuemin/max/now на всіх 164 повзунках діапазону, aria-describedby на мітках.
Масштабування HiDPI / Retina
Масштабування полотна за devicePixelRatio у всіх 55 симуляціях — як setPixelRatio у Three.js, так і дескриптор властивості Canvas 2D.
Повні SEO-метатеги + JSON-LD
og:image, Twitter card, canonical, BreadcrumbList, структуровані дані SoftwareApplication / Article / CollectionPage на всіх сторінках.
Глобальний пошук з індексом
Нечіткий пошук на стороні клієнта по 88 записах (симуляції + статті + категорії). Запити, якими можна ділитися через URL, нещодавні пошуки, фільтр за типом.
У роботі
23 статті про алгоритми
Поглиблені статті про SPH, N тіл, Boids, Лоренца, «Життя» Конвея, хвильові рівняння та інше з математичними формулами та прикладами коду.
Журнал змін + RSS-стрічка
Публічна сторінка історії версій з кольоровими бейджами та хронологією. RSS-стрічка за адресою /changelog/feed.xml.
Перенесено на Q2
Процедурна текстура піску
Процедурна текстура на основі Canvas для симуляції піску зі зернистістю та варіацією кольору.
Прев'ю-мініатюри симуляцій
WebP-скриншоти 1200×630 для og:image, мініатюри 400×300 для карток. Скрипт автозахоплення на Puppeteer.
У роботі
Сторінки Дорожньої карти, Про Нас & Внески
Публічна дорожня карта (ця сторінка), сторінка «Про Нас» з оглядом проєкту, посібник із внесків для нових симуляцій.
Аудит контрастності кольорів WCAG
Перевірка, що весь текст відповідає коефіцієнту контрастності ≥ 4.5:1 у темній та світлій темах за допомогою axe DevTools.
Заплановано
Редактор Пісочниці
Браузерний редактор коду WebGL (CodeMirror 6) з живим переглядом, підсвічуванням синтаксису та URL-адресами, якими можна ділитися.
30 додаткових статей
Розширення бібліотеки контенту туторіалами (WebGL-шейдери, фізичні рушії) та довідковими сторінками (формули, глосарій).
Web Workers для SPH + N тіл
Винесення фізичних обчислень O(N²) з головного потоку, щоб утримувати інтерфейс на 60 FPS за великої кількості часток.
Скриншоти-мініатюри симуляцій
Скрипт на Puppeteer для автозахоплення WebP-прев'ю 1200×630 для og:image та мініатюр карток на всіх 55 симуляціях.
Ідеї
API вбудовування через iframe
Мінімальні версії кожної симуляції для вбудовування на сторонні сайти. Налаштування через параметри URL (кількість часток, тема тощо).
10 нових симуляцій
Кандидати: квантовий гармонічний осцилятор, подвійна щілина, лінії електричного поля, дифузія тепла, діаграма Вороного, рельєф на шумі Перліна.
Галерея-вітрина
Masonry-сітка з найкращими кадрами симуляцій з переглядачем lightbox та кнопкою «зробити скриншот» на кожній симуляції.
Заплановано
Автоматизація Lighthouse CI
CI pipeline для запуску Lighthouse на кожному пуші — блокування злиття за Performance ≥ 90, Accessibility ≥ 90, SEO ≥ 95.
Симуляції категорії для дітей
6 категорій симуляцій, відповідних за віком (kids-magic, animals, math-art, space-kids, colors-light, build-play) зі спрощеним інтерфейсом та поясненнями.
Barnes-Hut для N тіл
Деревний алгоритм O(N log N) на заміну повного перебору O(N²) — дозволяє N > 2000 на 60 FPS на інтегрованому GPU.
Ідеї
Обчислювальні шейдери WebGPU
Перенесення рідинного SPH та N тіл на WebGPU Compute для 10-кратного прискорення в підтримуваних браузерах (Chrome 113+).
HDRI-скайбокс для фізики авто
Еквіректангулярна мапа оточення для відображень на кузові авто та постобробка з розмиттям руху.
Фізичні челенджі
Завдання з програмування з попередньо заповненими сніпетами Пісочниці, підказками та рішеннями. Прогрес зберігається у localStorage.
Майбутнє
Рендеринг через OffscreenCanvas
Запуск Three.js WebGLRenderer у Web Worker через OffscreenCanvas для повної відсутності підгальмовувань головного потоку.
Статичні скриншоти для зменшеного руху
Коли встановлено prefers-reduced-motion, показувати статичний скриншот полотна з текстовим описом замість живої анімації.