Papirni zvonec za vrata W/ P5.js & Makey Makey: 9 korakov

2024 Avtor: John Day | [email protected]. Nazadnje spremenjeno: 2024-01-30 12:03

Projekti Makey Makey »

Ta projekt ustvari skico v p5.js, ki lahko predvaja zvočno datoteko s pritiskom na tipko, nato pa s preprostim gumbom s svinčnikom, papirjem in Makey Makey sproži zvok.

Medtem ko ta projekt uporablja zvok zvonjenja na vratih, koraki vključujejo, kako naložite zvočno datoteko v skico p5.js, tako da jo je mogoče enostavno prilagoditi za uporabo katere koli vrste zvoka.

Več o p5.js:

Če še niste uporabljali p5.js z Makeyjem Makeyjem, predlagam, da najprej preverite ta projekt:

Zaloge

Svinčnik

Majhen kvadrat papirja

Komplet Makey Makey (z 2 aligatorskimi sponkami)

Prenosni računalnik z internetno povezavo

Korak: Prenos zvočne datoteke

Ta projekt zahteva uporabo zvočne datoteke, ki jo moramo naložiti v skico p5.js. Če želite to narediti, moramo najprej prenesti zvočno datoteko.

Če ne morete prenesti datotek v računalnik ali preprosto želite preskočiti nalaganje datoteke in nalaganje v skico, pojdite na to povezavo za predlogo p5.js z že naloženim zvokom in pojdite na 3. korak. če želite v prihodnje delati z zvočnimi datotekami v p5.js, vam bo ta in naslednji korak pokazal, kako to storiti.

Zvočni učinki in zvočne datoteke v spletu so na voljo na številnih mestih, nekateri potrebujejo račun, na primer freesound.org, drugi pa ne potrebujejo računa, na primer soundbible.com. Pri uporabi zvoka za svoj projekt vedno upoštevajte vse zahteve glede licenciranja in/ali pripisovanja. Več o tem tukaj:

Zvok pri vratih tega projekta je prišel s https://freesound.org/s/163730/, ki ga je posredoval Tim Kahn.

Če želite prenesti zvok brez ustvarjanja računa, sem ga pretvoril v mp3 format, ki ga lahko prenesete tukaj:

Korak: Nalaganje zvočne datoteke v P5.js

Ko prenesemo zvok na vratih, ga moramo naložiti v skico p5.js, da lahko do njega dostopamo.

Če želite to narediti, sledite tem korakom:

- Kliknite ikono '>' na levi strani spletnega urejevalnika, tik pod gumbom za predvajanje. S tem se odpre stranska vrstica, ki prikazuje datoteke za skico.

- Kliknite na majhen trikotnik, obrnjen navzdol, desno od 'Sketch Files'. To bo odprlo spustni meni z možnostmi 'dodaj mapo' in 'dodaj datoteko'

- Kliknite »dodaj datoteko«. To bo odprlo okno za dodajanje datoteke. Datoteko z zvoncem na vratih lahko povlečete v polje ali kliknite tam, kjer piše »povlecite datoteke sem, da jih naložite, ali kliknite, če želite uporabiti brskalnik datotek«. Tako lahko krmarite po računalniških datotekah in poiščete zvočno datoteko.

- Ko datoteko povlečete ali izberete, jo boste videli naloženo, ime datoteke pa bo prikazano v stranski vrstici.

Zdaj boste lahko dostopali do te zvočne datoteke in jo uporabljali v svoji skici.

3. korak: Nalaganje zvočne datoteke v skico P5.js

Nalaganje zvočne datoteke v skico p5.js zahteva, da naredimo objekt zvočne datoteke. Objekt ima svoje lastnosti in funkcije, ki jih lahko uporabljamo.

Za izdelavo predmeta moramo najprej narediti spremenljivko, ki bo držala predmet. To nam bo omogočilo dostop do predmeta in njegovih lastnosti po celotni skici. Če želite narediti spremenljivko, pojdite v zgornjo vrstico skice in napišite besedo let. Ta beseda se uporablja za razglasitev spremenljivke v javascript. Nato spremenljivki dajte ime. Spremenljivki lahko rečemo karkoli želimo, vendar je koristno, če ji damo ime, ki je povezano s tem, kaj bo naredila v naši kodi. V tem primeru je smiselno to imenovati zvonjenje na vratih.

naj zvoni na vratih;

Ker p5.js temelji na spletu, se moramo prepričati, da je zvočna datoteka naložena v skico, preden se skica začne izvajati, sicer ne bomo mogli dostopati do lastnosti predmeta. Če želite to narediti, moramo dodati funkcijo za nalaganje zvočne datoteke, preden se skica začne. Ta funkcija se imenuje preload (). To pišemo na enak način kot funkcijo setup () in draw ().

Znotraj kodrastih oklepajev bomo z uporabo funkcije loadSound () dodelili našo spremenljivko zvočnemu objektu. Znotraj oklepajev v narekovaje napišite točno ime zvočne datoteke:

funkcija preload () {

zvonec na vratih = loadSound ('zvonec na vratih.mp3');

}

4. korak: Predvajajte zvočno datoteko s funkcijo KeyPressed ()

Zdaj, ko je zvočna datoteka naložena v skico, jo lahko predvajate z metodo play (). Metode so v bistvu funkcije, ki so specifične za predmet.

Če ste že uporabljali pritiske tipk v p5.js, ste verjetno uporabili pogojni stavek s spremenljivko keyIsPressed znotraj funkcije draw. Pri delu z zvočnimi datotekami pa ga ne želimo sprožiti znotraj funkcije risanja. Funkcija risanja je zanka, zato se nenehno posodablja. To pomeni, da se bo zvočna datoteka predvajala vedno znova, dokler pritisnete tipko, ki je ne bo prijetno poslušati.

Da bi se temu izognili, boste uporabili funkcijo, imenovano keyPressed (). To je zapisano enako kot funkcija setup () in draw (). To napišite na dnu kode pod funkcijo draw ().

Znotraj kodrastih oklepajev postavite metodo play (), ki bo ob pritisku na tipko enkrat sprožila zvočno datoteko. Če želite uporabiti metodo za predmet, napišite ime spremenljivke, ki vsebuje predmet, čemur sledi.play ();

funkcijska tipkaPressed () {

zvonec na vratih.play ();

}

Ko zaženete skico, lahko pritisnete tipko in predvajal se bo zvonec.

POMEMBNO OPOMBA: Ko dodajamo pritiske tipk v našo kodo, mora spletni urejevalnik vedeti, ali pritisnemo tipko za pisanje kode v urejevalniku besedila ali pritisnemo tipko, da naredimo tisto, za kar smo kodirali pritisk tipke. Ko kliknete gumb za predvajanje, premaknite miško nad platno in kliknite na platno. S tem se urednik osredotoči na skico, pritisk na tipko pa sproži kodo za pritisk tipke, ki jo želimo izvesti

5. korak: naredite gumb za papir

Za sprožitev zvoka z Makey Makeyjem bomo s pomočjo običajnega svinčnika in papirja naredili gumb.

Narišite dva polkroga z zelo majhnim razmikom med njima, tako da se dejansko ne dotikata, ampak dovolj blizu, da se lahko z enim prstom dotaknemo obeh polovic hkrati. Vsak polkrog mora imeti tudi debelo črto, ki sega do vsakega konca papirja. Tukaj boste pritrdili aligatorske posnetke iz Makey Makey.

Napolnite obe strani zelo temno, tako da bo grafit iz svinčnika zadrževal tok iz Makey Makey.

Zasnova obeh polkrogov mora imeti tako majhen razmik med njima, da se v bistvu ni mogoče dotakniti obeh strani hkrati. To vam omogoča, da dokončate vezje med ključem in zemljo na Makey Makeyju, ne da bi morali držati ozemljitveno žico.

6. korak: Nastavite Makey Makey

Odstranite ploščo Makey Makey, kabel USB in dve zaponki iz aligatorja. En aligatorski posnetek pritrdite na Zemljo in enega na tipko Space (ker v naši kodi nismo določili ključa, bo kateri koli pritisnjeni gumb sprožil zvok).

Vzemite zaponko iz aligatorja, ki je pritrjena na tipko Space in jo pripnite na eno stran gumba za papir. Vzemite zaponko aligatorja, ki je pritrjena na Zemljo, in jo pritrdite na drugo stran gumba za papir.

Priključite kabel USB v prenosni računalnik.

Korak 7: Pritisnite gumb za sprožitev zvočne datoteke

Na tej točki ste pripravljeni pozvoniti na vrata. Zaženite skico (ne pozabite klikniti miške na platno, da bo pritisk tipke izvajal funkcijo keyPressed ()), nato pa se hkrati dotaknite dveh polkrogov na papirju. Slišati bi morali zvok zvočne datoteke zvonjenja pri vratih.

8. korak: Razširitev: V skico dodajte vizualno komponento

Na tej točki naša skica vključuje samo kodo za predvajanje zvočne datoteke, zato na zaslonu ne boste videli ničesar spremenjenega. To je morda vse, kar želite storiti, če poskušate ustvariti vrsto interaktivnega zvočnega projekta.

Z možnostmi vizualnega kodiranja p5.js pa so možnosti dodajanja grafike neskončne. Lahko imate celo vizualne posnetke, ki na vaše zvočne datoteke reagirajo na različne načine, na primer, da se pojavijo le med predvajanjem zvočne datoteke, reagirajo na spremembe glasnosti in/ali frekvence ali celo vizualno predstavijo sam zvok.

9. korak: Razširitev: Ob pritisku gumba naredite krog, ki bo spremenil barvo

Da bo ta projekt preprost, bomo naredili krog, ki ob pritisku gumba spremeni barvo.

V funkciji draw () ustvarite krog s funkcijo elipse (). Nad tem dodajte funkcijo fill (), da nastavite barvo kroga. Za to skico bo prvotna barva bela, kar je vrednost v sivinah 255. Barvo lahko nastavite na poljubno barvo z uporabo barvnih vrednosti RGB.

Med funkcijo fill () in funkcijo ellipse () ustvarite pogojni stavek z uporabo spremenljivke keyIsPressed znotraj oklepajev. Med ukrivljenimi oklepaji pogojnega stavka postavite drugo funkcijo fill (), nastavljeno na barvo, v katero želite, da se ob pritisku na tipko spremeni krog. Za ta projekt se bo barva spremenila v rumeno, ki ima vrednost RGB 255, 255, 0.

if (keyIsPressed) {

izpolni (255, 255, 0);

}

Za zagon skice pritisnite gumb za predvajanje. Beli krog bi se moral zdaj prikazati, ko se skica naloži (ne pozabite klikniti miške na platnu). Nato pritisnite gumb za papir in zaslišali boste zvonjenje na vratih in videli, kako krog spreminja barvo.

skica p5.js: