# PLAN — Визуализации «Математика 5»

Карта «§ → визуальный компонент». Опора — существующая библиотека `window.Math6` (статичные SVG)
и `window.Math6Anim` (canvas/SVG-демо, headless-safe). **Переиспользуем максимум**, новое дописываем
в те же два файла.

Легенда: ✅ уже есть · 🆕 новый компонент · ♻️ есть, нужна лёгкая доработка.

---

## Уже готово (наследуем без изменений)
`Math6`: `fmt, box, numberLine(line/ray, ticks, points, segments), plane(+polyline,plot), pie, venn`.
`Math6Anim`: `rollingCircle, sweepArea, areaModel, numberLineWalk, carGraph, plotLive, thermometer,
numberLineJumps, coordGame, reflectFold, barModel, setFilter, pieGrow, balanceScale, constAreaRect,
triangleDrag` + `stepPlayer`/`stepifyExamples` (авто-конвертация «Разбор по шагам» в плеер).

---

## Глава 1 — Натуральные числа

| § | Тема | Визуал | Статус |
|---|------|--------|--------|
| 1 | Как решать задачу | `stepPlayer` (схема: условие→план→решение→проверка) | ✅ |
| 2 | Чтение и запись, разряды | 🆕 `placeValue` — разрядная таблица (классы/разряды), число рассыпается на разряды | 🆕 |
| 3 | Сравнение | `numberLine` + подсветка >/< ; тренажёр | ✅ |
| 4 | Точка, прямая, луч, отрезок, плоскость | 🆕 `linePrimitives` — SVG-галерея + интерактив «проведи через 2 точки» | 🆕 |
| 5 | Измерение отрезков, длина | 🆕 `rulerMeasure` — линейка над отрезком, тащишь — читаешь длину | 🆕 |
| 6 | Координатный луч | `numberLine` (ray) + `coordGame` («поставь число») | ✅ |
| 7 | Округление | `numberLine` со «снэпом» к разряду (стрелка к ближайшему) | ♻️ |
| 8 | Сложение и вычитание | `numberLineWalk` + столбик (inline, как 6 кл.) | ✅ |
| 9 | Умножение и деление | `areaModel` (a·b) + `numberLineJumps` (прыжки) | ✅ |
| 10 | Степень | 🆕 `powerBlocks` — 2² как квадрат, 2³ как кубик (изометрия), рост основания/показателя | 🆕 |
| 11 | Деление с остатком | 🆕 `remainderGroups` — раскладка точек по группам, остаток подсвечен (a=b·q+r) | 🆕 |
| 12 | Делители, НОД, НОК | 🆕 `divisorsLadder` — лесенки кратных (НОК) + `venn` делителей (НОД) | 🆕 (venn ✅) |
| 13 | Признаки делимости | 🆕 `divisibilityChecker` — вводишь число, флажки 2/3/4/5/9/10 загораются с объяснением | 🆕 |
| 14 | Простые/составные, разложение | 🆕 `sieve` (решето Эратосфена — анимация вычёркивания) + 🆕 `factorTree` (дерево множителей) | 🆕 |
| 15 | Математика вокруг нас | прикладные карточки + любой подходящий демо | ✅ |
| 16 | Движение/взвешивание/переливание | `carGraph` (движение) + интерактив-головоломка «переливание» (state-машина) | ✅/🆕 |
| 17 | Исторические сведения | карточки «А знаешь ли ты?» (системы счисления: майя/Египет/Рим) | ✅ |

## Глава 2 — Выражения. Уравнения

| § | Тема | Визуал | Статус |
|---|------|--------|--------|
| 1 | Числовые выражения | 🆕 `exprTree` — дерево порядка действий, подсветка шага | 🆕 |
| 2 | Выражения с переменными | `exprTree` + подстановка значения (слайдер x → значение) | ♻️ |
| 3 | Уравнение | 🆕 `equationScale` — весы: x+a = b, снимаем гири поровну (наследует `balanceScale`) | 🆕 |
| 4 | Формулы | `constAreaRect` / прямоугольник P=(a+b)·2, S=a·b со слайдерами | ✅ |
| 5 | Решение задач уравнениями | `stepPlayer` | ✅ |
| 6 | Угол. Измерение и построение | 🆕 **`protractor`** — транспортир: тащишь луч, читаешь градусы, классификация (остр/прям/туп/развёрн) | 🆕 ★ключевой |
| 7 | Математика вокруг нас | прикладные карточки | ✅ |
| 8 | Занимательные задачи | головоломки/квизы | ✅ |
| 9 | Исторические сведения | карточки-факты | ✅ |

## Глава 3 — Обыкновенные дроби

| § | Тема | Визуал | Статус |
|---|------|--------|--------|
| 1 | Дробные числа, обыкн. дроби | 🆕 `fractionBar` (полоса m из n) + `pie` (доля круга) | 🆕 (pie ✅) |
| 2 | Деление и дроби, осн. свойство | 🆕 `equivFractions` — дроблю каждую долю → площадь та же (2/3 = 4/6) | 🆕 |
| 3 | Правильные/неправильные, смешанные | 🆕 `improperMixed` — полосы складываются в целые + остаток (7/3 = 2⅓) | 🆕 |
| 4 | Сравнение дробных | `fractionBar` ×2 на общей шкале / `numberLine` дробей | ♻️ |
| 5 | Сложение/вычитание обыкн. дробей | 🆕 `fractionAdd` — приведение к общему знаменателю на полосах | 🆕 |
| 6 | Сложение/вычитание смешанных | `fractionAdd` + целые части | ♻️ |
| 7 | Умножение дробных | 🆕 `fractionMulArea` — площадная модель a/b · c/d (наложение сеток) | 🆕 |
| 8 | Деление дробных | 🆕 `fractionDiv` — «сколько раз c/d помещается» (мерная модель) | 🆕 |
| 9 | Задачи на все действия | `stepPlayer` | ✅ |
| 10 | Задачи на применение дробей | `fractionBar` + сюжетные тренажёры | ♻️ |
| 11 | Параллельные/перпендикулярные | 🆕 `linesRelation` — две прямые, угол между ними, ∥ и ⟂ | 🆕 |
| 12 | Ломаная, многоугольник, периметр | 🆕 `polygonPerimeter` — строишь вершины, стороны суммируются | 🆕 |
| 13 | Площадь, единицы | 🆕 `areaGrid` — заполнение единичными квадратами, конвертер единиц | 🆕 |
| 14 | Площадь прям. треугольника | 🆕 `triangleArea` — треугольник = половина прямоугольника (анимация отражения) | 🆕 |
| 15 | Среднее арифметическое | 🆕 `averageBars` — столбики выравниваются к среднему уровню | 🆕 |
| 16 | Линейные/столбчатые диаграммы | 🆕 `barChart` + `lineChart` (plane уже умеет polyline) | 🆕 (line ♻️) |
| 17 | Параллелепипед, куб | 🆕 `box3d` — изометрический чертёж с подписанными a,b,c (НЕ интерактивный 3D) | 🆕 |
| 18 | Объём | 🆕 `volumeCubes` — заполнение коробки единичными кубиками (изометрия, анимация) | 🆕 |

---

## Сводка новых компонентов (≈22)
**SVG-статичные / интерактивные (в `math6_svg.js` или как SVG-демо):** `linePrimitives`, `rulerMeasure`,
`placeValue`, `fractionBar`, `equivFractions`, `improperMixed`, `linesRelation`, `polygonPerimeter`,
`areaGrid`, `triangleArea`, `box3d`, `factorTree`, `exprTree`.
**Canvas/анимированные (в `math6_anim.js`):** `powerBlocks`, `remainderGroups`, `divisorsLadder`,
`divisibilityChecker`, `sieve`, `protractor`, `equationScale`, `fractionAdd`, `fractionMulArea`,
`fractionDiv`, `averageBars`, `barChart`, `volumeCubes`.

Приоритет (даёт максимум «вау» при минимуме кода): `protractor`, `fractionBar`+`fractionMulArea`,
`sieve`, `box3d`+`volumeCubes`, `equationScale`. Все — headless-safe (canvas-guard / чистый SVG).