Zile e dyerve të letrës W/ P5.js & Makey Makey: 9 hapa

2024 Autor: John Day | [email protected]. E modifikuara e fundit: 2024-01-30 12:16

Projektet Makey Makey »

Ky projekt krijon një skicë në p5.js e cila mund të luajë një skedar audio duke përdorur një shtypës kyç, pastaj bën një buton të thjeshtë me një laps, letër dhe një Makey Makey për të shkaktuar zërin.

Ndërsa ky projekt përdor një zë të ziles së derës, hapat përfshijnë si të ngarkoni një skedar audio në skicën tuaj p5.js, kështu që lehtë mund të përshtatet për të përdorur çdo lloj tingulli.

Mësoni më shumë rreth p5.js:

Nëse jeni fillestar në përdorimin e p5.js me Makey Makey, unë sugjeroj që së pari të shikoni këtë projekt:

Furnizimet

Laps

Një katror i vogël letre

Kompleti Makey Makey (pa 2 kapëse aligatori)

Laptop me lidhje interneti

Hapi 1: Shkarkimi i skedarit audio

Ky projekt kërkon përdorimin e një skedari audio të cilin duhet ta ngarkojmë në skicën tonë p5.js. Për ta bërë këtë, së pari duhet të shkarkoni skedarin audio.

Nëse nuk jeni në gjendje të shkarkoni skedarë në kompjuterin tuaj ose thjesht dëshironi të kaloni shkarkimin e skedarit dhe ngarkimin e tij në skicën tuaj, mund të shkoni në këtë lidhje për një model p5.js me tingullin e ngarkuar tashmë dhe shkoni në hapin 3. Megjithatë, nëse dëshironi të punoni me skedarë audio në p5.js në të ardhmen, ky hap dhe ai tjetër do t'ju tregojnë se si ta bëni këtë.

Ka shumë vende për të shkarkuar efekte zanore dhe skedarë audio në internet, disa që kërkojnë llogari, si freesound.org dhe disa që nuk kërkojnë llogari, si soundbible.com. Gjithmonë kini parasysh çdo kërkesë licencimi dhe/ose atribuimi kur përdorni një tingull për projektin tuaj. Më shumë për këtë këtu:

Tingulli i ziles së derës për këtë projekt erdhi nga https://freesound.org/s/163730/ siguruar nga Tim Kahn.

Nëse dëshironi të shkarkoni tingullin pa bërë llogari, unë e kam konvertuar tingullin në një format mp3 i cili mund të shkarkohet këtu:

Hapi 2: Ngarkimi i skedarit audio në P5.js

Pasi të kemi shkarkuar zërin tonë të ziles, duhet ta ngarkojmë në skicën tonë p5.js, në mënyrë që të kemi qasje në të.

Për ta bërë këtë, ndiqni këto hapa:

- Klikoni ikonën '>' në anën e majtë të redaktuesit të uebit, pikërisht nën butonin e luajtjes. Kjo do të hapë shiritin anësor i cili tregon skedarët për skicën tuaj.

- Klikoni trekëndëshin e vogël me drejtim poshtë, vetëm në të djathtë të "Skiconi skedarët". Kjo do të sjellë një meny zbritëse me opsionet për "shtoni dosje" dhe "shtoni skedar"

- Kliko 'shto skedarin'. Kjo do të shfaqë një dritare për të shtuar një skedar. Ju mund ta tërhiqni skedarin e ziles së derës në kuti ose klikoni aty ku kutia thotë 'tërhiqni skedarët këtu për të ngarkuar ose klikoni për të përdorur shfletuesin e skedarëve'. Kjo do t'ju lejojë të lundroni nëpër skedarët e kompjuterit tuaj për të gjetur skedarin audio.

- Pasi ta keni tërhequr ose zgjedhur skedarin, do ta shihni të ngarkohet dhe emri i skedarit do të shfaqet në shiritin anësor.

Tani do të keni mundësi të përdorni dhe përdorni këtë skedar audio në skicën tuaj.

Hapi 3: Ngarkimi i skedarit audio në skicën P5.js

Ngarkimi i një skedari audio në një skicë p5.js kërkon që ne të bëjmë një objekt të zërit. Një objekt ka vetitë dhe funksionet e veta të ndërtuara në të që ne mund t'i përdorim.

Për të bërë një objekt, së pari duhet të bëjmë një ndryshore për të mbajtur objektin. Kjo do të na lejojë të kemi qasje në objekt dhe vetitë e tij gjatë gjithë skicës. Për të bërë një ndryshore, shkoni në vijën kryesore të skicës dhe shkruani fjalën le. Kjo fjalë përdoret për të deklaruar një ndryshore në javascript. Pastaj jepni ndryshores një emër. Ne mund ta quajmë ndryshoren çdo gjë që duam, por është e dobishme t'i japim një emër i cili lidhet me atë që do të bëjë në kodin tonë. Në këtë rast, ka kuptim ta quajmë zile derë.

le zile derë;

Meqenëse p5.js është i bazuar në ueb, ne duhet të sigurohemi që skedari audio është ngarkuar në skicë para se të fillojë skicimi, përndryshe ne mund të mos jemi në gjendje të hyjmë në vetitë e objektit. Për ta bërë këtë, duhet të shtojmë një funksion për të ngarkuar skedarin audio para fillimit të skicës. Ky funksion quhet preload (). Ne e shkruajmë këtë në të njëjtën mënyrë si funksioni setup () dhe draw ().

Brenda kllapave kaçurrelë, ne do t'i caktojmë ndryshoren tonë objektit të zërit duke përdorur funksionin loadSound (). Brenda kllapave, shkruani emrin e saktë të skedarit audio brenda thonjëzave:

parafarkimi i funksionit () {

zile derë = loadSound ('zile derë.mp3');

}

Hapi 4: Luani skedarin audio duke përdorur funksionin KeyPressed ()

Tani që skedari audio është ngarkuar në skicë, mund ta luani duke përdorur metodën play (). Metodat janë në thelb funksione që janë specifike për një objekt.

Nëse keni përdorur shtypje të tastit në p5.js më parë, ndoshta keni përdorur një deklaratë të kushtëzuar me ndryshoren keyIsPressed brenda funksionit të tërheqjes. Sidoqoftë, kur punojmë me skedarë audio, ne nuk duam ta aktivizojmë atë brenda funksionit të vizatimit. Funksioni i tërheqjes është një lak, kështu që azhurnohet vazhdimisht. Kjo do të thotë që skedari audio do të luhet pa pushim për aq kohë sa shtypet një çelës i cili nuk do të jetë i këndshëm për t'u dëgjuar.

Për të shmangur këtë, ju do të përdorni një funksion të quajtur keyPressed (). Kjo është shkruar gjithashtu njësoj si funksioni setup () dhe draw (). Shkruani këtë në fund të kodit poshtë funksionit draw ().

Brenda kllapave kaçurrelë është vendi ku vendosni metodën play () që do të aktivizojë skedarin audio një herë kur shtypni një çelës. Për të përdorur një metodë për një objekt, shkruani emrin e ndryshores që mban objektin e ndjekur nga.play ();

key keyPressed () {

zile derë.luaj ();

}

Tani kur drejtoni skicën tuaj, mund të shtypni një çelës dhe tingulli i ziles së derës do të dëgjohet.

SH NOTNIM I RORTNDSISHM: Kur shtoni shtypje të butonave në kodin tonë, redaktuesi i uebit duhet të dijë nëse po shtypim një çelës për të shkruar kodin në redaktuesin e tekstit ose po shtypim butonin për të bërë atë që kemi koduar një shtypje kyçe për të bërë. Kur klikoni butonin e luajtjes, lëvizni miun mbi kanavacë dhe klikoni mbi kanavacë. Kjo do të sjellë fokusin e redaktuesit në skicë dhe shtypja e një çelësi do të shkaktojë kodin kryesor të shtypit që duam të ndodhë

Hapi 5: Bëni butonin e letrës

Për të shkaktuar tingullin me Makey Makey, ne do të përdorim një laps dhe letër të zakonshme për të bërë një buton.

Vizatoni dy gjysmë rrathë me një hendek shumë të vogël midis tyre në mënyrë që ato të mos preken në të vërtetë, por të afrohen aq sa të mund t'i prekim të dyja gjysmat në të njëjtën kohë me një gisht. Çdo gjysmë rrethi duhet të ketë gjithashtu një vijë të trashë e cila shtrihet në çdo skaj të letrës. Kjo është ajo ku ju do të bashkëngjitni kapëset e aligatorit nga Makey Makey.

Sigurohuni që të mbushni të dyja anët shumë të errëta në mënyrë që grafit nga lapsi të jetë në gjendje të mbajë rrymën nga Makey Makey.

Dizajni i dy gjysmave të qarqeve është që të ketë një hendek aq të vogël midis tyre saqë është në thelb e pamundur të mos prekësh të dy anët në të njëjtën kohë. Kjo ju lejon të përfundoni qarkun midis çelësit dhe Tokës në Makey Makey pa pasur nevojë të mbani tela tokëzimi.

Hapi 6: Vendosni Makey Makey

Dilni nga tabela Makey Makey, kabllo USB dhe dy kapëse aligatori. Bashkangjitni një kapëse aligatori në Tokë dhe një në tastin Hapësirë (meqenëse ne nuk specifikuam një çelës në kodin tonë, çdo çelës që shtypim do të shkaktojë tingullin).

Merrni kapësen e aligatorit që është ngjitur në çelësin Hapësirë dhe kapeni atë në njërën anë të butonit të letrës. Merrni kapësen e aligatorit që është ngjitur në Tokë dhe kapeni atë në anën tjetër të butonit të letrës.

Lidheni kabllon USB në laptop.

Hapi 7: Shtypni butonin për të aktivizuar skedarin audio

Në këtë pikë, ju jeni gati të bini zilen e derës. Filloni skicën (mos harroni të klikoni miun në kanavacë, kështu që shtypja e tastit do të ekzekutojë funksionin keyPressed ()) dhe pastaj prekni dy gjysmërrethet në letër në të njëjtën kohë. Ju duhet të dëgjoni tingullin e luajtjes së skedarit audio të ziles së derës.

Hapi 8: Zgjatja: Shtoni një Komponent Visual në Skicë

Në këtë pikë, skica jonë përfshin vetëm kodin për të luajtur skedarin audio, kështu që nuk do të shihni asgjë të ndryshojë në ekran. Kjo mund të jetë gjithçka që dëshironi të bëni nëse po përpiqeni të krijoni një lloj projekti interaktiv të tingullit.

Sidoqoftë, me aftësitë e kodimit vizual të p5.js, mundësitë e shtimit të grafikës janë të pafundme. Ju madje mund të keni pamje që reagojnë ndaj skedarëve tuaj audio në mënyra të shumta, të tilla si shfaqja vetëm kur skedari audio është duke luajtur, duke reaguar ndaj ndryshimeve në vëllim dhe/ose frekuencë apo edhe duke bërë një paraqitje vizuale të vetë tingullit.

Hapi 9: Zgjatja: Bëni një Rreth të Ndryshojë Ngjyrën Kur Shtypet Butoni

Për ta mbajtur këtë projekt të thjeshtë, ne thjesht do të bëjmë një rreth që ndryshon ngjyrën kur shtypet butoni.

Në funksionin draw (), krijoni një rreth duke përdorur funksionin elips (). Mbi këtë, shtoni funksionin fill () për të vendosur ngjyrën e rrethit. Për këtë skicë, ngjyra origjinale do të jetë e bardhë e cila është vlera e gri e 255. Mund ta vendosni ngjyrën në cilindo që dëshironi duke përdorur vlerat e ngjyrave RGB.

Midis funksionit të mbushjes () dhe funksionit elips (), krijoni një deklaratë të kushtëzuar duke përdorur ndryshoren keyIsPressed brenda kllapave. Në mes të kllapave kaçurrelë të deklaratës së kushtëzuar, vendosni një funksion tjetër mbushës () të vendosur në ngjyrën në të cilën dëshironi të ndryshojë rrethi kur shtypni butonin. Për këtë projekt, ngjyra do të ndryshojë në të verdhë e cila ka një vlerë RGB prej 255, 255, 0.

nëse (keyIsPressed) {

mbush (255, 255, 0);

}

Shtypni butonin e luajtjes për të ekzekutuar skicën. Rrethi i bardhë tani duhet të shfaqet kur skica ngarkohet (Mos harroni të klikoni miun në kanavacë). Pastaj shtypni butonin e letrës dhe duhet të dëgjoni zilen e derës dhe të shihni se si rrethi ndryshon ngjyrën.

p5.js skicë: