Popierinis durų skambutis „W/ P5.js“ir „Makey Makey“: 9 žingsniai

2024 Autorius: John Day | [email protected]. Paskutinį kartą keistas: 2024-01-30 10:45

„Makey Makey“projektai »

Šis projektas sukuria eskizą p5.js, kuris gali atkurti garso failą paspausdamas klavišą, tada sukuria paprastą mygtuką su pieštuku, popieriumi ir „Makey Makey“, kad suaktyvintų garsą.

Nors šiame projekte naudojamas durų skambučio garsas, šie veiksmai apima tai, kaip įkelti garso failą į savo p5.js eskizą, todėl jį galima lengvai pritaikyti naudoti bet kokio tipo garsą.

Sužinokite daugiau apie p5.js:

Jei pirmą kartą naudojate „p5.js“su „Makey Makey“, siūlau pirmiausia patikrinti šį projektą:

Prekės

Pieštukas

Mažas popieriaus kvadratas

„Makey Makey“rinkinys (su 2 aligatoriaus spaustukais)

Nešiojamasis kompiuteris su interneto ryšiu

1 veiksmas: atsisiųskite garso failą

Šiam projektui reikia naudoti garso failą, kurį turime įkelti į savo p5.js eskizą. Norėdami tai padaryti, pirmiausia turime atsisiųsti garso failą.

Jei negalite atsisiųsti failų į savo kompiuterį arba tiesiog norite praleisti failo atsisiuntimą ir įkėlimą į eskizą, eikite į šią nuorodą, kad gautumėte p5.js šabloną su jau įkeltu garsu, ir pereikite prie 3 veiksmo. jei ateityje norite dirbti su garso failais, esančiais p5.js, šis ir kitas veiksmas parodys, kaip tai padaryti.

Žiniatinklyje yra daug vietų, kur galima atsisiųsti garso efektų ir garso failų, kai kuriems reikalinga paskyra, pvz., „Freesound.org“, o kitoms, kuriai nereikia paskyros, pvz., „Soundbible.com“. Visada nepamirškite apie visus licencijavimo ir (arba) priskyrimo reikalavimus, kai naudojate garsą savo projektui. Daugiau apie tai čia:

Šio projekto durų skambutis skambėjo iš Tim Kahn

Jei norite atsisiųsti garsą nesiregistruodami, aš konvertavau garsą į mp3 formatą, kurį galite atsisiųsti čia:

2 veiksmas: garso failo įkėlimas į P5.js

Atsisiuntę durų skambučio garsą, turime jį įkelti į savo p5.js eskizą, kad galėtume jį pasiekti.

Norėdami tai padaryti, atlikite šiuos veiksmus:

- Spustelėkite „>“piktogramą kairėje žiniatinklio redaktoriaus pusėje, tiesiai po paleidimo mygtuku. Tai atvers šoninę juostą, kurioje bus rodomi eskizo failai.

- Spustelėkite mažą į apačią nukreiptą trikampį, esantį dešinėje „Sketch Files“. Tai parodys išskleidžiamąjį meniu su parinktimis „pridėti aplanką“ir „pridėti failą“

- Spustelėkite „pridėti failą“. Bus atidarytas langas, kuriame bus galima pridėti failą. Galite vilkti durų skambučio failą į langelį arba spustelėti langelį „vilkite failus čia, kad įkeltumėte, arba spustelėkite, jei norite naudoti failų naršyklę“. Tai leis jums naršyti kompiuterio failus ir rasti garso failą.

- Nuvilkę arba pasirinkę failą pamatysite, kaip jis įkeliamas, ir šoninėje juostoje pasirodys failo pavadinimas.

Dabar savo eskize galėsite pasiekti ir naudoti šį garso failą.

3 veiksmas: įkelkite garso failą į P5.js eskizą

Norėdami įkelti garso failą į p5.js eskizą, turime sukurti garso failo objektą. Objektas turi savo ypatybes ir funkcijas, kurias galime naudoti.

Norėdami sukurti objektą, pirmiausia turime sukurti kintamąjį, kad objektas būtų laikomas. Tai leis mums pasiekti objektą ir jo savybes visame eskize. Norėdami sukurti kintamąjį, eikite į viršutinę eskizo eilutę ir parašykite žodį let. Šis žodis naudojamas „JavaScript“kintamajam deklaruoti. Tada suteikite kintamajam pavadinimą. Kintamąjį galime vadinti viskuo, ko norime, tačiau naudinga jam suteikti pavadinimą, susijusį su tuo, ką jis darys mūsų kode. Šiuo atveju prasminga tai vadinti durų skambučiu.

tegul skamba durys;

Kadangi „p5.js“yra pagrįstas žiniatinkliu, prieš pradėdami vykdyti eskizą, turime įsitikinti, kad garso failas buvo įkeltas į eskizą, nes priešingu atveju negalėsime pasiekti objekto savybių. Norėdami tai padaryti, turime pridėti funkciją įkelti garso failą prieš pradedant eskizą. Ši funkcija vadinama išankstiniu įkrovimu (). Tai rašome taip pat, kaip ir nustatymo () ir piešimo () funkcija.

Garbanotų skliaustų viduje garso objektui priskirsime savo kintamąjį naudodami funkciją loadSound (). Skliausteliuose kabutėse įrašykite tikslų garso failo pavadinimą:

funkcija išankstinis įkėlimas () {

durų skambutis = loadSound ('doorbell.mp3');

}

4 veiksmas: paleiskite garso failą naudodami „KeyPressed“() funkciją

Dabar, kai garso failas įkeliamas į eskizą, galite jį paleisti naudodami play () metodą. Metodai iš esmės yra objektui būdingos funkcijos.

Jei anksčiau naudojote klavišų paspaudimus „p5.js“, tikriausiai naudojote sąlyginį teiginį su kintamuoju „keyIsPressed“piešimo funkcijos viduje. Tačiau dirbdami su garso failais nenorime jo suaktyvinti piešimo funkcijos viduje. Piešimo funkcija yra ciklas, todėl ji nuolat atnaujinama. Tai reiškia, kad garso failas bus leidžiamas vėl ir vėl, kol bus paspaustas klavišas, kurio nebus malonu klausytis.

Norėdami to išvengti, ketinate naudoti funkciją, vadinamą „keyPressed“(). Tai taip pat parašyta taip pat, kaip ir nustatymo () ir piešimo () funkcija. Parašykite tai kodo apačioje po draw () funkcija.

Garbanotųjų skliaustų viduje yra „play“() metodas, kuris vieną kartą suaktyvins garso failą, kai paspausite klavišą. Norėdami naudoti metodą objektui, parašykite kintamojo pavadinimą, kuriame yra objektas, ir po to.play ();

funkcijos klavišasPaspaustas () {

durų skambutis.play ();

}

Dabar, kai paleidžiate eskizą, galite paspausti klavišą ir skambės durų skambutis.

SVARBI PASTABA: Pridėdami klavišų paspaudimus prie mūsų kodo, žiniatinklio redaktorius turi žinoti, ar paspaudžiame klavišą, norėdami rašyti kodą teksto rengyklėje, ar paspaudžiame klavišą, kad atliktume tai, ką užkodavome. Spustelėję atkūrimo mygtuką, užveskite pelės žymeklį ant drobės ir spustelėkite ant drobės. Taip eskizas bus sutelktas į redaktorių, o paspaudus klavišą bus suaktyvintas norimas įvykdyti klavišo paspaudimo kodas

5 žingsnis: Padarykite popieriaus mygtuką

Norėdami išjungti garsą naudodami „Makey Makey“, mygtukui pagaminti naudosime įprastą pieštuką ir popierių.

Nubrėžkite du apskritimus su labai mažu tarpeliu, kad jie iš tikrųjų nesiliestų, bet būtų pakankamai arti, kad vienu pirštu galėtume paliesti abi puses vienu metu. Kiekvienas pusės apskritimas taip pat turėtų turėti storą liniją, kuri tęsiasi iki kiekvieno popieriaus galo. Čia pritvirtinsite aligatoriaus spaustukus iš „Makey Makey“.

Įsitikinkite, kad užpildėte abi puses labai tamsiai, kad grafitas iš pieštuko galėtų išlaikyti „Makey Makey“srovę.

Dviejų apskritimų dizainas turi turėti tokį mažą tarpą, kad iš esmės neįmanoma neliesti abiejų pusių vienu metu. Tai leidžia užbaigti grandinę tarp rakto ir žemės „Makey Makey“, nelaikant įžeminimo laido.

6 veiksmas: nustatykite „Makey Makey“

Išimkite „Makey Makey“plokštę, USB kabelį ir du aligatoriaus spaustukus. Pritvirtinkite vieną aligatoriaus spaustuką prie Žemės, o kitą - prie klavišo „Space“(kadangi kode nenurodėme rakto, bet koks paspaudžiamas klavišas suaktyvins garsą).

Paimkite aligatoriaus spaustuką, pritvirtintą prie tarpo klavišo, ir pritvirtinkite jį vienoje popieriaus mygtuko pusėje. Paimkite aligatoriaus spaustuką, pritvirtintą prie Žemės, ir pritvirtinkite jį kitoje popieriaus mygtuko pusėje.

Prijunkite USB kabelį prie nešiojamojo kompiuterio.

7 veiksmas: paspauskite mygtuką, kad suaktyvintumėte garso failą

Šiuo metu esate pasiruošęs paskambinti durų skambučiu. Pradėkite eskizą (nepamirškite spustelėti pelės ant drobės, kad klavišo paspaudimas atliktų klavišo paspaudimo () funkciją), tada vienu metu palieskite du popieriaus apskritimus. Turėtumėte išgirsti durų skambučio garso failo garsą.

8 veiksmas: plėtinys: pridėkite vaizdinį komponentą prie eskizo

Šiuo metu mūsų eskizas apima tik garso failo atkūrimo kodą, todėl ekrane nieko nematysite. Tai gali būti viskas, ką norite padaryti, jei bandote sukurti tam tikro tipo interaktyvų garso projektą.

Tačiau naudojant p5.js vizualinio kodavimo galimybes, grafikos pridėjimo galimybės yra neribotos. Jūs netgi galite turėti vaizdų, kurie reaguoja į jūsų garso failus įvairiais būdais, pvz., Rodomi tik grojant garso failai, reaguojant į garsumo ir (arba) dažnio pokyčius ar net vaizduojant patį garsą.

9 veiksmas: pratęsimas: paspauskite mygtuką, kad pakeistumėte ratą

Kad šis projektas būtų paprastas, mes tiesiog sudarysime ratą, kuris pakeis spalvą paspaudus mygtuką.

Funkcijoje draw () sukurkite apskritimą naudodami elipsės () funkciją. Norėdami tai padaryti, pridėkite funkciją fill (), kad nustatytumėte apskritimo spalvą. Šiam eskizui pradinė spalva bus balta, kuri yra pilkos spalvos vertė 255. Naudodami RGB spalvų vertes, galite nustatyti bet kokią norimą spalvą.

Tarp funkcijos fill () ir elipsės () sukurkite sąlyginį teiginį, naudodami skliausteliuose esantį kintamąjį keyIsPressed. Tarp sąlyginio teiginio garbanotų skliaustų įdėkite kitą užpildymo () funkcijos rinkinį į spalvą, kurią norite pakeisti apskritime, kai paspausite klavišą. Šio projekto spalva pasikeis į geltoną, kurios RGB vertė yra 255, 255, 0.

if (keyIsPressed) {

užpildyti (255, 255, 0);

}

Norėdami paleisti eskizą, paspauskite atkūrimo mygtuką. Dabar, kai eskizas įkeliamas, turėtų atsirasti baltas apskritimas (nepamirškite spustelėti pelės ant drobės). Tada paspauskite popieriaus mygtuką ir turėtumėte išgirsti skambutį į duris ir pamatyti, kaip apskritimas keičia spalvą.

p5.js eskizas: