Paper Doorbell W/ P5.js & Makey Makey: 9 քայլ

2024 Հեղինակ: John Day | [email protected]. Վերջին փոփոխված: 2024-01-30 09:46

Makey Makey նախագծեր »

Այս նախագիծը p5.js- ում ստեղծում է ուրվագիծ, որը կարող է աուդիո ֆայլ նվագարկել ՝ օգտագործելով ստեղնը, այնուհետև մատիտով, թուղթով և Makey Makey- ով մի պարզ կոճակ է ստեղծում `ձայնը ձգելու համար:

Մինչ այս նախագիծը օգտագործում է դռան զանգի ձայնը, քայլերը ներառում են, թե ինչպես կարելի է բեռնել աուդիո ֆայլը ձեր p5.js էսքիզում, այնպես որ այն հեշտությամբ կարող է հարմարեցվել ցանկացած տեսակի ձայնի օգտագործման համար:

Իմացեք ավելին p5.js- ի մասին ՝

Եթե դուք նոր եք օգտագործում p5.js Makey Makey- ի հետ, ես առաջարկում եմ նախ ստուգել այս նախագիծը ՝

Պարագաներ

Մատիտ

Թղթի մի փոքր քառակուսի

Makey Makey հավաքածու (ալիգատորների 2 սեղմիչով)

Նոթբուք w/ ինտերնետ կապով

Քայլ 1: Ներբեռնեք աուդիո ֆայլը

Այս նախագիծը պահանջում է օգտագործել աուդիո ֆայլ, որը մենք պետք է վերբեռնենք մեր p5.js ուրվագծում: Դա անելու համար մենք նախ պետք է ներբեռնենք աուդիո ֆայլը:

Եթե դուք չեք կարողանում ֆայլեր ներբեռնել ձեր համակարգչում կամ պարզապես ցանկանում եք բաց թողնել ֆայլը ներլցնելուց և այն ներբեռնել ձեր ուրվագծում, կարող եք անցնել այս հղումով p5.js ձևանմուշի ՝ արդեն վերբեռնված ձայնով և անցնել քայլ 3 -ին: Այնուամենայնիվ, եթե ցանկանում եք ապագայում աշխատել p5.js- ում աուդիո ֆայլերի հետ, այս և հաջորդ քայլը ցույց կտա ձեզ, թե ինչպես դա անել:

Համացանցում կան ձայնային էֆեկտներ և աուդիո ֆայլեր ներբեռնելու բազմաթիվ վայրեր, որոնցից ոմանք պահանջում են հաշիվ, օրինակ freesound.org- ը և որոշները, որոնք հաշիվ չեն պահանջում, ինչպես soundbible.com- ը: Ձեր նախագծի համար ձայն օգտագործելիս միշտ ուշադիր եղեք լիցենզավորման և/կամ վերագրման ցանկացած պահանջի: Ավելին ՝ այստեղ ՝

Այս նախագծի դռան զանգը հնչեց https://freesound.org/s/163730/ կայքից, որը տրամադրեց Թիմ Կանը:

Եթե ցանկանում եք ձայնը ներբեռնել առանց հաշիվ ստեղծելու, ես այն վերածել եմ mp3 ձևաչափի, որը կարելի է ներբեռնել այստեղ ՝

Քայլ 2. Աուդիո ֆայլը վերբեռնել P5.js- ում

Մեր դռան զանգի ձայնը ներբեռնելուց հետո մենք պետք է այն վերբեռնենք մեր p5.js էսքիզում, որպեսզի կարողանանք մուտք գործել դրան:

Դա անելու համար հետևեք հետևյալ քայլերին.

- Կտտացրեք «>» պատկերակին վեբ խմբագրի ձախ կողմում ՝ նվագարկման կոճակի ներքևում: Սա կբացի կողագոտին, որը ցույց է տալիս ձեր ուրվագծի ֆայլերը:

- Կտտացրեք դեպի ներքև գտնվող փոքր եռանկյունին `« Էսքիզների ֆայլեր »-ի աջ կողմում: Սա կհայտնվի բացվող ընտրացանկ `« թղթապանակ ավելացնել »և« ֆայլ ավելացնել »տարբերակներով

- Կտտացրեք «ավելացնել ֆայլ»: Սա կհայտնվի ֆայլ ավելացնելու պատուհան: Դուք կարող եք դռան զանգի ֆայլը քաշել տուփի մեջ կամ սեղմել այնտեղ, որտեղ վանդակում գրված է ՝ «քաշել ֆայլերը այստեղ ՝ վերբեռնելու համար կամ սեղմել ՝ ֆայլերի դիտարկիչն օգտագործելու համար»: Սա թույլ կտա նավարկելու ձեր համակարգչային ֆայլերով ՝ գտնելու աուդիո ֆայլը:

- Ֆայլը քարշ տալուց կամ ընտրելուց հետո կտեսնեք, որ այն վերբեռնվի, և ֆայլի անունը կհայտնվի կողքի բարում:

Այժմ դուք կկարողանաք մուտք գործել և օգտագործել այս աուդիո ֆայլը ձեր ուրվագծում:

Քայլ 3. Աուդիո ֆայլը բեռնում P5.js ուրվագծի մեջ

P5.js էսքիզի մեջ աուդիո ֆայլի բեռնումը մեզանից պահանջում է ստեղծել ձայնային ֆայլ: Օբյեկտն ունի իր սեփական հատկությունները և գործառույթները, որոնք մենք կարող ենք օգտագործել:

Օբյեկտ ստեղծելու համար մենք նախ պետք է փոփոխական ստեղծենք ՝ օբյեկտը պահելու համար: Սա թույլ կտա մեզ մուտք գործել օբյեկտ և դրա հատկությունները էսքիզի ամբողջ ընթացքում: Փոփոխական կազմելու համար անցեք ուրվագծի վերին տողը և գրեք let բառը: Այս բառը օգտագործվում է javascript- ում փոփոխական հայտարարելու համար: Այնուհետեւ փոփոխականին տվեք անուն: Մենք կարող ենք փոփոխականին անվանել այն, ինչ ցանկանում ենք, բայց օգտակար է նրան տալ անուն, որը կապված է այն բանի հետ, թե ինչ է անելու մեր ծածկագրում: Այս դեպքում իմաստ ունի այն անվանել դռան զանգ:

թող դռան զանգը;

Քանի որ p5.js- ը վեբ է, մենք պետք է համոզվենք, որ աուդիո ֆայլը տեղադրված է էսքիզի մեջ, նախքան էսքիզը սկսելը, հակառակ դեպքում մենք կարող ենք չկարողանալ մուտք գործել օբյեկտի հատկությունները: Դա անելու համար մենք պետք է ավելացնենք ֆունկցիա ՝ նախքան էսքիզը սկսելը, աուդիո ֆայլը բեռնելու համար: Այս գործառույթը կոչվում է նախաբեռնում (): Մենք դա գրում ենք այնպես, ինչպես setup () և draw () գործառույթը:

Գանգուր փակագծերի ներսում մենք մեր փոփոխականը կհանձնենք ձայնային օբյեկտին ՝ օգտագործելով loadSound () գործառույթը: Փակագծերի ներսում չակերտների մեջ գրեք ձայնային ֆայլի ճշգրիտ անունը.

գործառույթի նախաբեռնում () {

դռան զանգ = loadSound ('doorbell.mp3');

}

Քայլ 4. Խաղացեք աուդիո ֆայլ ՝ օգտագործելով KeyPressed () գործառույթը

Այժմ, երբ աուդիո ֆայլը բեռնված է ուրվագծի մեջ, կարող եք այն նվագարկել ՝ օգտագործելով play () մեթոդը: Մեթոդները հիմնականում գործառույթներ են, որոնք հատուկ են օբյեկտին:

Եթե նախկինում p5.js- ում օգտագործել եք ստեղնային սեղմումներ, ապա հավանաբար օգտագործել եք պայմանական հայտարարություն ՝ keyIsPressed փոփոխականով ՝ ոչ ոքի ֆունկցիայի ներսում: Այնուամենայնիվ, աուդիո ֆայլերի հետ աշխատելիս մենք չենք ցանկանում այն ձգել վիճակահանության գործառույթի ներսում: Ոչ ոքի գործառույթը հանգույց է, ուստի այն անընդհատ թարմացվում է: Սա նշանակում է, որ աուդիո ֆայլը կրկին ու կրկին կխաղա, քանի դեռ սեղմված է մի բանալին, որը լսելը հաճելի չի լինի:

Դրանից խուսափելու համար դուք պատրաստվում եք օգտագործել keyPpress () կոչվող գործառույթը: Սա նույնպես գրված է նույնը, ինչ setup () և draw () գործառույթը: Գրեք սա draw () գործառույթի ներքևում գտնվող ծածկագրի ներքևում:

Գանգուր փակագծերի ներսում տեղադրվում է play () մեթոդը, որը մեկ անգամ բանալին սեղմելիս կաշխատի ձայնային ֆայլը: Օբյեկտի համար մեթոդ օգտագործելու համար գրեք այն փոփոխականի անունը, որը պահում է օբյեկտը, որին հաջորդում է.play ();

գործառույթը keyPressed () {

doorbell.play ();

}

Այժմ, երբ ձեր ուրվագիծը վարում եք, կարող եք սեղմել ստեղնը, և դռան զանգի ձայնը կհնչի:

ԿԱՐԵՎՈՐ ՈEՇԱԴՐՈԹՅՈՆ. Մեր կոդի մեջ բանալիների սեղմումներ ավելացնելիս վեբ խմբագիրը պետք է իմանա `տեքստային խմբագրիչում կոդ գրելու համար բանալին սեղմո՞ւմ ենք, թե՞ բանալին` այն բանի համար, որը մենք կոդավորել ենք հիմնական սեղմման համար: Երբ կտտացնում եք նվագարկման կոճակին, մկնիկը տեղափոխեք կտավի վրայով և կտտացրեք կտավին: Սա խմբագրի ուշադրության կենտրոնում կբերի ուրվագիծը և ստեղնը սեղմելը կհանգեցնի այն հիմնական կոդին, որը ցանկանում ենք:

Քայլ 5: Պատրաստեք թղթի կոճակը

Makey Makey- ով ձայնը ձգելու համար մենք կոճակ պատրաստելու համար կօգտագործենք սովորական մատիտ և թուղթ:

Նկարեք երկու կես շրջան, որոնց միջև շատ փոքր բացվածք կա, որպեսզի դրանք իրականում չդիպչեն, բայց բավական մոտ լինեն, որպեսզի մենք կարողանանք երկու կեսերին միաժամանակ դիպչել մեկ մատով: Յուրաքանչյուր կիսաշրջան պետք է ունենա նաև հաստ գիծ, որը տարածվում է թղթի յուրաքանչյուր ծայրին: Այստեղ դուք կցեք Makey Makey- ի ալիգատորների սեղմակները:

Համոզվեք, որ երկու կողմերն էլ շատ մուգ եք լցրել, որպեսզի մատիտից գրաֆիտը կարողանա պահել հոսանքը Makey Makey- ից:

Երկու կիսաշրջանների ձևավորումն այն է, որ նրանց միջև այնքան փոքր բաց լինի, որ հիմնականում անհնար է միաժամանակ դիպչել երկու կողմերին: Սա թույլ է տալիս ավարտել Makey Makey- ի բանալու և Երկրի միջև եղած միացումը ՝ առանց գետնին հաղորդալարը բռնելու:

Քայլ 6: Ստեղծեք Makey Makey

Դուրս եկեք Makey Makey տախտակից, USB մալուխից և ալիգատորների երկու տեսահոլովակներից: Կցեք մեկ ալիգատոր ամրակ Երկրի վրա և մեկը Տիեզերքի ստեղնին (քանի որ մենք մեր կոդի մեջ բանալին չենք նշել, ցանկացած բանալին, որը մենք սեղմում ենք, կհանգեցնի ձայնին):

Վերցրեք ալիգատորը, որը կցված է Space ստեղնին և սեղմեք այն թղթի կոճակի մի կողմում: Վերցրեք ալիգատորը, որը կցված է Երկրին և ամրացրեք այն թղթի կոճակի մյուս կողմում:

Միացրեք USB մալուխը նոութբուքի մեջ:

Քայլ 7: Սեղմեք կոճակը ՝ ձայնային ֆայլը գործարկելու համար

Այս պահին դուք պատրաստ եք դռան զանգը հնչեցնել: Սկսեք ուրվագիծը (հիշեք կտտացրեք մկնիկը կտավի վրա, որպեսզի ստեղնը կատարի keyPressed () գործառույթը), այնուհետև միաժամանակ դիպչեք թղթի երկու կես շրջաններին: Դուք պետք է լսեք դռան զանգի ձայնային ֆայլի նվագարկման ձայնը:

Քայլ 8: Ընդլայնում. Էսքիզին ավելացրեք տեսողական բաղադրիչ

Այս պահին մեր ուրվագիծը ներառում է միայն ձայնային ֆայլը նվագարկելու կոդ, այնպես որ էկրանին որևէ փոփոխություն չեք տեսնի: Սա կարող է լինել այն ամենը, ինչ ցանկանում եք անել, եթե փորձում եք ստեղծել որոշ տեսակի ինտերակտիվ ձայնային նախագիծ:

Այնուամենայնիվ, p5.js- ի տեսողական կոդավորման հնարավորություններով, գրաֆիկա ավելացնելու հնարավորություններն անսպառ են: Դուք նույնիսկ կարող եք ունենալ պատկերներ, որոնք արձագանքում են ձեր աուդիո ֆայլերին բազմաթիվ ձևերով, ինչպիսիք են ՝ միայն աուդիո ֆայլը նվագելիս, արձագանքել ծավալի և (կամ) հաճախության փոփոխություններին կամ նույնիսկ ձայնի տեսողական պատկերացում կազմել:

Քայլ 9: Ընդլայնում. Կատարեք շրջանակի գույնը, երբ սեղմվում է կոճակը

Այս նախագիծը պարզ պահելու համար մենք պարզապես պատրաստվում ենք շրջան կազմել, որը գույնը փոխում է կոճակը սեղմելիս:

Draw () գործառույթում ստեղծեք շրջան ՝ օգտագործելով էլիպս () գործառույթը: Դրանից վեր ՝ լրացրեք () գործառույթը ՝ շրջանագծի գույնը սահմանելու համար: Այս ուրվագծի համար սկզբնական գույնը կլինի սպիտակ, որը մոխրագույն մասշտաբի 255 արժեքն է: RGB գույնի արժեքները կարող եք սահմանել ձեր ուզած գույնի վրա:

Լրացման () ֆունկցիայի և էլիպս () ֆունկցիայի միջև ստեղծեք պայմանական հայտարարություն ՝ օգտագործելով փակագծերի ներսում գտնվող keyIsPressed փոփոխականը: Պայմանական հայտարարության գանգուր փակագծերի միջև դրեք մեկ այլ լրացման () գործառույթ, որը սահմանվում է այն գույնի վրա, որով ցանկանում եք, որ շրջանը փոխվի, երբ սեղմում եք ստեղնը: Այս նախագծի համար գույնը կփոխվի դեղին, որն ունի RGB արժեք 255, 255, 0:

եթե (keyIsPressed) {

լրացնել (255, 255, 0);

}

Էսքիզը գործարկելու համար սեղմեք նվագարկման կոճակը: Սպիտակ շրջանակը այժմ պետք է հայտնվի, երբ էսքիզը բեռնվի (Հիշեք կտտացրեք մկնիկը կտավի վրա): Այնուհետև կտտացրեք թղթի կոճակը և լսեք, որ դռան զանգը հնչում է, և տեսնում եք, թե ինչպես է շրջանակը փոխում գույնը:

p5.js էսքիզ ՝