كيفية بناء التطبيق الرسم مع p5js

موضوع الأسبوع الخامس من تحدي الترميز الأسبوعي هو:

إنشاء تطبيق رسم

هذا هو التطبيق الأول الذي نقوم ببنائه في برنامج #weeklyCodingChallenge. حتى الآن قمنا ببناء مشاريع أصغر ، لذلك هذا مثير للغاية إذا سألتني!

في هذه المقالة ، سنستخدم p5js ، مكتبة الرسم ، لإنشاء تطبيق رسم:

تحقق من CodePen هنا:

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

HTML

كما يمكنك أن تلاحظ في المثال أعلاه ، على الجانب الأيسر من الشاشة ، لدينا شريط جانبي. سنضع داخله "أدواتنا" - منتقي الألوان ، محدد الوزن والزر الصافي (أيقونة سلة المهملات):

المغلق

باستخدام CSS ، سنحرك الشريط الجانبي وكل ما بداخله في الجانب الأيسر. سنقوم بتصميمه قليلاً لجعله يبدو أجمل (لا شيء يتوهم ، CSS الأساسي)

الآن للجزء المهم…

JS / P5JS

كما قد تلاحظ ، لم نقم بإضافة عنصر قماش في HTML الخاص بنا لأن p5js سينشئه لنا.

هناك وظيفتان مهمتان سنستخدمهما من مكتبة p5js:

  • الإعداد - يسمى مرة واحدة عند بدء تشغيل البرنامج. يتم استخدامه لتحديد خصائص البيئة الأولية مثل حجم الشاشة ولون الخلفية.
  • رسم — يتم استدعاؤه مباشرةً بعد الإعداد (). تنفذ الدالة draw () بشكل مستمر أسطر التعليمات البرمجية الموجودة داخل الكتلة الخاصة بها.

قبل المضي قدماً ، دعنا نتوقف للحظة ونرى ما نريد تحقيقه.

لذلك ، بشكل أساسي ، نريد إضافة حدث مصغر مكتوبًا إلى لوحة الرسم التي ستبدأ "رسم" شكل بداخلها طالما mouseIsPressed.

سننشئ مجموعة من النقاط التي سنستخدمها لإنشاء مسار (أو شكل) باستخدام أساليب startShape و endShape لرسم هذا الشكل داخل اللوحة القماشية. سيتم إنشاء الشكل عن طريق توصيل سلسلة من القمم (انظر الرأس للحصول على مزيد من المعلومات).

نظرًا لأننا نريد إعادة رسم هذا الشكل في كل مرة ، سنضع هذا الرمز داخل طريقة السحب:

كما ترون ، فإن p5js به علامة mouseIsPressed التي يمكننا استخدامها للكشف عن الضغط على أزرار الماوس.

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

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

أضفت أيضًا بعض التعليقات في الكود أعلاه ، تأكد من التحقق منها.

تسمى وظيفة mousePressed مرة واحدة بعد كل مرة يتم فيها الضغط على زر الماوس - أشياء p5js!

عظيم! الآن يمكننا رسم الأشكال الفردية في قماش لدينا!

آخر ما يجب فعله هو ربط هذه الأزرار التي أنشأناها في HTML واستخدام القيم الموجودة بداخلها لتصميم الشكل:

ومع هذا ، انتهينا من تطبيقنا الصغير! ياي!

رمز JS بأكمله

تأكد أيضًا من استيراد ملف p5js في html أيضًا قبل استيراد ملف js هذا.

خاتمة

آمل أن تكون قد أحببت تطبيق الرسم هذا الذي أنشأناه. هناك مجموعة من الوظائف التي يمكن إضافتها إلى هذا التطبيق وأنا أتحداك أن تدع عقلك المبدع يأتي بأفكار جديدة!

ماذا لو كنت تستطيع حفظ الرسم كصورة (.png أو .jpg)؟ (يمكنك القيام بذلك مع مكتبة p5js).

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

أحب أن أرى ما ستقوم ببنائه! تويت لي @ florinpop1705 مع خلقك!

قد ترغب أيضًا في مواجهة أحد التحديات الأخرى التي يواجهها برنامج تحدي الترميز الأسبوعي. تحقق منها هنا.

انظر يا في المرة القادمة! ترميز سعيد!

نشرت أصلا على www.florin-pop.com.