Papír ajtócsengő W/ P5.js és Makey Makey: 9 lépés

2024 Szerző: John Day | [email protected]. Utoljára módosítva: 2024-01-30 09:40

Makey Makey projektek »

Ez a projekt egy vázlatot hoz létre a p5.js fájlban, amely képes lejátszani egy hangfájlt egy gombnyomással, majd létrehoz egy egyszerű gombot egy ceruzával, papírral és egy Makey Makey -val a hang elindításához.

Míg ez a projekt ajtócsengő hangot használ, a lépések között szerepel egy audio fájl betöltése a p5.js vázlatába, így könnyen adaptálható bármilyen típusú hang használatához.

További információ a p5.js -ről:

Ha még nem ismeri a p5.js-t a Makey Makey-vel, javaslom, hogy először nézze meg ezt a projektet:

Kellékek

Ceruza

Egy kis papír négyzet

Makey Makey készlet (2 aligátor klipszel)

Laptop internetkapcsolattal

1. lépés: Az audio fájl letöltése

Ez a projekt egy audio fájl használatát igényli, amelyet fel kell töltenünk a p5.js vázlatunkba. Ehhez először le kell töltenünk az audio fájlt.

Ha nem tudja letölteni a fájlokat a számítógépére, vagy egyszerűen ki szeretné hagyni a fájl letöltését és a vázlatba való feltöltését, akkor ezen a linken talál egy p5.js sablont a már feltöltött hanggal, és folytassa a 3. lépéssel. ha a jövőben a p5.js fájlban lévő audio fájlokkal szeretne dolgozni, akkor ez és a következő lépés megmutatja, hogyan kell ezt megtenni.

Számos helyen lehet letölteni hanghatásokat és hangfájlokat az internetről, néhányhoz fiókra van szükség, például a freesound.org -ra és néhányra, ahol nincs szükség fiókra, mint például a soundbible.com. Mindig vegye figyelembe az engedélyezési és/vagy hozzárendelési követelményeket, amikor hangot használ a projekthez. Erről bővebben itt:

A projekt csengőhangja a Tim Kahn által biztosított https://freesound.org/s/163730/ címen hangzott el.

Ha regisztráció nélkül szeretné letölteni a hangot, a hangot mp3 formátumba konvertáltam, amely letölthető innen:

2. lépés: Hangfájl feltöltése a P5.js fájlba

Miután letöltöttük a csengőhangunkat, fel kell töltenünk a p5.js vázlatunkba, hogy hozzáférhessünk hozzá.

Ehhez kövesse az alábbi lépéseket:

- Kattintson a ">" ikonra a webszerkesztő bal oldalán, közvetlenül a lejátszás gomb alatt. Ez megnyitja az oldalsávot, amely a vázlat fájljait mutatja.

- Kattintson a kis lefelé néző háromszögre a Vázlatfájlok jobb oldalán. Ekkor megjelenik egy legördülő menü a "mappa hozzáadása" és a "fájl hozzáadása" opciókkal

- Kattintson a "fájl hozzáadása" gombra. Ekkor megjelenik egy ablak a fájl hozzáadásához. Húzhatja a csengőfájlt a mezőbe, vagy kattintson arra a helyre, ahol „húzza ide a fájlokat a feltöltéshez, vagy kattintson a fájlböngésző használatához”. Ez lehetővé teszi, hogy navigáljon a számítógép fájljaiban, és keresse meg az audio fájlt.

- Miután elhúzta vagy kiválasztotta a fájlt, látni fogja, hogy feltöltődik, és a fájl neve megjelenik az oldalsávon.

Most már hozzáférhet és használhatja ezt a hangfájlt a vázlatában.

3. lépés: Hangfájl betöltése a P5.js vázlatba

Egy audio fájl betöltése a p5.js vázlatba hangfájl objektumot igényel. Egy objektumnak saját tulajdonságai és funkciói vannak beépítve, amelyeket felhasználhatunk.

Egy objektum létrehozásához először egy változót kell létrehoznunk az objektum megtartásához. Ez lehetővé teszi számunkra, hogy hozzáférjünk az objektumhoz és tulajdonságaihoz a vázlat során. Változó létrehozásához lépjen a vázlat felső sorába, és írja be a let szót. Ez a szó a változó deklarálására szolgál a javascriptben. Ezután adjon nevet a változónak. Hívhatjuk a változót bármire, amit csak akarunk, de hasznos, ha olyan nevet adunk neki, amely összefügg azzal, hogy mit fog tenni a kódunkban. Ebben az esetben érdemes ajtócsengőnek nevezni.

hadd csengjen;

Mivel a p5.js web alapú, meg kell győződnünk arról, hogy az audio fájl betöltődött a vázlatba, mielőtt a vázlat futni kezd, különben előfordulhat, hogy nem tudunk hozzáférni az objektum tulajdonságaihoz. Ehhez hozzá kell adnunk egy funkciót az audio fájl betöltéséhez a vázlat megkezdése előtt. Ezt a funkciót nevezik előtöltésnek (). Ezt ugyanúgy írjuk, mint a setup () és draw () függvényt.

A göndör zárójelek belsejében a loadSound () függvény segítségével hozzárendeljük változónkat a hangobjektumhoz. A zárójelbe írja be az audio fájl pontos nevét az idézőjelek közé:

függvény előtöltése () {

ajtócsengő = loadSound ('ajtócsengő.mp3');

}

4. lépés: Hangfájl lejátszása a KeyPressed () funkció használatával

Most, hogy az audio fájl betöltődött a vázlatba, lejátszhatja a play () metódussal. A metódusok lényegében egy objektumra jellemző funkciók.

Ha korábban használt billentyűlenyomást a p5.js fájlban, akkor valószínűleg feltételes utasítást használt a keyIsPressed változóval a rajzoló funkcióban. Amikor azonban hangfájlokkal dolgozunk, nem akarjuk a rajzolási funkción belül aktiválni. A húzási funkció ciklus, ezért folyamatosan frissül. Ez azt jelenti, hogy az audio fájl újra és újra lejátszódik, amíg le nem nyom egy gombot, amelyet nem lesz kellemes hallgatni.

Ennek elkerülése érdekében a keyPressed () nevű függvényt fogja használni. Ez ugyanúgy van írva, mint a setup () és draw () függvény. Írja be ezt a rajz aljára a draw () függvény alá.

A göndör zárójelek közé helyezi a play () metódust, amely egyszer elindítja az audio fájlt, amikor megnyom egy gombot. Ha egy objektumhoz módszert szeretne használni, írja be az objektumot tartalmazó változó nevét, majd a.play ();

funkcióbillentyű lenyomva () {

ajtócsengő.játék ();

}

Most, amikor futtatja a vázlatot, megnyomhat egy gombot, és megszólal a csengőhang.

FONTOS MEGJEGYZÉS: Amikor gombnyomást ad hozzá a kódunkhoz, a webszerkesztőnek tudnia kell, hogy megnyomunk -e egy billentyűt a kód írásához a szövegszerkesztőben, vagy megnyomjuk a gombot, hogy elvégezzük azt, amit kódoltunk. Amikor a lejátszás gombra kattint, vigye az egeret a vászon fölé, és kattintson a vászonra. Ez a szerkesztő fókuszába juttatja a vázlatot, és egy gomb megnyomása aktiválja a kívánt gombnyomási kódot

5. lépés: Készítse el a Papír gombot

A Makey Makey hangjának kiváltásához normál ceruzát és papírt használunk a gomb elkészítéséhez.

Rajzoljon két félkört nagyon kicsi réssel közöttük, hogy valójában ne érjenek egymáshoz, de elég közel legyenek ahhoz, hogy mindkét ujjunkat egyszerre érhessük egy ujjal. Minden félkörnek vastag vonallal kell rendelkeznie, amely a papír mindkét végére kiterjed. Ide rögzítheti a Makey Makey alligátor klipjeit.

Ügyeljen arra, hogy mindkét oldalát nagyon sötéten töltse ki, hogy a ceruza grafitja képes legyen tartani a Makey Makey áramát.

A két félkör kialakítása olyan kis rés legyen közöttük, hogy alapvetően lehetetlen, hogy ne érintsük meg egyszerre mindkét oldalt. Ez lehetővé teszi, hogy befejezze az áramkört a kulcs és a Föld között a Makey Makey -n anélkül, hogy tartania kellene a földelő vezetéket.

6. lépés: A Makey Makey beállítása

Vegye ki a Makey Makey táblát, az USB -kábelt és két aligátorcsipeszt. Csatlakoztasson egy aligátor klipet a Földhöz, egyet pedig a Szó billentyűhöz (mivel nem adtunk meg kulcsot a kódunkban, bármelyik gomb megnyomja a hangot).

Fogja meg a Szóköz billentyűhöz csatolt aligátorcsipeszt, és pattintsa a papírgomb egyik oldalára. Fogja meg a Földhöz rögzített aligátorcsipeszt, és rögzítse a papírgomb másik oldalára.

Csatlakoztassa az USB -kábelt a laptophoz.

7. lépés: Nyomja meg a gombot az audio fájl elindításához

Ezen a ponton készen áll arra, hogy csengessen. Indítsa el a vázlatot (ne felejtse el kattintani az egérrel a vásznon, hogy a billentyű lenyomásával végrehajthassa a billentyű lenyomva () funkciót), majd érintse meg egyszerre a papír két félkörét. Hallani kell az ajtócsengő hangfájljának lejátszását.

8. lépés: Bővítés: Vizuális összetevő hozzáadása a vázlathoz

Ezen a ponton a vázlatunk csak az audiofájl lejátszására szolgáló kódot tartalmazza, így nem fog semmi változást látni a képernyőn. Lehet, hogy csak ennyit szeretne tenni, ha valamilyen típusú interaktív hangprojektet próbál létrehozni.

A p5.js vizuális kódolási képességeivel azonban a grafika hozzáadásának lehetőségei végtelenek. Akár olyan képeket is készíthet, amelyek számos módon reagálnak az audió fájlokra, például csak akkor, ha az audiofájl lejátszása közben jelennek meg, reagálnak a hangerő és/vagy a frekvencia változására, vagy akár vizuálisan reprezentálják a hangot.

9. lépés: Bővítés: A kör megváltoztatása a szín megváltoztatásakor, amikor megnyomja a gombot

Annak érdekében, hogy ez a projekt egyszerű legyen, csak egy kört készítünk, amely megváltoztatja a színét a gomb megnyomásakor.

A draw () függvényben hozzon létre egy kört az ellipszis () függvénnyel. E fölött adja hozzá a fill () függvényt a kör színének beállításához. Ennél a vázlatnál az eredeti szín fehér lesz, ami a szürkeárnyalatos 255 érték. Az RGB színértékek használatával tetszés szerinti színt állíthat be.

A fill () függvény és az ellipszis () függvény között hozzon létre egy feltételes utasítást a keyIsPressed változó használatával a zárójelben. A feltételes utasítás göndör zárójelei közé tegyen egy másik kitöltési () függvényt arra a színre, amelyre azt szeretné, hogy a kör megváltozzon, amikor megnyomja a gombot. Ennél a projektnél a szín sárgára változik, amelynek RGB értéke 255, 255, 0.

if (keyIsPressed) {

kitöltés (255, 255, 0);

}

A vázlat futtatásához nyomja meg a lejátszás gombot. A fehér kör most megjelenik a vázlat betöltésekor (Ne felejtse el kattintani az egérrel a vásznon). Ezután nyomja meg a papír gombot, és hallani kell a csengő hangját, és látni kell a kör színének változását.

p5.js vázlat: