Реактивная на звук голова робота в p5.js

Зачем этот туториал и кому он подойдёт

Этот материал подходит новичкам, преподавателям, детям и всем, кто хочет быстро получить интерактивный визуальный результат в JavaScript без настройки локального сервера. Мы используем библиотеку p5.js, ориентированную на творчество и простоту: она объединяет редактор, окно вывода и аудио-интерфейс прямо в браузере.

Ключевые задачи туториала:

Познакомить с базовой структурой p5.js (setup, draw).
Показать работу с формами, цветом и заливкой.
Подключить микрофон и считывать уровень звука.
Сделать визуальные элементы, масштабирующиеся и анимирующиеся от громкости.
Дать готовый код и рекомендации по расширению.

Первые шаги: открытие редактора и настройки

Откройте браузер и перейдите в p5.js Web Editor.
Рекомендуется зарегистрироваться (можно через Google или GitHub), чтобы сохранять скетчи.
В правом верхнем углу нажмите шестерёнку, чтобы настроить тему и размер шрифта в редакторе.

Интерфейс p5.js Editor: окно кода, консоль и область вывода

Важно: для сохранения скетча требуется вход в аккаунт. Интерфейс редактора сочетает окно кода, консоль и окно предпросмотра в одном окне — это удобно для обучения.

Краткое объяснение p5.js

p5.js — это JavaScript-библиотека для творчества и визуализации, вдохновлённая Processing. Она упрощает работу с холстом (canvas), звуком и вводом, предоставляя понятный API для анимации и интерактивности.

Термин: sketch — отдельный проект/файл в p5.js, обычно содержащий функции setup() и draw().

Базовая структура скетча

Каждый скетч начинается с двух функций: setup() (выполняется один раз) и draw() (выполняется каждый кадр).

function setup() {
  createCanvas(500, 500);
}

function draw() {
  background(220);
}

createCanvas(w, h) создаёт прямоугольную область вывода в пикселях.
background() перерисовывает фон каждый кадр.

Создаём простую форму

Добавим круг в центр холста:

function draw() {
  background(220);
  ellipse(250,250,50);
}

ellipse(x, y, w) — рисует эллипс с центром в (x, y) и шириной w (в пикселях). На холсте 500×500, поэтому (250, 250) — центр.

Белый эллипс в центре чёрного холста

Добавляем цвет и стиль

Значение в background() — это оттенок серого: 0 — чёрный, 255 — белый. Сделаем фон чёрным и зададим цвет круга через RGB-переменные.

var r, g, b;

function setup() {
  createCanvas(500, 500);
  r = 255;
  g = 0;
  b = 0;
  strokeWeight(5);
}

function draw() {
  background(0);
  fill(r, g, b);
  ellipse(250,250,50);
}

fill(r, g, b) задаёт заливку фигуры по компонентам RGB (0–255).
strokeWeight(n) меняет толщину контура.

Красный круг на чёрном фоне

Реакция на клик мыши

Добавим смену цвета по щелчку:

function mousePressed() {
  r = random(256);
  g = random(256);
  b = random(256);
}

random(256) возвращает случайное число от 0 до 255. Каждый клик будет менять цвет круга.

Клик меняет цвет круга

Подключаем микрофон

Чтобы использовать звук, подключим p5.Sound и создадим объект p5.AudioIn.

var r, g, b;
var mic;

function setup() {
  createCanvas(500, 500);
  r = 255; g = 0; b = 0;
  strokeWeight(5);
  mic = new p5.AudioIn();
  mic.start();
}

При запуске в редакторе браузер запросит разрешение на доступ к микрофону. Нажмите “Allow” (Разрешить).

Диалог разрешения доступа к микрофону в браузере

Важно: браузер использует микрофон по умолчанию в настройках системы. Если звук не читается, проверьте системные настройки и перезагрузите страницу.

Используем уровень звука для масштабирования

Получим текущий уровень громкости и используем его для изменения размера формы:

function draw() {
  var micLevel = mic.getLevel();
  background(0);
  fill(r, g, b);
  ellipse(250,250,50 + micLevel * 2000);
}

mic.getLevel() возвращает амплитуду входного сигнала (обычно в диапазоне от ~0 до ~1 для реальных микрофонов, но значения зависят от чувствительности и устройств). Умножение на 2000 даёт визуально заметное изменение размера.

Пример масштабирования фигуры в зависимости от голоса

Совет: экспериментируйте с множителем (500, 2000, 5000) в зависимости от громкости микрофона и желаемого визуального эффекта.

Конструируем лицо робота

Теперь соберём «голову робота» из простых форм: глаза — эллипсы, зубы — прямоугольники, зрачки — меньшие эллипсы. Используем micLevel для реагирования на звук.

Добавьте в draw() следующие вызовы вместо одного центрального эллипса:

function draw() {
  var micLevel = mic.getLevel();
  background(0);
  fill(r, g, b);

  // Глаза
  ellipse(150,150,50 + micLevel * 2000);
  ellipse(350,150,100 + micLevel * 2000);

  // Зубы — прямоугольники, растущие вверх от нижней границы
  rect(0, 500, 100, -100 - micLevel * 5000);
  rect(400, 500, 100, -100 - micLevel * 5000);
  rect(100, 500, 100, -100 - micLevel * 3000);
  rect(300, 500, 100, -100 - micLevel * 3000);
  rect(200, 500, 100, -100 - micLevel * 1000);

  // Зрачки (белые)
  fill(255);
  ellipse(150,150,20 + micLevel * 1000);
  ellipse(345,150,30 + micLevel * 1000);
}

Пояснения:

rect(x, y, w, h) — прямоугольник; если h отрицательный, прямоугольник рисуется вверх от y.
Разные множители у зубов дают эффект «улыбки», где одни зубы реагируют сильнее, другие слабее.

Почти готовая голова робота с реагирующими на звук деталями

Финальный код (полный скетч)

Ниже приведён полный код, который можно вставить в p5.js Web Editor и сразу запускать.

var r, g, b;
var mic;

function setup() {
  createCanvas(500, 500);
  r = 255; // начальный красный
  g = 0;
  b = 0;
  strokeWeight(5);
  mic = new p5.AudioIn();
  mic.start();
}

function draw() {
  var micLevel = mic.getLevel();
  background(0);
  fill(r, g, b);

  // Глаза
  ellipse(150,150,50 + micLevel * 2000);
  ellipse(350,150,100 + micLevel * 2000);

  // Зубы
  rect(0, 500, 100, -100 - micLevel * 5000);
  rect(400, 500, 100, -100 - micLevel * 5000);
  rect(100, 500, 100, -100 - micLevel * 3000);
  rect(300, 500, 100, -100 - micLevel * 3000);
  rect(200, 500, 100, -100 - micLevel * 1000);

  // Зрачки
  fill(255);
  ellipse(150,150,20 + micLevel * 1000);
  ellipse(345,150,30 + micLevel * 1000);
}

function mousePressed() {
  r = random(256);
  g = random(256);
  b = random(256);
}

Готовая цветная реактивная на звук голова робота в p5.js

Отладка: когда что-то не работает

Важно:

Если браузер не запрашивает доступ к микрофону, проверьте настройки сайта в браузере и системные параметры микрофона.
Если mic.getLevel() всегда возвращает 0, попробуйте другое устройство ввода и увеличьте множитель для визуализации.
В некоторых средах (например, мобильных браузерах) поведение API может отличаться — тестируйте на компьютере для обучения.

Примечание: p5.js Web Editor по умолчанию подключает библиотеку p5.sound. Если вы запускаете код локально, убедитесь, что подключили p5.sound.js.

Критерии приёмки

Чтобы считать задачу выполненной, проверьте:

При запуске скетча появляется холст 500×500 px.
Браузер запрашивает доступ к микрофону и он разрешён.
Элементы лица (глаза, зубы) изменяют размеры при звуковой волне/шёпоте/клике.
Клик мыши меняет цвет лица на случайный.

Расширения и идеи для проекта

Цвет по частоте: добавить анализ частот (FFT) и менять цвет по доминирующей частоте.
Анимация при тишине: использовать интерполяцию (lerp) для плавного уменьшения элементов.
Подключение внешних устройств: отправлять данные в Arduino или WebSocket для управления светом/роботом.
Сохранение скриншотов: добавить кнопку для экспорта изображения canvas.
Добавить визуальные эффекты: шум, постобработка, градиенты, шейдеры.

Альтернативные подходы

Processing (Java) — если хотите локальную среду и привычный синтаксис Processing.
p5.js локально — можно скачать библиотеку и запустить на локальном веб-сервере (например, через live-server).
Tone.js — если главный фокус на звук, Tone предоставляет более мощные инструменты для синтеза и синхронизации.

Когда метод не подходит (контрпример)

Если нужна точная низкочастотная аналитика (например, определение ноты в реальном времени), простого mic.getLevel() недостаточно; потребуется FFT-анализ и более сложная обработка.
В условиях, где микрофон недоступен (публичные киоски, устройства без микрофона), подход не применим.

Мини-методология: как планировать проект (шаги)

Определите цель визуализации (размер, цвет, движение).
Определите входные данные (уровень громкости, спектр, события).
Спроектируйте элементы интерфейса и их реакцию на входы.
Реализуйте минимальный рабочий прототип (MVP) в p5.js.
Отладьте на разных устройствах и добавьте настройки чувствительности.

Чек-листы по ролям

Учитель:

Подготовьте ссылку на p5.js Web Editor и пример кода.
Объясните безопасное обращение с микрофоном и приватность.
Дайте задания на расширение (цвет, FFT, экспорт изображений).

Ученик / ребёнок:

Скопируй код в редактор.
Нажми play и разреши микрофон.
Экспериментируй с числами (множителями) и цветами.

Родитель:

Проверьте разрешения браузера и наличие внешнего микрофона при необходимости.

Тесты и критерии приёмки (коротко)

Запуск: холст создаётся без ошибок.
Ввод: при воспроизведении звука элементы действительно меняют размеры.
Интерфейс: клик мыши даёт случайный цвет.
Граничные условия: при отсутствии микрофона приложение остаётся стабильным (нет падающих ошибок в консоли).

Небольшая таблица параметров для подстройки (шаблон)

canvasWidth: 500
canvasHeight: 500
eyeBaseSize: 50 / 100
eyeVolumeMultiplier: 2000
teethMultipliers: [5000, 5000, 3000, 3000, 1000]
pupilMultiplier: 1000

Используйте эти значения как начальную точку и меняйте для достижения желаемого визуального эффекта.

Глоссарий 1‑строкой

p5.js: JS-библиотека для творчества и визуализации.
sketch: проект в p5.js.
setup(): выполняется один раз при старте.
draw(): выполняется каждый кадр.
p5.AudioIn: интерфейс для входного аудио.
mic.getLevel(): уровень громкости (амплитуда).

Советы по безопасности и приватности

Браузер запрашивает разрешение на микрофон. Разрешайте доступ только на доверенных сайтах.
Web Editor хранит скетчи в облаке привязанном к аккаунту — следите, не публикуйте личные данные.

Сравнение: Web Editor vs локальная разработка

Web Editor: быстрый запуск, нет настройки, ограниченная интеграция.
Локально: гибкость, возможность подключать внешние зависимости и локальные файлы, но требуется веб-сервер.

Частые ошибки и как их исправить

mic.getLevel() всегда 0:
- Проверьте системный микрофон по умолчанию.
- Проверьте, разрешил ли сайт доступ к микрофону.
- Попробуйте увеличить множитель.
Нет реакции на клик:
- Убедитесь, что функция mousePressed() объявлена на глобальном уровне и не вложена в другие функции.
Консоль выдаёт ошибки о p5.sound:
- Подключите p5.sound.js или используйте Web Editor, где библиотека уже доступна.

Краткое резюме

p5.js — отличный инструмент для быстрого прототипирования интерактивной графики.
Используя p5.AudioIn и mic.getLevel(), можно сделать визуализацию, реагирующую на звук, без установки ПО.
Экспериментируйте с множителями и формами, чтобы получить желаемый художественный эффект.

Дополнительно: если хотите, я могу привести версию кода с FFT-анализом, добавить слайдеры UI для регулировки множителей или сделать вариант для мобильных экранов.