Learn_System/plans/textbooks-6/PLAN_MATH_6_VISUAL.md

Брейншторм: визуализации в КАЖДЫЙ параграф «Математики 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
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.