Devlog #41 – Fala 21: Symulacje biologii komórki, struktur krystalicznych i kosmosu

Fala 21 dodaje jedenaście nowych interaktywnych symulacji z czterech dyscyplin: biologii komórki (osmoza i mitoza), krystalografii (przeglądarka sieci 3D z sześcioma układami krystalicznymi), szczególnej teorii względności (paradoks bliźniąt i skrócenie Lorentza), nauki o kosmosie (tranzyt egzoplanety, zorza polarna, fazy Księżyca) oraz matematyki (wstęga Möbiusa, przekształcenia macierzowe, spirala Fibonacciego). Dzielimy się także inżynieryjnymi kulisami renderera kryształów 3D zbudowanego bez WebGL — czystym podejściem Canvas 2D z algorytmem malarza, które obsługuje widoki komórki elementarnej i superkomórki 2×2×2 przy 60 fps.

Statystyki platformy po Fali 21

345
Symulacji
75
Kategorii
124
Wpisów na blogu
21
Fal treści
42
Spotlightów
31
Wpisów edukacyjnych
41
Devlogów

Fokus Fali 21: biofizyka na poziomie komórkowym, geometria atomowa ciał krystalicznych oraz mechanika orbitalna wykrywania egzoplanet. Każda nowa symulacja wychodzi z pełną wersją ukraińską (uk/), dwustronnym hreflang i adresem kanonicznym.

Wpisy blogowe Fali 21

Symulacje biologii komórki

Dwie nowe symulacje z biologii molekularnej modelują fizykę żywych komórek na uzupełniających się skalach: osmoza działa na termodynamiczną siłę napędową przez błonę półprzepuszczalną, a mitoza śledzi choreografię segregacji chromosomów podczas podziału komórki.

Osmoza — model komórki roślinnej

Symulacja osmozy modeluje komórkę roślinną w roztworze o regulowanym stężeniu zewnętrznym (0–600 mOsm). Siła napędowa podąża za równaniem van ’t Hoffa:

Ciśnienie osmotyczne i siła napędowa

π = iMRT          (van 't Hoff, granica rozcieńczenia)
π_osmotic = (c_int − c_ext) × R × T       [Pa]
drivingForce = (π_osmotic − ψ_turgor) / RT_norm
dV/dt = L_p × A × drivingForce    (L_p = przewodność hydrauliczna)

Dwa płótna działają obok siebie: lewe (360×320) pokazuje ścianę komórkową, błonę plazmatyczną, centralną wakuolę, 50 animowanych cząsteczek wody (ruch Browna + zdarzenia przekraczania błony) oraz kolorowe punkty rozpuszczonych substancji. Prawe (320×320) wykreśla objętość wakuoli w czasie. Pięć presetów obejmuje stany izotoniczny, hipotoniczny, hipertoniczny, lizę i plazmolizę. Suwak ciśnienia turgorowego (0–10 bar) pozwala zbadać wzajemne oddziaływanie potencjału osmotycznego i ciśnieniowego, które rządzi otwieraniem aparatów szparkowych i wydłużaniem komórek w prawdziwych roślinach.

Mitoza i mejoza

Symulacja mitozy animuje oba główne sposoby podziału komórki eukariotycznej na jednym płótnie. Mitoza przechodzi przez siedem nazwanych faz (interfaza → profaza → prometafaza → metafaza → anafaza → telofaza → cytokineza); mejoza rozszerza się do dziesięciu (w tym mejoza I i II z crossing-over). W każdej fazie płótno renderuje:

Przyciski faz u góry pozwalają przeskoczyć do dowolnej fazy. Przyciski odtwarzania/pauzy oraz krok po kroku umożliwiają inspekcję klatka po klatce, a suwak prędkości kontroluje tempo animacji. Panel informacyjny pod płótnem opisuje zdarzenia biologiczne zachodzące w bieżącej fazie.

Przeglądarka struktur krystalicznych 3D

Symulacja struktur krystalicznych renderuje sześć typów sieci Bravais’go w interaktywnej projekcji 3D zbudowanej w całości na Canvas 2D przy użyciu algorytmu malarza (sortowanie głębi od tyłu do przodu). Podejście to unika WebGL, zapewniając maksymalną kompatybilność między urządzeniami, a jednocześnie dając wizualnie bogaty wynik z gradientowym cieniowaniem promienistym każdego atomu, cylindrami wiązań i trybem superkomórki 2×2×2.

Zaimplementowane układy krystaliczne

Regularny prosty (SC)    — liczba koordynacyjna 6,   APF = 0.524
Regularny centrowany przestrzennie (BCC)   — liczba koordynacyjna 8,   APF = 0.680
Regularny centrowany ściennie (FCC)   — liczba koordynacyjna 12,  APF = 0.740
Heksagonalny gęsto upakowany (HCP) — c/a = 1.633, APF = 0.740
Diament kubiczny        — liczba koordynacyjna 4,   APF = 0.340
Sól kamienna (NaCl)     — Na+ (niebieski) / Cl- (zielony), CN = 6

Renderer rzutuje pozycje 3D atomów na płótno 2D poprzez konfigurowalną macierz obrotu (przeciąganiem) i dzielenie perspektywiczne, a następnie sortuje wszystkie prymitywy (kule atomów + cylindry wiązań) według rzutowanej głębi przed rysowaniem. Cieniowanie wykorzystuje stały kierunek światła do obliczenia przesunięcia odbicia zwierciadlanego na każdym gradiencie promienistym. Sterowanie obejmuje: przeciąganie do obracania, przewijanie do przybliżania, przełączniki dla granicy komórki elementarnej / wiązań / etykiet atomów / superkomórki oraz panel statystyk pokazujący liczbę koordynacyjną, wydajność upakowania i przykłady rzeczywistych materiałów.

Symulacje szczególnej teorii względności

Kategoria względności obejmuje teraz pięć interaktywnych symulacji dotyczących dylatacji czasu, skrócenia Lorentza, diagramów czasoprzestrzennych, pomiaru długości oraz klasycznego paradoksu bliźniąt.

Paradoks bliźniąt

Symulacja paradoksu bliźniąt renderuje animowany diagram czasoprzestrzenny Minkowskiego z pionową linią świata ziemskiego bliźniaka i V-kształtną ścieżką bliźniaka rakietowego (lot w jedną stronę z prędkością β, zawrócenie, powrót). Znaczniki czasu własnego rysowane są bezpośrednio na linii świata rakiety przy użyciu czynnika Lorentza γ = (1−β²)−½. Sześciosekundowa animacja rozgrywa misję w czterech fazach: lot w jedną stronę (2 s), hamowanie przy zawróceniu (0.4 s), powrót (2 s), spotkanie (0.2 s). Panele wieku na żywo pokazują wiek ziemskiego bliźniaka, rakietowego bliźniaka oraz Δwieku aktualizowane w czasie rzeczywistym.

Skrócenie Lorentza

Symulator skrócenia Lorentza pokazuje fioletową „skróconą" linijkę obok szarej sylwetki długości własnej. Suwak β (0→0.999) aktualizuje widoczną długość L = L₀√(1−β²) i pokazuje, że poprzeczna zielona linijka pozostaje niezmieniona. Pięć presetów obejmuje codzienne obiekty (samochód przy 100 km/h, protony w wiązce cząstek) oraz relatywistyczne wzorce (β = 0.6, 0.9, 0.99).

Symulacje kosmiczne i astronomiczne

Metoda tranzytu egzoplanety

Symulacja tranzytu egzoplanety implementuje kwadratowy model tranzytu z pociemnieniem brzegowym Mandela–Agola (2002) — te same równania, których misje NASA Kepler i TESS używają do wykrywania planet poprzez ułamkowy spadek strumienia gwiazdowego, gdy planeta przecina tarczę gwiazdy. Górne płótno animuje gwiazdę (z fizycznie poprawnym gradientem pociemnienia brzegowego), ścieżkę orbitalną i tarczę planety. Dolne płótno wykreśla krzywą blasku na żywo, aktualizującą się w każdej klatce.

Fazy Księżyca

Symulacja faz Księżyca wyświetla wszystkie osiem klasycznych faz księżycowych jako interaktywne przyciski, z suwakiem dnia (0–29.5) sterującym geometrią. Płótno orbitalne renderuje system Ziemia–Księżyc–Słońce z polem gwiazd. Algorytm fazy oblicza oświetloną frakcję przy użyciu kąta Słońce–Księżyc i miesza maskę sierpa/garbu przy użyciu dwóch nakładających się okręgów, podczas gdy płótno orbitalne renderuje poprawną geometrię dla każdego dnia.

Symulacje matematyczne

Wstęga Möbiusa

Symulacja wstęgi Möbiusa renderuje powierzchnię parametryczną (120×16 czworokątów) z cieniowaniem Phonga i schematem kolorów opartym na gradiencie odcienia na Canvas 2D. Czworokąty posortowane według głębi są malowane od tyłu do przodu, aby symulować przesłanianie. Mrówka animuje się wzdłuż powierzchni, śledząc jednostronną topologię przez pełne przejście parametru 4π — mrówka wraca do punktu startu, zwrócona w przeciwnym kierunku. Suwak liczby skrętów (1–5) demonstruje, że nieparzysta liczba skrętów daje powierzchnie nieorientowalne, podczas gdy parzysta liczba odtwarza standardowy cylinder. Statystyki liczby krawędzi i stron aktualizują się na żywo.

Wizualizator przekształceń macierzowych

Wizualizator przekształceń macierzowych pokazuje, jak rzeczywiste macierze 2×2 działają na płaszczyznę. Cztery suwaki sterują elementami a, b, c, d (od −3 do +3). Warstwy przełączane są niezależnie: siatka jednostkowa, wektory bazowe, wektory własne (gdy rzeczywiste), okrąg jednostkowy (pokazujący, jak odwzorowuje się na elipsę) oraz ciągła animacja z kluczowaniem α ∈ [0,1] między tożsamością a bieżącą macierzą. Panel informacyjny pokazuje ślad, wyznacznik, wartości własne λ₁/λ₂ oraz typ macierzy (obrót / ścinanie / rozciąganie / rzutowanie / odbicie / osobliwa).

Spirala Fibonacciego

Symulacja spirali Fibonacciego oferuje trzy tryby wyświetlania: spiralę (archimedesowy wykres biegunowy złotego kąta 137.507°), słonecznik (2D-filotaksja główki nasiennej z konfigurowalną liczbą nasion do 1000) oraz kwadraty (rekurencyjne prostokąty Fibonacciego). Cztery palety kolorów (złota, tęczowa, monochromatyczna, ocean) oraz suwak złotego kąta (±5° wokół 137.5°) pozwalają zbadać, dlaczego niewymierny złoty kąt φ = (3−√5)π jest optymalny dla upakowania. Przycisk eksportu do PNG dopełnia zestaw funkcji.

Notatka inżynierska: renderowanie 3D na Canvas 2D

Symulacje struktur krystalicznych i wstęgi Möbiusa dzielą wspólne podejście do renderowania 3D na Canvas 2D, które unika złożoności konfiguracji WebGL, jednocześnie zapewniając wynik poprawny pod względem głębi. Podstawową techniką jest algorytm malarza: obliczenie wszystkich prymitywów wraz z ich rzutowaną głębią, posortowanie malejąco (najdalsze pierwsze), a następnie rysowanie w kolejności, tak aby bliskie obiekty przesłaniały dalekie.

Pseudokod algorytmu malarza

// Rzutowanie pozycji 3D na płótno 2D z dzieleniem perspektywicznym
function project(x, y, z, rotMatrix, fov, cx, cy) {
  const [rx, ry, rz] = applyRotation(rotMatrix, x, y, z);
  const scale = fov / (fov + rz);           // perspektywa
  return { sx: cx + rx * scale, sy: cy + ry * scale, depth: rz };
}

// Sortowanie wszystkich rysowanych prymitywów według głębi (od tyłu do przodu)
primitives.sort((a, b) => b.depth - a.depth);

// Rysowanie każdego prymitywu; późniejsze rysunki przesłaniają wcześniejsze
for (const prim of primitives) {
  if (prim.type === 'sphere') drawAtomCircle(ctx, prim);
  if (prim.type === 'bond')   drawBondLine(ctx, prim);
}

Podejście to sprawdza się dobrze dla obiektów wypukłych (kule atomów, cylindry wiązań), ponieważ porównania głębi dla poszczególnych prymitywów dają poprawne przesłanianie bez testów głębi na poziomie piksela. Dla superkomórki kryształu (do ~200 atomów + ~600 wiązań) na nowoczesnym, przyspieszonym GPU Canvas, pętla sortowania i rysowania mieści się w budżecie klatki 16 ms przy 60 fps.

Co dalej — Fala 22

Fala 22 rozszerzy zakres w dwóch obszarach. Po pierwsze, przetwarzanie sygnałów i komunikacja: filtr obrazu oparty na transformacie Fouriera (częstotliwości przestrzenne, dolno-/górno-/pasmowoprzepustowy), wizualizator transformaty falkowej (dekompozycja wielorozdzielcza, skalogramy CWT) oraz eksplorator warstw splotowej sieci neuronowej pokazujący mapy cech w czasie rzeczywistym. Po drugie, termodynamika i przejścia fazowe: eksplorator punktu krytycznego modelu Isinga (algorytm Metropolisa, pik pojemności cieplnej, rozbieżność długości korelacji) oraz symulator diagramu fazowego dla stopów binarnych.

Masz pomysł na symulację? Projekt jest open source. Zobacz CONTRIBUTING.md, aby poznać przewodnik dla współtwórców, lub otwórz zgłoszenie w repozytorium.