Хартиен звънец на врата W/ P5.js & Makey Makey: 9 стъпки

2024 Автор: John Day | [email protected]. Последно модифициран: 2024-01-30 07:51

Проекти на Makey Makey »

Този проект създава скица в p5.js, която може да възпроизвежда аудио файл с натискане на клавиш, след което прави прост бутон с молив, хартия и Makey Makey, за да задейства звука.

Докато този проект използва звук на вратата, стъпките включват как да заредите аудио файл във вашата скица на p5.js, така че той може лесно да бъде адаптиран да използва всеки тип звук.

Научете повече за p5.js:

Ако сте нов за използване на p5.js с Makey Makey, предлагам първо да проверите този проект:

Консумативи

Молив

Малък квадрат от хартия

Комплект Makey Makey (с 2 алигаторни клипса)

Лаптоп с интернет връзка

Стъпка 1: Изтегляне на аудио файла

Този проект изисква използването на аудио файл, който трябва да качим в нашата скица p5.js. За да направим това, първо трябва да изтеглим аудио файла.

Ако не можете да изтеглите файлове на компютъра си или просто искате да пропуснете изтеглянето на файла и качването му в скицата си, можете да отидете на тази връзка за p5.js шаблон с вече качен звук и да преминете към стъпка 3. Въпреки това, ако искате да работите с аудио файлове в p5.js в бъдеще, тази и следващата стъпка ще ви покажат как да направите това.

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

Звукът на вратата за този проект дойде от https://freesound.org/s/163730/, предоставен от Тим Кан.

Ако искате да изтеглите звука, без да правите акаунт, преобразувах звука във формат mp3, който може да бъде изтеглен оттук:

Стъпка 2: Качване на аудио файл в P5.js

След като изтеглим звука на звънеца на вратата, трябва да го качим в нашата скица на p5.js, за да имаме достъп до него.

За да направите това, изпълнете следните стъпки:

- Щракнете върху иконата '>' от лявата страна на уеб редактора, точно под бутона за възпроизвеждане. Това ще отвори страничната лента, която показва файловете за вашата скица.

- Щракнете върху малкия триъгълник с лице надолу точно вдясно от „Sketch Files“. Това ще покаже падащо меню с опции за „добавяне на папка“и „добавяне на файл“

- Щракнете върху „добавяне на файл“. Това ще отвори прозорец за добавяне на файл. Можете да плъзнете файла на звънеца в полето или да щракнете там, където кутията казва „плъзнете файлове тук, за да качите, или щракнете, за да използвате браузър на файлове“. Това ще ви позволи да навигирате през файловете на компютъра си, за да намерите аудио файла.

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

Сега ще имате достъп и използвате този аудио файл в скицата си.

Стъпка 3: Зареждане на аудио файл в P5.js скица

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

За да направим обект, първо трябва да направим променлива, която да държи обекта. Това ще ни позволи достъп до обекта и неговите свойства в цялата скица. За да направите променлива, отидете в горния ред на скицата и напишете думата let. Тази дума се използва за деклариране на променлива в javascript. След това дайте име на променливата. Можем да наричаме променливата всичко, което искаме, но е полезно да й дадем име, което е свързано с това, което ще прави в нашия код. В този случай има смисъл да го наречем звънец на вратата.

нека звънец на вратата;

Тъй като p5.js е уеб базиран, трябва да се уверим, че аудио файлът е зареден в скицата, преди скицата да започне да работи, в противен случай може да нямаме достъп до свойствата на обекта. За да направим това, трябва да добавим функция за зареждане на аудио файла, преди скицата да започне. Тази функция се нарича preload (). Пишем това по същия начин като функцията setup () и draw ().

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

функция предварително зареждане () {

звънец на вратата = loadSound ('звънец на врата.mp3');

}

Стъпка 4: Възпроизвеждане на аудио файл с помощта на функцията KeyPressed ()

Сега, когато аудио файлът е зареден в скицата, можете да го възпроизведете, като използвате метода play (). Методите са по същество функции, които са специфични за даден обект.

Ако преди сте използвали натискане на клавиши в p5.js, вероятно сте използвали условен израз с променливата keyIsPressed вътре във функцията draw. Въпреки това, когато работим с аудио файлове, не искаме да го задействаме във функцията за изтегляне. Функцията за теглене е цикъл, така че непрекъснато се актуализира. Това означава, че аудио файлът ще се възпроизвежда отново и отново, докато е натиснат клавиш, който няма да е приятен за слушане.

За да избегнете това, ще използвате функция, наречена keyPressed (). Това също е написано същото като функцията setup () и draw (). Напишете това в долната част на кода под функцията draw ().

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

функционален ключPressed () {

звънец на вратата.play ();

}

Сега, когато пускате скицата си, можете да натиснете клавиш и звукът на звънеца на вратата ще се възпроизведе.

ВАЖНА ЗАБЕЛЕЖКА: Когато добавяте натискане на клавиши в нашия код, уеб редакторът трябва да знае дали натискаме клавиш, за да напишем код в текстовия редактор, или натискаме клавиша, за да направим това, което сме кодирали с натискане на клавиш. Когато щракнете върху бутона за възпроизвеждане, преместете мишката върху платното и кликнете върху платното. Това ще доведе фокуса на редактора към скицата и натискането на клавиш ще задейства кода за натискане на клавиш, който искаме да се случи

Стъпка 5: Направете бутона за хартия

За да задействаме звука с Makey Makey, ще използваме обикновен молив и хартия, за да направим бутон.

Начертайте два полукръга с много малка междина между тях, така че те всъщност да не се допират, а да са достатъчно близо, за да можем да докоснем двете половини едновременно с един пръст. Всеки полукръг също трябва да има дебела линия, която се простира до всеки край на хартията. Тук ще прикачите алигаторните клипове от Makey Makey.

Уверете се, че сте запълнили двете страни много тъмно, така че графитът от молива да може да задържи тока от Makey Makey.

Дизайнът на двата полукръга е да има толкова малка празнина между тях, че по принцип е невъзможно да не се докосват двете страни едновременно. Това ви позволява да завършите веригата между ключа и Земята на Makey Makey, без да се налага да държите заземяващия проводник.

Стъпка 6: Настройте Makey Makey

Извадете дъската Makey Makey, USB кабела и две алигаторни скоби. Прикрепете един клип от алигатор към Земята и един към клавиша Space (тъй като не сме посочили ключ в нашия код, всеки клавиш, който натискаме, ще задейства звука).

Вземете алигаторната скоба, която е прикрепена към клавиша за интервал, и я прикрепете от едната страна на бутона за хартия. Вземете щипката от алигатор, която е прикрепена към Земята, и я закопчете от другата страна на бутона за хартия.

Включете 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: