345 symulacji — względność, topologia, ekologia i droga do pełnego pokrycia naukowego

Właśnie przekroczyliśmy 345 interaktywnych symulacji w przeglądarce, obejmujących ponad 75 kategorii. Ten devlog opisuje sprint, który nas tu doprowadził: kategorię względności zbudowaną od zera, pierwsze symulacje topologiczne, nowe kolekcje ekologii i algorytmów oraz decyzje techniczne, które pozwoliły jednoosobowemu zespołowi wypuszczać trzy symulacje dziennie bez etapu budowania.

345
interaktywnych symulacji
75+
kategorii STEM
1364
stron w mapie witryny

Co się zmieniło w tym sprincie

Skok z 300 do 345 symulacji zajął około sześciu tygodni i był to jak dotąd najbardziej zróżnicowany kategoriowo sprint. Poprzednie sprinty zwykle pogłębiały istniejące kategorie — dodając więcej fizyki, więcej chemii, więcej kosmosu. Ten sprint otworzył jedenaście zupełnie nowych obszarów kategorii, wypełniając luki wyraźnie widoczne w analizie „pełnego spektrum", którą przeprowadziliśmy w lutym.

Motorem napędowym była prosta metryka: ile głównych uniwersyteckich dyscyplin STEM nie miało ani jednej symulacji? Odpowiedź była niewygodna. Szczególna teoria względności miała zero symulacji, mimo że to temat pierwszego roku fizyki o głęboko wizualnej matematyce. Kombinatoryka miała zero, mimo że stanowi podstawę analizy algorytmów. Topologia — matematyka kształtów i spójności — miała zero. Ekologia, chronobiologia i inżynieria materiałowa miały luki. Ten sprint dotyczył systematycznego pokrycia, a nie tylko dodawania popularnych tematów.

Nowe kategorie w tym sprincie

5 najtrudniejszych symulacji tego sprintu

#1

Wstęga Möbiusa — 3D z sortowaniem Eulera

Powierzchnia parametryczna 120×16 renderowana na Canvas 2D za pomocą „algorytmu malarza" — sortowania wszystkich 1920 czworokątów według głębokości centroidu w każdej klatce. Trudność: wstęga Möbiusa ma dokładnie jedną krawędź, a nie dwie, co łamie naiwne założenia dotyczące kolejności nawijania wielokątów. Poprawne podświetlenie krawędzi i animacja „ścieżki mrówki" wymagały śledzenia, które czworokąty należą do pojedynczej krawędzi brzegowej wokół krzywej parametrycznej o podwójnym okresie.

#2

Struktury krystaliczne — przeglądarka 3D z sortowaniem głębi

Sześć typów sieci krystalicznych (SC, BCC, FCC, HCP, diament, NaCl) renderowanych na Canvas 2D z pełną rotacją 3D za pomocą algorytmu malarza. Wyzwanie: tryb superkomórki (2×2×2) generuje 64× więcej atomów, każdy z gradientem promieniowym do cieniowania sfery. Kolejność renderowania wiązań musiała poprawnie przeplatać się ze sferami atomów na różnych warstwach głębi, bez artefaktów Z-fightingu na przecięciu wielu wiązań w miejscach o wysokiej symetrii.

#3

Zakwaszenie oceanów — metoda Newtona w przeglądarce

Układ chemii węglanowej (rozpuszczanie CO₂, dysocjacja H₂CO₃, nasycenie aragonitem) tworzy niejawne równanie algebraiczne w [H⁺], które nie ma postaci zamkniętej. Rozwiązywane za pomocą 30 iteracji metody Newtona przy każdym przesunięciu suwaka. Uzyskanie poprawnych stałych równowagi (Weiss 1974 dla K₀, Mehrbach dla K₁/K₂) i obsługa numerycznych przypadków brzegowych w pobliżu granicy rozpuszczania koralowców przy niskim pH wymagały starannego zarządzania precyzją liczb zmiennoprzecinkowych.

#4

Paradoks bliźniąt — animowany diagram czasoprzestrzeni

Symulacja rysuje na żywo diagram Minkowskiego z poprawną geometrią relatywistyczną, gdy rakieta leci tam i z powrotem. Trudność: znaczniki czasu własnego na linii świata rakiety muszą być rozmieszczone zgodnie z dylatowanym interwałem ds² = (c dt)² − dx², który zmienia się w każdej klatce w miarę przechodzenia animacji przez fazy lotu w jedną stronę, zawracania i powrotu. Uzyskanie okręgu zdarzenia (gdzie bliźnięta się spotykają) dokładnie w odpowiednich współrzędnych czasoprzestrzennych wymagało starannej transformacji współrzędnych z czasu symulacji na przestrzeń ekranu.

#5

Tranzyt egzoplanety — krzywa blasku Mandela-Agola

Formuła krzywej blasku tranzytu (Mandel i Agol, 2002) ma piętnaście oddzielnych przypadków analitycznych w zależności od geometrii nakładania się dysku planety i brzegu gwiazdy. Obliczenie całek eliptycznych K(k) i E(k) w JavaScript bez biblioteki matematycznej wymagało zaimplementowania od zera algorytmu AGM (średniej arytmetyczno-geometrycznej), dokładnego do sześciu miejsc po przecinku, wystarczająco szybkiego, by przeliczać całą krzywą blasku przy 60 fps w miarę postępu pozycji planety.

Architektura: wciąż bez etapu budowania

Przy 345 symulacjach decyzja architektoniczna „bez etapu budowania, bez frameworka, bez bundlera", podjęta na samym początku, wciąż się opłaca. Każda symulacja to samodzielny plik index.html. Wdrożenie nowej symulacji oznacza przeciągnięcie folderu na serwer. Naprawa błędu oznacza edycję jednego pliku HTML. Pętla rozwoju — napisz kod, zobacz wynik — ma zerowe opóźnienie.

Koszt jest realny: brak tree-shakingu, brak sprawdzania typów między plikami, brak współdzielonego stanu komponentów. Dostarczanie Three.js przez CDN dodaje ~600 KB do każdej symulacji, która z niego korzysta. Ale korzyść to radykalna prostota i dostępność: każdą symulację można otworzyć w dowolnej przeglądarce, zapisać lokalnie, sforkować na Codepen, osadzić w iframe albo nauczać w klasie bez żadnej konfiguracji. Ta dostępność jest całym sensem tego projektu.

Ograniczenie 60 fps: Każda symulacja musi działać w 60 fps na średniej klasy telefonie z Androidem bez WebGL (tylko Canvas 2D) dla podzbioru symulacji bez WebGL, a przy ≥30 fps dla symulacji WebGL. To pojedyncze ograniczenie wpłynęło na więcej decyzji architektonicznych niż cokolwiek innego: wyeliminowało SPH z >500 cząstkami, N-body z >500 ciałami (bez algorytmu Barnesa-Hut) oraz pełny raytracing bez buforów ramek typu ping-pong.

Lekcje techniczne ze sprintu poświęconego względności

Symulacje szczególnej teorii względności były kategorią, której unikaliśmy przez dwa lata, ponieważ język wizualny diagramów czasoprzestrzennych jest nieoczywisty. Jak wyrenderować diagram Minkowskiego w sposób pokazujący geometrię bez wymagania od użytkownika, by wiedział, co on oznacza? Rozwiązanie, przy którym się zatrzymaliśmy:

Architektura wersji ukraińskiej ze ścieżką płaską

Ukraińskie wersje symulacji dodanych na wczesnym etapie projektu znajdują się pod adresem /uk/{slug}/index.html — kanoniczne ukraińskie wersje o „płaskiej ścieżce". Ma to istotną korzyść SEO: Google traktuje je jako pełnoprawne strony, a nie tłumaczenia, co oznacza, że mogą samodzielnie rankingować dla zapytań w języku ukraińskim. Powiązania hreflang między wersjami EN i UK zapewniają, że użytkownicy widzą właściwą wersję językową dla swojej lokalizacji, bez kar za zduplikowaną treść.

Architektura płaskiej ścieżki została przyjęta po sesji 40. i zastosowana retroaktywnie do wszystkich 345 symulacji. Każda nowa symulacja od pierwszego dnia trafia na serwer z plikiem index.html w wersji EN i UK.

Czego się nauczyliśmy o projektowaniu kategorii

Zacznij od 3+ symulacji

Kategoria z 1–2 symulacjami wydaje się uboga. Użytkownicy przechodzący do kategorii oczekują kolekcji. Teraz budujemy co najmniej trzy symulacje, zanim utworzymy stronę kategorii, zamiast pokazywać puste karty „wkrótce".

Odznaki trudności mają znaczenie

Odznaki ★☆☆ Łatwy / ★★☆ Średni / ★★★ Zaawansowany na kartach symulacji są klikane częściej niż jakikolwiek inny interaktywny element na stronach kategorii. Użytkownicy filtrują według trudności, zanim wybiorą temat — chcą wiedzieć, czy to zrozumieją.

Ramka z matematyką napędza zaangażowanie

Wpisy na blogu z math-box zawierającym równania i pseudokod mają 2,4× dłuższy średni czas sesji niż wpisy bez niej. Odbiorcy obeznani z matematyką są mniej liczni, ale znacznie bardziej zaangażowani.

Presety nie są opcjonalne

Symulacje bez nazwanych presetów są porzucane w ciągu 20 sekund przez większość użytkowników. Nazwane presety („orbita Ziemi", „satelita GPS", „fala łotra") zamieniają przestrzeń parametrów w prowadzoną wycieczkę. Teraz traktujemy presety jako funkcję pierwszej klasy, a nie coś dodatkowego.

Co dalej: droga do 400

Kolejnym kamieniem milowym jest 400 symulacji, a kategorie są już zaplanowane. Kilka obszarów oznaczonych jako „całkowicie nieobecne" w analizie pełnego spektrum wciąż czeka: fizyka plazmy (poza symulacją zorzy polarnej), ogólna teoria względności (geodezyjne Schwarzschilda, przesunięcie grawitacyjne ku czerwieni), kosmologia (CMB, nukleosynteza, halo ciemnej materii) i topologia (butelka Kleina, rodzaj torusa, niezmienniki węzłów).

Na froncie treści wpisy spotlight o statystyce i algorytmach (Spotlight #22 i Spotlight #23) są już opublikowane, a Spotlight #24 poświęcony ekologii i dynamice populacji jest w trakcie przygotowań. Treść bloga rośnie teraz szybciej niż liczba symulacji — i tak właśnie powinno być: każda symulacja zasługuje na samouczek, a każdy samouczek przyciąga nowych użytkowników, którzy angażują się w symulacje.

Kamień milowy społeczności: Projekt pojawia się teraz w sylabusach uniwersyteckich w pięciu krajach — linkowany z kursów fizyki, matematyki i informatyki jako interaktywny materiał uzupełniający. To właśnie ta walidacja, którą chcieliśmy zdobyć, gdy wypuściliśmy symulację #1.