ترميز أشكال Playdoh البسيطة W / P5.js و Makey Makey: 7 خطوات

2025 مؤلف: John Day | [email protected]. آخر تعديل: 2025-01-23 12:53

مشاريع Makey Makey »

هذا مشروع حوسبة فيزيائية يسمح لك بإنشاء شكل باستخدام Playdoh ، ورمز هذا الشكل باستخدام p5.js وتشغيل هذا الشكل للظهور على شاشة الكمبيوتر عن طريق لمس شكل Playdoh باستخدام Makey Makey.

p5.js هي بيئة تشفير إبداعية مفتوحة المصدر وقائمة على الويب في جافا سكريبت. تعلم المزيد هنا:

لا تحتاج إلى أي خبرة في الترميز للقيام بهذا المشروع. يمكن استخدام هذا كمقدمة للترميز المستند إلى النص (على عكس اللغات القائمة على الكتلة مثل Scratch). ما عليك سوى كتابة 4 أسطر من التعليمات البرمجية لإكمال هذا المشروع. هناك عدة طرق يمكنك من خلالها تغيير هذه الفكرة الأساسية والتوسع فيها.

اللوازم

مجموعة مكياج ميكي (مع 2 مشبك تمساح)

بلايدوه (أي لون)

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

الخطوة 1: اصنع شكل بلايدوه

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

الخطوة 2: ابدأ في P5.js

إذا لم تكن قد استخدمت p5.js من قبل ، فإنني أوصي بمراجعة صفحة البدء على موقع الويب:

أوصي بشدة أيضًا بمراجعة قناة The Coding Train على youtube للحصول على برامج تعليمية ممتازة حول استخدام p5.js. إليك رابط لقائمة تشغيل تتناول جميع الأساسيات:

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

محرر الويب:

يحتوي محرر الويب p5.js على منطقة لكتابة الرمز على اليسار واللوحة القماشية التي ستعرض نتائج الكود على اليمين.

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

تعمل وظيفة draw () كحلقة مما يعني أنها يتم تحديثها باستمرار ، تقريبًا. 60 مرة في الثانية. يمكن أن يسمح لنا هذا بإنشاء رسوم متحركة في رسوماتنا. داخل وظيفة draw () هي وظيفة الخلفية التي تضيف لونًا إلى اللوحة القماشية الخاصة بنا. الافتراضي هو 220 وهي قيمة التدرج الرمادي. 0 = أسود ، 255 = أبيض والرقم بينهما سيكون بدرجات متفاوتة من الرمادي. يمكن أن تأخذ وظيفة الخلفية أيضًا قيم RGB التي تسمح لنا بإضافة اللون. المزيد عن هذا في الخطوة التالية.

الخطوة 3: قم بترميز الشكل الخاص بك في P5.js

لترميز الشكل الخاص بك ، ستحتاج فقط إلى إضافة سطور من التعليمات البرمجية داخل وظيفة draw ().

كل شكل له وظيفته الخاصة لجعله يظهر على اللوحة القماشية. هذه هي الصفحة المرجعية لجميع الأشكال في p5.js:

لعمل دائرة ، سنستخدم دالة القطع الناقص. تأخذ هذه الوظيفة 3 وسيطات (الأرقام التي تدخل الأقواس). الرقم الأول هو موضع X لمركز الدائرة على اللوحة القماشية والرقم الثاني هو موضع Y على اللوحة القماشية. تذكر أن الزاوية العلوية اليسرى هي 0 و 0 وأن مساحة اللوحة 400 × 400 بكسل. لذا ، إذا أردت أن تظهر الدائرة في منتصف اللوحة ، فسأضعها عند 200 على المحور X و 200 على المحور Y. يمكنك تجربة هذه الأرقام للتعرف على كيفية وضع الأشياء على القماش.

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

لتعيين لون الشكل ، نستخدم وظيفة التعبئة. يستخدم هذا 3 وسيطات وهي قيم RGB (R = أحمر ، G = أخضر ، B = أزرق). يمكن أن تكون كل قيمة رقمًا بين 0 و 255. على سبيل المثال ، لجعل اللون الأحمر ، سنضع 255 ، 0 ، 0 والذي سيكون كله أحمر بدون أخضر أو أزرق. مجموعات مختلفة من هذه الأرقام ستخلق ألوانًا مختلفة.

هناك العديد من المواقع التي توفر قيم RGB للعديد من الألوان المختلفة ، مثل هذا:

بمجرد العثور على قيمة RGB لتتناسب مع لون PlayDoh الخاص بك ، اكتب وظيفة التعبئة أعلى وظيفة الشكل.

يمكنك بعد ذلك النقر فوق زر التشغيل في محرر الويب وسترى شكلك يظهر على الشاشة.

الخطوة 4: اجعل شكلك يظهر بضغطة مفتاح

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

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

أخيرًا نضيف مجموعة من الأقواس المتعرجة {}. سيكون داخل الأقواس المتعرجة الكود الذي نريد تنفيذه إذا تم استيفاء شرطنا. لذلك سنقوم فقط بوضع الكود الخاص بنا لجعل الشكل بين تلك الأقواس المتعرجة.

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

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

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

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

خذ مقطع التمساح المرفق بمفتاح المسافة واضغط على الطرف الآخر في شكل Playdoh.

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

الخطوة 6: المس شكل Playdoh

امسك الطرف المعدني لمشبك التمساح المتصل بالأرض في Makey Makey والمس شكل Playdoh. عندما تلمس شكل Playdoh ، يجب أن يظهر الشكل المشفر على قماش الرسم الخاص بك.

هنا رابط إلى مخطط p5.js لهذا المشروع:

إذا لم يظهر الشكل:

1. تأكد من النقر بالماوس على اللوحة القماشية للرسم p5.js قبل لمس Playdoh.

2. تأكد من أنك تمسك المشبك المعدني لسلك الأرض.

الخطوة 7: أشكال مختلفة

المثلث الأصفر:

المربع الأزرق: