345 симуляцій — відносність, топологія, екологія та рух до повного наукового охоплення

Ми щойно подолали позначку в 345 інтерактивних браузерних симуляцій, які охоплюють понад 75 категорій. Цей девлог розповідає про спринт, який привів нас сюди: категорію відносності, побудовану з нуля, перші симуляції з топології, нові колекції з екології та алгоритмів і технічні рішення, які дозволили команді з однієї людини випускати три симуляції на день без етапу збірки.

345
інтерактивних симуляцій
75+
STEM-категорій
1364
сторінок у мапі сайту

Що змінилося за цей спринт

Стрибок з 300 до 345 симуляцій зайняв близько шести тижнів і став найрізноманітнішим за категоріями спринтом на цей момент. Попередні спринти зазвичай поглиблювали наявні категорії — більше фізики, більше хімії, більше космосу. Цей спринт відкрив одинадцять нових областей категорій, які раніше не були охоплені взагалі, закривши прогалини, чітко видимі в аналізі «повного спектра», який ми провели у лютому.

Основою рушійної ідеї була проста метрика: скільки з основних університетських STEM-дисциплін не мали жодної симуляції? Відповідь була незручною. Спеціальна теорія відносності мала нуль, попри те, що це тема першого курсу фізики з глибоко візуальною математикою. Комбінаторика мала нуль, попри те, що є основою аналізу алгоритмів. Топологія — математика форм і зв'язності — мала нуль. Прогалини мали також екологія, хронобіологія та матеріалознавство. Цей спринт був про систематичне охоплення, а не просто про додавання популярних тем.

Нові категорії цього спринту

5 найскладніших симуляцій цього спринту

#1

Стрічка Мебіуса — 3D з сортуванням Ейлера

Параметрична поверхня 120×16, відрендерена на Canvas 2D за допомогою «алгоритму художника» — сортування всіх 1920 чотирикутників за глибиною центроїда щокадру. Складність: у стрічки Мебіуса рівно один край, а не два, що ламає наївні припущення про порядок обходу полігонів. Щоб правильно виділити край і анімувати шлях мурахи, довелося відстежувати, які чотирикутники належать до єдиного граничного краю навколо параметричної кривої з подвійним періодом.

#2

Кристалічні структури — 3D-перегляд із сортуванням за глибиною

Шість типів кристалічних ґраток (SC, BCC, FCC, HCP, алмаз, NaCl), відрендерених у Canvas 2D з повним 3D-обертанням через алгоритм художника. Виклик: режим суперкомірки (2×2×2) генерує у 64 рази більше атомів, кожен з радіальним градієнтом для затінення сфери. Порядок рендерингу зв'язків мав коректно чергуватися зі сферами атомів по шарах глибини без артефактів Z-fighting на перетині кількох зв'язків у місцях високої симетрії.

#3

Підкислення океану — метод Ньютона в браузері

Система карбонатної хімії (розчинення CO₂, дисоціація H₂CO₃, насичення арагонітом) утворює неявне алгебраїчне рівняння щодо [H⁺], яке не має замкнутої форми. Розв'язується 30 ітераціями методу Ньютона при кожному русі повзунка. Щоб правильно підібрати константи рівноваги (Вайс 1974 для K₀, Мербах для K₁/K₂) і обробити граничні числові випадки поблизу межі розчинення коралів при низькому pH, знадобилося ретельне керування точністю чисел з рухомою комою.

#4

Парадокс близнюків — анімована діаграма простору-часу

Симуляція малює живу діаграму Мінковського з коректною релятивістською геометрією, поки ракета летить туди й назад. Складність: позначки власного часу на світовій лінії ракети мають бути розставлені відповідно до дилатованого інтервалу ds² = (c dt)² − dx², який змінюється щокадру в міру проходження анімацією фаз відльоту, розвороту й повернення. Щоб коло події (де близнюки возз'єднуються) з'являлося точно у правильних координатах простору-часу, знадобилося ретельне перетворення координат із часу симуляції в екранний простір.

#5

Транзит екзопланети — крива блиску Манделя-Аголя

Формула кривої блиску транзиту (Мандель і Аголь, 2002) має п'ятнадцять окремих аналітичних випадків залежно від геометрії перекриття планетарного диска й зоряного лімба. Обчислення еліптичних інтегралів K(k) та E(k) у JavaScript без математичної бібліотеки вимагало реалізації алгоритму AGM (арифметико-геометричне середнє) з нуля, з точністю до шести знаків після коми, достатньо швидко для перерахунку всієї кривої блиску на 60 fps у міру просування позиції планети.

Архітектура: досі без етапу збірки

На позначці 345 симуляцій архітектурне рішення «без етапу збірки, без фреймворка, без бандлера», прийняте на самому початку, досі окупається. Кожна симуляція — це самостійний файл index.html. Розгортання нової симуляції означає перетягування папки на сервер. Виправлення помилки означає редагування одного HTML-файлу. Цикл розробки — написати код, побачити результат — має нульову затримку.

Ціна реальна: немає tree-shaking, немає перевірки типів між файлами, немає спільного стану компонентів. CDN-доставка Three.js додає близько 600 КБ до кожної симуляції, яка його використовує. Але перевага — радикальна простота й доступність: будь-яку симуляцію можна відкрити в будь-якому браузері, зберегти локально, форкнути на Codepen, вбудувати в iframe або викладати в класі без жодного налаштування. Ця доступність — весь сенс проєкту.

Обмеження 60 fps: кожна симуляція повинна працювати на 60 fps на середньому Android-телефоні без WebGL (лише Canvas 2D) для підмножини, що не використовує WebGL, і на ≥30 fps для WebGL-симуляцій. Саме це обмеження визначило більше архітектурних рішень, ніж будь-що інше: воно виключило SPH з понад 500 частинками, N-тіла з понад 500 тіл (без Barnes-Hut) та повний рейтрейсинг без ping-pong фреймбуферів.

Технічні уроки зі спринту з відносності

Симуляції спеціальної теорії відносності — це категорія, якої ми уникали два роки, бо візуальна мова діаграм простору-часу неочевидна. Як відобразити діаграму Мінковського так, щоб вона показувала геометрію без потреби спочатку розуміти, що означає ця діаграма? Ось рішення, до якого ми прийшли:

Архітектура «пласких шляхів» для української версії

Українські версії симуляцій, доданих на ранніх етапах проєкту, розташовані за адресою /uk/{slug}/index.html — канонічні «пласкі» українські версії. Це дає важливу SEO-перевагу: Google трактує їх як повноцінні сторінки, а не переклади, тобто вони можуть незалежно ранжуватися за запитами українською мовою. Зв'язування hreflang між версіями EN та UK гарантує, що користувачі бачать правильну мовну версію для свого регіону без штрафів за дубльований контент.

Архітектура «пласких шляхів» була прийнята після сесії 40 і застосована ретроспективно до всіх 345 симуляцій. Тепер кожна нова симуляція одразу постачається з обома сторінками index.html — EN та UK.

Що ми дізналися про дизайн категорій

Починати щонайменше з 3 симуляцій

Категорія з 1–2 симуляціями відчувається убого. Користувачі, що переходять до категорії, очікують колекцію. Тепер ми будуємо щонайменше три симуляції перед створенням сторінки категорії, замість показу порожніх карток «скоро з'явиться».

Значки складності мають значення

Значки ★☆☆ Легко / ★★☆ Середньо / ★★★ Складно на картках симуляцій клікають частіше за будь-який інший інтерактивний елемент на сторінках категорій. Користувачі фільтрують за складністю раніше, ніж за темою — вони хочуть знати, чи зрозуміють це.

Математичний блок підвищує залученість

Пости блогу з math-box, що містить формули й псевдокод, мають у 2.4 рази довшу середню тривалість сесії, ніж пости без нього. Математично підготовлена аудиторія менша, але значно більш залучена.

Пресети не опціональні

Симуляції без іменованих пресетів більшість користувачів покидають протягом 20 секунд. Іменовані пресети («Орбіта Землі», «Супутник GPS», «Хвиля-вбивця») перетворюють простір параметрів на керовану екскурсію. Тепер ми ставимось до пресетів як до повноцінної функції, а не як до додаткової опції.

Що далі: шлях до 400

Наступна віха — 400 симуляцій, і категорії вже намічені. Кілька областей, позначених як «повністю відсутні» в аналізі повного спектра, ще чекають: фізика плазми (за межами симуляції полярного сяйва), загальна теорія відносності (геодезичні Шварцшильда, гравітаційне червоне зміщення), космологія (реліктове випромінювання, нуклеосинтез, гало темної матерії) та топологія (пляшка Клейна, рід тора, інваріанти вузлів).

Щодо контенту, пости Spotlight про статистику та алгоритми (Spotlight #22 та Spotlight #23) щойно вийшли, а Spotlight #24 про екологію та популяційну динаміку — в роботі. Контент блогу тепер зростає швидше за кількість симуляцій — і так і має бути: кожна симуляція заслуговує на туторіал, а кожен туторіал приносить нових користувачів, які взаємодіють із симуляціями.

Спільнотна віха: проєкт тепер з'являється в навчальних програмах університетів у п'яти країнах — на нього посилаються курси з фізики, математики та комп'ютерних наук як на інтерактивний додатковий матеріал. Саме такого визнання ми прагнули заслужити ще тоді, коли випустили симуляцію №1.