Paper Doorbell W/ P5.js & Makey Makey: 9 stappe

2024 Outeur: John Day | [email protected]. Laas verander: 2024-01-30 07:24

Makey Makey -projekte »

Hierdie projek skep 'n skets in p5.js wat 'n klanklêer kan speel deur 'n druk op die toets te druk, en dan 'n eenvoudige knoppie met 'n potlood, papier en 'n Makey Makey om die geluid te aktiveer.

Terwyl hierdie projek 'n deurklokkie gebruik, bevat die stappe hoe om 'n klanklêer in u p5.js -skets te laai, sodat dit maklik aangepas kan word om enige tipe klank te gebruik.

Kom meer te wete oor p5.js:

As u nog nie begin het met die gebruik van p5.js met Makey Makey nie, stel ek voor dat u eers na hierdie projek kyk:

Voorrade

Potlood

'N Klein vierkant papier

Makey Makey -kit (met 2 krokodilleklemme)

Skootrekenaar met internetverbinding

Stap 1: Laai die oudiolêer af

Hierdie projek vereis dat 'n klanklêer gebruik word wat ons in ons p5.js -skets moet oplaai. Om dit te kan doen, moet ons eers die klanklêer aflaai.

As u nie lêers op u rekenaar kan aflaai nie of net wil aflaai om die lêer af te laai en in u skets op te laai, kan u na hierdie skakel gaan vir 'n p5.js -sjabloon met die geluid wat reeds opgelaai is en na stap 3 gaan. As u in die toekoms met klanklêers in p5.js wil werk, sal hierdie stap en die volgende u wys hoe u dit kan doen.

Daar is baie plekke om klankeffekte en klanklêers op die internet af te laai, sommige vereis 'n rekening, soos freesound.org en sommige wat geen rekening benodig nie, soos soundbible.com. Hou altyd rekening met enige lisensie- en/of toeskrywingsvereistes wanneer u 'n klank vir u projek gebruik. Meer hieroor hier:

Die deurklank vir hierdie projek kom van https://freesound.org/s/163730/ verskaf deur Tim Kahn.

As u die klank wil aflaai sonder om 'n rekening te maak, het ek die geluid omgeskakel na 'n mp3 -formaat wat hier afgelaai kan word:

Stap 2: Laai oudiolêer op na P5.js

Sodra ons die deurklokkie afgelaai het, moet ons dit in ons p5.js -skets oplaai sodat ons toegang daartoe kan kry.

Om dit te doen, volg die volgende stappe:

- Klik op die ikoon '>' aan die linkerkant van die webredakteur, net onder die speelknoppie. Dit sal die sybalk oopmaak waarin die lêers van u skets verskyn.

- Klik op die klein driehoek na onder regs van 'Skets lêers'. Dit sal 'n keuselys oopmaak met die opsies om 'map te voeg' en 'lêer by te voeg'

- Klik op 'lêer byvoeg'. Dit sal 'n venster oopmaak om 'n lêer by te voeg. U kan die deurklokkie -lêer in die kassie sleep of klik waar die venster 'sleep lêers hierheen om op te laai' of klik om die lêerblaaier te gebruik '. Hiermee kan u deur u rekenaarlêers navigeer om die klanklêer op te spoor.

- Sodra u die lêer gesleep of gekies het, sal u dit sien oplaai en die naam van die lêer sal in die sybalk verskyn.

Nou kan u toegang tot hierdie klanklêer in u skets kry en dit gebruik.

Stap 3: Laai oudiolêer in die skets van P5.js

Om 'n klanklêer in 'n p5.js -skets te laai, vereis dat ons 'n klankbestandvoorwerp maak. 'N Voorwerp het sy eie eienskappe en funksies wat ons kan gebruik.

Om 'n voorwerp te maak, moet ons eers 'n veranderlike maak om die voorwerp vas te hou. Dit gee ons toegang tot die voorwerp en sy eienskappe gedurende die hele skets. Om 'n veranderlike te maak, gaan na die boonste reël van die skets en skryf die woord let. Hierdie woord word gebruik om 'n veranderlike in javascript te verklaar. Gee dan die veranderlike 'n naam. Ons kan die veranderlike noem wat ons wil, maar dit is handig om 'n naam te gee wat verband hou met wat dit in ons kode sal doen. In hierdie geval is dit sinvol om dit 'n deurklokkie te noem.

laat deurklokkie;

Aangesien p5.js webgebaseerd is, moet ons seker maak dat die klanklêer in die skets gelaai is voordat die skets begin loop, anders het ons moontlik nie toegang tot die eienskappe van die voorwerp nie. Om dit te kan doen, moet ons 'n funksie byvoeg om die klanklêer te laai voordat die skets begin. Hierdie funksie word voorlaai () genoem. Ons skryf dit op dieselfde manier as die opset () en teken () funksie.

Binne in die krulhakies sal ons ons veranderlike aan die klankvoorwerp toewys deur die loadSound () -funksie te gebruik. Skryf binne die hakies die presiese naam van die klanklêer binne aanhalingstekens neer:

funksie voorlaai () {

deurbel = loadSound ('deurbel.mp3');

}

Stap 4: speel klanklêer met die funksie KeyPressed ()

Noudat die klanklêer in die skets gelaai is, kan u dit speel met die play () -metode. Metodes is in wese funksies wat spesifiek is vir 'n voorwerp.

As u voorheen sleutelpers in p5.js gebruik het, het u waarskynlik 'n voorwaardelike verklaring gebruik met die keyIsPressed -veranderlike binne -in die tekenfunksie. As ons egter met klanklêers werk, wil ons dit nie in die tekenfunksie aktiveer nie. Die tekenfunksie is 'n lus, dus word dit voortdurend bygewerk. Dit beteken dat die klanklêer weer en weer speel, solank 'n sleutel ingedruk word wat nie aangenaam is om na te luister nie.

Om dit te vermy, gaan u 'n funksie genaamd keyPressed () gebruik. Dit word ook dieselfde geskryf as die opstel () en teken () funksie. Skryf dit onderaan die kode onder die teken () funksie.

Binne die krulhakies sit u die play () -metode wat die klanklêer een keer aktiveer as u op 'n sleutel druk. Om 'n metode vir 'n voorwerp te gebruik, skryf die veranderlike naam wat die voorwerp bevat, gevolg deur.play ();

function keyPressed () {

deurbel.speel ();

}

As u nou u skets uitvoer, kan u op 'n sleutel druk en die geluid van die deurklokkie speel.

BELANGRIKE OPMERKING: By die toevoeging van sleuteldrukke in ons kode, moet die webredakteur weet of ons op 'n sleutel druk om kode in die teksredakteur te skryf, of ons druk op die sleutel om die ding te doen wat ons 'n sleutelbord gedruk het om te doen. As u op die speelknoppie klik, beweeg die muis oor die doek en klik op die doek. Dit sal die fokus van die redakteur op die skets bring, en as u op 'n sleutel druk, sal die sleutelperskode wat ons wil hê, veroorsaak word

Stap 5: Maak die papierknoppie

Om die geluid met die Makey Makey te aktiveer, gebruik ons 'n gewone potlood en papier om 'n knoppie te maak.

Trek twee halwe sirkels met 'n baie klein gaping tussen hulle sodat hulle nie eintlik aan mekaar raak nie, maar naby genoeg sodat ons beide helftes gelyktydig met een vinger kan raak. Elke halwe sirkel moet ook 'n dik lyn hê wat aan elke kant van die papier strek. Dit is waar u die krokodilleknipsels van die Makey Makey sal heg.

Maak seker dat u albei kante baie donker invul sodat die grafiet uit die potlood die stroom van die Makey Makey kan hou.

Die ontwerp van die twee halwe sirkels is om so 'n klein gaping tussen hulle te hê dat dit basies onmoontlik is om nie aan beide kante gelyktydig te raak nie. Hiermee kan u die kring tussen die sleutel en die aarde op die Makey Makey voltooi sonder om die gronddraad vas te hou.

Stap 6: Stel Makey Makey op

Haal die Makey Makey -bord, die USB -kabel en twee krokodilleklemme uit. Heg een krokodilknipsel aan die aarde en een aan die ruimtetoets (aangesien ons nie 'n sleutel in ons kode gespesifiseer het nie, sal enige sleutel wat ons druk, die geluid aktiveer).

Neem die krokodilleklem wat aan die spasiesleutel geheg is en plak dit aan die een kant van die papierknoppie vas. Neem die krokodilleklem wat aan die aarde geheg is en plak dit aan die ander kant van die papierknoppie.

Steek die USB -kabel in die skootrekenaar.

Stap 7: Druk die knoppie om die klanklêer te aktiveer

Op hierdie punt is u gereed om u deurklokkie te lui. Begin die skets (onthou om met die muis op die doek te klik, sodat die druk op die toets die druk druk ()) en dan die twee halwe sirkels op die papier terselfdertyd raak. U moet die geluid van die klanklêer van die deurklokkie hoor.

Stap 8: Uitbreiding: voeg 'n visuele komponent by die skets

Op hierdie stadium bevat ons skets slegs kode om die klanklêer af te speel, sodat u niks op die skerm kan sien verander nie. Dit is miskien al wat u wil doen as u 'n soort interaktiewe klankprojek wil skep.

Met die visuele koderingsvermoëns van p5.js is die moontlikhede om grafika by te voeg egter eindeloos. U kan selfs beeldmateriaal hê wat op u klanklêers op verskillende maniere reageer, soos om slegs te verskyn wanneer die klanklêer speel, reageer op die veranderinge in volume en/of frekwensie of selfs 'n visuele voorstelling van die klank self.

Stap 9: Uitbreiding: Maak 'n sirkel Verander kleur as die knoppie ingedruk word

Om hierdie projek eenvoudig te hou, gaan ons net 'n sirkel maak wat van kleur verander as die knoppie ingedruk word.

In die teken () -funksie, maak 'n sirkel met behulp van die ellips () -funksie. Voeg daarby die fill () -funksie om die kleur van die sirkel in te stel. Vir hierdie skets is die oorspronklike kleur wit, wat die grysskaalwaarde van 255 is. U kan die kleur wat u wil, met behulp van RGB -kleurwaardes stel.

Tussen die fill () -funksie en ellipse () -funksie, maak 'n voorwaardelike stelling met behulp van die keyIsPressed -veranderlike binne die hakies. Tussen die krulhakies van die voorwaardelike stelling, plaas 'n ander vul () funksie in die kleur waarna u die sirkel wil verander as u op die sleutel druk. Vir hierdie projek verander die kleur na geel met 'n RGB -waarde van 255, 255, 0.

as (keyIsPressed) {

fill (255, 255, 0);

}

Druk die speelknoppie om die skets uit te voer. Die wit sirkel moet nou verskyn wanneer die skets gelaai word (onthou om met die muis op die doek te klik). Druk dan op die papierknoppie, en u moet die deurklokkie hoor lui en sien hoe die sirkel van kleur verander.

p5.js -skets: