Paberist uksekell W/ P5.js ja Makey Makey: 9 sammu

2024 Autor: John Day | [email protected]. Viimati modifitseeritud: 2024-01-30 08:47

Makey Makey projektid »

See projekt loob eskiisi p5.js -s, mis saab klahvivajutusega helifaili esitada, seejärel teeb heli käivitamiseks lihtsa nupu pliiatsi, paberi ja Makey Makey'ga.

Kuigi see projekt kasutab uksekella heli, hõlmavad sammud helifaili laadimist oma visandisse p5.js, nii et seda saab hõlpsasti kohandada mis tahes tüüpi heli kasutamiseks.

Lisateavet p5.js kohta:

Kui te pole p5.js-i kasutamine Makey Makey-ga uus, soovitan teil kõigepealt seda projekti vaadata:

Tarvikud

Pliiats

Väike ruut paberit

Makey Makey komplekt (2 alligaatoriklambriga)

Sülearvuti internetiühendusega

Samm: helifaili allalaadimine

Selle projekti jaoks on vaja kasutada helifaili, mille peame üles laadima oma visandisse p5.js. Selleks peame esmalt helifaili alla laadima.

Kui te ei saa faile oma arvutisse alla laadida või soovite lihtsalt faili allalaadimise ja eskiisi üleslaadimise vahele jätta, võite sellel lingil leida juba üleslaaditud heliga p5.js -malli ja minna sammuga 3. Siiski kui soovite tulevikus töötada helifailidega p5.js -s, näitab see ja järgmine samm, kuidas seda teha.

Heliefektide ja helifailide allalaadimiseks on veebis palju kohti, millest mõned vajavad kontot (nt freesound.org) ja mõned, kus pole kontot vaja (nt soundbible.com). Kui kasutate projekti jaoks heli, pidage alati silmas kõiki litsentsimis- ja/või omistamisnõudeid. Lisateavet selle kohta leiate siit:

Selle projekti uksekellaheli tuli saidilt Tim Kahn

Kui soovite heli ilma kontot tegemata alla laadida, olen heli teisendanud mp3 -vormingusse, mille saate alla laadida siit:

2. toiming: helifaili üleslaadimine P5.js -i

Kui oleme oma uksekella heli alla laadinud, peame selle üles laadima oma p5.js visandisse, et saaksime sellele juurde pääseda.

Selleks toimige järgmiselt.

- Klõpsake veebiredaktori vasakul küljel, esitusnupu all olevat ikooni „>”. See avab külgriba, mis näitab teie visandi faile.

- Klõpsake väikesel allapoole suunatud kolmnurgal, mis asub sketchifailidest paremal. See avab rippmenüü, kus on valikud „lisa kaust” ja „lisa fail”

- Klõpsake "lisa fail". See avab faili lisamise akna. Saate lohistada uksekella faili kasti või klõpsata seal, kus kast ütleb: "lohistage failid siia üleslaadimiseks või klõpsake failibrauseri kasutamiseks". See võimaldab teil helifaili leidmiseks arvutifailides navigeerida.

- Kui olete faili lohistanud või valinud, näete seda üles laadimas ja külgribal kuvatakse faili nimi.

Nüüd saate sellele visandile helifailile juurde pääseda ja seda kasutada.

3. samm: helifaili laadimine P5.js visandisse

Helifaili laadimine eskiisi p5.js nõuab meilt helifaili objekti. Objektil on oma omadused ja funktsioonid, mida saame kasutada.

Objekti tegemiseks peame esmalt tegema muutuja objekti hoidmiseks. See võimaldab meil kogu eskiisil objektile ja selle omadustele juurde pääseda. Muutuja tegemiseks minge visandi ülemisele reale ja kirjutage sõna let. Seda sõna kasutatakse JavaScripti muutuja deklareerimiseks. Seejärel andke muutujale nimi. Võime muutujat nimetada nii, nagu tahame, kuid kasulik on anda sellele nimi, mis on seotud sellega, mida see meie koodis teeb. Sel juhul on mõttekas nimetada seda uksekellaks.

lase uksekell;

Kuna p5.js on veebipõhine, peame enne visandi käivitamist veenduma, et helifail on visandisse laaditud, vastasel juhul ei pruugi me objekti atribuutidele juurde pääseda. Selleks peame lisama funktsiooni helifaili laadimiseks enne eskiisi algust. Seda funktsiooni nimetatakse eellaadimiseks (). Kirjutame selle samamoodi nagu setup () ja draw () funktsioon.

Lokkisulgude sees määrame oma muutuja heliobjektile, kasutades funktsiooni loadSound (). Sulgude sisse kirjutage jutumärkidesse helifaili täpne nimi:

funktsiooni eellaadimine () {

uksekell = loadSound ('uksekell.mp3');

}

Samm 4: esitage helifaili, kasutades klahvivajutatud () funktsiooni

Nüüd, kui helifail on visandisse laaditud, saate seda esitada play () meetodi abil. Meetodid on sisuliselt objektile omased funktsioonid.

Kui olete varem p5.js -s klahvivajutusi kasutanud, kasutasite tõenäoliselt joonistusfunktsiooni sees muutuja keyIsPressed tingimuslauset. Helifailidega töötades ei taha me aga seda joonistusfunktsiooni sees käivitada. Joonistusfunktsioon on silmus, nii et seda uuendatakse pidevalt. See tähendab, et helifaili esitatakse ikka ja jälle, kuni vajutatakse klahvi, mida pole meeldiv kuulata.

Selle vältimiseks kasutate funktsiooni nimega keyPressed (). See on samuti kirjutatud samamoodi nagu funktsioon setup () ja draw (). Kirjutage see funktsiooni draw () alla koodi alla.

Lokkisulgude sisse panete esitusmeetodi (), mis käivitab helifaili üks kord klahvi vajutades. Objekti jaoks meetodi kasutamiseks kirjutage objekti hoidva muutuja nimi ja seejärel.play ();

funktsiooniklahv Vajutatud () {

uksekell.play ();

}

Nüüd, kui visandit käivitate, saate klahvi vajutada ja uksekell kostab.

TÄHTIS MÄRKUS. Klahvivajutuste lisamisel meie koodi peab veebitoimetaja teadma, kas me vajutame tekstiredaktoris koodi kirjutamiseks klahvi või vajutame klahvi, et teha seda, mida me kodeerisime. Kui klõpsate esitusnupul, liigutage hiir lõuendi kohal ja klõpsake lõuendil. See viib visandile fookuse ja klahvi vajutamine käivitab klahvivajutuskoodi, mida soovime

Samm: valmistage paberinupp

Makey Makey abil heli käivitamiseks kasutame nupu tegemiseks tavalist pliiatsit ja paberit.

Joonista kaks poolringi, mille vahele jääb väga väike vahe, nii et need tegelikult ei puudutaks, vaid oleksid piisavalt lähedal, et saaksime ühe sõrmega mõlemat poolt korraga puudutada. Igal poolringil peaks olema ka paks joon, mis ulatub paberi mõlemasse otsa. Siia kinnitate Makey Makey alligaatoriklambrid.

Veenduge, et täidate mõlemad küljed väga tumedana, nii et pliiatsi grafiit suudab hoida Makey Makey voolu.

Kahe poolringi ülesehitus on, et nende vahel oleks nii väike vahe, et põhimõtteliselt on võimatu mõlemat külge korraga puudutada. See võimaldab teil Makey Makey võtme ja Maa vahelise vooluringi lõpule viia, ilma et peaksite maandusjuhet kinni hoidma.

6. toiming: seadistage Makey Makey

Võtke välja Makey Makey plaat, USB -kaabel ja kaks alligaatoriklambrit. Kinnitage üks alligaatoriklamber Maa külge ja teine kosmoseklahvile (kuna me ei määranud oma koodis võtit, käivitab heli vajutades kõik klahvid, mida vajutame).

Võtke tühikuklahvile kinnitatud alligaatoriklamber ja kinnitage see paberinupu ühele küljele. Võtke alligaatoriklamber, mis on Maa külge kinnitatud, ja kinnitage see paberinupu teisele küljele.

Ühendage USB -kaabel sülearvutiga.

Samm: helifaili käivitamiseks vajutage nuppu

Sel hetkel olete valmis uksekella helistama. Alustage visandit (ärge unustage hiirega lõuendil klõpsata, et klahvivajutus käivitaks klahvivajutatud () funktsiooni) ja seejärel puudutage paberil kahte poolringi korraga. Peaksite kuulma uksekella helifaili esitamise heli.

8. samm: laiendus: lisage visandile visuaalne komponent

Praegu sisaldab meie visand ainult helifaili esitamise koodi, nii et te ei näe ekraanil midagi muutuvat. See võib olla kõik, mida soovite teha, kui proovite luua mõnda tüüpi interaktiivset heliprojekti.

Kuid p5.js visuaalse kodeerimise võimalustega on graafika lisamise võimalused lõputud. Teil võib isegi olla visuaale, mis reageerib teie helifailidele mitmel viisil, näiteks ilmub see ainult helifaili esitamise ajal, reageerib helitugevuse ja/või sageduse muutustele või isegi kujutab endast heli.

9. samm: laiendus: muutke ringi, kui nuppu vajutatakse

Selle projekti lihtsuse tagamiseks teeme lihtsalt ringi, mis muudab nupu vajutamisel värvi.

Loo funktsioonis draw () ring, kasutades funktsiooni ellipse (). Selle kohal lisage ringi värvi määramiseks funktsioon fill (). Selle visandi puhul on algvärv valge, mis on halltoonide väärtus 255. RGB värviväärtuste abil saate värviks määrata mis tahes soovitud värvi.

Funktsiooni fill () ja ellipse () vahel looge sulgudes muutuja keyIsPressed abil tingimuslause. Tingimuslause lokkisulgude vahele pange veel üks täitmisfunktsioon (), mis on seatud värvile, mille soovite ringile muuta, kui vajutate klahvi. Selle projekti puhul muutub värv kollaseks, mille RGB väärtus on 255, 255, 0.

if (keyIsPressed) {

täitke (255, 255, 0);

}

Visandi käivitamiseks vajutage esitusnuppu. Visandi laadimisel peaks nüüd ilmuma valge ring (ärge unustage lõuendil hiirt klõpsata). Seejärel vajutage paberinuppu ja peaksite kuulma uksekella helisemist ning nägema, kuidas ring muutub.

p5.js visand: