# Брейншторм: визуализации в КАЖДЫЙ параграф «Математики 6»

> Цель: у каждого § — хотя бы одна «показывающая» визуализация/анимация, **даже у сугубо
> вычислительных** (столбик, деление уголком, сравнение). Принцип экономии: строить
> **реюзабельные компоненты** движка `math6_anim.js`/`math6_svg.js`, каждый из которых
> закрывает несколько параграфов. Все canvas-демо — headless-safe (как уже сделано).
>
> Готово на данный момент (window.Math6Anim): `rollingCircle`, `sweepArea`, `areaModel`,
> `numberLineWalk`, `carGraph`, `plotLive`. Ниже — что ещё построить и куда вшить.

---

## A. Реюзабельные компоненты движка (строит Opus — canvas/3D рискованно, нужен браузер-глаз)

| # | Компонент | Что делает | Закрывает § |
|---|---|---|---|
| 1 | **`stepPlayer`** (DOM) | Универсальный пошаговый плеер: кнопки «◀ шаг / шаг ▶», авто-проигрыш, подсветка текущего шага + пояснение. Любой «Разбор по шагам» → интерактив. | ВСЕ §§ (38 шт.) |
| 2 | **`columnOp`** (canvas) | Сложение/вычитание **в столбик**: выравнивание по запятой, перенос/заём, цифры появляются справа налево, «огонёк» переноса. | 1.4, 4.4, 4.5 |
| 3 | **`longDivision`** (canvas) | Деление **уголком**: сносим цифры, вычитаем, ставим запятую пошагово; для периодов — подсветка **повтора остатка** → период. | 1.7, 1.8, 1.9 |
| 4 | **`commaShift`** (canvas) | Запятая физически **едет** вправо/влево на N разрядов, дорисовываются нули. | 1.5, 1.8 |
| 5 | **`barModel`** (canvas) | Полоса-целое 0…100%, часть закрашивается; связка **% ↔ дробь ↔ десятичная**. | 2.1, 2.2 |
| 6 | **`balanceScale`** (canvas) | Весы «крест-накрест»: произведение крайних = средних; чаши уравновешиваются. | 2.3, 2.5 |
| 7 | **`constAreaRect`** (canvas) | Прямоугольник **постоянной площади**: ширина↑ → высота↓ — наглядная обратная пропорция. | 2.4 |
| 8 | **`pieGrow`** (canvas) | Растущие сектора круговой диаграммы; перетаскиваемые границы секторов. | 2.7 |
| 9 | **`vennDrag`** (SVG/canvas) | Перетаскиваемые круги; элементы **живо сортируются** по областям; ∩/∪ подсветка. | 3.3, 3.4 |
| 10 | **`setFilter`** (canvas) | Числа летят сквозь «фильтр свойства» (чётное, кратно 3…); подходящие падают в множество. | 3.1, 3.2 |
| 11 | **`thermometer`** (canvas) | Столбик термометра ↑↓, ±числа, **`|x|` как измеренное расстояние до 0**, противоположные — зеркально. | 4.1, 4.2 |
| 12 | **`numberLineJumps`** (canvas) | Умножение как **повторные прыжки** ($3\cdot(-2)$ = три прыжка по −2); вычитание = прыжок противоположного. | 4.5, 4.7, 4.8 |
| 13 | **`coordGame`** (canvas) | «Морской бой/клад»: поставь точку по координатам; перекрестье от осей; четверти подсвечиваются. | 5.1 |
| 14 | ~~`solid3d` + `unfoldNet`~~ | **ИСКЛЮЧЕНО** (по решению). Гл.6 §1 остаётся со статичной SVG-галереей тел + развёртки + квизы. | — |
| 15 | **`triangleDrag`** (SVG) | Тащишь вершину — тип треугольника **пересчитывается вживую**, штрихи равных сторон и дуги углов обновляются. | 6.3 |
| 16 | **`reflectFold`** (canvas) | **Складывание** фигуры через ось (осевая симметрия) и **поворот на 180°** вокруг точки (центральная). | 6.4, 6.5 |

> `stepPlayer` (#1) — самый дешёвый и самый «массовый»: один компонент оживляет все «Разборы по шагам», включая простые дроби/столбик, о которых просил пользователь.

---

## B. Карта «параграф → визуализация»

### Глава 1 — Десятичные дроби
- **§1** Разряды → анимированная «разрядная лента»: цифры падают в столбцы-разряды (ед., десятые…) с подписями значений; + зум числовой прямой ×10 (десятые→сотые).
- **§2** Сравнение/округление → «дуэль по разрядам» (две дроби, разряд за разрядом подсвечивается); округление = точка **примагничивается** к ближайшему делению.
- **§3** Коорд. луч → единичный отрезок делится на 10, маркер **скользит** к значению. (`numberLine` + анимация маркера.)
- **§4** Сложение/вычитание → **`columnOp`**: запятая под запятой, перенос/заём по разрядам.
- **§5** ×/÷ 10,100,1000 → **`commaShift`**: запятая едет, нули дорисовываются.
- **§6** Умножение → `areaModel` ✓ + «считаем знаки»: умножили как целые → запятая въезжает.
- **§7** Деление на натур. → **`longDivision`** (уголок).
- **§8** Деление на дробь → **`commaShift`** (запятая у обоих) → `longDivision`.
- **§9** Конечные/бесконечные → **`longDivision`** с **колесом остатков**: повтор остатка → период `0,(3)`.
- **§10** Преобразования → конвертер дробь↔десятичная (полоса делится / запускается деление).
- **§12** Применение → анимированный чек: цены складываются, сдача отсчитывается.

### Глава 2 — Проценты и пропорции
- **§1** Проценты → **`barModel`** + сетка 100 клеток, синхронно %/дробь/десятичная.
- **§2** 3 задачи → **`barModel`** под каждый тип (часть/целое/процент подсвечивается) + анимация блок-схемы выбора типа.
- **§3** Пропорция → **`balanceScale`** «крест-накрест».
- **§4** Прямая/обратная → прямая: точки поднимаются по лучу; обратная: **`constAreaRect`** (площадь = const).
- **§5** Решение пропорцией → стрелки прямой/обратной (обратную «переворачиваем») + `balanceScale`.
- **§6** Масштаб → зум карты до реального размера с линейкой; коэффициент масштаба анимирован.
- **§7** Круговые диаграммы → **`pieGrow`** (сектора растут; перетаскивание границ).
- **§9** Применение → ценник: зачёркивание старой цены, новая; рост вклада столбиком.

### Глава 3 — Множество
- **§1** Множество/∈/∉/∅ → **`setFilter`**/«вброс элементов»: ∈ светится зелёным, ∉ отскакивает; ∅ — пустой контейнер.
- **§2** Способы задания → **`setFilter`**: числа сквозь фильтр «чётное/кратно 3», подходящие падают в `{…}`.
- **§3** Операции ∩/∪ → **`vennDrag`**: тащишь круги, элементы пересортировываются, ∩/∪ подсветка.
- **§4** Круги Эйлера → **`vennDrag`** с числами в областях; формула $|A\cup B|=|A|+|B|-|A\cap B|$ показывает «общие посчитаны дважды».

### Глава 4 — Рациональные числа
- **§1** ±числа/коорд. прямая → **`thermometer`** (тепло/холод, лево/право от 0).
- **§2** Модуль/противоположные → `thermometer`/зеркало: `|x|` как измеренное расстояние до 0; $a$ и $-a$ отражаются.
- **§3** Сравнение → «дуэль» на числовой прямой (правее = больше; из двух отриц. ближе к 0).
- **§4** Сложение → `numberLineWalk` ✓.
- **§5** Вычитание → `numberLineWalk` с **переворотом** $b\to -b$ перед шагом ($a-b=a+(-b)$).
- **§6** Законы → перегруппировка: слагаемые меняются местами / группируются, противоположные **взаимно гасятся** ($a+(-a)\to0$).
- **§7** Умножение → **`numberLineJumps`** (повторные прыжки) + таблица знаков с подсветкой.
- **§8** Деление → знаки (как умножение) + «разбиение на группы».
- **§9** Все действия → **`stepPlayer`** с подсветкой «какое действие считается сейчас» (скобки→×÷→+−).

### Глава 5 — Координатная плоскость
- **§1** Декартова система → **`coordGame`** (поставь точку/найди клад; четверти подсвечиваются).
- **§2** Графики процессов → `carGraph` ✓ (+ можно «температура за день»).
- **§3** y=kx / y=k/x → `plotLive` ✓.

### Глава 6 — Наглядная геометрия
- **§1** Тела/развёртки → **без 3D-анимации (исключено)**: статичная SVG-галерея тел + развёртки + квизы «грани/рёбра/вершины» и «какое тело из развёртки» (уже есть).
- **§2** Окружность/круг → `rollingCircle` + `sweepArea` ✓.
- **§3** Виды треугольников → **`triangleDrag`** (тащишь вершину — тип пересчитывается).
- **§4** Центральная симметрия → **`reflectFold`** (поворот на 180° вокруг $O$).
- **§5** Осевая симметрия → **`reflectFold`** (складывание через ось, как лист бумаги).

---

## C. Дополнительные идеи (сверх программы)
- **«Карта прогресса» на хабе**: тропа из 6 узлов-глав, заполняется по мере прохождения; маскот/питомец ведёт по пути (синхрон с pet.html).
- **Микронаграды**: стикеры за серию верных ответов; конфетти на боссах (есть).
- **«Сравни себя»**: таймер на тренажёре + личный рекорд (localStorage).
- **«Покажи решение»**: `stepPlayer` всплывает после ответа в любом тренажёре.
- **Звук (Web Audio)**: щелчок переноса в столбике, «дзынь» на верном ответе — опционально, с учётом mute/reduced-motion.
- **Тёмная тема для canvas** — уже через cssVar; проверить контраст.
- **Доступность**: `prefers-reduced-motion` → статичный кадр (уже в движке); aria-подписи к canvas.

---

## D. Подход к раскатке
1. **Opus строит реюзабельные компоненты** (раздел A) — это canvas/3D, риск, нет авто-визуальной проверки, нужен headless-guard + тест «монтируется». Сделано: `stepPlayer`, `thermometer`, `plotLive`, `carGraph`, `rollingCircle`, `sweepArea`, `areaModel`, `numberLineWalk`.
Остаток приоритетно: `numberLineJumps` → `coordGame` → `triangleDrag` → `reflectFold` → `barModel`/`pieGrow` → `vennDrag`/`setFilter` → `balanceScale`/`constAreaRect`. (3D-тела исключены.)
2. **Sonnet-воркфлоу вшивает** компоненты в §§ по карте (раздел B), по главе на агента, через `if(window.Math6Anim){…}`, с само-проверкой тестом (как делали при обогащении).
3. Каждый компонент → запись в тест «canvas-демо монтируются (headless-safe)».

Эталоны headless-safe и паттерн вшивания см. в [[project_math6_textbook]].