Qog'oz eshik qo'ng'irog'i W/ P5.js va Makey Makey: 9 qadam

2024 Muallif: John Day | [email protected]. Oxirgi o'zgartirilgan: 2024-01-30 13:24

Makey Makey loyihalari »

Ushbu loyiha p5.js -da eskiz yaratadi, u audiofaylni tugmachani bosib o'ynashi mumkin, so'ngra qalam, qog'oz va Makey Makey bilan oddiy tugmachani bosib ovozni ishga tushiradi.

Bu loyihada eshik qo'ng'irog'i ovozi ishlatilsa -da, p5.js eskiziga audio faylni qanday yuklashni o'z ichiga oladi, shuning uchun uni har qanday tovush turiga osongina moslashtirish mumkin.

P5.js haqida ko'proq bilib oling:

Agar siz Mak5 Makey bilan p5.js-ni ishlatishni boshlagan bo'lsangiz, avval ushbu loyihani ko'rib chiqishni taklif qilaman:

Ta'minotlar

Qalam

Kichik kvadrat qog'oz

Makey Makey to'plami (2 ta alligator kliplari bilan)

Noutbuk internetga ulangan

1 -qadam: Audio faylni yuklab olish

Bu loyiha p5.js eskiziga yuklashimiz kerak bo'lgan audio faylni ishlatishni talab qiladi. Buni amalga oshirish uchun biz avval audio faylni yuklab olishimiz kerak.

Agar siz fayllarni kompyuteringizga yuklab ololmasangiz yoki faylni eskizga yuklashni o'tkazib yubormoqchi bo'lsangiz, p5.js shabloni yuklangan ovoz bilan shu havolaga o'ting va 3 -bosqichga o'ting. Agar siz kelajakda p5.js -da audio fayllar bilan ishlashni xohlasangiz, bu va keyingi qadam sizga buni qanday qilishni ko'rsatib beradi.

Internetda ovoz effektlari va audiofayllarni yuklab olish uchun ko'plab joylar mavjud, ularning ba'zilari hisobni talab qiladi, masalan freesound.org, ba'zilari esa hisobni talab qilmaydi, masalan soundbible.com. Loyihangiz uchun ovozdan foydalanganda har doim litsenziyalash va/yoki atribut talablarini yodda tuting. Bu haqda batafsil:

Ushbu loyihaning eshik qo'ng'irog'i Tim Kan tomonidan taqdim etilgan https://freesound.org/s/163730/ saytidan eshitildi.

Agar siz ovozni hisob qaydnomasiz yuklamoqchi bo'lsangiz, men uni mp3 formatiga o'tkazdim, uni bu erda yuklab olish mumkin:

2 -qadam: Audio faylni P5.js -ga yuklash

Qo'ng'iroq tovushini yuklaganimizdan so'ng, biz unga kirishimiz uchun uni p5.js eskiziga yuklashimiz kerak.

Buning uchun quyidagi bosqichlarni bajaring:

- Veb -muharririning chap tomonida, ijro etish tugmachasi ostidagi '>' belgisini bosing. Bu sizning eskizingiz uchun fayllarni ko'rsatadigan yon panelni ochadi.

- "Eskiz fayllari" ning o'ng tomonidagi pastga qaragan kichik uchburchakni bosing. Bu "papka qo'shish" va "fayl qo'shish" variantlari bilan ochiladigan menyuni ochadi.

- "Fayl qo'shish" ni bosing. Bu faylni qo'shish uchun oyna ochiladi. Siz qo'ng'iroq faylini qutiga sudrab olib borishingiz yoki "yuklash uchun fayllarni bu erga sudrab olib borish yoki fayl brauzeridan foydalanish uchun" tugmachasini bosishingiz mumkin. Bu sizga audio faylni topish uchun kompyuter fayllari bo'ylab harakatlanish imkonini beradi.

- Faylni sudrab yoki tanlagandan so'ng, siz uning yuklanishini ko'rasiz va fayl nomi yon panelda paydo bo'ladi.

Endi siz eskizda ushbu audio faylga kirishingiz va undan foydalanishingiz mumkin bo'ladi.

3 -qadam: Audio faylni P5.js eskiziga yuklash

P5.js eskiziga audio faylni yuklash bizdan ovozli faylni yaratishimizni talab qiladi. Ob'ektning o'ziga xos xususiyatlari va funktsiyalari mavjud bo'lib, biz ulardan foydalanishimiz mumkin.

Ob'ektni yaratish uchun, avvalo, ob'ektni ushlab turadigan o'zgaruvchini yasashimiz kerak. Bu bizga eskiz davomida ob'ekt va uning xususiyatlariga kirish imkonini beradi. O'zgaruvchini yaratish uchun eskizning yuqori qatoriga o'ting va ruxsat so'zini yozing. Bu so'z o'zgaruvchini javascriptda e'lon qilish uchun ishlatiladi. Keyin o'zgaruvchiga nom bering. Biz o'zgarmaydiganni xohlagan narsamiz deb atashimiz mumkin, lekin unga bizning kodimizda nima qilishi bilan bog'liq nom berish foydalidir. Bunday holda, uni eshik qo'ng'irog'i deb atash mantiqan.

eshik qo'ng'irog'iga ruxsat bering;

P5.js veb -asosli bo'lgani uchun, eskiz ishlay boshlashdan oldin biz audio faylni eskizga yuklanganligiga ishonch hosil qilishimiz kerak, aks holda biz ob'ektning xususiyatlariga kira olmasligimiz mumkin. Buning uchun biz eskiz boshlanishidan oldin audio faylni yuklash funksiyasini qo'shishimiz kerak. Bu funksiya preload () deb nomlanadi. Biz buni setup () va draw () funktsiyalari bilan bir xil tarzda yozamiz.

Jingalak qavslar ichida biz loadSound () funktsiyasidan foydalanib o'z o'zgaruvchimizni ovozli ob'ektga tayinlaymiz. Qavslar ichiga tirnoq ichiga audiofaylning aniq nomini yozing:

funktsiyani oldindan yuklash () {

eshik qo'ng'irog'i = loadSound ('eshik qo'ng'irog'i.mp3');

}

4 -qadam: KeyPressed () funktsiyasidan foydalanib, audio faylni ijro eting

Endi audio fayl eskizga yuklangan, uni play () usuli yordamida ijro etish mumkin. Usullar, asosan, ob'ektga xos bo'lgan funktsiyalardir.

Agar siz ilgari p5.js -da tugmachalarni bosgan bo'lsangiz, chizish funktsiyasining ichida keyIsPressed o'zgaruvchisiga ega bo'lgan shartli iborani ishlatgan bo'lishingiz mumkin. Biroq, audio fayllar bilan ishlaganda, biz uni draw funksiyasi ichida ishga tushirishni xohlamaymiz. Draw funktsiyasi pastadir, shuning uchun u doimo yangilanadi. Bu shuni anglatadiki, tinglash yoqimli bo'lmagan tugma bosilganda, audio fayl qayta -qayta eshitiladi.

Bunga yo'l qo'ymaslik uchun siz keyPressed () funktsiyasidan foydalanasiz. Bu ham setup () va draw () funktsiyalari bilan bir xilda yozilgan. Buni kodning pastki qismiga draw () funksiyasi ostiga yozing.

Jingalak qavs ichida siz tugma bosilganda audio faylni bir marta ishga tushiradigan play () usulini qo'yasiz. Ob'ekt uchun usuldan foydalanish uchun ob'ektni o'z ichiga olgan o'zgaruvchining nomini yozing.play ();

bosilgan funktsiya tugmasi () {

eshik qo'ng'irog'i.play ();

}

Endi siz eskizni ishga tushirganingizda, tugmani bosishingiz mumkin va eshik qo'ng'irog'i ovozi eshitiladi.

MUHIM DIQQAT: Bizning kodimizga tugma bosishni qo'shganda, veb -muharriri biz matn tahrirlovchisiga kod yozish uchun tugmani bosayotganimizni yoki biz tugmachani bosish uchun kodlangan narsani bajarish uchun tugmani bosayotganimizni bilishi kerak. O'ynatish tugmachasini bosganingizda, sichqonchani tuval ustiga olib borib, tuval ustiga bosing. Bu muharrirning diqqatini eskizga olib keladi va tugmani bosish biz xohlagan tugmani bosish kodini ishga tushiradi

5 -qadam: Qog'oz tugmachasini yarating

Makey Makey yordamida tovushni ishga tushirish uchun biz oddiy qalam va qog'ozdan foydalanib tugma yasaymiz.

Ikkita yarim doira chizamiz, ular orasidagi bo'shliq juda kichik, ular tegmaydilar, lekin bir -biriga barmog'imiz bilan bir vaqtning o'zida tegib turamiz. Har bir yarim doira qog'ozning har bir uchiga cho'zilgan qalin chiziq bo'lishi kerak. Bu erda siz alligator kliplarini Makey Makey -dan biriktirasiz.

Qalamdan olingan grafit Makey Makey oqimini ushlab turishi uchun har ikki tomonni juda qorong'i to'ldirganingizga ishonch hosil qiling.

Ikki yarim aylananing dizayni shunday bo'ladiki, ular orasidagi bo'shliq shunchalik kichikki, ikki tomonga bir vaqtning o'zida tegmaslik mumkin emas. Bu sizga simni ushlab turmasdan Makey Makey -dagi kalit va Yer o'rtasidagi sxemani yakunlashga imkon beradi.

6 -qadam: Makey Makey -ni o'rnating

Makey Makey taxtasi, USB kabeli va ikkita alligator klipini oling. Alligatorning bitta qisqichini Yerga va bittasini Kosmosga ulang (chunki biz kodimizda kalitni ko'rsatmaganmiz, biz bosgan har qanday tugma ovozni ishga soladi).

Bo'sh joy tugmachasiga biriktirilgan alligator qisqichini oling va qog'oz tugmachasining bir tomoniga qisib qo'ying. Erga biriktirilgan alligator qisqichini oling va qog'oz tugmachasining boshqa tomoniga qisib qo'ying.

USB kabelini noutbukga ulang.

7 -qadam: Ovoz faylini ishga tushirish uchun tugmani bosing

Bu vaqtda siz eshik qo'ng'irog'ini bosishga tayyormiz. Eskizni boshlang (tuvalda sichqonchani bosishni unutmang, shunda tugma bosilganda keyPressed () funktsiyasini bajaradi) va bir vaqtning o'zida qog'ozdagi ikkita yarim doira ustiga tegib turing. Eshik qo'ng'irog'ining audiofaylini eshitishingiz kerak.

8 -qadam: Kengaytma: Sketchga vizual komponentni qo'shing

Bu vaqtda bizning eskizimizda faqat audio faylni ijro etish kodi bor, shuning uchun siz ekranda hech qanday o'zgarish ko'rmaysiz. Agar siz biron bir interaktiv ovozli loyihani yaratmoqchi bo'lsangiz, bu sizning xohlagan narsangiz bo'lishi mumkin.

Biroq, p5.js vizual kodlash imkoniyatlari bilan grafik qo'shish imkoniyatlari cheksizdir. Siz hatto audiofayllarga turli yo'llar bilan javob beradigan vizual tasvirlarga ega bo'lishingiz mumkin, masalan, faqat ovozli fayl ijro etilayotganda paydo bo'lishi, tovush va/yoki chastotadagi o'zgarishlarga javob berish yoki hatto ovozning vizual tasvirini yaratish.

9 -qadam: Kengaytma: Tugma bosilganda doira rangini o'zgartiring

Ushbu loyihani soddalashtirish uchun biz faqat tugma bosilganda rangini o'zgartiradigan aylana yasaymiz.

Draw () funktsiyasida ellips () funktsiyasidan foydalanib aylana hosil qiling. Buning ustiga, doira rangini o'rnatish uchun fill () funktsiyasini qo'shing. Ushbu eskiz uchun asl rang oq rangda bo'ladi, bu kulrang rang 255. Siz rangni RGB rang qiymatlari yordamida xohlaganingizga o'rnatishingiz mumkin.

Fill () funktsiyasi va ellipse () funktsiyasi o'rtasida, qavs ichidagi keyIsPressed o'zgaruvchisidan foydalanib, shartli iborani yarating. Shartli ifodaning jingalak qavslari orasiga, tugmani bosganingizda aylana o'zgarishini xohlagan rangga boshqa fill () funktsiyasini qo'ying. Ushbu loyiha uchun rang sariq rangga o'zgaradi, RGB qiymati 255, 255, 0.

agar (keyIsPressed) {

to'ldirish (255, 255, 0);

}

Eskizni ishga tushirish uchun ijro etish tugmasini bosing. Oq doira endi eskiz yuklanganda paydo bo'lishi kerak (Tuvalda sichqonchani bosishni unutmang). Keyin qog'oz tugmachasini bosing, shunda siz eshik qo'ng'irog'ini eshitasiz va aylana rangini o'zgartirganini ko'rasiz.

p5.js eskizi: