الدليل النهائي للغة المعالجة الجزء الأول: الأساسيات

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

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

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

ما يجب أن تعرفه بالفعل

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

كيف تتبع

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

لذلك دعونا نبدأ!

ما هي لغة المعالجة؟

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

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

 public void setup() { // setup codes goes here } public void draw() { // draw codes goes here }

سيتم تحويل كتل التعليمات البرمجية هذه إلى شيء مثل هذا:

 public class ExampleFrame extends Frame { public ExampleFrame() { super("Embedded PApplet"); setLayout(new BorderLayout()); PApplet embed = new Embedded(); add(embed, BorderLayout.CENTER); embed.init(); } } public class Embedded extends PApplet { public void setup() { // setup codes goes here } public void draw() { // draw codes goes here } }

يمكنك أن ترى أن كتلة كود المعالجة كانت مغلفة بفئة تمتد من Java's PApplet. لذلك ، سيتم التعامل مع جميع الفئات التي تحددها في كود المعالجة الخاص بك ، إن وجدت ، على أنها فئات داخلية.

تمنحنا حقيقة أن المعالجة تعتمد على Java الكثير من المزايا ، خاصة إذا كنت مطور Java. لا يعتبر بناء الجملة مألوفًا فحسب ، ولكنه يمنحك أيضًا القدرة على القيام بأشياء مثل تضمين كود Java والمكتبات وملفات JAR في الرسومات الخاصة بك ، واستخدام تطبيقات المعالجة مباشرة في تطبيقات Java الخاصة بك ، وتحديد الفئات واستخدام أنواع البيانات القياسية مثل int ، تعويم ، شار وهلم جرا. يمكنك حتى كتابة كود Pocessing الخاص بك مباشرة من Eclipse ، إذا كنت ترغب في قضاء بعض الوقت في إعداده. شيء واحد لا يمكنك فعله هو استخدام مكونات AWT أو Swing في رسومات المعالجة الخاصة بك ، لأنها تتعارض مع طبيعة التكرار للمعالجة. لكن لا تقلق ، لن نقوم بأي من تلك الأشياء الفاخرة في هذه المقالة.

أساسيات المعالجة

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

IDE المعالجة

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

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

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

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

لا يوجد الكثير لنتحدث عنه حول محرر الكود ، إنه ببساطة المكان الذي تكتب فيه الكود. هناك أرقام سطور (!) لم يكن لدى الإصدارات القديمة من المعالجة ذلك ولا يمكنك تخيل مدى سعادتي عندما رأيتها لأول مرة.

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

كتلة الإعداد

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

 public void setup() { // Size of our sketch will be 800x600, // and use the P2D rendering engine. size(800, 600, P2D); // We could have used this function instead of size() // fullScreen(P2D); // The background color of our sketch will be black // by default, unless specified otherwise background(0); // We could have used this to set a background image. // Note that size of our sketch should be the same as the image. // background(loadImage("test.jpg")); // Shapes and objects will be filled with red by default, // unless specified otherwise. fill(255,0,0); // Shaped and objects will have a white border by default, // unless specified otherwise. stroke(255); }

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

size () - كما يوحي الاسم ، تُستخدم هذه الوظيفة لتكوين حجم الرسم التخطيطي الخاص بنا. يجب أن يكون في السطر الأول من كتلة كود الإعداد. يمكن استخدامه في الأشكال التالية:

• الحجم (العرض ، الارتفاع) ؛
• الحجم (العرض ، الارتفاع ، العارض) ؛

يمكن إعطاء قيم العرض والارتفاع بالبكسل. تقبل وظيفة الحجم معلمة ثالثة ، العارض ، والتي تُستخدم لتعيين محرك العرض الذي سيستخدمه مخططنا. بشكل افتراضي ، يتم تعيين العارض على P2D. برامج العرض المتاحة هي P2D (معالجة ثنائية الأبعاد) ، P3D (معالجة ثلاثية الأبعاد ، يجب استخدامها إذا كانت الرسومات الخاصة بك ستتضمن رسومات ثلاثية الأبعاد) و PDF (يتم رسم الرسومات ثنائية الأبعاد مباشرة في ملف Acrobat PDF. يمكن العثور على المزيد من المعلومات هنا). تستفيد أجهزة عرض P2D و P3D من أجهزة رسوميات متوافقة مع OpenGL.

ملء الشاشة () - اعتبارًا من المعالجة 3.0 ، يمكن الآن استخدام وظيفة ملء الشاشة بدلاً من وظيفة الحجم (). تمامًا مثل وظيفة size () ، يجب أن تكون في السطر الأول من كتلة الإعداد أيضًا. الاستخدام على النحو التالي:

• تكبير الشاشة()؛
• ملء الشاشة (عرض) ؛
• ملء الشاشة (العارض) ؛
• ملء الشاشة (العرض ، العارض) ؛

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

حظر الإعدادات

هذه ميزة أخرى تم تقديمها مع الإصدار الجديد من المعالجة. إنها كتلة تعليمات برمجية ، تمامًا مثل الإعداد والرسم. يكون مفيدًا عندما تريد تحديد أساليب size () أو fullScreen () باستخدام معلمات متغيرة. من الضروري أيضًا تحديد الحجم () وخصائص التصميم الأخرى مثل السلس () في كتلة التعليمات البرمجية هذه إذا كنت تستخدم أي بيئة أخرى غير IDE الخاص بالمعالجة ، مثل Eclipse. لكنك لن تحتاجه في معظم الحالات ، بالتأكيد ليس في هذه المقالة.

ارسم بلوك

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

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

لذا ، ألق نظرة على كتلة التعليمات البرمجية التالية. أولاً ، حاول تخمين ما ستتم طباعته في وحدة التحكم. بعد ذلك ، انطلق وجربه:

 void setup(){ } void draw(){ int x = 0; x += 1; print(x+" "); }

إذا خمنت "1 2 3 4 ..." ، فقد فهمتك! هذا هو أحد الالتباس في المعالجة. تذكر أن هذه الكتلة يتم تنفيذها بشكل متكرر؟ عندما تحدد متغيرًا هنا ، يتم تعريفه في كل حلقة مرارًا وتكرارًا. في كل تكرار ، يتم تعيين x على 0 ، ويتم زيادتها بمقدار 1 وتتم طباعتها على وحدة التحكم. لذلك نحصل على النتيجة "1 1 1 1 ...". كان هذا المثال واضحًا إلى حد ما ، ولكن قد يكون محيرًا عندما تصبح الأمور معقدة بعض الشيء.

لا نريد استبدال x ، فكيف يمكننا تحقيق ذلك والحصول على النتيجة "1 2 3 4 ..."؟ باستخدام المتغيرات العامة . هذا ليس شيئًا رائعًا ، فنحن نحدد فقط المتغير خارج كتلة السحب حتى لا يتم إعادة تعريفه في كل تكرار. أيضًا ، سيكون نطاق المتغير قابلاً للوصول خلال الرسم التخطيطي. انظر الكود أدناه:

 int x = 0; void setup(){ } void draw(){ x += 1; print(x+" "); }

قد تسأل نفسك ، كيف يمكن للمتغير المحدد خارج الكتل أن يعمل؟ ولماذا لم نستخدم كتلة الإعداد () حيث يتم تنفيذها مرة واحدة في البداية؟ الإجابة مرتبطة بالبرمجة الشيئية والنطاقات ، إذا لم تكن مألوفًا ، يمكنك تخطي هذه الفقرة. ارجع إلى الجزء الذي شرحت فيه كيفية تحويل كود المعالجة إلى Java. هل تتذكر كيف يتم تغليفهم بفصل Java؟ يتم أيضًا تغليف المتغيرات التي نكتبها خارج كتلة الإعداد () والرسم () ، وبالتالي يتم التعامل معها كحقول للفئة الخارجية التي تغلف الكود الخاص بنا. استخدام x + = 1 هو نفسه استخدام this.x + = 1. تعمل أيضًا بنفس الطريقة في حالتنا ، لا يوجد متغير يسمى x معرّف في نطاق الرسم () ويتم البحث عن نطاق خارجي ، وهو نطاق هذا . ولماذا لم نحدد المتغير x في قسم الإعداد ()؟ إذا فعلنا ذلك ، فسيكون النطاق الذي تم تعريف x فيه هو نطاق وظيفة الإعداد ولن يمكن الوصول إليها من كتلة draw ().

رسم الأشكال والنصوص

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

قبل أن نبدأ ، يجب أن تفهم نظام الإحداثيات . في المعالجة ، يمكنك تحديد إحداثيات كل كائن ترسمه على الشاشة. نظام الإحداثيات بالبكسل. نقطة الأصل (أي نقطة البداية) هي أعلى الزاوية اليسرى ، يجب أن تعطي إحداثياتك بالنسبة لتلك النقطة. شيء آخر يجب أن تعرفه هو أن لكل شكل نقطة مرجعية مختلفة. على سبيل المثال ، يوجد أعلى الزاوية اليسرى لـ rect () كنقطة مرجعية. بالنسبة للقطع الناقص () ، فهو المركز. يمكن تغيير هذه النقاط المرجعية باستخدام طرق مثل rectMode () و ellipseMode () ، والتي سأشرحها في قسم الخصائص والإعدادات. يتم توفير مثال على الشكل لمساعدتك على الفهم بشكل أفضل.

هذه المقالة هي نظرة عامة أساسية على المعالجة ، لذلك لن نلمس أي أشكال معقدة مثل الرؤوس أو الأشكال ثلاثية الأبعاد. ستكون الأشكال الأساسية ثنائية الأبعاد أكثر من كافية بالنسبة لنا لإنشاء لعبتنا الخاصة. في الشكل ، يمكنك مشاهدة أمثلة على كيفية رسم الأشكال. كل شكل له بناء الجملة الخاص به ليتم إنشاؤه ، ولكن الفكرة الأساسية هي إعطاء إحداثياته ​​أو أحجامه أو كليهما. فيما يلي بعض الأشكال التي يجب أن تكون على دراية بها (بالنسبة لجميع القيم الواردة أدناه ، تعني "x" و "y" إحداثيات x و y بالبكسل ، وتعني "w" و "h" قيم العرض والارتفاع أيضًا بالبكسل):

نقطة () - نقطة بسيطة ، تحتاج فقط إلى إحداثي واحد. استعمال:

• النقطة (س ، ص)
• النقطة (س ، ص ، ع) - في حال كنت تستخدم 3 أبعاد.

خط () - لإنشاء خط. يمكنك إنشاء خط بنقطتي بداية ونهاية فقط. استعمال:

• خط (x1، y1، x2، y2)
• الخط (x1 ، y1 ، z1 ، x2 ، y2 ، z2) - في حال كنت تستخدم 3 أبعاد.

مثلث () - لإنشاء مثلث. الاستعمال: مثلث (x1 ، y1 ، x2 ، y2 ، x3 ، y3)

رباعي () - لإنشاء شكل رباعي. الاستخدام: رباعي (x1 ، y1 ، x2 ، y2 ، x3 ، y3 ، x4 ، y4)

Rect () - لإنشاء مستطيل. النقطة المرجعية أعلى الزاوية اليسرى بشكل افتراضي (راجع الشكل). هنا هو الاستخدام:

• مستقيم (س ، ص ، ث ، ح)
• rect (x، y، w، h، r) - 'r' تعني نصف القطر بالبكسل لجعل الزوايا مستديرة.
• rect (x، y، w، h، tl، tr، br، bl) - نصف القطر لأعلى اليسار ، أعلى اليمين ، أسفل اليمين ، أسفل الزوايا اليسرى على التوالي. هذا أيضا بالبكسل.

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

• القطع الناقص (س ، ص ، ث ، ح)

القوس () - ارسم قوسًا. استعمال:

• القوس (x، y، w، h، start، stop) - يُستخدم "بدء" و "إيقاف" لتحديد الزاوية لبدء رسم القوس وإيقافه. القيم بالتقدير الدائري. يمكن استخدام ثوابت مثل "PI و HALF_PI و QUARTER_PI و TWO_PI".
• القوس (x ، y ، w ، h ، البدء ، التوقف ، الوضع) - متغير "الوضع" هو تحديد أسلوب عرض القوس (السلسلة). الخيارات المتاحة هي "OPEN، CHORD، PIE". OPEN سيترك الأجزاء غير المرسومة بلا حدود. سيقوم CHORD بإكمال الأجزاء غير المرسومة بحد. ستجعل PIE القوس الخاص بك يبدو وكأنه مخطط دائري.

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

نص () - عرض النصوص. استعمال:

• النص (ج ، س ، ص) - يعني "ج" حرفًا ، وسيتم عرض أي حرف أبجدي رقمي.
• نص (ج ، س ، ص ، ع) - في حال كنت تعمل بثلاثة أبعاد.
• النص (str، x، y) - 'str' هي السلسلة التي سيتم عرضها.
• نص (str، x، y، z) - في حال كنت تعمل بثلاثة أبعاد.
• text (num، x، y) - "num" هي القيمة الرقمية التي سيتم عرضها.
• text (num، x، y، z) - في حال كنت تعمل بثلاثة أبعاد.

الخصائص والإعدادات

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

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

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

فيما يلي بعض الخصائص والإعدادات الأساسية شائعة الاستخدام:

إعدادات التصميم

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

• ملء (ص ، ز ، ب) - قيم الأحمر والأخضر والأزرق كعدد صحيح
• ملء (ص ، ز ، ب ، أ) - قيمة ألفا إضافية ، الحد الأقصى هو 255

noFill () - يضبط لون التعبئة على شفاف.

الحد () - يضبط لون الحد على الكائنات. تنطبق خاصية Stroke على الخطوط والحدود حول الكائنات. في الوقت الحالي ، نحتاج فقط إلى معرفة الاستخدام التالي:

• السكتة الدماغية (ص ، ز ، ب) - قيم الأحمر والأخضر والأزرق كعدد صحيح.
• السكتة الدماغية (r ، g ، b ، a) - قيمة ألفا إضافية ، الحد الأقصى هو 255

noStroke () - يزيل الحد.

strokeWeight () - يضبط عرض الحد. استعمال:

• strokeWeight (x) - x عدد صحيح ويمثل عرض الحد بالبكسل.

الخلفية () - يضبط لون الخلفية. في الوقت الحالي ، نحتاج فقط إلى معرفة الاستخدام التالي:

• الخلفية (ص ، ز ، ب) - قيم الأحمر والأخضر والأزرق كعدد صحيح.
• الخلفية (ص ، ج ، ب ، أ) - قيمة ألفا إضافية ، الحد الأقصى هو 255

إعدادات المحاذاة

ellipseMode () - يضبط المكان الذي يجب أن تتخذ فيه كنقطة مرجعية محاذاة الحذف. استعمال:

• ellipseMode (الوضع) - "الوضع" هو المعلمة ، وهنا المعلمات المتاحة:
  • CENTER (افتراضي): اتخذ المركز كنقطة مرجعية.
  • RADIUS: يأخذ هذا أيضًا المركز كنقطة مرجعية ، ولكن في هذا الوضع ، يتم التعامل مع قيم w و h التي تحددها على أنها نصف (أي نصف القطر بدلاً من القطر)
  • الزاوية: تتخذ الزاوية اليسرى العلوية كنقطة مرجعية.
  • CORNERS: يضبط المعلمتين الأوليين (x و y) كموقع للركن الأيسر العلوي ، وآخر معلمتين (w و h) كموقع للركن الأيسر السفلي من القطع الناقص. لذا فإن هذا الوضع ، "العرض" و "الارتفاع" غير ذي صلة. التفكير في الأمر على أنه قطع ناقص (x_tl، y_tl، x_br، y_br) يجعل الأمر أكثر منطقية في هذه الحالة.

RectMode () - يضبط المكان الذي يجب أن تأخذ فيه المستطيلات كنقطة مرجعية لمحاذاة المستطيلات. استعمال:

• RectMode (mode) - "mode" هي المعلمة ، وهنا المعلمات المتاحة:
  • المركز: خذ المركز كنقطة مرجعية.
  • RADIUS: يأخذ هذا أيضًا المركز كنقطة مرجعية ، ولكن في هذا الوضع ، يتم التعامل مع قيم w و h التي تحددها على أنها نصف
  • الزاوية (افتراضي): تأخذ الزاوية اليسرى العلوية كنقطة مرجعية.
  • CORNERS: يضبط المعلمتين الأوليين (x و y) كموقع للركن الأيسر العلوي ، وآخر معلمتين (w و h) كموقع للركن الأيسر السفلي من القطع الناقص. لذا فإن هذا الوضع ، "العرض" و "الارتفاع" غير ذي صلة. التفكير في الأمر على أنه مستقيم (x_tl، y_tl، x_br، y_br) يجعل الأمر أكثر منطقية في هذه الحالة.

الإعدادات المتعلقة بالنص

textSize () - يضبط حجم خط النص. استعمال:

• textSize (الحجم) - قيمة صحيحة للحجم المطلوب.

textLeading () - يضبط ارتفاع السطر للنصوص الخاصة بك. استعمال:

• textLeading (خط الطول) - قيمة البكسل للمسافة بين السطور.

textAlign () - يحدد المكان الذي يجب أن تتخذ فيه كنقطة مرجعية لمحاذاة النصوص. إستعمال.

• textAlign (alignX) - "alignX" يستخدم للمحاذاة الأفقية. متوفر: يسار ، وسط ، يمين
• textAlign (alignX ، alignY) - "alignY" هي للمحاذاة الرأسية. متوفر: TOP ، BOTTOM ، CENTER ، BASELINE.

الرسوم المتحركة

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

 // initialize x and y as 0 int x=0; int y=0; void setup(){ size(800,600); background(255); // set background color to white } void draw(){ fill(255,0,0); // fill color red stroke(0,0,255); // stroke color blue ellipseMode(CENTER); // ref. point to ellipse is its center ellipse(x, y, 20, 20); // draw the ellipse // increment x and y x+=5; y+=5; }

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

كان هدفي من السماح بحدوث ذلك هو جعلك تدرك كيف تعمل الطبيعة المتكرّرة للمعالجة. راجع المثال الموجود في قسم "Draw Block" ، هل تتذكر سبب حصولنا على "1 1 1 ..." بدلاً من "1 2 3 ..."؟ نفس السبب وراء ترك الكرة وراءها علامات. في كل مرة تتكرر كتلة السحب ، يتم زيادة x و y بمقدار 5 وبالتالي يتم إعادة رسم الكرة إلى 5 بكسل لأسفل ويمينًا. ومع ذلك ، يتم سحب الكرة من التكرارات السابقة وتظل في العرض. كيف نجعلهم يذهبون بعيدا؟ اي تخمينات؟

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

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

تفاعلات لوحة المفاتيح والماوس

تفاعلات لوحة المفاتيح والماوس في المعالجة سهلة للغاية ومباشرة. هناك طرق يمكنك الاتصال بها لكل حدث ، وسيتم تنفيذ ما تكتبه بالداخل مرة واحدة عند وقوع الحدث. هناك أيضًا متغيرات عالمية مثل mousePressed و keyPressed ، يمكنك استخدامها في كتلة الرسم الخاصة بك للاستفادة من الحلقة. فيما يلي بعض الطرق مع الشروحات:

 void setup() { size(500, 500); } void draw() { if (mousePressed) { // Codes here will be executed as long as the mouse // button is pressed if (mouseButton == LEFT){ // This lines will be executed as long as // the clicked mouse button is the left mouse // button. } } if (keyPressed) { // Codes here will be executed as long as a key // on the keyboard is pressed if (key == CODED) { // This if statement checks if the pressed key // is recognised by Processing. if (keyCode == ENTER) { // This lines will be executed if the pressed key // is the enter key. } } else{ // This lines will be executed if the pressed key // is not recognised by processing. } } } void mousePressed() { // These codes will be executed once, when mouse // is clicked. Note that mouseButton variable is // also be used here. } void keyPressed() { // These codes will be executed once, when a key // is pressed. Note that key and keyCode variables // are also usable here. }

كما ترى ، من السهل جدًا التحقق مما إذا تم النقر فوق الماوس أو الضغط على المفتاح. ومع ذلك ، هناك المزيد من الخيارات المتاحة لمتغيرات mousePressed و keyCode. الخيارات المتاحة لـ mousePressed هي LEFT و RIGHT و CENTER. هناك العديد من الخيارات المتاحة لـ keyCode ؛ أعلى ، أسفل ، يسار ، يمين ، بديل ، تحكم ، إزاحة ، مسافة للخلف ، علامة تبويب ، إدخال ، عودة ، ESC وحذف.

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

خاتمة

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

التمرين الموصى به 1

يجب عمل 4 كرات بألوان مختلفة ، تبدأ من 4 زوايا من الشاشة تنتقل عبر المركز بسرعات مختلفة . عند النقر مع الاستمرار على زر الفأرة ، يجب أن تتجمد الكرات. وعندما تترك الفأرة ، يمكن أن تعود الكرات إلى موقعها الأولي وتستمر في الحركة. لذا ، أنا أبحث عن شيء كهذا.

بعد تجربة التمرين بنفسك ، يمكنك التحقق من الكود هنا.

التمرين الموصى به 2

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

تم نشر الجزء الثاني من الدليل النهائي للمعالجة ، وهو برنامج تعليمي خطوة بخطوة لبناء لعبة بسيطة.

مزيد من القراءة على مدونة Toptal Engineering:

• كيفية الاقتراب من كتابة المترجم الفوري من الصفر