wave-spectr/docs/czenario.md

Сценарий приложения HarmoniX: Механические волны и Фурье

Глобальная сцена: Кастомизация и UI-отклик

• Визуальное оформление: В правом верхнем углу находится панель кастомизации. Пользователь может на лету переключать цветовые схемы (Базовая, Темная, Неон), загружать собственное изображение для фона и применять к нему CSS-фильтры (размытие, сепия, инверсия, ч/б).
• Звуковой отклик интерфейса: Любое взаимодействие с интерфейсом сопровождается синтезированным звуком:
  • Наведение мыши и клики по вкладкам издают короткие системные звуки.
  • Перемещение ползунков частоты и амплитуды генерирует звук, тональность (pitch) которого динамически меняется пропорционально выбранному значению.
  • Нажатие кнопки «Сбросить все» сопровождается характерным звуком отмены/ошибки.

Сцена 1 (Левая верхняя часть): Базовое колебание

• Элементы: Динамический график (Canvas) выбранного базового гармонического колебания.
• Действие: График непрерывно анимируется (движется влево), отражая текущие настройки амплитуды и частоты из Сцены 2. Цвет графика автоматически подстраивается под выбранную тему оформления (например, становится неоново-розовым в теме "Неон").
• Элементы: Кнопка-бургер "☰". При нажатии слева выезжает панель настроек.
• Действие: Пользователь может настроить внешний вид сайта (темы, онлайн-обои, фильтры) не загромождая основное рабочее пространство.

Сцена 2 (Левая нижняя часть): Управление колебаниями

• Элементы: Блок формул (y = A*cos(wt + θ)), система из трех вкладок (V1, V2, V3) для независимых волн, ползунки настройки (Частота и Амплитуда), функциональные кнопки.
• Действие: Пользователь настраивает параметры каждой из трех гармоник по отдельности.
• * Действие: Помимо наблюдения за анимацией, пользователь может навести курсор на правый нижний угол любого графика и потянуть с зажатой левой кнопкой мыши. Размеры графика будут меняться вручную (растягивание/сжатие) под нужды пользователя.
• Кнопка «Вывод на динамике»: Запускает физический звуковой движок. Генерируется реальный звук, состоящий из суммы настроенных частот (с плавным нарастанием громкости для защиты слуха).
• Кнопка «Искажение (Клиппинг)»: Применяет нелинейное преобразование. Звук из динамиков становится резким и "перегруженным" (дисторшн).

Сцена 3 (Правая верхняя часть): Теорема Фурье

• Элементы: Текст теоремы и график результирующего сложного колебания.
• Действие: График в реальном времени отрисовывает математическую сумму всех трех волн, настроенных в Сцене 2.
• * * Действие: Помимо наблюдения за анимацией, пользователь может навести курсор на правый нижний угол любого графика и потянуть с зажатой левой кнопкой мыши. Размеры графика будут меняться вручную (растягивание/сжатие) под нужды пользователя.
• Условие клиппинга: Если в Сцене 2 нажата кнопка "Искажение", верхушки результирующего графика (пики амплитуды) визуально обрезаются (ограничиваются по высоте), демонстрируя нелинейное искажение формы волны.

Сцена 4 (Правая нижняя часть): Амплитудно-частотный спектр

• Элементы: Столбчатая диаграмма частот с нанесенной координатной сеткой (0, 5 кГц, 10 кГц, 15 кГц).
• Действие: Спектрограмма отображает вертикальные столбцы на тех частотах, которые активны в данный момент (заданы в Сцене 2). Высота столбца зависит от амплитуды.
• * Действие: Помимо наблюдения за анимацией, пользователь может навести курсор на правый нижний угол любого графика и потянуть с зажатой левой кнопкой мыши. Размеры графика будут меняться вручную (растягивание/сжатие) под нужды пользователя.
• Условие клиппинга: При активации нелинейного искажения на спектре автоматически появляются дополнительные полупрозрачные столбцы — "паразитные гармоники", которые математически возникают при обрезке синусоидального сигнала.

Сцена 5: Итоговое тестирование (Overlay*)

• Элементы: Всплывающее (модальное) окно с заголовком без нумерации. Содержит 5 случайно перемешанных вопросов с перемешанными вариантами ответов, анимированными радио-кнопками, кнопку "Проверить ответы", кнопку "Начать сначала" и скрытый текстовый блок для оценки. Меню выбора уровня сложности, кнопки вариантов ответов, блок итогового процента. Кнопки "Выйти" и "Начать сначала".
• Действие: Пользователь отвечает на вопросы. Нажимает кнопку проверки.
• Условия и отклик: Запускается пошаговая геймифицированная проверка с задержкой (400мс): выбранный ответ окрашивается в зеленый или красный цвет, звучит звоночек или зуммер. По завершении выводится количество правильных ответов, текстовое пожелание и проигрывается финальная звуковая фанфара. При желании тест можно пройти заново кнопкой рестарта.

Эпоха v2.6: Базовая лаборатория акустики

Профиль: Ученик средней школы. Цель: Понять базовые свойства звука (громкость и высоту тона).

1. Пользователь открывает приложение со стандартным белым фоном и серыми прямоугольными кнопками.
2. Видит единственный холст (canvas-single) и два ползунка: «Частота» и «Амплитуда».
3. Включает звук. Раздается монотонный гудок (базовый осциллятор Web Audio API).
4. Пользователь двигает ползунок частоты вправо (до 1000 Гц) — синусоида на графике сжимается, звук становится писклявым.
5. Двигает ползунок амплитуды влево (до 10%) — высота волны падает, звук становится тише. Итог сценария: Базовое визуальное и аудиальное закрепление понятий частоты и амплитуды.

Эпоха v8.0 - v12.0: Векторный анализ и Синтез Фурье

Профиль: Студент технического ВУЗа (радиотехника / физика). Цель: Изучить спектральный анализ и фигуры Лиссажу.

1. Студент заходит в обновленный интерфейс с Glassmorphism (эффект прозрачного стекла) и выбирает темную тему оформления.
2. Включает инструмент «Лиссажу: Вкл». Назначает Волне 1 частоту 400 Гц, а Волне 2 частоту 401 Гц. На графике начинает медленно вращаться замкнутая фигура (биения).
3. Отключает Лиссажу и нажимает кнопку пресета «Меандр».
4. Приложение автоматически генерирует три нечетные гармоники на вкладках V1, V2 и V3. 5.Студент смотрит на новые холсты: на холсте canvas-sum он видит, как из круглых синусоид собирается угловатая П-образная волна. На холсте canvas-spectrum он видит три четких спектральных пика. Итог сценария: Наглядное доказательство Теоремы Фурье о сложении сложных сигналов из простых гармоник.

Эпоха v16.0: Глобализация и оптимизация (Ultimate Edition)

Профиль: Иностранный студент. Цель: Комфортное использование платформы без языкового барьера.

1. Пользователь открывает приложение на мобильном телефоне. Отмечает, что интерфейс загрузился мгновенно, так как тяжелые картинки-иконки были заменены на нативные системные эмодзи.
2. Открывает боковое меню и нажимает на кнопку «🇬🇧 English».
3. Весь интерфейс, включая надписи на графиках (X-Axis, Peaks), единицы измерения (Hz, m, s) и калькуляторы, без
4. перезагрузки страницы переводится на английский язык.
5. В конце сессии пользователь сохраняет скриншот спектрограммы через новую кнопку «📷 Snap». Итог сценария:
6. Международное использование PWA-приложения без потери производительности.

Эпоха v18.0-v20.0: Введение в Информационную Безопасность (ТЗИ)

Профиль: Будущий специалист по защите информации. Цель: Изучить методы маскировки акустических каналов утечки.

1. Пользователь изучает чистые синусоиды голоса на графиках.
2. Спускается к новому блоку «ТЗИ: Виброакустическая защита» и нажимает кнопку «🔒 Активировать маскировку». Приложение генерирует математический "белый шум" прямо в аудиоканал.
3. Линия результирующего сигнала начинает хаотично дергаться, спектрограмма покрывается сплошной шумовой стеной.
4. Пользователь визуально понимает, почему аппаратура перехвата не может вычленить голос из зашумленного сигнала.
5. Далее пользователь спускается к калькулятору длины волны. Вместо поиска нужной среды в таблице, он просто вводит
6. вручную скорость звука 5900. Алгоритм сам подхватывает цифру и выдает текстовую подсказку: «Определено: Сталь». Итог сценария: Практическая демонстрация защиты от прослушивания и автоматизация вычислений.

Эпоха v21.0: Enterprise Grand Master (Текущая)

Профиль: Студент, готовящийся к экзамену по волновой механике. Цель: Пройти стресс-тестирование и восполнить пробелы в теории с идеальным UX.

1. Пользователь заходит на сайт. В верхней панели вращается и переливается круглый "живой" логотип. Все кнопки интерфейса имеют плавную волновую геометрию (18px 6px), которая меняется при наведении курсора. Кнопки больше не сливаются с фоном благодаря глубоким теням.
2. В калькуляторе пользователь использует умный выпадающий список Select для выбора нужной среды за один клик (без визуального мусора из десятка кнопок).
3. Студент запускает тестирование «Стандарт (15 мин)».
4. Стресс-тест: Длинного скроллинга вниз больше нет. Вопросы появляются по одному на экране. Студент выбирает ответ (кружок плавно заполняется неоном) и листает вопросы кнопками «▶ Вперед». Сверху убывает умная неоновая лента таймера. На последних 10 секундах она становится красной, счетчик мигает, звучит тиканье.
5. Анализ: Студент нажимает «✅ Сдать». Экран тестирования плавно сменяется экраном результатов.
6. Запускается SVG-анимация кольца: под щелкающий звук цифры бегут от 0 до 85%, кольцо загорается оранжевым цветом.
7. В разборе ошибок студент видит, в чем ошибся, и кликает на интерактивную ссылку «🔗 Читать подробнее в Wikipedia», которая сразу ведет на статью про ряд Фурье. Итог сценария: Полное погружение, геймификация процесса обучения, отсутствие раздражающих факторов интерфейса и бесшовный переход от ошибки к изучению энциклопедического материала.

ПОЛНЫЙ ПОЛЬЗОВАТЕЛЬСКИЙ СЦЕНАРИЙ HARMONIX.

Сценарий приложения HarmoniX: Механические волны и Фурье

Сцена 1: Знакомство и старт

Пользователь открывает веб-приложение. Его встречает полноэкранный экран приветствия с пульсирующими сферами на фоне. В центре экрана — живой анимированный логотип (эффект перетекающей капли morphRing), который задает премиальный тон всей платформе. Пользователь нажимает яркую кнопку «▶ Начать работу». Открывается экран выбора режима (Базовый, Академический, PRO). Пользователь выбирает "PRO" и переходит к графикам.

Сцена 2: Настройка рабочей среды (Локализация и Темы)

Студент кликает на кнопку «☰ Меню» в левом верхнем углу. Выезжает стеклянная панель настроек. Пользователь переключает язык с ru Русский на en English. Весь интерфейс мгновенно переводится без перезагрузки страницы. Студент загружает свои кастомные обои через кнопку 📂 Загрузить фон и применяет тему оформления «Neon (Cyberpunk)». Кнопки в меню имеют асимметричные углы («Волновая геометрия»), которые зеркально меняются при наведении мыши.

Сцена 3: Интерактив с графиками

Пользователь возвращается на главную панель. Он настраивает частоту (440 Гц) и сдвигает фазу ползунками. Белый текст значений фазы и скорости отлично читается благодаря контрастной обводке (text-shadow). На холсте отрисовывается плавная синусоида, а на спектрограмме появляется первый пик. Пользователь нажимает кнопку «⚡ Нелинейн. преобр.». Включает звук ("Динамик"). При включении клиппинга звук становится резким, а на спектрограмме появляется "лес" из паразитных гармоник.

Сцена 4: Изучение информационной безопасности (ТЗИ)

Студент спускается к блоку "Виброакустическая защита". Он нажимает кнопку «🔒 Активировать маскировку». Платформа начинает генерировать аппаратный "белый шум" через Web Audio API. График суммы Фурье становится дерганым и зашумленным, а спектрограмма покрывается сплошной стеной помех. Студент наглядно понимает, как именно генераторы шума защищают помещения от прослушки.

Сцена 5: Использование "Умного калькулятора" и YouTube

Студент скроллит вниз к образовательному блоку. В карточке теории он видит специальное поле, вставляет туда ссылку на лекцию в YouTube и смотрит ее во всплывающем iframe-плеере прямо на странице. Затем он использует калькулятор длины волны. Ему нужно узнать длину волны в воде. Вместо поиска по огромному списку, он просто вводит известную ему скорость 1480 руками в поле. Алгоритм моментально распознает значение и сам переключает текстовое табло на "Пресная вода".

Сцена 6: Сдача экзамена (Пошаговое тестирование)

Студент нажимает на кнопку «🎓 Тесты» в верхней панели. Открывается модальное окно. Он выбирает режим «Стандарт (15 вопросов)». Длинного скролла нет. На экране появляется всего одна карточка вопроса. Сверху появляется «Умная лента таймера», которая плавно убывает. Интерактивные кружки (радиокнопки) плавно заполняются при выборе ответа. На последних 10 секундах лента таймера становится красной, а счетчик начинает тревожно пульсировать. Студент нажимает «✅ Сдать».

Сцена 7: Эпичный экран результатов

Вопросы мгновенно исчезают. Появляется красивое кольцо результатов (SVG). Запускается Count-Up анимация: цифры бегут от 0% до 80%, кольцо плавно заполняется цветом. Студент спускается к окну разбора ошибок. Прямо в разборе ошибки вшита «Живая ссылка на Wikipedia». Студент кликает на неё, читает нужную статью и восполняет пробел в знаниях.

Сцена 8: Дополнительные материалы и выход

Перед выходом студент открывает справочник формул из бокового меню. В справочнике он находит формулы Эффекта Доплера и Акустического импеданса. В самом низу страницы студент видит сетку ресурсов (Фоксфорд, PhET, Academo) с красивыми градиентными кнопками для дополнительного изучения физики.