Papirno zvono za vrata W/ P5.js & Makey Makey: 9 koraka

2024 Autor: John Day | [email protected]. Zadnja promjena: 2024-01-30 09:34

Makey Makey projekti »

Ovaj projekt stvara skicu u p5.js koja može reproducirati audio datoteku pritiskom na tipku, a zatim jednostavnim gumbom s olovkom, papirom i Makeyjem Makeyjem pokreće zvuk.

Iako ovaj projekt koristi zvuk zvona na vratima, koraci uključuju kako učitati audio datoteku u skicu p5.js, tako da se može lako prilagoditi za upotrebu bilo koje vrste zvuka.

Saznajte više o p5.js:

Ako ste tek počeli koristiti p5.js s Makeyjem Makeyjem, predlažem da prvo provjerite ovaj projekt:

Pribor

Olovka

Mali kvadrat papira

Makey Makey kit (s 2 aligatorske kopče)

Laptop sa internetskom vezom

Korak 1: Preuzimanje audio datoteke

Ovaj projekt zahtijeva korištenje audio datoteke koju moramo prenijeti u našu skicu p5.js. Da bismo to učinili, prvo moramo preuzeti audio datoteku.

Ako ne možete preuzeti datoteke na svoje računalo ili jednostavno želite preskočiti preuzimanje datoteke i prijenos u skicu, možete otići na ovu vezu za predložak p5.js sa već prenesenim zvukom i prijeđite na korak 3. Međutim, ako ubuduće želite raditi sa audio datotekama u p5.js, ovaj i sljedeći korak pokazat će vam kako to učiniti.

Postoji mnogo mjesta za preuzimanje zvučnih efekata i audio datoteka na webu, neka za koja je potreban račun, poput freesound.org, a neka za koja nije potreban račun, poput soundbible.com. Uvijek imajte na umu sve zahtjeve za licenciranje i/ili pripisivanje kada upotrebljavate zvuk za svoj projekt. Više o tome ovdje:

Zvuk na vratima za ovaj projekt došao je s https://freesound.org/s/163730/ koji je dao Tim Kahn.

Ako želite preuzeti zvuk bez stvaranja računa, pretvorio sam zvuk u mp3 format koji se može preuzeti ovdje:

Korak 2: Prijenos audio datoteke u P5.js

Nakon što preuzmemo zvuk zvona na vratima, moramo ga prenijeti u našu skicu p5.js kako bismo mu mogli pristupiti.

Da biste to učinili, slijedite ove korake:

- Pritisnite ikonu '>' s lijeve strane uređivača weba, odmah ispod gumba za reprodukciju. Ovo će otvoriti bočnu traku koja prikazuje datoteke za vašu skicu.

- Pritisnite mali trokut okrenut prema dolje desno od 'Sketch Files'. Ovo će otvoriti padajući izbornik s opcijama 'dodaj mapu' i 'dodaj datoteku'

- Kliknite "dodaj datoteku". Ovo će otvoriti prozor za dodavanje datoteke. Možete povući datoteku zvona na vratima u okvir ili kliknite tamo gdje okvir kaže 'povucite datoteke ovdje za prijenos ili kliknite za korištenje preglednika datoteka'. To će vam omogućiti navigaciju kroz datoteke vašeg računala za pronalaženje audio datoteke.

- Nakon što povučete ili odaberete datoteku, vidjet ćete da se učitava, a naziv datoteke pojavit će se na bočnoj traci.

Sada ćete moći pristupiti ovoj audio datoteci i koristiti je u svojoj skici.

Korak 3: Učitavanje audio datoteke u skicu P5.js

Učitavanje audio datoteke u skicu p5.js zahtijeva da napravimo objekt zvučne datoteke. Objekt ima svoja svojstva i funkcije ugrađene u njega koje možemo koristiti.

Za izradu objekta prvo moramo napraviti varijablu koja će držati objekt. To će nam omogućiti pristup objektu i njegovim svojstvima tijekom cijele skice. Da biste napravili varijablu, idite na gornji redak skice i napišite riječ let. Ova se riječ koristi za deklariranje varijable u javascriptu. Zatim dajte varijabli naziv. Varijablu možemo nazvati kako god želimo, ali korisno je dati joj ime koje je povezano s onim što će raditi u našem kodu. U ovom slučaju ima smisla to nazvati zvonom na vratima.

neka zvono na vratima;

Budući da se p5.js temelji na webu, moramo provjeriti je li audio datoteka učitana u skicu prije nego što skica počne raditi, u protivnom možda nećemo moći pristupiti svojstvima objekta. Da bismo to učinili, moramo dodati funkciju za učitavanje audio datoteke prije početka skice. Ova se funkcija naziva preload (). Ovo zapisujemo na isti način kao funkciju setup () i draw ().

Unutar uvijenih zagrada dodijelit ćemo našu varijablu zvučnom objektu pomoću funkcije loadSound (). Unutar zagrada upišite točan naziv audio datoteke unutar navodnika:

funkcija preload () {

zvono na vratima = loadSound ('zvono na vratima.mp3');

}

Korak 4: Reproducirajte audio datoteku pomoću funkcije KeyPressed ()

Sada kada je audio datoteka učitana u skicu, možete je reproducirati pomoću metode play (). Metode su u biti funkcije koje su specifične za objekt.

