Студія інтерактивної математики в русі

Огляд

Це хаб (M4SH Studio.html) із дев’ятьма самостійними інструментами. Кожен — окрема повноекранна сторінка з власним рушієм рендеру на <canvas>, темною темою бренду й кнопкою ← студія для повернення на головну.

• Спільна візуальна мова: темно-синій фон, dot-grid, зелений акцент, шрифти Inter + JetBrains Mono.
• Кожен інструмент розрахований на запис відео: формати кадру 9:16 / 1:1 / 16:9, режим «Чистий кадр» та спільна нижня панель запису (згортається).
• Жодних залежностей від бекенду — математика, рендер і експорт відбуваються в браузері.

Перші кроки

1. Відкрий M4SH Studio.html — головну сторінку-хаб.
2. Обери картку інструмента → відкриється його повноекранна сторінка.
3. Налаштуй сцену панеллю праворуч (форма, рух, вигляд, кадр).
4. Для запису: тисни ⤢ Чистий кадр (ховає панель, повний екран) і знімай екран, або скористайся вбудованим експортом відео у Parametric Studio.

Каталог

Інструмент 01 · attractor-studio/

Двіжок дивних атракторів для зйомки відео. Інтегрує систему ОДУ методом Рунге–Кутти 4-го порядку й малює адитивну неонову хмару точок на чорному тлі — щільні зони світяться до білого, як у референсних роликах.

Що вміє

• 6 систем: Rössler, Lorenz, Aizawa, Thomas, Halvorsen, Chen — кожна зі своїми рівняннями та формулами в кадрі.
• Параметри рівнянь наживо (a, b, c / σ, ρ, β…) — крива перераховується миттєво.
• Режими руху: «малюється» (крива прокладається + камера обертається), «готовий» (лише обертання), «потік» (комета біжить трасою).
• 6 неонових палітр, розмір/яскравість точок, лінії-павутина, світіння.
• Свій атрактор — впиши власні dx/dt, dy/dt, dz/dt та параметри; RK4 інтегрує будь-яку систему.

Інструмент 02 · surface-studio/

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

Що вміє

• 10 поверхонь: Еннепер, гелікоїд, катеноїд (мінімальні), сфера, тор, стрічка Мебіуса, сідло мавпи, хвилі sin·cos, пляшка Клейна, поверхня Боя.
• Репер у рухомій точці: дотичні r_u, r_v та нормаль n̂ + слід траєкторії на поверхні й на проєкціях.
• HUD: координати x, y, z, ‖n̂‖=1 та знак гаусової кривини K.
• Проєкції на 3 площини, осі, сітка-підлога — усе вмикається.
• Своя поверхня — задай x/y/z(u,v), діапазони u,v та параметри.

Інструмент 03 · param-studio/

Центральний інструмент студії. Ліворуч — крива P(t) у полярному поданні (полюс C + радіус-вектор), праворуч — її розгортка y(t), що пишеться прогресивно під рухомою точкою. Це presentation-runtime: форма стає сигналом як єдиний безперервний жест.

Джерела кривої

• Аналітичні криві: коло, троянди cos 3θ / cos 5θ, серце, зірка, лемніската, Ліссажу, равлик Паскаля.
• Форма → P(t) (основне джерело): символи (π Computer Modern, ∞, серце, зірка, λ, Σ), 🇺🇦 контур України + 25 областей, або власний SVG path.
• Будь-який об'єкт → крива через адаптери входу:

Керування

Швидкість і рух, кольори, перемикачі (пунктир-зв'язок / радіус-вектор / полюс C / сітка), формати 1:1 / 9:16 / 16:9, «Чистий кадр» та експорт відео.

Інструмент 04 · fourier-studio/

Замикає всю студію в одну ідею: будь-яка форма → її сигнал → розклад у обертові вектори → ці вектори відтворюють ту саму форму. Три ефекти живляться одним обчисленням — комплексними коефіцієнтами cₙ контуру (M=2048 вибірок, DFT). Контур береться з того ж ShapePipeline (π, Σ, серце, λ, свій SVG) або малюється від руки.

Три ефекти з одного cₙ

• Збіжність: N=1 робить повний оберт і малює коло, потім N=2 — повний оберт, … — видно, що додає кожна гармоніка. Поряд — привид цілі й число похибки, що падає; попередній контур згасає, поки малюється новий.
• Інтерактивний спектр: стовпчики |cₙ| праворуч у кадрі. Наведення підсвічує відповідне коло; клік вимикає гармоніку — і малюнок псується саме в її деталях (велике коло = загальна форма, дрібні = гострі кути).
• Озвучення: кожна гармоніка → тон f₀·|n|; цілі кратні дають гармонічний тембр. Кнопка «🔊 Як це звучить» і запікання тембру у відеодоріжку (StudioAudio.setExtra).

Режим · fourier-studio/laplace.js

Перемикач Перетворення: Фур'є / Лаплас у тій самій вкладці. Перетворення Фур'є — це Лаплас, узятий лише на уявній осі (σ=0). Студія показує 3D-рельєф |F(s)| над усією s-площиною, де F(s)=Π(s−zₖ)/Π(s−pₖ), а світна лінія σ=0 на поверхні — це і є фур'є-спектр |F(iω)|.

• Рельєф |F(s)|: вежі полюсів, западини нулів; камера обертається (тягни по рельєфу — крутити вручну).
• Перетягни полюс × на s-площині → відгук f(t) праворуч міняється наживо: ліва півплощина — затухає, на осі — незатухаюча осциляція, права — вибухає.
• Пресети: резонанс, затухання, осцилятор, нестабільний, режектор. Слайдери σ/ω для обраного полюса, + полюс / + нуль.

Ще інструменти · НМТ і простір

Інструмент 04 · ukraine-map/

Інтерактивна SVG-карта: 24 області та Автономна Республіка Крим — кожна окремим контуром, плюс контур держави зверху.

• Наведення підсвічує область і показує назву; клік виділяє та виводить «регіон NN / 25».
• Двосторонній зв'язок зі списком регіонів (алфавітний, з індексами).
• Контури в координатах 0–100 — готові як форми для Parametric Studio (та сама геометрія підключена там у списку областей).

Як це працює

Серце Parametric Studio — універсальний конвеєр. Будь-яке джерело зводиться до SVG-контуру, далі — незмінний рушій:

• Arc-length параметризація: контур обходиться рівномірно за довжиною дуги, t ∈ [0, 2π].
• Проєкція: y(t) = (P(t) − C) · ĵ — вертикальна складова радіус-вектора від полюса C.
• Нормалізація до спільного боксу — щоб амплітуда сигналу різних форм була порівнянна.
• Мультиконтури (літери з дірками, острови) обходяться послідовно.

Трилогія перетворень

Той самий P(t) розгортається далі в дві вкладки, що замикають ідею студії:

Комплексні коефіцієнти cₙ контуру — це набір обертових векторів (Епіцикли Фур'є); а фур'є-спектр — лише зріз σ=0 великої поверхні |F(s)| (Лаплас). Одне обчислення — три подачі.

Вихід

Кожен інструмент пише відео прямо в браузері, без сервера. Панель запису винесена в спільну нижню панель «🎬 Запис відео» (shared/export-ui.js), а в сайдбарі лишаються тільки налаштування сцени. Обидві панелі згортаються (shared/panels.js) — для майже-повноекранної сцени під зйомку. Два шляхи експорту:

Якщо WebCodecs недоступний — автоматичний fallback на WebM. Тривалість задається слайдером; кадр i → u = i/N рендериться через детермінований контракт StudioScene.exportFrame(u) — єдина шкала u∈[0,1] = цілий ролик, без залежності від реального часу.

Для розробника

Кожен інструмент — самостійна папка: index.html (UI + рушій) плюс модулі.

M4SH Studio.html        // хаб із картками інструментів

shared/                 // спільне для всіх інструментів
  export-ui.js / .css   // нижня панель запису (dock)
  panels.js             // згортання сайдбару та панелі
  record.js             // StudioRecorder: MP4 (WebCodecs) / WebM
  audio.js              // музика + голос + ducking + setExtra
  config.js · watermark.js · theme.css

attractor-studio/  index.html · attractors.js   // RK4, 6 систем
surface-studio/    index.html · surfaces.js      // 10 поверхонь
param-studio/      index.html · param.js · shape.js · input-adapters.js · ukraine-shapes.js
fourier-studio/    index.html · fourier.js · fourier-audio.js · laplace.js
trig-studio/       index.html · trig.js
inequalities/      index.html · inequalities.js
helix-studio/      index.html · helix.js
nmt-3d-bundle/     index.html · …          // 21 шаблон стереометрії
ukraine-map/       index.html            // інтерактивна SVG-карта

Ключові об'єкти

• window.StudioScene — спільний контракт сцени для запису: .exportFrame(u) (u∈[0,1] = цілий ролик), .onExportStart/End(), .canvas, .durationSec.
• window.StudioExportUI.mount(el, {dock:true}) — монтує спільну нижню панель запису; StudioRecorder (exportMP4/exportWebM), StudioAudio (setExtra для запеченого тембру), StudioWatermark.
• window.FourierStudio / LaplaceScene / FourierAudio — рушії вкладки Фур'є: cₙ, рельєф |F(s)|, озвучення.
• window.ParamStudio — рушій 2D-сцени; .overlay — хук для малювання поверх.
• window.ShapePipeline — .parsePath(d) → контур, далі arc-length P(t).
• window.InputAdapters — textToPath, imageToPath, pointsToPath.

Зовнішні бібліотеки (CDN, клієнтські)

mp4-muxer — у всіх інструментах (запис MP4). opentype.jsimagetracerjs — лише в Parametric Studio (текст / зображення). Решта — чистий Canvas + Web Audio, без залежностей.

Розширення

1. Створи папку tool-name/ з index.html та рушієм на <canvas>.
2. Підключи shared/ (config, watermark, audio, record, export-ui, panels), вистав window.StudioScene (контракт запису: exportFrame(u), onExportStart/End) і змонтуй панель: StudioExportUI.mount(el, {dock:true}).
3. Дотримуйся теми бренду (змінні --ink, --green, шрифти) і додай посилання ← студія на ../M4SH Studio.html.
4. Зроби прев'ю-зображення інструмента.
5. Скопіюй блок .featured у хабі, онови лічильник активних інструментів.

<!-- картка в M4SH Studio.html -->
<a class="featured" href="tool-name/index.html">
  <div class="featured-body">
    <span class="tag live">Активний</span>
    <h3>Назва інструмента</h3>
    <p>Короткий опис…</p>
  </div>
  <div class="featured-art"><img src="tool-name/preview.png"></div>
</a>