تعلم البرمجة من الصفر | الدرس 4: تتبّع يدك بالذكاء الاصطناعي ✋ (ml5.js)

من تحريك الدائرة بالماوس إلى تتبّع يدك بالكاميرا! 🖐️🤖 في الدرس الرابع من سلسلة تعلّم البرمجة باستخدام p5.js، نبدأ أول تطبيق للذكاء الاصطناعي مع مكتبة ml5.js! نستخدم نموذج HandPose لتتبّع نقاط اليد، ونرسم دوائر ملوّنة تتحرّك معها مباشرة فوق فيديو الكاميرا. نبدأ بتشغيل الكود ورؤية النتيجة، ثم نشرح كل جزء منه بطريقة سهلة للمبتدئين: كيف نشغّل الكاميرا؟ ما وظيفة المتغيّرات والمصفوفة hands؟ وكيف تعمل الدالتان setup() وdraw()؟ نتعرّف أيضًا على دور async وawait في تحميل النموذج، وكيف نستقبل نتائج اكتشاف اليد باستخدام gotHands()، ونستخرج إحداثيات X وY لتحديد مكان كل نقطة على الشاشة. 🎨 تطبيقنا في هذا الدرس: 🟡 رسم دائرة صفراء على طرف السبابة باستخدام index_finger_tip. 🔴 رسم دائرة حمراء على طرف الإبهام باستخدام thumb_tip. 🔵 إضافة نقطة ثالثة على المعصم، باستخراج wristX وwristY ورسم دائرة زرقاء تتبّع حركته. الهدف ليس نسخ الكود فقط، بل فهمه خطوة بخطوة حتى تستطيع تعديله بنفسك وبناء أفكارك الخاصة باستخدام JavaScript والذكاء الاصطناعي. 💻 افتح مشروعك وطبّق معي، ولا تنسَ السماح للمتصفّح باستخدام الكاميرا! 📚 شاهد دروس السلسلة بالترتيب:    • Плейлист   📖 توثيق مكتبة ml5.js: https://docs.ml5js.org 💬 جرّب تغيير ألوان الدوائر وأحجامها، واكتب في التعليقات: ما الفكرة التي تحبّ أن نبرمجها باستخدام حركة اليد؟ اشترك في القناة لتتابع الدروس القادمة وتتعلم البرمجة بالتطبيق العملي! 🚀 ⏮️ الدرس السابق (الدرس 3): ارسم دائرة تتبع الماوس:    • تعلم البرمجة من الصفر | الدرس 3: ارسم دائر...   🤖 كل دروس الذكاء الاصطناعي في المتصفح (ml5.js):    • الذكاء الاصطناعي في المتصفح | ml5.js بالعربي   🔔 اشترك بضغطة واحدة:    / @ghaithcodes   #تعلم_البرمجة #الذكاء_الاصطناعي #برمجة_للمبتدئين #javascript #ml5js #p5js #handtracking