Звуко‑реактивный робот в p5.js — быстрое руководство

Звуко‑чувствительная голова робота

Зачем это полезно

Позволяет начать программировать на JavaScript через творческий проект.
Демонстрирует работу с Canvas, аудиовходом и анимацией в реальном времени.
Подходит для уроков, хакатонов и быстрых прототипов — работает в браузере.

Ключевые понятия (1‑строчная дефиниция)

p5.js — библиотека для творчества и визуализации на JavaScript.
Canvas — область рисования в пикселях внутри p5.js.
mic.getLevel() — амплитуда входного звука в текущем кадре.

Что такое p5.js?

p5.js — это JavaScript‑библиотека, созданная с целью упростить программирование для художников, педагогов и начинающих. Она предоставляет знакомую по Processing среду для рисования, анимаций и работы со звуком. p5.js содержит удобные функции для отрисовки фигур, управления вводом и работы с аудио, что делает библиотеку отличным выбором для интерактивных экспериментов и обучения.

Где использовать

Интерактивные уроки и мастер‑классы.
Прототипы визуализаций звука и музыки.
Визуалы для живых перформансов (с учётом производительности браузера).

Подготовка: p5.js Web Editor

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

Пустой проект в p5.js с аннотациями

Редактор объединяет код, консоль и окно вывода — удобно для быстрых итераций.

Быстрый обзор основных функций p5.js

Каждый скетч p5.js обычно использует две базовые функции:

setup() — запускается один раз в начале; инициализация холста и переменных.
draw() — вызывается каждый кадр; сюда помещают код, который должен обновляться.

Примеры (сохраните их как отдельные блоки в скетче):

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

function draw() {
  background(220);
}

Нажмите «Play» (▶) в редакторе, чтобы запустить скетч.

Результат запуска стандартного скетча p5.js

Шаг 1 — Нарисуем простую форму

Вставьте в draw() следующий код под background(), чтобы отрисовать круг в центре:

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

Пояснение аргументов ellipse(x, y, w): первые два — координаты центра в пикселях, третий — ширина (высота для круга).

Белая эллипсия на холсте p5.js

Шаг 2 — Добавим цвет и стиль

Grayscale — параметр background(x): 0 — чёрный, 255 — белый.
Для цвета используем RGB (0–255). Создайте переменные в начале скрипта:

var r, g, b;

В setup() установите начальные значения (например, ярко‑красный):

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);
}

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

Шаг 3 — Изменяем цвет по клику

p5.js предоставляет обработчик mousePressed(). Добавим случайное изменение RGB при каждом клике:

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

Теперь кликами вы меняете цвет круга.

Круг, меняющий цвет по клику

Шаг 4 — Подключаем микрофон

Создайте переменную mic и инициализируйте её в setup():

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». В разных браузерах поведение диалога может отличаться.

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

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

Шаг 5 — Масштабирование по громкости

В draw() считываем текущую амплитуду и используем её для изменения размеров деталей:

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

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

GIF: масштабирование элемента по голосу

Совет: если круг реагирует слишком слабо, увеличьте множитель, например 5000. Если слишком шумно — уменьшите.

Шаг 6 — Строим лицо робота

Добавим две «глаза» и «зубы», где высота зубов будет зависеть от 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);

  // Зубы — растут вверх от нижней границы холста
  fill(255);
  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(250, 250, 200 + micLevel * 2000);

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

  // Зубы
  fill(255);
  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);
}

Калибровка чувствительности микрофона

Пара практических правил:

Если реакции почти нет — увеличьте множители (2000 → 5000 или больше).
Если всё «дрожит» от фонового шума — уменьшите множители и добавьте сглаживание: храните скользящее среднее micLevel.

Пример сглаживания (экспоненциальное скольжение):

var smooth = 0;
var smoothing = 0.9; // 0..1, ближе к 1 — более сглажено

function draw() {
  var micLevel = mic.getLevel();
  smooth = smoothing * smooth + (1 - smoothing) * micLevel;
  // дальше используйте smooth вместо micLevel
}

Отладка: проверяем, почему ничего не работает

Пошаговая последовательность для устранения проблем:

Нет запроса на доступ к микрофону — проверьте, открыт ли сайт по HTTPS.
Запрос есть, но mic.getLevel() всегда ноль — убедитесь, что в ОС выбран корректный микрофон и браузеру разрешён доступ.
Элементы не видны — проверьте размеры холста и координаты (500x500 в нашем примере).
Цвета не меняются при клике — убедитесь, что mousePressed() определён и редактор активен.

Mermaid‑flow для быстрой навигации при отладке:

flowchart TD
  A[Запустили скетч] --> B{Есть запрос на микрофон?}
  B -- Да --> C{mic.getLevel'' > 0?}
  B -- Нет --> D[Проверьте HTTPS и разрешения]
  C -- Да --> E[Калибруйте множители]
  C -- Нет --> F[Проверьте системный микрофон и настройки браузера]

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

Учитель:

Подготовить ссылку на Web Editor и пример кода.
Проверить работу на школьных компьютерах и разрешения в сети.
Подготовить задания для углубления (например, добавить визуальные эффекты по частоте).

Ученик:

Создать аккаунт в p5.js (по желанию).
Запустить пример и поэкспериментировать с множителями.
Документировать, что меняет поведение скетча.

Родитель/куратор:

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

Набор быстрых приёмов (cheat sheet)

createCanvas(w, h) — создаёт холст.
background(v) — заливает фон (0–255 или цвет).
fill(r,g,b) — задаёт заливку.
strokeWeight(n) — толщина обводки.
ellipse(x,y,w) — круг/эллипс.
rect(x,y,w,h) — прямоугольник (h может быть отрицательным).
random(n) — случайное число 0..n.
new p5.AudioIn() и mic.start() — инициализация микрофона.
mic.getLevel() — текущая амплитуда звука.

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

Скетч запускается в p5.js Web Editor без ошибок.
При запуске появляется запрос доступа к микрофону (если требуется).
Глаза/зубы/формы визуально реагируют на произнесённые звуки.
Цвет головы меняется при клике мыши.

Возможные расширения и альтернативы

Визуализация по частоте: используйте p5.FFT() для разбивки звука на частотные диапазоны и управляйте разными частями лица (например, низкие частоты — «челюсть», высокие — «антенны»).
Подключение MIDI или внешних датчиков через Web Serial / WebUSB для аппаратных взаимодействий.
Экспорт изображения/анимации: сохраняйте кадры через saveCanvas() или записывайте видео (сторонние библиотеки).

Безопасность и приватность

p5.AudioIn() работает локально в браузере: сам по себе он не отправляет аудио на сервер. Тем не менее, убедитесь, что ваш проект и используемые плагины не содержат кода, который отправляет данные в интернет. При показе проекта другим людям объясните, как разрешать и отменять доступ к микрофону в браузере.

Мини‑методология для урока (45–60 минут)

Введение в p5.js и демонстрация готового примера (5–10 мин).
Создание холста и базовой формы (10 мин).
Подключение микрофона и демонстрация mic.getLevel() (10–15 мин).
Доработка лица робота и эксперименты с множителями (10–15 мин).
Завершение: обмен проектами и обсуждение расширений (5–10 мин).

Часть «Когда это не сработает» (кратко)

В корпоративных сетях запрос на микрофон может блокироваться политиками.
На старом устройстве браузер может не поддерживать Web Audio API.
При слабом микрофонном сигнале реакция окажется слишком малой.

1‑строчный глоссарий

Canvas — область для рисования пикселей; p5.js использует HTML5 Canvas.
Амплитуда — уровень громкости сигнала в момент времени.
FFT — быстрый алгоритм для преобразования сигнала в частотную область.

Итог и куда двигаться дальше

Вы создали интерактивную звуко‑реактивную голову робота, работая исключительно в браузере с p5.js. Проект можно расширять: добавлять анализ частот, использовать внешние датчики, сохранять выход и интегрировать элементы управления UI. Главное — это практика: экспериментируйте с числами, добавляйте эффекты и обсуждайте результат с коллегами или учениками.

Важно: если что‑то не работает, следуйте чек‑листу отладки выше — почти всегда проблема решается проверкой разрешений и корректной калибровкой множителей.

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