Бумажный дверной звонок с P5.js и Макей Макей: 9 шагов

2024 Автор: John Day | [email protected]. Последнее изменение: 2024-01-30 11:50

Проекты Макея Макея »

Этот проект создает эскиз в p5.js, который может воспроизводить аудиофайл с помощью нажатия клавиши, а затем создает простую кнопку с карандашом, бумагой и Makey Makey для запуска звука.

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

Узнайте больше о p5.js:

Если вы новичок в использовании p5.js с Макей Макей, я предлагаю сначала проверить этот проект:

Запасы

Карандаш

Небольшой квадрат бумаги

Набор Makey Makey (с 2 зажимами из кожи аллигатора)

Ноутбук с подключением к Интернету

Шаг 1. Загрузка аудиофайла

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

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

В Интернете есть много мест для загрузки звуковых эффектов и аудиофайлов, для некоторых требуется учетная запись, например freesound.org, а для других учетная запись не требуется, например soundbible.com. Всегда помните о любых требованиях к лицензированию и / или атрибуции при использовании звука для вашего проекта. Подробнее об этом здесь:

Звук дверного звонка для этого проекта был предоставлен Тимом Каном по адресу

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

Шаг 2. Загрузка аудиофайла в P5.js

После того, как мы загрузили звук дверного звонка, нам нужно загрузить его в наш эскиз p5.js, чтобы мы могли получить к нему доступ.

Для этого выполните следующие действия:

- Щелкните значок «>» в левой части веб-редактора, чуть ниже кнопки воспроизведения. Это откроет боковую панель, которая показывает файлы для вашего скетча.

- Щелкните маленький обращенный вниз треугольник справа от «Sketch Files». Откроется раскрывающееся меню с опциями «добавить папку» и «добавить файл».

- Щелкните «Добавить файл». Откроется окно для добавления файла. Вы можете перетащить файл дверного звонка в коробку или щелкнуть там, где в поле написано «перетащите файлы сюда, чтобы загрузить, или щелкните, чтобы использовать браузер файлов». Это позволит вам перемещаться по файлам на вашем компьютере, чтобы найти аудиофайл.

- После того, как вы перетащили или выбрали файл, вы увидите, что он загружается, а имя файла появится на боковой панели.

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

Шаг 3. Загрузка аудиофайла в скетч P5.js

Загрузка аудиофайла в эскиз p5.js требует от нас создания объекта звукового файла. Объект имеет свои собственные свойства и встроенные функции, которые мы можем использовать.

Чтобы создать объект, нам сначала нужно создать переменную для хранения объекта. Это позволит нам получить доступ к объекту и его свойствам по всему эскизу. Чтобы создать переменную, перейдите к верхней строке эскиза и напишите слово let. Это слово используется для объявления переменной в javascript. Затем дайте переменной имя. Мы можем называть переменную как угодно, но полезно дать ей имя, связанное с тем, что она будет делать в нашем коде. В этом случае есть смысл называть его дверным звонком.

пусть дверной звонок;

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

Внутри фигурных скобок мы назначим нашу переменную звуковому объекту с помощью функции loadSound (). В скобках напишите точное имя аудиофайла в кавычках:

function preload () {

дверной звонок = loadSound ('doorbell.mp3');

}

Шаг 4. Воспроизведение аудиофайла с помощью функции KeyPressed ()

Теперь, когда аудиофайл загружен в скетч, вы можете воспроизвести его с помощью метода play (). По сути, методы - это функции, специфичные для объекта.

Если вы раньше использовали нажатие клавиш в p5.js, вероятно, вы использовали условный оператор с переменной keyIsPressed внутри функции рисования. Однако при работе с аудиофайлами мы не хотим запускать его внутри функции рисования. Функция рисования представляет собой цикл, поэтому он постоянно обновляется. Это означает, что аудиофайл будет воспроизводиться снова и снова, пока нажата клавиша, которую будет неприятно слушать.

Чтобы этого избежать, вы собираетесь использовать функцию под названием keyPressed (). Это также написано так же, как функции setup () и draw (). Напишите это внизу кода под функцией draw ().

Внутри фигурных скобок вы помещаете метод play (), который запускает аудиофайл один раз при нажатии клавиши. Чтобы использовать метод для объекта, напишите имя переменной, которая содержит объект, за которым следует.play ();

function keyPressed () {

doorbell.play ();

}

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

ВАЖНОЕ ПРИМЕЧАНИЕ: при добавлении нажатия клавиш в наш код веб-редактор должен знать, нажимаем ли мы клавишу для написания кода в текстовом редакторе или нажимаем клавишу, чтобы сделать то, что мы закодировали для нажатия клавиши. Когда вы нажимаете кнопку воспроизведения, наведите указатель мыши на холст и нажмите на холст. Это перенесет фокус редактора на эскиз, и нажатие клавиши вызовет код нажатия клавиши, который мы хотим выполнить

Шаг 5: сделайте кнопку из бумаги

Чтобы вызвать звук с помощью Makey Makey, мы будем использовать обычный карандаш и бумагу, чтобы сделать кнопку.

Нарисуйте два полукруга с очень маленьким промежутком между ними, чтобы они не соприкасались, но были достаточно близко, чтобы мы могли касаться обеих половин одновременно одним пальцем. На каждом полукруге должна быть толстая линия, идущая до каждого конца бумаги. Сюда вы прикрепите зажимы из кожи аллигатора от Makey Makey.

Убедитесь, что вы залили обе стороны очень темными, чтобы графит от карандаша мог удерживать ток от Makey Makey.

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

Шаг 6. Настройте Makey Makey

Достаньте плату Makey Makey, USB-кабель и два зажима из кожи аллигатора. Прикрепите один зажим «крокодил» к Земле, а другой - к клавише «Пробел» (поскольку мы не указали ключ в нашем коде, любая клавиша, которую мы нажимаем, вызовет звук).

Возьмите зажим из кожи аллигатора, который прикреплен к клавише пробела, и прикрепите его к одной стороне бумажной кнопки. Возьмите зажим из кожи аллигатора, прикрепленный к Земле, и закрепите его с другой стороны бумажной кнопки.

Подключите кабель USB к ноутбуку.

Шаг 7: нажмите кнопку, чтобы запустить аудиофайл

На этом этапе вы готовы позвонить в дверь. Запустите эскиз (не забудьте щелкнуть мышью по холсту, чтобы нажатие клавиши запустило функцию keyPressed ()), а затем одновременно коснитесь двух полукругов на бумаге. Вы должны услышать звук звукового файла дверного звонка.

Шаг 8: Расширение: добавьте визуальный компонент в эскиз

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

Однако с возможностями визуального кодирования p5.js возможности добавления графики безграничны. У вас даже могут быть визуальные эффекты, которые реагируют на ваши аудиофайлы различными способами, например, появляются только во время воспроизведения аудиофайла, реагируют на изменения громкости и / или частоты или даже создают визуальное представление самого звука.

Шаг 9: Расширение: сделайте так, чтобы кружок менял цвет при нажатии кнопки

Чтобы не усложнять этот проект, мы просто сделаем круг, который меняет цвет при нажатии кнопки.

В функции draw () создайте круг с помощью функции ellipse (). Выше этого добавьте функцию fill (), чтобы установить цвет круга. Для этого эскиза исходный цвет будет белым, что соответствует значению 255 шкалы серого. Вы можете установить любой цвет, который хотите, используя значения цвета RGB.

Между функциями fill () и ellipse () создайте условный оператор, используя переменную keyIsPressed в круглых скобках. Между фигурными скобками условного оператора поместите другую функцию fill (), для которой задан цвет, на который должен измениться круг при нажатии клавиши. Для этого проекта цвет изменится на желтый, который имеет значение RGB 255, 255, 0.

if (keyIsPressed) {

заполнить (255, 255, 0);

}

Нажмите кнопку воспроизведения, чтобы запустить скетч. После загрузки эскиза должен появиться белый круг (не забудьте щелкнуть мышью по холсту). Затем нажмите бумажную кнопку, и вы должны услышать звонок в дверь и увидеть, как круг меняет цвет.

Эскиз p5.js: