Девлог #41 – Хвиля 21: Симуляції клітинної біології, кристалічних структур та космосу

Статистика платформи після Хвилі 21

Пости блогу Хвилі 21

Симуляції клітинної біології

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

Осмос — модель рослинної клітини

Симуляція осмосу моделює рослинну клітину в розчині з регульованою зовнішньою концентрацією (0–600 мОсм). Рушійна сила визначається рівнянням Вант ’т Гоффа:

π = iMRT          (Вант-Гофф, розведена межа)
π_osmotic = (c_int − c_ext) × R × T       [Па]
drivingForce = (π_osmotic − ψ_turgor) / RT_norm
dV/dt = L_p × A × drivingForce    (L_p = гідравлічна провідність)

Два canvas-полотна працюють поруч: ліве (360×320) показує клітинну стінку, плазматичну мембрану, центральну вакуоль, 50 анімованих молекул води (броунівський рух + перетин мембрани) та кольорові точки розчинених речовин. Праве (320×320) будує графік об'єму вакуолі в часі. П'ять пресетів охоплюють ізотонічний, гіпотонічний, гіпертонічний стани, лізис і плазмоліз. Повзунок тургорного тиску (0–10 бар) дозволяє досліджувати взаємодію осмотичного та тискового потенціалів, що керує відкриттям продихів і видовженням клітин у реальних рослинах.

Мітоз і мейоз

Симуляція мітозу анімує обидва основні способи поділу еукаріотичної клітини на одному canvas. Мітоз проходить через сім названих фаз (інтерфаза → профаза → прометафаза → метафаза → анафаза → телофаза → цитокінез); мейоз розширюється до десяти (включно з мейозом I та II з кросинговером). На кожній фазі canvas відображає:

• Чотири кольорові хромосоми (гомологічні пари виділені)
• Ядерну оболонку (утворена/розчинена залежно від фази)
• Волокна веретена поділу, що досягають кінетохор
• Борозну поділу (цитокінез) у вигляді стискної блакитної дуги

Кнопки фаз зверху дозволяють перейти до будь-якої фази. Кнопки «відтворити/пауза» та покроковий перегляд дозволяють поетапне вивчення, а повзунок швидкості керує темпом анімації. Інформаційна панель під canvas описує біологічні події, що відбуваються на поточній фазі.

3D-переглядач кристалічних структур

Симуляція кристалічних структур відображає шість типів решіток Браве в інтерактивній 3D-проєкції, повністю побудованій на Canvas 2D з використанням алгоритму художника (сортування глибини ззаду наперед). Такий підхід уникає WebGL, забезпечуючи максимальну сумісність між пристроями, водночас даючи візуально насичений результат із радіальним градієнтним затіненням для кожного атома, циліндрами зв'язків і режимом суперкомірки 2×2×2.

Проста кубічна (SC)    — координаційне число 6,   APF = 0.524
Об'ємноцентрована (BCC)   — координаційне число 8,   APF = 0.680
Гранецентрована (FCC)   — координаційне число 12,  APF = 0.740
Гексагональна щільна упаковка (HCP) — c/a = 1.633, APF = 0.740
Кубічний алмаз        — координаційне число 4,   APF = 0.340
Кам'яна сіль (NaCl)     — Na+ (синій) / Cl- (зелений), CN = 6

Рендерер проєктує позиції 3D-атомів на 2D-canvas через настроювану матрицю обертання (перетягуванням) і поділ перспективи, потім сортує всі примітиви (сфери атомів + циліндри зв'язків) за проєктованою глибиною перед малюванням. Затінення використовує фіксований напрямок світла для обчислення зміщення дзеркального відблиску на кожному радіальному градієнті. Керування включає: перетягування для обертання, прокрутку для масштабування, перемикачі меж елементарної комірки / зв'язків / підписів атомів / суперкомірки та панель статистики, що показує координаційне число, ефективність упаковки та реальні приклади матеріалів.

Симуляції спеціальної теорії відносності

Категорія відносності тепер охоплює п'ять інтерактивних симуляцій, що стосуються сповільнення часу, скорочення Лоренца, просторово-часових діаграм, вимірювання довжини та класичного парадоксу близнюків.

Парадокс близнюків

Симуляція парадоксу близнюків відображає анімовану просторово-часову діаграму Мінковського з вертикальною світовою лінією земного близнюка та V-подібним шляхом ракетного близнюка (політ туди зі швидкістю β, розворот, повернення). Мітки власного часу малюються прямо на світовій лінії ракети з використанням фактора Лоренца γ = (1−β²)−½. Шестисекундна анімація розігрує місію у чотирьох фазах: політ туди (2 с), гальмування при розвороті (0.4 с), повернення (2 с), возз'єднання (0.2 с). Панелі живого віку в реальному часі показують вік земного близнюка, ракетного близнюка та Δвіку.

Скорочення Лоренца

Симулятор скорочення Лоренца показує фіолетову «скорочену» лінійку поряд із сірим силуетом власної довжини. Повзунок β (0→0.999) оновлює видиму довжину L = L₀√(1−β²) і показує, що поперечна зелена лінійка залишається незмінною. П'ять пресетів включають повсякденні об'єкти (автомобіль на швидкості 100 км/год, протони в пучку частинок) та релятивістські орієнтири (β = 0.6, 0.9, 0.99).

Космічні та астрономічні симуляції

Метод транзиту екзопланети

Симуляція транзиту екзопланети реалізує квадратичну модель транзиту з потемнінням до краю Манделя–Агола (2002) — ті самі рівняння, що використовують місії NASA Kepler і TESS для виявлення планет за частковим падінням зоряного потоку, коли планета перетинає зоряний диск. Верхній canvas анімує зорю (з фізично коректним градієнтом потемніння до краю), орбітальний шлях та диск планети. Нижній canvas будує живу криву блиску, що оновлюється кожен кадр.

Фази Місяця

Симуляція фаз Місяця відображає всі вісім класичних фаз Місяця як інтерактивні кнопки, з повзунком дня (0–29.5), що керує геометрією. Орбітальний canvas відображає систему Земля–Місяць–Сонце зі зоряним полем. Алгоритм фази обчислює освітлену частку за кутом Сонце–Місяць та змішує маску серпа/опуклої фази, використовуючи два кола, що перекриваються, тоді як орбітальний canvas відображає коректну геометрію для кожного дня.

Математичні симуляції

Стрічка Мебіуса

Симуляція стрічки Мебіуса відображає параметричну поверхню (120×16 чотирикутників) із затіненням за Фонгом та кольоровою схемою на основі градієнта відтінку на Canvas 2D. Чотирикутники, відсортовані за глибиною, малюються ззаду наперед для імітації перекриття. Мурашка анімується вздовж поверхні, простежуючи односторонню топологію протягом повного проходу параметра 4π — мурашка повертається у вихідну точку, дивлячись у протилежному напрямку. Повзунок кількості перекручень (1–5) демонструє, що непарна кількість перекручень дає неорієнтовні поверхні, тоді як парна кількість повертає звичайний циліндр. Статистика кількості країв і сторін оновлюється в реальному часі.

Візуалізатор матричних перетворень

Візуалізатор матричних перетворень показує, як дійсні матриці 2×2 діють на площину. Чотири повзунки керують елементами a, b, c, d (від −3 до +3). Шари перемикаються незалежно: одинична сітка, базисні вектори, власні вектори (коли дійсні), одиничне коло (показує, як воно відображається в еліпс) та безперервна анімація з ключовим кадром α ∈ [0,1] між тотожністю та поточною матрицею. Інформаційна панель показує слід, визначник, власні значення λ₁/λ₂ та тип матриці (обертання / зсув / розтяг / проєкція / відбиття / вироджена).

Спіраль Фібоначчі

Симуляція спіралі Фібоначчі пропонує три режими відображення: спіраль (архімедів полярний графік золотого кута 137.507°), соняшник (2D-філотаксис голівки насіння з настроюваною кількістю насінин до 1000) та квадрати (рекурсивні прямокутники Фібоначчі). Чотири колірні палітри (золота, веселка, монохромна, океан) та повзунок золотого кута (±5° навколо 137.5°) дозволяють дослідити, чому ірраціональний золотий кут φ = (3−√5)π є оптимальним для упаковки. Кнопка експорту в PNG завершує набір функцій.

Інженерна примітка: 3D-рендеринг на Canvas 2D

Симуляції кристалічних структур і стрічки Мебіуса використовують спільний підхід до 3D-рендерингу на Canvas 2D, що уникає складності налаштування WebGL, водночас забезпечуючи коректний за глибиною результат. Основна техніка — алгоритм художника: обчислити всі примітиви з їхньою проєктованою глибиною, відсортувати за спаданням (найдальші спочатку), потім малювати по порядку, щоб близькі об'єкти перекривали дальні.

// Проєкція 3D-позиції на 2D-canvas з поділом перспективи
function project(x, y, z, rotMatrix, fov, cx, cy) {
  const [rx, ry, rz] = applyRotation(rotMatrix, x, y, z);
  const scale = fov / (fov + rz);           // перспектива
  return { sx: cx + rx * scale, sy: cy + ry * scale, depth: rz };
}

// Сортування всіх примітивів для малювання за глибиною (ззаду наперед)
primitives.sort((a, b) => b.depth - a.depth);

// Малювання кожного примітиву; пізніші малюнки перекривають попередні
for (const prim of primitives) {
  if (prim.type === 'sphere') drawAtomCircle(ctx, prim);
  if (prim.type === 'bond')   drawBondLine(ctx, prim);
}

Такий підхід добре працює для опуклих об'єктів (сфери атомів, циліндри зв'язків), оскільки порівняння глибини для кожного примітиву дає коректне перекриття без попіксельних тестів глибини. Для суперкомірки кристала (до ~200 атомів + ~600 зв'язків) на сучасному прискореному GPU Canvas цикл сортування + малювання завершується в межах бюджету кадру 16 мс при 60 fps.

Що далі — Хвиля 22

Хвиля 22 розширить охоплення у двох напрямках. По-перше, обробка сигналів і комунікації: фільтр зображень на основі перетворення Фур'є (просторові частоти, низько-/високо-/смуго-пропускні), візуалізатор вейвлет- перетворення (багаторозділова декомпозиція, скалограми CWT) та дослідник шарів згорткової нейронної мережі, що показує карти ознак у реальному часі. По-друге, термодинаміка та фазові переходи: дослідник критичної точки моделі Ізінга (алгоритм Метрополіса, пік теплоємності, розбіжність довжини кореляції) та симулятор фазової діаграми для бінарних сплавів.