Devlog #18 — 250 symulacji: czego nauczyliśmy się, budując…

250

działających symulacji

kategorie

EN + UK

języki

~2 lata

w rozwoju

Jak do tego doszliśmy

Projekt zaczął się od jednej symulacji — wahadła — zbudowanej w weekend przy użyciu Three.js. Pytanie „a co, jeśli dodam kolejną?” doprowadziło do dziesięciu, potem pięćdziesięciu, potem stu. Skok ze 100 do 250 był świadomą decyzją: uporządkowanym marszem przez każdą główną dziedzinę nauki, napędzanym planem treści, a nie pojedynczymi błyskami inspiracji.

Najważniejsza decyzja architektoniczna — podjęta jeszcze przy symulacji #3 — polegała na tym, by każda symulacja pozostawała całkowicie samodzielna. Każdy plik index.html zawiera własne style i logikę. Nie ma wspólnego bundla, globalnego stanu ani frameworku do aktualizowania. Ta decyzja wytrzymała próbę czasu znakomicie.

Co zadziałało

Samodzielne strony: Aktualizacja Three.js dla jednej symulacji nigdy nie grozi zepsuciem innej. Wypuszczenie nowej symulacji nigdy nie wymaga kroku budowania.
Progresywne ulepszanie dla urządzeń mobilnych: Adaptacyjne poziomy jakości (dodane w Devlogu #15) dały największy wzrost zaangażowania — liczba sesji mobilnych wzrosła o 38% po wdrożeniu.
Wpisy blogowe Category Spotlight: Seria Spotlight (czyli ten blog!) zapewniła stały ruch organiczny — odwiedzający, którzy trafiali na wpis Spotlight, zostawali na stronie 3 razy dłużej niż ci, którzy lądowali na stronie głównej.
Tłumaczenia EN + UK: Wersje w języku ukraińskim, dodane w Devlogu #11, dały wzrost organicznego ruchu wyszukiwania w języku ukraińskim o 22% w ciągu 4 tygodni.
Web Workers dla fizyki: Przeniesienie ciężkich pętli obliczeniowych (płyn SPH, tkanina, reakcja-dyfuzja) poza wątek główny wyeliminowało zacinanie się interfejsu i zmniejszyło liczbę zgubionych klatek o 80%.

Co zrobilibyśmy inaczej

Wspólny system komponentów wcześniej: Wzorzec paska nawigacji, stopki i metadanych był niespójny w pierwszych 80 symulacjach. Retrospektywne wdrożenie wspólnego components.js było trwającym 3 tygodnie projektem, którego można było uniknąć.
Metadane SEO od pierwszego dnia: Pierwsze 60 symulacji miało minimalne opisy meta. Ich uzupełnienie poprawiło średni współczynnik klikalności z 1,8% do 3,4% — ale zajęło tygodnie mechanicznej pracy.
Automatyczne generowanie zrzutów ekranu: Obrazy podglądowe wciąż są tworzone ręcznie. Potok generowania zrzutów ekranu oparty na przeglądarce headless zaoszczędziłby setki godzin.
Treść przed złożonością: Niektóre z naszych technicznie najbardziej imponujących symulacji (wizualizator pola kwantowego, relatywistyczny raytracer) mają znacznie mniej odwiedzin niż dużo prostsze (podwójne wahadło, rozprzestrzenianie się choroby). Ciekawość bije efektowność.

10 najtrudniejszych symulacji, jakie zbudowaliśmy

Przepływ krwi (równania Naviera-Stokesa w rozgałęzionym naczyniu)

Rozwiązywanie nieściśliwych równań Naviera-Stokesa ze sprzężeniem ciśnienie-prędkość (algorytm SIMPLE) w nieregularnej siatce naczynia. Zbieżność równania Poissona dla ciśnienia udało się ustabilizować dopiero za drugim podejściem.

Akustyka sali koncertowej

Metoda źródeł obrazowych dla wczesnych odbić + statystyczny ogon pogłosu. Poprawna obsługa kolejności odbić zwierciadlanych w nieprostokątnej sali wymagała rekurencyjnego przebiegu wstępnego ray tracingu.

Projektant mostów (MES)

Składanie rzadkiej globalnej macierzy sztywności i rozwiązywanie jej na żywo metodą eliminacji Gaussa — przy jednoczesnym synchronizowaniu renderera WebGL z obliczonymi odkształceniami. Układ danych w pamięci miał kluczowe znaczenie.

Rój dronów (konsensus + unikanie kolizji)

Połączenie sterowania formacją opartego na konsensusie z rozproszonym unikaniem kolizji dla 60 agentów wymagało dwuwarstwowego kontrolera: wolnego planisty formacji i szybkiej reaktywnej warstwy unikania przeszkód.

Symulacja tkaniny (oparta na więzach)

Dynamika oparta na pozycjach z iteracyjnym rozwiązywaniem więzów — liczba iteracji solvera bezpośrednio determinuje kompromis między jakością wizualną a liczbą klatek na sekundę. Osiągnięcie płynności na urządzeniach mobilnych wymagało ponad 40 godzin dostrajania.

Reakcja-dyfuzja (Gray-Scott na GPU)

Implementacja buforów ramki ping-pong w WebGL1 bez rozszerzeń tekstur zmiennoprzecinkowych wymagała kodowania stężeń chemicznych w kanałach bajtowych RGBA oraz starannego zarządzania precyzją.

Potencjał czynnościowy serca

Układ równań różniczkowych zwyczajnych Hodgkina-Huxleya jest sztywny — stała czasowa kanału sodowego jest 100 razy krótsza niż całkowity czas trwania potencjału czynnościowego. Wymagało to RK4 z adaptacyjnym krokiem, aby uniknąć niestabilności numerycznej.

Siła nośna profilu skrzydła (metoda panelowa)

Implementacja dwuwymiarowej metody paneli wirowych — rozwiązywanie N równań liniowych dla intensywności wirów panelowych — a następnie poprawna wizualizacja linii prądu zajęła trzy pełne przepisania solvera macierzowego.

Wzrost kryształów (sieć FCC 3D)

Renderowanie 100 000 instancji atomów z kolorowym kodowaniem stanu energetycznego przy użyciu InstancedMesh, podczas gdy krok Monte Carlo modyfikuje macierze instancji w każdej klatce. Synchronizacja buforów okazała się trudna.

#10

Oscylacje fal mózgowych (sprzężona masa neuronowa)

Model masy neuronowej Wilsona-Cowana ze sprzężeniem wzgórzowo-korowym. Odtworzenie dobrze znanych szczytów widmowych delta/theta/alfa wymagało starannej kalibracji parametrów względem opublikowanych danych widmowych EEG.

Co dalej: droga do 300

🔬 Nanoskala i biofizyka

Dynamika molekularna, krajobrazy energetyczne zwijania białek, mechanika DNA — fizyka w skali 1–100 nm, łącząca chemię i biologię.

🌐 Nauka o sieciach

Sieci bezskalowe, perkolacja, rozprzestrzenianie się epidemii na grafach, wizualizacja PageRank — matematyka stojąca za internetem i mediami społecznościowymi.

🎓 Lekcje z przewodnikiem

Uporządkowane sekwencje edukacyjne łączące 3–5 symulacji z tekstem wyjaśniającym — przekształcające pojedyncze symulacje w spójny program nauczania.

📥 Dane do pobrania

Eksport stanu symulacji jako CSV / JSON do wykorzystania w projektach studenckich i demonstracjach badawczych. Już prototypowane dla symulacji wahadła i bilardu.

Dziękujemy wszystkim, którzy korzystali z tej strony, dzielili się nią i przesyłali informacje zwrotne. 250. symulacja powstała dzięki e-mailowi od nauczyciela fizyki, który poprosił o demonstrację figur Chladniego dla swojej klasy. Piszcie dalej ze swoimi propozycjami — właśnie tak naprawdę rozwija się ta biblioteka.