Девлог #18 — 250 симуляцій: чого ми навчилися, створюючи…

250

симуляцій онлайн

категорії

EN + UK

мови

~2 роки

у розробці

Як ми до цього дійшли

Проєкт почався як одна-єдина симуляція — маятник — створена за вихідні за допомогою Three.js. Питання «а що, якщо додати ще одну?» привело до десяти, потім до п'ятдесяти, потім до сотні. Стрибок від 100 до 250 був свідомим кроком: структурованим просуванням у кожну основну наукову область, керованим контент-планом, а не окремими спалахами натхнення.

Найважливіше архітектурне рішення — прийняте ще на симуляції №3— полягало в тому, щоб кожна симуляція залишалась повністю автономною. Кожен файл index.html містить власні стилі та логіку. Немає спільного бандла, немає глобального стану, немає фреймворку, який потрібно оновлювати. Це рішення дуже добре витримало випробування часом.

Що спрацювало

Автономні сторінки: Оновлення Three.js для однієї симуляції ніколи не ризикує зламати іншу. Випуск нової симуляції ніколи не потребує кроку збірки.
Прогресивне покращення для мобільних: Адаптивні рівні якості (додані у Девлозі #15) дали найбільший приріст залученості — кількість мобільних сесій зросла на 38% після запуску.
Пости блогу Category Spotlight: Серія Spotlight (цей самий блог!) забезпечила стабільний органічний трафік — відвідувачі, які потрапляли на пост Spotlight, залишалися на сайті втричі довше, ніж ті, хто заходив на головну сторінку.
Переклади EN + UK: Українськомовні версії, додані у Девлозі #11, дали приріст органічного пошукового трафіку українською мовою на 22% протягом 4 тижнів.
Web Workers для фізики: Перенесення важких циклів (гідродинаміка SPH, тканина, реакція-дифузія) з головного потоку усунуло гальмування під час взаємодії з інтерфейсом і скоротило кількість пропущених кадрів на 80%.

Що ми зробили б інакше

Спільна система компонентів раніше: Шаблон навігаційної панелі, футера та метаданих був непослідовним у перших 80 симуляціях. Ретроактивне впровадження components.js стало 3-тижневим проєктом, якого можна було уникнути.
SEO-метадані з першого дня: Перші 60 симуляцій мали мінімальні мета-описи. Їх доповнення підвищило середній показник клікабельності з 1.8% до 3.4% — але зайняло тижні механічної роботи.
Автоматизована генерація скріншотів: Прев'ю- зображення досі створюються вручну. Конвеєр створення скріншотів на основі headless-браузера заощадив би сотні годин.
Контент важливіший за складність: Деякі з наших технічно найвражаючих симуляцій (візуалізатор квантового поля, релятивістський трасувальник променів) отримують набагато менше трафіку, ніж значно простіші (подвійний маятник, поширення хвороби). Цікавість перемагає вражаючість.

10 найскладніших симуляцій, які ми створили

Кровотік (рівняння Нав'є-Стокса в розгалуженій судині)

Розв'язання нестисливих рівнянь Нав'є-Стокса зі зв'язком тиску та швидкості (алгоритм SIMPLE) у нерегулярній сітці судини. Збіжність рівняння Пуассона для тиску вдалося стабілізувати лише з другої спроби.

Акустика концертного залу

Метод джерела-зображення для ранніх відбиттів + статистичний хвіст реверберації. Коректна обробка порядку дзеркальних відбиттів у непрямокутному залі потребувала рекурсивного попереднього проходу трасування променів.

Конструктор мостів (МСЕ)

Збирання розрідженої глобальної матриці жорсткості та розв'язання її в реальному часі методом Гаусса — водночас синхронізуючи WebGL-рендерер з обчисленими деформаціями. Розташування даних у пам'яті було критично важливим.

Рій дронів (консенсус + уникнення зіткнень)

Поєднання керування формацією на основі консенсусу з розподіленим уникненням зіткнень для 60 агентів вимагало дворівневого контролера: повільного планувальника формації та швидкого реактивного шару уникнення перешкод.

Симуляція тканини (на основі обмежень)

Динаміка на основі позицій з ітеративним розв'язанням обмежень — кількість ітерацій розв'язувача безпосередньо визначає компроміс між візуальною якістю та частотою кадрів. Досягнення плавності на мобільних пристроях зайняло понад 40 годин налаштування.

Реакція-дифузія (Грей-Скотт на GPU)

Реалізація ping-pong фреймбуферів у WebGL1 без розширень для float-текстур вимагала кодування хімічних концентрацій у байтові канали RGBA та ретельного управління точністю.

Потенціал дії серця

Система звичайних диференціальних рівнянь Ходжкіна-Хакслі є жорсткою — стала часу натрієвого каналу в 100 разів коротша за загальну тривалість потенціалу дії. Потрібен був RK4 з адаптивним кроком, щоб уникнути чисельної нестабільності.

Підйомна сила аерофойлу (панельний метод)

Реалізація 2D-методу вихрових панелей — розв'язання N лінійних рівнянь для інтенсивностей вихорів панелей — а потім коректна візуалізація ліній течії зажадала трьох повних переписувань розв'язувача матриці.

Ріст кристалів (3D ГЦК-ґратка)

Рендеринг 100 000 екземплярів атомів із кольоровим кодуванням енергетичного стану за допомогою InstancedMesh, тоді як крок Монте-Карло змінює матриці екземплярів щокадру. Синхронізація буферів виявилася непростою.

#10

Осциляції мозкових хвиль (зв'язана нейронна маса)

Модель нейронної маси Вілсона-Коуена з таламокортикальним зв'язком. Відтворення добре відомих спектральних піків дельта/тета/альфа потребувало ретельного калібрування параметрів відносно опублікованих спектральних даних ЕЕГ.

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

🔬 Наномасштаб і біофізика

Молекулярна динаміка, енергетичні ландшафти згортання білків, механіка ДНК — фізика в діапазоні 1–100 нм, що поєднує хімію та біологію.

🌐 Мережева наука

Безмасштабні мережі, перколяція, поширення епідемій на графах, візуалізація PageRank — математика, що лежить в основі інтернету та соціальних мереж.

🎓 Керовані уроки

Структуровані навчальні послідовності, що пов'язують 3–5 симуляцій з пояснювальним текстом — перетворюючи окремі симуляції на цілісну програму навчання.

📥 Завантажувані дані

Експорт стану симуляції у форматі CSV / JSON для використання у студентських проєктах і дослідницьких демонстраціях. Уже прототиповано для симуляцій маятника та більярду.

Дякуємо всім, хто користувався сайтом, ділився ним і надсилав відгуки. 250-та симуляція була створена завдяки листу від вчителя фізики, який попросив демонстрацію фігур Хладні для свого класу. Продовжуйте надсилати пропозиції — саме так бібліотека і зростає.