Inicio Explorar Ayuda
Iniciar sesión
u23-27gurkin
/
wave-spectr
1
0
Fork 0
Archivos Incidencias 0 Pull Requests 0 Wiki
Árbol: 506a334f72
Ramas Etiquetas
wave-spectr
/
docs
/
tz.md

tz.md 7.2 KB
Histórico Raw

Техническое задание

Структура интерфейса

В приложении реализовано 4 блока, точно соответствующих записям в конспекте:

  1. Левая верхняя часть: График выбранного базового гармонического колебания.
  2. Левая нижняя часть (Управление):
    • Выведены формулы: y = A*cos(wt + θ), V = 1/T.
    • Настройка частоты (до 20 кГц) и амплитуды.
    • Переключатель шага частоты: 10 Гц и 100 Гц.
    • Вкладки (V1, V2, V3) — для каждого колебания сохраняются свои настройки.
    • Кнопка вывода звука на динамик.
    • Кнопка нелинейного преобразования (Клиппинг).
    • (NEW) Кнопка «Сбросить все» для быстрого возврата к стандартным параметрам.
  3. Правая верхняя часть (Теорема Фурье):
    • Текст теоремы о том, что любое колебание может быть представлено в виде суммы.
    • Результирующий график суммы волн.
  4. Правая нижняя часть (Спектр):
    • Отображение амплитудно-частотной характеристики.
    • (NEW) Добавлена координатная разметка по оси X (5кГц, 10кГц, 15кГц).
    • Демонстрация появления паразитных гармоник при включении искажений.

Цель проекта: Создать локальное одностраничное веб-приложение (PWA) для демонстрации физических принципов сложения гармонических колебаний (теорема Фурье), амплитудно-частотного спектра и влияния нелинейных преобразований (клиппинга) на форму сигнала и его звучание.

Требования к стеку:

  • Разработка ведется на чистом HTML, CSS, JavaScript (Vanilla JS).
  • Запрещено использование сторонних библиотек и фреймворков.
  • Генерация звука реализуется через встроенный Web Audio API.
  • Отрисовка графиков реализуется через HTML5 <canvas>.

Структура интерфейса (Сетка 2x2):

  1. Левая верхняя панель (Базовое колебание): Динамический график выбранной пользователем гармонической волны.
  2. Левая нижняя панель (Управление):
    • Вывод теоретических формул: y = A*cos(wt + θ) и V = 1/T.
    • Система вкладок (V1, V2, V3) для независимой настройки трех разных волн.
    • Ползунки управления: Частота (от 0 до 20 кГц) и Амплитуда (0-100%).
    • Переключатель шага настройки частоты (10 Гц / 100 Гц).
    • Кнопка активации Web Audio API («Вывод на динамике»).
    • Кнопка добавления нелинейного искажения (Клиппинга).
    • Кнопка «Сбросить все».
  3. Правая верхняя панель (Сумма колебаний): Текстовое описание теоремы Фурье и график результирующего (сложного) колебания, полученного путем сложения волн из вкладок V1, V2 и V3. При активации клиппинга график должен обрезать пики по оси Y.
  4. Правая нижняя панель (Амплитудно-частотный спектр): Столбчатая диаграмма частот. При включении нелинейного преобразования должны программно отрисовываться дополнительные (паразитные) гармоники.

1.2: Интерактивная модель Фурье

1. Назначение и стек технологий

  • Тип: Одностраничное PWA приложение.
  • Стек: HTML5, CSS3 (CSS Variables, Flexbox, Grid), JavaScript (Canvas API, Web Audio API). Без фреймворков.
  • Цель: Изучение сложения механических волн, теоремы Фурье, спектрограмм и нелинейных искажений (клиппинга).

2. Архитектура интерфейса (UI/UX)

Приложение состоит из 5 основных блоков:

  1. Плавающее меню кастомизации (Top Bar):
    • Переключение предустановленных тем (Базовая, Темная, Неон).
    • Загрузка пользовательского фонового изображения из файловой системы.
    • Применение графических фильтров к фону (Размытие, Ч/Б, Сепия, Инверсия) через backdrop-filter.
  2. Панель 1 (Левый верх): Визуализация базового гармонического колебания на Canvas.
  3. Панель 2 (Левый низ): Панель управления. Ползунки range для настройки частоты (до 20 кГц) и амплитуды. Система вкладок (V1, V2, V3).
  4. Панель 3 (Правый верх): График сложного колебания (сумма гармоник).
  5. Панель 4 (Правый низ): Амплитудно-частотный спектр с отрисовкой паразитных гармоник.

3. Требования к интерактивному аудио (UI Audio)

Помимо основного физического звука, интерфейс должен иметь звуковой отклик:

  • Кнопки: Короткие синтезированные звуки (beep) при нажатии и наведении (hover). Звук подтверждения действия и звук ошибки/сброса.
  • Ползунки (Range): Динамическое изменение тональности UI-звука при перетаскивании ползунка (частота звука зависит от текущего значения value ползунка).
  • Реализация: Отдельный независимый экземпляр AudioContext, чтобы системные звуки интерфейса не смешивались с физической демонстрацией частот.