إرشادات البرمجة الشيقة للمصمم - ابدأ تشغيل صورتك (الجزء الأول): 16 خطوة

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

يركض! يركض! يركض!

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

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

نظرًا لأننا نريد عمل رسومات متحركة ، فعلينا أن نعرف كيف يتم إنتاج الرسوم المتحركة.

تبدو الصورة أعلاه جذابة للغاية وتكشف بصريًا عن مبدأ تنفيذ الرسوم المتحركة.

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

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

الخطوة 1: متغير

المتغير هو حاوية البيانات. يمكن استخدامه بشكل متكرر داخل البرنامج.

على سبيل المثال:

[cceN_cpp theme = "الفجر"] الحجم (500 ، 500) ؛ القطع الناقص (100 ، 250 ، 50 ، 50) ؛ القطع الناقص (200 ، 250 ، 50 ، 50) ؛ القطع الناقص (300 ، 250 ، 50 ، 50) ؛ القطع الناقص (400 ، 250 ، 50 ، 50) ؛

[/cceN_cpp]

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

إليك الكود بعد إضافة متغير:

[cceN_cpp theme = "الفجر"] الحجم (500 ، 500) ؛ كثافة العمليات أ = 50 ؛ القطع الناقص (100 ، 250 ، أ ، أ) ؛ القطع الناقص (200 ، 250 ، أ ، أ) ؛ القطع الناقص (300 ، 250 ، أ ، أ) ؛ القطع الناقص (400 ، 250 ، أ ، أ) ؛

[/cceN_cpp]

نحصل على نفس النتيجة تماما!

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

الخطوة الثانية: إنشاء المتغير

قبل استخدام المتغير ، يتعين علينا عمل بيان وتحديد نوع البيانات الخاص به.

إنت أنا

أنا ＝ 50 ؛

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

كثافة العمليات أنا ＝ 50 ؛

إنه مجاني نسبيًا تسمية متغير. لكن في بعض الأحيان علينا أن ننتبه لشيء ما.

الخطوة 3: لائحة تسمية المتغير

• يجب أن يكون مزيجًا من الأبجدية والتسطير. يمكن أن يكون رمزًا أو كلمة.

• حساسية الموضوع. يمكن أن يمثل الاسم والاسم متغيرات مختلفة.

• حاول تسمية الأمر بأسهل ما يمكن للسماح لك بالفهم من مشهد واحد. يجب أن يكون الحرف الأول حرفًا أبجديًا بدلاً من رقم أو حرف خاص.

• لا توجد كلمات رئيسية مثل int ، float

فيما يلي بعض العبارات الخاطئة.

int $ a؛

int 89b ؛

ها هي العبارات الصحيحة:

الباحث ص

كثافة العمليات super_24 ؛

int openTheDoor ؛

الخطوة 4: نوع المتغير

باستثناء التصريح عن بيانات الأعداد الصحيحة ، يمكننا الإعلان عن البيانات العشرية (وتسمى أيضًا بيانات الفاصلة العائمة) باستخدام تعويم الكلمة الرئيسية.

تعويم ب = 0.5

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

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

الخطوة 5: المشغل

فيما يلي مشغلي المعالجة:

+ زائد

- ناقص

* تتضاعف

يقسم

％ معامل الباقي

يجب أن تكون على دراية بكل هؤلاء المشغلين باستثناء٪. يبدو غريبًا تمامًا لأن نتيجته هي الباقي. 9٪ 3 تساوي 0. بينما 9٪ 5 تساوي 4.

يمكن استخدام عوامل التشغيل بين التخصيصات والمتغيرات.

[cceN_cpp theme = "dawn"] int a = 1 ؛ // أعلن عن المتغير الصحيح a ، التخصيص هو 1. int b = 2 ؛ // قم بتعريف المتغير الصحيح b ، التخصيص هو 2. int c ؛ // نعلن متغير عدد صحيح ج. ج = أ + ب ؛ // زائد اثنين إسناد نتيجته إلى c. طباعة (ج) ؛ // متغير الإخراج ج.

[/cceN_cpp]

الخطوة 6: نتيجة العملية:

لن يتم عرض نتيجة الإخراج على النافذة ولكن في وحدة التحكم في الجزء السفلي.

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

يمكن لوظيفة الطباعة في السطر الخامس طباعة المتغيرات في وحدة التحكم ، والتي تُستخدم غالبًا لاختبار حالة إخراج البيانات.

الخطوة 7: لائحة التشغيل

من النقاط المزعجة في المعالجة أنه يتعين علينا توضيح نوع المتغير. علينا أن نولي اهتماما خاصا لعملية رقم الفاصلة العائمة ونوع العدد الصحيح.

طباعة （6/5） ؛ // النتيجة 1

سيكون للعملية بين الأعداد الصحيحة عدد صحيح جديد. 6 على 5 يساوي 1.2. لكن نتيجة مخرجات البرنامج هي 1. وهذا مخالف للحدس. البرنامج لن يتعامل مع الجولة ولكن يحذف الرقم الموجود خلف الفاصلة العشرية.

طباعة (6.0 / 5.0) ؛ // النتيجة 1.2

ستؤدي العملية بين النقاط العائمة إلى رقم جديد للفاصلة العائمة. إذا كانت النتيجة الفعلية 1.2 ، فستكون نتيجة إخراج البرنامج هي نفسها.

طباعة (6 / 5.0) ؛ // النتيجة 1.2

طباعة (6.0 / 5) ؛ // النتيجة 1.2

أخيرًا ، إنه مزيج من عدد صحيح ورقم فاصلة عائمة. ستكون نتيجة الإخراج النهائية 1.2.

• في الواقع ، عليك أن تضع في اعتبارك أن الهدف من تصميم التنظيم هذا هو عدم فقدان دقة البيانات. لذلك إذا كان أحد العناصر هو رقم الفاصلة العائمة ، فستكون النتيجة رقم الفاصلة العائمة أيضًا.

الخطوة 8: إعداد وظيفة ووظيفة الرسم

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

الإعداد باطل(){

}

رسم باطل () {

}

الاستخدام الخاص يجعل تنسيق الاستدعاء مختلفًا عن الوظائف الأخرى. يتعين علينا إضافة "void" قبل اسم الوظيفة ، والتي تعني عدم وجود "قيمة مرتجعة". خلف اسم الوظيفة ، علينا إضافة أقواس وأقواس.

[cceN_cpp theme = "dawn"] إعداد باطل () {print (1)؛ } رسم باطل () {طباعة (2) ؛ } [/cceN_cpp]

دعنا نلقي نظرة على مثال:

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

سيتم تنفيذ الكود الموجود بين قوسين في وظيفة الإعداد لمرة واحدة فقط ، بينما سيتم تشغيل الكود الموجود داخل رسم الوظيفة باستمرار (التنفيذ الافتراضي 60 مرة / ثانية).

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

الخطوة 9: دائرة في الحركة الأفقية

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

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

اكتب الكود التالي فيه (فلنبدأ الآن في القيام بذلك يدويًا):

[cceN_cpp theme = "dawn"] int x؛ int ذ ؛ إعداد باطل () {size (300، 300)؛ س = 0 ؛ ص = الارتفاع / 2 ؛ } رسم باطل () {خلفية (234، 113، 107)؛ noStroke () ، القطع الناقص (س ، ص ، 50 ، 50) ؛ س = س + 1 ؛ }

[/cceN_cpp]

يعرض هذا القسم من الكود دائرة متحركة. يتم استخدام المتغير المعلن سابقًا x ، y لتخزين موضع الإحداثيات. تعمل مهامه في إعداد الوظيفة. رمز المفتاح هو التالي داخل رسم الوظيفة:

س = س + 1

لا تنظر إليها على أنها معادلة رياضية ، وإلا ستكون غريبة جدًا. هنا ، "＝" هي رمز للتخصيص. إنه يمثل وضع الأرقام الصحيحة في المتغير الأيسر. لنفترض أن x هو 50 ، بمجرد تشغيل الكود ، فإن الجانب الأيمن من "" يساوي 50 + 1 ، أي 51. سيتم تعيين النتيجة النهائية في المتغير x. إذن ، تصبح قيمة x 51.

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

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

• لن يؤثر رمز المساحة الفارغة وفاصل الأسطر في البرنامج على البرنامج. لذلك لا بأس إذا كتبنا واحدًا أكثر أو أقل.

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

دائرة ＝ دائرة ＋1

غير مريح للغاية! إذا كان اسم المتغير أطول ، فعلينا كتابة المزيد من الكلمات. لذا فإن أسلافنا الكسالى يفكرون في فكرة مثل هذه.

دائرة ＋＋

أليس الأمر بسيطًا جدًا؟ هذا يعني زيادة 1 تلقائيًا. على غرار ذلك ، هناك - - ، مما يعني انخفاض 1 تلقائيًا.

ولكن إذا كنا نأمل أن تكون كمية الزيادة التلقائية رقمًا آخر مثل 2 ، فعلينا تجربة تعبير آخر.

دائرة + = 2

هذا يساوي

الدائرة = الدائرة + 2

وبالمثل ، هناك - ＝ ، / = ، * =.

الخطوة 10: اتجاه الحركة

يعتمد الاتجاه الذي يتحرك فيه الرسم على كيفية تغيير إحداثياتك. إذا تم تغييرها إلى y ＝ y ＋ 1 ، فستتحرك الدائرة إلى أسفل. إذا زاد كل من x و y 1 ، ستتحرك الدائرة لأسفل إلى أسفل اليمين. إذا كتبناه ti سيكون رمزًا ناقصًا ، فسوف يتحرك في الاتجاه المعاكس.

[cceN_cpp theme = "dawn"] int x، y؛ // يمكن أن يعلن عن متغيرات متعددة في نفس الوقت ، استخدم الفاصلة للفصل. إعداد باطل () {size (300، 300)؛ س = 0 ؛ ص = 0 ؛ } رسم باطل () {خلفية (234، 113، 107)؛ noStroke () ، القطع الناقص (س ، ص ، 50 ، 50) ؛ x ++ ؛ ذ ++ ؛ }

[/cceN_cpp]

معدل الحركة

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

إذا أردنا تغيير معدل حركة الرسوم البيانية ، فهناك طريقتان: الأولى هي زيادة قيمة x في كل مرة حيث سيتم تغييرها.

س ＝ س ＋ ١٠

لقد حسنت السرعة 10 مرات مقارنة بالسرعة الأصلية!

الطريقة الأخرى هي تغيير وتيرة تحديث اللوحة القماشية. معدل الإطار()

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

الخطوة 11: الخلفية المتجاهلة

جميع الأمثلة السابقة تكتب الخلفية في رسم الوظيفة. هل فكرت يومًا في كتابتها في إعداد الوظيفة؟ هل سيكون هناك أي اختلافات؟ الآن ، دعنا نحدث مثال الحركة الأفقية.

[cceN_cpp theme = "dawn"] int x، y؛ إعداد باطل () {size (300، 300)؛ الخلفية (234 ، 113 ، 107) ؛ س = 0 ؛ ص = الارتفاع / 2 ؛ } رسم باطل () {noStroke () ؛ القطع الناقص (س ، ص ، 50 ، 50) ؛ س + = 1 ؛ } [/cceN_cpp]

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

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

• طريقة الرسم غير المتكررة يمكن أن تخلق تأثيرًا خاصًا جدًا إذا تم استخدامها بشكل صحيح. يمكنك نسخ الكود التالي وتجربته.

[cceN_cpp theme = "dawn"] إعداد باطل () {size (400، 400)؛ } رسم باطل () {قطع ناقص (عرض / 2-mouseX ، ارتفاع / 2-mouseX ، mouseY ، mouseY) ؛ القطع الناقص (العرض / 2-mouseX ، الارتفاع / 2 + mouseX ، mouseY ، mouseY) ؛ القطع الناقص (العرض / 2 + mouseX ، الارتفاع / 2-mouseX ، mouseY ، mouseY) ؛ القطع الناقص (العرض / 2 + mouseX ، الارتفاع / 2 + mouseX ، mouseY ، mouseY) ؛ } [/cceN_cpp]

هنا استخدمنا المتغير السحري mouseX و mouseY. في وقت لاحق سوف نتحدث عنها بالتفصيل.

الخطوة 12: دائرة الاهتزاز

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

تنسيق الاستدعاء:

عشوائي (مرتفع)

يمثل مرتفع الحد الأعلى العشوائي ، والحد الأدنى الافتراضي هو 0. على سبيل المثال ، عشوائي (10). سينتج رقمًا من 0 إلى 10 عشوائيًا (يتم تضمين 0 ولكن لم يتم تضمين 10).

عشوائي (منخفض ، مرتفع)

إذا قمنا بتعيين معاملين ، فسيعود إلى القيمة العشوائية بينهما ، على سبيل المثال ، عشوائي (5 ، 10). سينتج عددًا من 5 إلى 10 عشوائيًا (يتم تضمين 5 ولكن لم يتم تضمين 10).

مثال:

[cceN_cpp theme = "الفجر"] تعويم x ؛

س = عشوائي (50 ، 100) ؛

طباعة (خ) ؛ [/cceN_cpp]

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

• ملاحظة: القيم التي تم إنشاؤها بواسطة دالة عشوائية تنتمي إلى نوع النقطة العائمة (نوع الرقم العشري). إذا أردنا تعيين قيمة لمتغير عدد صحيح ، فعلينا تحويلها من خلال الوظيفة int (). التحويل لا يلتزم بالدوران ولكن يحذف الجزء العشري مباشرة. وبالتالي فإن إخراج int (عشوائي (5)) له 5 احتمالات فقط: 0 ، 1 ، 2 ، 3 ، 4.

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

[cceN_cpp theme = "dawn"] int x، y؛ إعداد باطل () {size (300، 300)؛ س = العرض / 2 ؛ ص = الارتفاع / 2 ؛ } رسم باطل () {خلفية (234، 113، 107)؛ noStroke () ، x + = int (عشوائي (-5 ، 5)) ؛ y + = int (عشوائي (-5 ، 5)) ؛ القطع الناقص (س ، ص ، 50 ، 50) ؛ }

[/cceN_cpp]

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

الخطوة 13: دائرة الهجرة

دائرة الهجرة

هل سيخلق حركة سلسة؟ يمكن أن تساعدنا ضوضاء الوظيفة. لديه إيقاع أفضل من العشوائية القياسية. والأرقام العشوائية التي يتم إنشاؤها عشوائيًا بشكل مستمر.

تنسيق الاستدعاء:

الضوضاء （ر）

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

[cceN_cpp theme = "dawn"] تعويم x = ضوضاء (5) ؛ تعويم y = ضوضاء (5) ؛ طباعة (س ، ص) ؛ [/cceN_cpp]

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

[cceN_cpp theme = "dawn"] تعويم x، y؛ إعداد باطل () {size (700، 100)؛ س = 0 ؛ الخلفية (0) ؛ } رسم باطل () {x + = 1 ؛ y = الضوضاء (frameCount / 100.0) * 100 ؛ noStroke () ، القطع الناقص (س ، ص ، 2 ، 2) ؛ }

[/cceN_cpp]

في هذه الحالة ، نرسم مسار التغيير لـ Y حتى نتمكن من فهم ضوضاء الوظيفة بشكل أفضل.

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

• frameCount هو متغير عدد صحيح. مقسومًا على متغير عدد صحيح آخر ، سيعمل البرنامج افتراضيًا على معالجة النتيجة لتكون عددًا صحيحًا.من أجل تحسين دقة النتيجة ، نحتاج إلى تغيير 100 إلى 100.0. مقسومًا على رقم فاصلة عائمة ، سنحصل أيضًا على رقم فاصلة عائمة.

• لتغيير المحور Y من 0 إلى 100 ، علينا مضاعفة نتيجة الضوضاء في 100. وبالتالي يمكننا التحكم في نطاق القيمة العشوائية.

قد يسأل بعضكم الجيد في التفكير "لماذا علينا تقسيم frameCountby 100؟ أليس من المقبول كتابة frameCount مباشرة؟" بالتأكيد تستطيع! ولكن هنا ، من أجل عرض خصائص ضوضاء الوظيفة بشكل أفضل ، نقوم بإبطاء "معدل البث". يوضح المثال أدناه تغيرات قيمة المخرجات في ظل معدل تغيير مختلف.

[cceN_cpp theme = "الفجر"] float x، y1، y2، y3، y4، y5؛ إعداد باطل () {size (700، 500)؛ س = 0 ؛ الخلفية (0) ؛ } رسم باطل () {x + = 1 ؛ y1 = الضوضاء (frameCount) * 100 ؛ y2 = الضوضاء (frameCount / 10.0) * 100 ؛ y3 = الضوضاء (frameCount / 100.0) * 100 ؛ y4 = الضوضاء (frameCount / 1000.0) * 100 ؛ y5 = الضوضاء (frameCount / 10000.0) * 100 ؛ noStroke () ، القطع الناقص (س ، ص 1 ، 2 ، 2) ؛ القطع الناقص (س ، ص 2 + 100 ، 2 ، 2) ؛ القطع الناقص (x، y3 + 200، 2، 2) ؛ القطع الناقص (س ، ص 4 + 300 ، 2 ، 2) ؛ القطع الناقص (x ، y5 + 400 ، 2 ، 2) ؛ السكتة الدماغية (80) ؛ خط (0 ، 100 ، عرض ، 100) ؛ خط (0 ، 200 ، عرض ، 200) ؛ خط (0 ، 300 ، عرض ، 300) ؛ خط (0 ، 400 ، عرض ، 400) ؛ }

[/cceN_cpp]

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

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

[cceN_cpp theme = "dawn"] تعويم x، y؛ إعداد باطل () {size (300، 300)؛ س = 0 ؛ } رسم باطل () {خلفية (234، 113، 107)؛ س = الضوضاء (frameCount / 100.0 + 100) * 300 ؛ ص = الضوضاء (frameCount / 100.0) * 300 ؛ noStroke () ، القطع الناقص (س ، ص ، 50 ، 50) ؛ }

[/cceN_cpp]

الآن ، الحركة أكثر إثارة للاهتمام مثل الدوران الدوراني.

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

الخطوة 14: دائرة تحركها الماوس

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

القضية بسيطة للغاية:

[cceN_cpp theme = "dawn"] int x، y؛ إعداد باطل () {size (300، 300)؛ س = 0 ؛ ص = 0 ؛ } رسم باطل () {خلفية (234، 113، 107)؛ noStroke () ، س = mouseX ؛ ص = الفأر ص ؛ القطع الناقص (س ، ص ، 50 ، 50) ؛ }

[/cceN_cpp]

يمكن للماوس إكس الحصول على إحداثيات س للماوس ، بينما يمكن للفأر ص الحصول على إحداثيات ص.

• دعنا نحاول تغيير الرمز الموجب والسالب ، أو تبادل mouseX و mouseY.

الخطوة 15: النهاية

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

في الفصل التالي ، يمكننا أن نرى أمثلة أكثر وفرة. في نفس الوقت ، سوف نستخدم وظائف رياضية وندمجها مع الحركة الرسومية.

هذه المقالة مأخوذة من المصمم Wenzy.

الخطوة 16: القراءات النسبية:

إرشادات البرمجة الشيقة للمصمم - معالجة اللمسة الأولية

إرشادات البرمجة الشيقة للمصمم - قم بإنشاء برنامج المعالجة الأول الخاص بك

هذه المقالة مأخوذة من:

إذا كنت بحاجة إلى مساعدة ، يمكنك الاتصال بـ: [email protected].