Paper Doorbell W / P5.js & Makey Makey: 9 خطوات

2024 مؤلف: John Day | [email protected]. آخر تعديل: 2024-01-30 07:38

مشاريع Makey Makey »

ينشئ هذا المشروع رسمًا في p5.js يمكنه تشغيل ملف صوتي باستخدام الضغط على مفتاح ثم يقوم بعمل زر بسيط بقلم رصاص وورقة و Makey Makey لتشغيل الصوت.

بينما يستخدم هذا المشروع صوت جرس الباب ، تتضمن الخطوات كيفية تحميل ملف صوتي في مخطط p5.js الخاص بك ، بحيث يمكن تكييفه بسهولة لاستخدام أي نوع من الأصوات.

تعرف على المزيد حول p5.js:

إذا كنت جديدًا في استخدام p5.js مع Makey Makey ، أقترح مراجعة هذا المشروع أولاً: https://www.instructables.com/id/Coding-Simple-Pla …

اللوازم

قلم

مربع صغير من الورق

مجموعة Makey Makey (مع 2 مقاطع التمساح)

كمبيوتر محمول مع اتصال بالإنترنت

الخطوة 1: تنزيل ملف الصوت

يتطلب هذا المشروع استخدام ملف صوتي نحتاج إلى تحميله في مخطط p5.js الخاص بنا. للقيام بذلك ، نحتاج أولاً إلى تنزيل الملف الصوتي.

إذا كنت غير قادر على تنزيل الملفات على جهاز الكمبيوتر الخاص بك أو كنت ترغب ببساطة في تخطي تنزيل الملف وتحميله إلى الرسم التخطيطي الخاص بك ، فيمكنك الانتقال إلى هذا الرابط للحصول على نموذج p5.js بالصوت الذي تم تحميله بالفعل والانتقال إلى الخطوة 3. ومع ذلك ، إذا كنت ترغب في العمل مع الملفات الصوتية في p5.js في المستقبل ، فستوضح لك هذه الخطوة والخطوة التالية كيفية القيام بذلك.

هناك العديد من الأماكن لتنزيل المؤثرات الصوتية والملفات الصوتية على الويب ، بعضها يتطلب حسابًا ، مثل freesound.org والبعض الآخر لا يتطلب حسابًا ، مثل soundbible.com. ضع في اعتبارك دائمًا أي متطلبات ترخيص و / أو إسناد عند استخدام صوت لمشروعك. المزيد عن ذلك هنا:

جاء صوت جرس الباب لهذا المشروع من https://freesound.org/s/163730/ المقدمة من Tim Kahn.

إذا كنت ترغب في تنزيل الصوت دون إنشاء حساب ، فقد قمت بتحويل الصوت إلى تنسيق mp3 والذي يمكن تنزيله هنا:

الخطوة 2: تحميل ملف الصوت إلى P5.js

بمجرد تنزيل صوت جرس الباب ، نحتاج إلى تحميله في مخطط p5.js حتى نتمكن من الوصول إليه.

لكي تفعل هذا، اتبع هذه الخطوات:

- انقر فوق رمز ">" الموجود على الجانب الأيسر من محرر الويب ، أسفل زر التشغيل مباشرةً. سيؤدي هذا إلى فتح الشريط الجانبي الذي يعرض ملفات الرسم الخاص بك.

- انقر فوق المثلث الصغير المتجه لأسفل الموجود على يمين "ملفات الرسم". سيؤدي ذلك إلى ظهور قائمة منسدلة بها خيارات "إضافة مجلد" و "إضافة ملف"

- انقر فوق "إضافة ملف". سيظهر هذا نافذة لإضافة ملف. يمكنك سحب ملف جرس الباب إلى المربع أو النقر فوق حيث يقول المربع "اسحب الملفات هنا للتحميل أو انقر لاستخدام متصفح الملفات". سيتيح لك ذلك التنقل عبر ملفات الكمبيوتر لتحديد موقع ملف الصوت.

- بمجرد سحب الملف أو تحديده ، سترى أنه يتم تحميله وسيظهر اسم الملف في الشريط الجانبي.

ستتمكن الآن من الوصول إلى هذا الملف الصوتي واستخدامه في رسمك التخطيطي.

الخطوة 3: تحميل ملف الصوت في رسم P5.js

يتطلب تحميل ملف صوتي في مخطط p5.js منا إنشاء كائن ملف صوتي. الكائن له خصائصه ووظائفه المضمنة فيه والتي يمكننا استخدامها.

لعمل كائن ، نحتاج أولاً إلى عمل متغير للاحتفاظ بالكائن. سيسمح لنا هذا بالوصول إلى الكائن وخصائصه في جميع أنحاء الرسم التخطيطي. لعمل متغير ، انتقل إلى السطر العلوي من الرسم واكتب الكلمة Let. تستخدم هذه الكلمة للإعلان عن متغير في جافا سكريبت. ثم قم بتسمية المتغير. يمكننا تسمية المتغير بأي شيء نريده ، ولكن من المفيد إعطائه اسمًا مرتبطًا بما سيفعله في الكود الخاص بنا. في هذه الحالة ، من المنطقي أن نسميها جرس الباب.

دع جرس الباب

نظرًا لأن p5.js يعتمد على الويب ، فنحن بحاجة إلى التأكد من تحميل الملف الصوتي في المخطط قبل بدء تشغيل المخطط ، وإلا فقد لا نتمكن من الوصول إلى خصائص الكائن. للقيام بذلك ، نحتاج إلى إضافة وظيفة لتحميل ملف الصوت قبل أن يبدأ الرسم التخطيطي. تسمى هذه الوظيفة التحميل المسبق (). نكتب هذا بنفس طريقة وظيفة setup () و draw ().

داخل الأقواس المتعرجة ، سنخصص المتغير الخاص بنا إلى كائن الصوت باستخدام وظيفة loadSound (). داخل الأقواس ، اكتب الاسم الدقيق لملف الصوت داخل علامات التنصيص:

وظيفة التحميل المسبق () {

جرس الباب = loadSound ('doorbell.mp3') ؛

}

الخطوة 4: تشغيل ملف الصوت باستخدام وظيفة KeyPressed ()

الآن بعد أن تم تحميل ملف الصوت في المخطط ، يمكنك تشغيله باستخدام طريقة التشغيل (). الطرق هي في الأساس وظائف خاصة بكائن ما.

إذا كنت قد استخدمت ضغطات المفاتيح في p5.js من قبل ، فمن المحتمل أنك استخدمت عبارة شرطية مع متغير keyIsPressed داخل وظيفة الرسم. ومع ذلك ، عند العمل مع الملفات الصوتية ، لا نريد تشغيلها داخل وظيفة السحب. وظيفة السحب عبارة عن حلقة يتم تحديثها باستمرار. هذا يعني أن الملف الصوتي سيتم تشغيله مرارًا وتكرارًا طالما تم الضغط على أحد المفاتيح وهو ما لن يكون من الجيد الاستماع إليه.

لتجنب ذلك ، ستستخدم وظيفة تسمى keyPressed (). يتم كتابة هذا أيضًا بنفس وظيفة setup () و draw (). اكتب هذا في الجزء السفلي من الكود أسفل وظيفة draw ().

داخل الأقواس المتعرجة هو المكان الذي تضع فيه طريقة التشغيل () التي ستؤدي إلى تشغيل ملف الصوت مرة واحدة عند الضغط على مفتاح. لاستخدام طريقة لكائن ما ، اكتب اسم المتغير الذي يحمل الكائن متبوعًا بـ.play () ؛

مفتاح الوظيفة ، اضغط () {

لعب جرس الباب () ؛

}

الآن عندما تقوم بتشغيل الرسم الخاص بك ، يمكنك الضغط على مفتاح وسيتم تشغيل صوت جرس الباب.

ملاحظة مهمة: عند إضافة ضغطات مفتاح إلى الكود الخاص بنا ، يحتاج محرر الويب إلى معرفة ما إذا كنا نضغط على مفتاح لكتابة رمز في محرر النصوص أم أننا نضغط على المفتاح للقيام بالشيء الذي قمنا بترميزه بالضغط على مفتاح للقيام به. عند النقر فوق زر التشغيل ، حرك الماوس فوق اللوحة وانقر على اللوحة. سيؤدي هذا إلى توجيه تركيز المحرر إلى الرسم التخطيطي وسيؤدي الضغط على مفتاح إلى تشغيل رمز الضغط على المفتاح الذي نريد حدوثه

الخطوة 5: اصنع زر الورق

لتشغيل الصوت باستخدام Makey Makey ، سنستخدم قلم رصاص وورقة عاديين لعمل زر.

ارسم نصف دائرتين مع وجود فجوة صغيرة جدًا بينهما بحيث لا يتلامسان في الواقع ولكنهما قريبان بدرجة كافية حتى نتمكن من لمس كلا النصفين في نفس الوقت بإصبع واحد. يجب أن تحتوي كل نصف دائرة أيضًا على خط سميك يمتد حتى نهاية كل ورقة. هذا هو المكان الذي سترفق فيه مقاطع التمساح من Makey Makey.

تأكد من ملء كلا الجانبين داكنًا جدًا حتى يتمكن الجرافيت من القلم الرصاص من الاحتفاظ بالتيار من Makey Makey.

تصميم نصف دائرتين هو وجود فجوة صغيرة بينهما بحيث يستحيل بشكل أساسي عدم لمس كلا الجانبين في نفس الوقت. يتيح لك ذلك إكمال الدائرة بين المفتاح والأرض في Makey Makey دون الحاجة إلى الإمساك بالسلك الأرضي.

الخطوة 6: إعداد Makey Makey

أخرج لوحة Makey Makey وكابل USB ومقطعي التمساح. قم بإرفاق مقطع تمساح واحد بالأرض والآخر بمفتاح الفضاء (نظرًا لأننا لم نحدد مفتاحًا في الكود الخاص بنا ، فإن أي مفتاح نضغط عليه سيؤدي إلى تشغيل الصوت).

خذ مشبك التمساح المتصل بمفتاح المسافة وقم بتثبيته على جانب واحد من زر الورق. خذ مشبك التمساح المتصل بالأرض واشبكه على الجانب الآخر من زر الورق.

قم بتوصيل كابل USB بالكمبيوتر المحمول.

الخطوة 7: اضغط على الزر لتشغيل ملف الصوت

في هذه المرحلة ، تكون جاهزًا لدق جرس الباب. ابدأ الرسم (تذكر النقر بالماوس على اللوحة القماشية حتى يؤدي الضغط على المفتاح إلى تنفيذ وظيفة keyPressed ()) ثم لمس نصف دائرتين على الورقة في نفس الوقت. يجب أن تسمع صوت تشغيل ملف صوت جرس الباب.

الخطوة 8: التمديد: أضف مكونًا مرئيًا إلى الرسم التخطيطي

في هذه المرحلة ، يتضمن رسمنا فقط رمزًا لتشغيل الملف الصوتي ، لذلك لن ترى أي تغيير على الشاشة. قد يكون هذا هو كل ما تريد القيام به إذا كنت تحاول إنشاء نوع من مشروع الصوت التفاعلي.

ومع ذلك ، مع إمكانات الترميز المرئي لـ p5.js ، فإن إمكانيات إضافة الرسومات لا حصر لها. يمكنك أيضًا الحصول على عناصر مرئية تتفاعل مع ملفاتك الصوتية بعدة طرق مثل الظهور فقط عند تشغيل ملف الصوت ، أو الاستجابة للتغيرات في الحجم و / أو التردد أو حتى تقديم تمثيل مرئي للصوت نفسه.

الخطوة 9: التمديد: قم بتغيير لون الدائرة عند الضغط على الزر

لإبقاء هذا المشروع بسيطًا ، سنقوم فقط بعمل دائرة يتغير لونها عند الضغط على الزر.

في وظيفة الرسم () ، قم بإنشاء دائرة باستخدام وظيفة القطع الناقص (). فوق ذلك ، أضف وظيفة التعبئة () لتعيين لون الدائرة. بالنسبة لهذا الرسم التخطيطي ، سيكون اللون الأصلي أبيض وهو قيمة التدرج الرمادي 255. يمكنك ضبط اللون على أي لون تريده باستخدام قيم ألوان RGB.

بين دالة fill () و ellipse () ، أنشئ جملة شرطية باستخدام متغير keyIsPressed داخل الأقواس. بين الأقواس المتعرجة للبيان الشرطي ، ضع وظيفة تعبئة () أخرى مضبوطة على اللون الذي تريد أن تتغير الدائرة إليه عند الضغط على المفتاح. بالنسبة لهذا المشروع ، سيتغير اللون إلى اللون الأصفر الذي له قيمة RGB 255 ، 255 ، 0.

إذا (keyIsPressed) {

ملء (255 ، 255 ، 0) ؛

}

اضغط على زر التشغيل لتشغيل الرسم. يجب أن تظهر الدائرة البيضاء الآن عند تحميل الرسم (تذكر أن تنقر بالماوس على اللوحة القماشية). ثم اضغط على زر الورق ويجب أن تسمع رنين جرس الباب وترى الدائرة تتغير لونها.

رسم p5.js: