Ntawv Doorbell W/ P5.js & Makey Makey: 9 Kauj Ruam

2024 Tus sau: John Day | [email protected]. Kawg hloov kho: 2024-01-30 09:26

Makey Makey Cov Haujlwm »

Txoj haujlwm no tsim cov duab kos hauv p5.js uas tuaj yeem ua cov ntaub ntawv audio siv lub xov tooj tseem ceeb tom qab ntawd ua lub pob yooj yim nrog xaum, ntawv thiab Makey Makey ua rau lub suab nrov.

Thaum txoj haujlwm no siv lub suab tswb qhov rooj, cov kauj ruam suav nrog yuav ua li cas thauj cov ntaub ntawv audio rau hauv koj lub p5.js kos duab, yog li nws tuaj yeem hloov kho tau yooj yim los siv txhua hom suab.

Kawm paub ntau ntxiv txog p5.js:

Yog tias koj yog tus tshiab los siv p5.js nrog Makey Makey, Kuv hais kom txheeb xyuas qhov haujlwm no ua ntej:

Khoom siv

Mem hluav

Ib daim ntawv me me

Cov khoom siv Makey Makey (w/ 2 tus nab kuab)

Laptop nrog internet txuas

Kauj Ruam 1: Rub tawm Audio File

Txoj haujlwm no yuav tsum siv cov ntaub ntawv audio uas peb xav tau los upload rau hauv peb daim duab p5.js. Txhawm rau ua qhov no, thawj zaug peb yuav tsum rub tawm cov ntaub ntawv audio.

Yog tias koj tsis tuaj yeem rub cov ntaub ntawv mus rau koj lub computer lossis yooj yim xav hla rub cov ntawv thiab xa nws mus rau hauv koj daim duab, koj tuaj yeem mus rau qhov txuas no rau p5.js tus qauv nrog lub suab twb tau rub tawm thiab mus rau theem 3. Txawm li cas los xij, yog tias koj xav ua haujlwm nrog cov ntaub ntawv audio hauv p5.js yav tom ntej, qib no thiab qib tom ntej yuav qhia koj yuav ua li cas.

Muaj ntau qhov chaw rub tawm cov suab nrov thiab cov ntaub ntawv suab hauv lub vev xaib, qee qhov uas xav tau tus as khauj, zoo li freesound.org thiab qee qhov uas tsis xav tau tus as khauj, zoo li soundbible.com. Nco ntsoov nco ntsoov ib qho kev tso cai thiab/lossis qhov xav tau tshwj xeeb thaum siv lub suab rau koj qhov project. Xav paub ntau ntxiv ntawm no:

Lub suab tswb nrov rau qhov haujlwm no los ntawm https://freesound.org/s/163730/ muab los ntawm Tim Kahn.

Yog tias koj xav rub lub suab yam tsis tas ua tus account, kuv tau hloov lub suab mus rau hom ntawv mp3 uas tuaj yeem rub tawm ntawm no:

Kauj Ruam 2: Xa Cov Ntaub Ntawv Suab Rau P5.js

Thaum peb tau rub peb lub suab tswb lub qhov rooj, peb yuav tsum rub nws mus rau hauv peb daim duab p5.js yog li peb tuaj yeem nkag mus tau.

Txhawm rau ua qhov no, ua raws cov theem no:

- Nyem '>' lub cim nyob rau sab laug ntawm lub vev xaib khoos phis tawj, tsuas yog hauv qab khawm ua si. Qhov no yuav qhib rau sab xis uas qhia cov ntaub ntawv rau koj kos duab.

- Nyem rau daim duab me me tig rau sab xis ntawm sab xis ntawm 'Sketch Files'. Qhov no yuav coj los rau hauv cov ntawv qhia zaub mov nco nrog cov kev xaiv rau 'ntxiv nplaub tshev' thiab 'ntxiv cov ntawv'

- Nyem 'ntxiv cov ntaub ntawv'. Qhov no yuav coj lub qhov rais los ntxiv cov ntaub ntawv. Koj tuaj yeem rub cov ntaub ntawv ntawm lub qhov rooj mus rau hauv lub thawv lossis nyem qhov twg lub npov hais tias 'rub cov ntawv ntawm no txhawm rau rub lossis nyem rau siv cov ntaub ntawv browser'. Qhov no yuav cia koj taug kev hauv koj lub computer cov ntaub ntawv txhawm rau nrhiav cov ntaub ntawv audio.

- Thaum koj tau rub lossis xaiv cov ntaub ntawv, koj yuav pom nws rub tawm thiab lub npe ntawm cov ntawv yuav tshwm nyob rau sab xis.

Tam sim no koj tuaj yeem nkag mus thiab siv cov ntaub ntawv audio no hauv koj daim duab.

Kauj Ruam 3: Thauj Khoom Cov Ntaub Ntawv Rau Hauv P5.js Sketch

Kev thauj cov ntaub ntawv audio rau hauv p5.js kos duab xav kom peb ua cov khoom siv suab. Ib yam khoom muaj nws tus kheej lub zog thiab kev ua haujlwm tsim rau hauv uas peb tuaj yeem siv tau.

Txhawm rau ua ib qho khoom, thawj zaug peb yuav tsum ua kom muaj qhov sib txawv los tuav cov khoom. Qhov no yuav tso cai rau peb nkag mus rau qhov khoom thiab nws cov khoom thoob plaws hauv daim duab. Txhawm rau hloov pauv, mus rau kab saum toj kawg nkaus ntawm daim duab thiab sau lo lus cia. Lo lus no yog siv los tshaj tawm qhov sib txawv hauv javascript. Tom qab ntawd muab lub npe hloov pauv. Peb tuaj yeem hu qhov sib txawv ntawm txhua yam peb xav tau, tab sis nws muaj txiaj ntsig muab nws lub npe uas cuam tshuam nrog nws yuav ua dab tsi hauv peb cov cai. Hauv qhov no, nws ua rau nkag siab hu nws lub qhov rooj.

cia lub tswb qhov rooj;

Txij li p5.js yog lub vev xaib, peb yuav tsum ua kom ntseeg tau tias cov ntaub ntawv audio tau raug thauj mus rau hauv daim duab kos ua ntej daim duab kos pib ua haujlwm, txwv tsis pub peb yuav tsis tuaj yeem nkag mus rau cov khoom ntawm yam khoom. Txhawm rau ua qhov no, peb yuav tsum tau ntxiv lub luag haujlwm los thauj cov ntaub ntawv audio ua ntej kos duab pib. Txoj haujlwm no hu ua preload (). Peb sau qhov no tib yam li kev teeb tsa () thiab kos () ua haujlwm.

Sab hauv ntawm cov kab nkhaus, peb yuav muab peb qhov sib txawv rau lub suab yam khoom los ntawm kev siv loadSound () muaj nuj nqi. Sab hauv ntawm kab lus, sau lub npe tseeb ntawm cov ntaub ntawv audio sab hauv ntawm cov lus hais:

muaj nuj nqi preload () {

lub qhov rooj = loadSound ('doorbell.mp3');

}

Kauj Ruam 4: Ua Si Cov Ntaub Ntawv Siv KeyPressed () Muaj nuj nqi

Tam sim no cov ntaub ntawv audio tau rub rau hauv daim duab, koj tuaj yeem ua si nws siv txoj kev ua si (). Txoj hauv kev yog cov haujlwm tseem ceeb uas tshwj xeeb rau ib qho khoom.

Yog tias koj tau siv qhov tseem ceeb nias hauv p5.js ua ntej, tej zaum koj yuav siv cov nqe lus muaj cai nrog tus yuam sijIsPressed sib txawv sab hauv ntawm txoj haujlwm kos. Txawm li cas los xij, thaum ua haujlwm nrog cov ntaub ntawv audio, peb tsis xav ua kom nws sab hauv qhov kos. Cov duab kos yog lub voj yog li nws tau hloov kho tas li. Qhov no txhais tau tias cov ntaub ntawv audio yuav ua si ntau thiab ntau dua yog tias tus yuam sij raug nias cia uas yuav tsis zoo mloog.

Txhawm rau zam qhov no, koj yuav siv lub luag haujlwm hu ua keyPressed (). Qhov no kuj tau sau tib yam li teeb tsa () thiab kos () ua haujlwm. Sau qhov no rau hauv qab ntawm txoj cai hauv qab kos () ua haujlwm.

Sab hauv cov kab nkhaus yog qhov uas koj tso qhov ua si () txoj hauv kev uas yuav ua rau cov ntaub ntawv audio ib zaug thaum koj nias tus yuam sij. Txhawm rau siv txoj hauv kev rau ib qho khoom, sau lub npe sib txawv uas tuav cov khoom ua raws los ntawm.play ();

muaj nuj nqi key Pressed () {

doorbell.play ();

}

Tam sim no thaum koj khiav koj daim duab, koj tuaj yeem nias tus yuam sij thiab lub pob qhov rooj yuav qhib.

CEEB TOOM CEEB TOOM: Thaum ntxiv qhov tseem ceeb nias rau hauv peb tus lej, tus kws kho lub vev xaib yuav tsum paub yog tias peb tab tom nias tus yuam sij los sau cov cai hauv kab ntawv sau lossis peb tab tom nias tus yuam sij los ua qhov peb tau sau tus lej tseem ceeb ua. Thaum koj nyem lub pob ua si, txav tus nas hla daim ntaub thiab nyem rau ntawm daim ntaub. Qhov no yuav coj kev tsom mus rau tus kws kho duab kos thiab nias tus yuam sij yuav ua rau tus yuam sij nias tus lej peb xav kom tshwm sim

Kauj Ruam 5: Ua Daim Ntawv Khawm

Txhawm rau ua kom lub suab nrov nrog Makey Makey, peb yuav siv tus xaum qhuav thiab ntawv los ua lub pob.

Kos ob lub voj voos ib nrab nrog qhov sib txawv me me ntawm lawv kom lawv tsis kov tab sis kaw txaus kom peb tuaj yeem kov ob qho tib lub sijhawm tib lub sijhawm nrog ib tus ntiv tes. Txhua lub voj voog ib nrab yuav tsum muaj kab tuab uas nthuav mus rau txhua qhov kawg ntawm daim ntawv. Nov yog qhov uas koj yuav muab cov yeeb yaj kiab tso los ntawm Makey Makey.

Nco ntsoov tias koj tau sau rau ob sab tsaus ntuj heev kom cov graphite los ntawm cov xaum tau tuav tau tam sim no los ntawm Makey Makey.

Kev tsim ntawm ob lub voj voog ib nrab yog kom muaj qhov sib txawv me me ntawm lawv uas nws tsis yooj yim sua tsis txhob kov ob sab tib lub sijhawm. Qhov no tso cai rau koj ua kom tiav cov Circuit Court ntawm tus yuam sij thiab Lub Ntiaj Teb ntawm Makey Makey yam tsis tas yuav tuav cov xaim av.

Kauj Ruam 6: Teeb Makey Makey

Tawm ntawm Makey Makey lub rooj tsavxwm, USB cable thiab ob tus nab kuab. Txuas ib tus nab kuab mus rau lub Ntiaj Teb thiab ib qho rau Qhov Chaw Tseem Ceeb (txij li peb tsis tau hais qhia tus yuam sij hauv peb tus lej, ib tus yuam sij twg peb nias yuav ua rau lub suab nrov).

Nqa tus nab kuab uas txuas nrog Tus yuam sij Qhov Chaw thiab muab lo rau ib sab ntawm daim ntawv khawm. Nqa tus nab kuab uas txuas nrog Lub Ntiaj Teb thiab muab nws txuas rau lwm sab ntawm daim ntawv khawm.

Txuas lub USB cable rau hauv lub laptop.

Kauj Ruam 7: Nias Lub Khawm kom Ua Cov Ntaub Ntawv Suab

Txij ntawm no mus, koj npaj tau ntsais koj lub qhov rooj. Pib qhov kos duab (nco ntsoov nyem nas rau ntawm daim ntaub kom lub pob nyem yuav ua tus yuam sij Pressed () muaj nuj nqi) thiab tom qab ntawd kov ob lub voj voog ib nrab ntawm daim ntawv tib lub sijhawm. Koj yuav tsum hnov lub suab ntawm lub qhov rooj kaw suab ua suab.

Kauj Ruam 8: Kev Txuas Ntxiv: Ntxiv Visual Component rau Sketch

Txog ntawm qhov no, peb cov duab kos tsuas suav nrog cov lej los ua cov ntaub ntawv audio, yog li koj yuav tsis pom dab tsi hloov pauv ntawm qhov screen. Qhov no yuav yog txhua yam koj xav ua yog tias koj tab tom sim tsim qee hom kev sib tham sib tham txog qhov project.

Txawm li cas los xij, nrog kev pom lub peev xwm ntawm p5.js, qhov muaj peev xwm ntawm kev ntxiv cov duab tsis muaj qhov kawg. Koj tseem tuaj yeem pom qhov pom uas cuam tshuam rau koj cov ntaub ntawv audio hauv ntau txoj hauv kev xws li tshwm sim tsuas yog thaum cov ntaub ntawv audio ua si, ua rau muaj kev hloov pauv hauv ntim thiab/lossis zaus lossis txawm tias ua kom pom qhov muag ntawm lub suab nws tus kheej.

Kauj Ruam 9: Kev Txuas Ntxiv: Ua Lub voj voog hloov xim thaum khawm raug nias

Txhawm rau ua txoj haujlwm no yooj yim, peb tsuas yog yuav ua lub voj voog uas hloov xim thaum lub pob nyem.

Hauv qhov kos () ua haujlwm, tsim lub voj voog uas siv ellipse () muaj nuj nqi. Saum toj no, ntxiv qhov sau () ua haujlwm los teeb xim ntawm lub voj voog. Txog qhov kos duab no, thawj xim yuav dawb uas yog tus nqi greys ntawm 255. Koj tuaj yeem teeb xim rau ib qho uas koj xav siv RGB xim qhov tseem ceeb.

Hauv nruab nrab ntawm kev sau () muaj nuj nqi thiab ellipse () muaj nuj nqi, tsim cov lus hais raws qhov siv qhov keyIsPressed sib txawv hauv cov kab lus. Nyob nruab nrab ntawm cov kab lus nkhaus ntawm cov lus pom zoo, tso lwm qhov sau () ua haujlwm teeb rau cov xim uas koj xav kom lub voj voos hloov mus thaum koj nias tus yuam sij. Rau txoj haujlwm no, xim yuav hloov mus rau daj uas muaj tus nqi RGB ntawm 255, 255, 0.

yog tias (keyIsPressed) {

sau (255, 255, 0);

}

Nias lub pob ua si kom khiav cov duab. Lub voj voos dawb yuav tsum tam sim no tshwm sim thaum kos duab kos (Nco ntsoov nyem nas ntawm daim ntaub). Tom qab ntawd nias lub pob ntawv thiab koj yuav tsum hnov lub suab tswb lub qhov rooj thiab pom lub voj voog hloov xim.

p5.js kos duab: