diff --git a/plans/textbooks-6/PLAN_MATH_6_VISUAL.md b/plans/textbooks-6/PLAN_MATH_6_VISUAL.md new file mode 100644 index 0000000..16d24af --- /dev/null +++ b/plans/textbooks-6/PLAN_MATH_6_VISUAL.md @@ -0,0 +1,110 @@ +# Брейншторм: визуализации в КАЖДЫЙ параграф «Математики 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`** (canvas) | Вращение тел (куб/призма/пирамида/цилиндр/конус) + **разворачивание развёртки** и сборка обратно. | 6.1 | +| 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** Тела/развёртки → **`solid3d` + `unfoldNet`** (вращение + раскрытие/сборка развёртки). +- **§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` → `columnOp` → `longDivision` → `barModel` → `thermometer`/`numberLineJumps` → `vennDrag` → `solid3d/unfoldNet` → `triangleDrag` → `reflectFold` → остальное. +2. **Sonnet-воркфлоу вшивает** компоненты в §§ по карте (раздел B), по главе на агента, через `if(window.Math6Anim){…}`, с само-проверкой тестом (как делали при обогащении). +3. Каждый компонент → запись в тест «canvas-демо монтируются (headless-safe)». + +Эталоны headless-safe и паттерн вшивания см. в [[project_math6_textbook]].