Ako ste već koristili pritiske tipki u p5.js, vjerojatno ste koristili uvjetni izraz s varijablom keyIsPressed unutar funkcije draw. Međutim, pri radu sa audio datotekama ne želimo ga aktivirati unutar funkcije crtanja. Funkcija izvlačenja je petlja pa se stalno ažurira. To znači da će se audio datoteka reproducirati uvijek iznova sve dok je pritisnuta tipka koju neće biti ugodno slušati.

Da biste to izbjegli, upotrijebit ćete funkciju koja se zove keyPressed (). Ovo je također napisano isto kao i funkcije setup () i draw (). Napišite ovo na dnu koda ispod funkcije draw ().

Unutar kovrčavih zagrada stavljate metodu play () koja će jednom pokrenuti zvučnu datoteku kada pritisnete tipku. Da biste koristili metodu za objekt, napišite naziv varijable koja sadrži objekt, a zatim.play ();

funkcijska tipkaPressed () {

zvono na vratima.play ();

}

Sada kada pokrenete skicu, možete pritisnuti tipku i oglasit će se zvuk zvona na vratima.

VAŽNA NAPOMENA: Prilikom dodavanja pritisaka tipki u naš kôd, web urednik mora znati pritiskamo li tipku za pisanje koda u uređivaču teksta ili pritišćemo tipku da bismo učinili ono što smo kodirali pritiskom tipke. Kada pritisnete gumb za reprodukciju, pomaknite miš preko platna i kliknite na platno. Time će se urednik usredotočiti na skicu, a pritiskom na tipku aktivirat će se kôd za pritisak tipke koji želimo ostvariti

Korak 5: Napravite gumb za papir

Za pokretanje zvuka pomoću Makey Makeyja, upotrijebit ćemo običnu olovku i papir za izradu gumba.

Nacrtajte dva polukruga s vrlo malim razmakom između njih tako da se zapravo ne dodiruju, već dovoljno blizu da možemo dodirnuti obje polovice istovremeno jednim prstom. Svaki polukrug također mora imati debelu liniju koja se proteže do svakog kraja papira. Ovdje ćete pričvrstiti aligatorske isječke iz Makey Makeyja.

Popunite obje strane vrlo tamno kako bi grafit iz olovke mogao zadržati struju iz Makey Makeyja.

Dizajn dva polukruga mora imati tako mali razmak između njih da je u osnovi nemoguće ne dodirnuti obje strane u isto vrijeme. To vam omogućuje da dovršite krug između ključa i Zemlje na Makey Makeyju bez držanja žice za uzemljenje.

Korak 6: Postavite Makey Makey

Izvadite Makey Makey ploču, USB kabel i dvije kopče od aligatora. Pričvrstite jedan isječak od aligatora na Zemlju, a jedan na tipku Space (budući da u kodu nismo naveli ključ, bilo koja tipka koju pritisnemo aktivirat će zvuk).

Uzmite aligatorsku kopču koja je pričvršćena na tipku Space i pričvrstite je s jedne strane gumba za papir. Uzmite štipaljku od aligatora koja je pričvršćena na Zemlju i pričvrstite je s druge strane gumba za papir.

Priključite USB kabel u prijenosno računalo.

Korak 7: Pritisnite gumb za pokretanje audio datoteke

U ovom trenutku spremni ste pozvoniti na vrata. Pokrenite skicu (ne zaboravite kliknuti mišem na platno kako bi pritiskom na tipku izvršila funkciju keyPressed ()), a zatim dodirnite dva polukruga na papiru u isto vrijeme. Trebali biste čuti zvuk reprodukcije zvučne datoteke zvona na vratima.

Korak 8: Proširenje: Dodajte vizualnu komponentu skici

U ovom trenutku naša skica uključuje samo kôd za reprodukciju audio datoteke, tako da nećete vidjeti ništa na zaslonu. Ovo može biti sve što želite učiniti ako pokušavate stvoriti neku vrstu interaktivnog zvučnog projekta.

Međutim, s mogućnostima vizualnog kodiranja p5.js, mogućnosti dodavanja grafike su beskrajne. Možete čak imati i vizuale koji reagiraju na vaše audio datoteke na brojne načine, poput pojavljivanja samo tijekom reprodukcije audio datoteke, reagiranja na promjene u glasnoći i/ili frekvenciji ili čak vizualnog prikaza samog zvuka.

Korak 9: Proširenje: Promijenite boju kruga kad pritisnete gumb

Kako bi ovaj projekt bio jednostavan, samo ćemo napraviti krug koji mijenja boju kada se pritisne gumb.

U funkciji draw () stvorite krug pomoću funkcije elipse (). Iznad toga dodajte funkciju fill () za postavljanje boje kruga. Za ovu skicu, izvorna boja bit će bijela, što je vrijednost sive boje 255. Možete postaviti boju na bilo koju koju želite koristeći vrijednosti RGB boje.

Između funkcije fill () i funkcije elipse () stvorite uvjetni izraz koristeći varijablu keyIsPressed unutar zagrada. Između uvrnutih zagrada uvjetne naredbe stavite drugu funkciju fill () postavljenu na boju u koju želite da se krug promijeni kad pritisnete tipku. Za ovaj projekt boja će se promijeniti u žutu koja ima RGB vrijednost 255, 255, 0.

if (keyIsPressed) {

ispunite (255, 255, 0);

}

Pritisnite gumb za reprodukciju za pokretanje skice. Bijeli krug sada bi se trebao pojaviti kada se skica učita (Ne zaboravite kliknuti mišem na platno). Zatim pritisnite gumb za papir i trebali biste čuti zvono na vratima i vidjeti kako krug mijenja boju.

skica p5.js: