Как написать сценарий для голосовой анимации робота в p5.js

JavaScript — это язык интернета. Работа в front-end разработке без этого невозможна. Новичкам, особенно детям, может быть сложно привыкнуть к синтаксису языка.

Камнем преткновения может быть даже установка и запуск локального сервера в браузере. Что если бы был способ сделать что-то классное с помощью JavaScript, не устанавливая ничего? Введите p5.js, библиотеку кодирования, разработанную с учетом творческого подхода.

Вот как сделать анимированную анимированную голову робота с использованием простых принципов кодирования.

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

Библиотека p5.js была создана художником из Лос-Анджелеса Лорен Маккарти. Он предназначен для предоставления платформы, аналогичной обработке, для творческого самовыражения и искусства. Ясные инструменты идут вместе с хорошо объясненными учебниками и справочными документами, чтобы сделать его идеальным для начинающих.

Делаете ли вы анимацию, музыку, простые игры или даже подключаетесь к внешнему оборудованию

, p5.js может помочь.

Редактор p5.js

Для начала откройте окно браузера и перейдите в веб-редактор p5.js. Перед началом есть два необязательных шага.

1. Вы должны войти в p5.js, чтобы сохранить свои эскизы, поэтому рекомендуется создать учетную запись. Регистрация бесплатна, и вы можете использовать свою учетную запись Google или GitHub для входа, если хотите.

2. Нажмите на шестерню настроек в правом верхнем углу. Здесь вы можете изменить тему и размер текста для всех любителей темных тем.

Редактор p5.js объединяет редактор кода, консоль и окно вывода в одном пространстве. Пока что для вас уже настроены две функции.

Основы p5.js

Каждый набросок p5.js начинается с двух элементов. настроить() функция и рисовать() функция. Для тех из вас, кто программировал Arduino раньше, это будет знакомо!

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

настроить() Функция запускается в начале вашей программы. В этом случае программа установки создает квадратный холст размером 400 пикселей. Измените это на (500, 500) для немного большей площади для работы.

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

function draw() {
background(220);
}

рисовать() Метод называется каждый кадр. Это очень похоже на функцию цикла в Arduino или функцию обновления в Unity 3D. Все, что нужно изменить в вашем эскизе, происходит здесь. На данный момент фон перерисовывается каждый кадр. Вверху вы увидите две иконки, играть и останавливаться. Нажмите играть.

Это программа до сих пор — холст 500 × 500 с серым фоном,

Создание формы

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

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

эллипс() Метод принимает несколько аргументов. Первые два — это X и Y позиции на холсте. Поскольку холст имеет ширину 500 пикселей, установка этих двух значений на 250 помещает эллипс в центр. Третий аргумент — это ширина круга, в данном случае 50 пикселей.

Итак, у вас есть фон и круг, но он выглядит не так хорошо. Время это исправить.

Добавление некоторого стиля

Начните с изменения цвета фона. Число в скобках представляет значение в градациях серого. Итак, 0 — это черный, а 255 — это белый, с различными оттенками серого между ними. Чтобы сделать фон черным, измените это значение на 0.

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

Теперь при нажатии на кнопку воспроизведения фон будет черным. Чтобы придать кружку некоторый цвет, мы хотим по отдельности повлиять на его значения RGB (красный, зеленый и синий). Создайте некоторые переменные в верхней части вашего скрипта (прямо в начале, перед функцией настройки), чтобы сохранить эти значения.

var r, g, b;

В функции настройки установите значение р в 255, и дать другим значение . Его комбинированный цвет RGB будет ярко-красным!

r=255;
g=0;
b=0;

Чтобы применить цвет к кругу, добавьте заполнить () вызовите метод draw, непосредственно перед рисованием круга.

  fill(r,g,b);
ellipse(250,250,50);

Теперь нажмите играть, и вы должны увидеть красный круг на черном фоне.

Создание круга — хорошее начало, но добавление интерактивности — это то, что становится действительно интересным!

Нажмите, чтобы изменить цвет

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

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

mousePressed () слушает любые нажатия мыши и выполняет код внутри скобок. случайным образом () Функция возвращает случайное значение от 0 до заданного числа. В этом случае вы устанавливаете значения r, g и b в диапазоне от 0 до 255 при каждом нажатии мыши.

Повторите код и несколько раз щелкните мышью. Круг должен изменить цвет, когда вы делаете.

Теперь ваша анимация реагирует на щелчки мышью, но как насчет использования голоса пользователя?

Настройка голосового управления

Использование системного микрофона стало проще благодаря библиотеке звуков p5.js. В верхней части вашего скрипта создайте новую переменную с именем микрофон.

var r, g, b;
var mic;

Добавьте эти строки в свой настроить() функция для назначения микрофон на аудио вход.

mic = new p5.AudioIn()
mic.start();

Когда вы нажмете «Играть сейчас», вы получите диалоговое окно с запросом разрешения на доступ к встроенному микрофону.

Нажмите Разрешать. В зависимости от того, какой браузер вы используете, он может запомнить ваш выбор, или вам может потребоваться щелкнуть окно подтверждения. Теперь микрофон настроен, и пришло время использовать его.

Масштабирование по объему

Чтобы использовать громкость микрофона в качестве значения в вашей программе, вам необходимо сохранить его как переменную. Измени свой рисовать() способ выглядеть так:

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

В начале функции новая переменная называется micLevel создается и присваивается текущей амплитуде микрофона.

Эллипс имел фиксированную ширину 50 пикселей. Теперь 50 пикселей — это минимальная ширина, добавленная к значению micLevel, которое обновляет каждый кадр. Число, на которое умножается micLevel, зависит от чувствительности вашего микрофона.

Поэкспериментируйте с более высокими значениями — значение 5000 создаст более существенное изменение масштаба!

Заметка: если это не работает, возможно, ваш микрофон настроен неправильно. Браузер использует системный микрофон по умолчанию, и вам может потребоваться изменить настройки звука и обновить данные.

Построение робота

Теперь у вас есть все инструменты, необходимые для создания робота. Сначала переместите созданный вами эллипс и добавьте еще один, чтобы сделать глаза.

  ellipse(150,150,50 + micLevel * 2000);
ellipse(350,150,100 +micLevel * 2000);

«Зубы» — это серия прямоугольников, идущих от нижней части экрана. Обратите внимание, что Rect () Метод требует дополнительного параметра для его фиксированной ширины.

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

На этот раз вы хотите, чтобы высота зубов изменялась, и чтобы эффект «улыбки» был, они должны иметь различную чувствительность. Минимальная высота равна -100 (как это происходит от нижней части холста), поэтому micLevel также должен быть отрицательным числом.

Нажмите кнопку воспроизведения, и вы увидите почти готовое лицо робота!

Еще раз, вам может понадобиться настроить ваши множители для достижения наилучших результатов.

Добавление завершающих штрихов

Добавьте зрачки в глаза с еще большим эллипс() звонки. Используйте другой заполнить () сделать их белыми. Добавьте это к вашему рисовать() метод, ниже «зубов», которые вы только что создали.

fill(255);
ellipse(150,150,20 + micLevel * 1000);
ellipse(345,150,30 + micLevel * 1000);

Наконец, чтобы дать всему определению небольшое определение, измените ударный вес в вашем настроить() функция

strokeWeight(5);

Это оно!

Если что-то не работает, тщательно проверьте свой код, и вы можете увидеть полный код из этого руководства в редакторе p5, если это необходимо.

Двигаясь вперед с p5.js

Этот учебник для начинающих охватывает некоторые базовые концепции с помощью p5.js, показывая, насколько легко быть креативным. Как всегда, этот проект едва царапает поверхность всего, на что способен p5.js.

Тратить время на создание художественных произведений с помощью p5.js — это хорошо проведенное время, так как вы знакомитесь с мышлением как программист и синтаксисом JavaScript. Это все важные навыки, которые нужно продвигать вперед, если вы решите полностью погрузиться и по-настоящему выучить JavaScript

!