راهنمای برنامه نویسی جالب برای طراح-تصویر خود را اجرا کنید (قسمت اول): 16 مرحله

2024 نویسنده: John Day | [email protected]. آخرین اصلاح شده: 2024-01-30 08:58

اجرا کن! اجرا کن! اجرا کن!

برنامه نویسی چندان دشوار نیست. نکته کلیدی این است که ریتم خود را پیدا کرده و آن را یکی یکی انجام دهید.

قبل از خواندن این فصل ، امیدوارم قبلاً با روش ترسیم عملکرد اصلی آشنا شده باشید ، یا با دو عملکرد سر بزرگ گیج و گیج شده اید: راه اندازی و ترسیم.

از آنجا که ما می خواهیم گرافیک متحرک بسازیم ، باید بدانیم که انیمیشن چگونه تولید می شود.

تصویر فوق کاملاً جذاب به نظر می رسد و از لحاظ بصری اصل اجرای انیمیشن را نشان می دهد.

انیمیشن جادو است. این یک جادو در مورد تقلب بصری است. با این حال ، در زمان انفجار این اطلاعات ، فیلم جاری شدن سیل ، ما قبلاً به آن عادت کرده ایم. تعداد کمی از مردم تعجب خواهند کرد که دیدن این انیمیشن یک چیز شگفت انگیز است.

همین اصل را می توان در طراحی انیمیشن با برنامه نیز به کار برد. ما باید نحوه رسم گرافیک های مختلف در هر فریم را در نظر بگیریم ، و برنامه به طور خودکار صفحات را تغییر می دهد در حالی که یک انیمیشن کامل را در سر خود تکمیل می کنیم. در فصل بعد ، ما در مورد چگونگی تحقق حرکت اولیه گرافیکی صحبت خواهیم کرد. قبل از آن ، ما باید برخی از دانش اولیه در مورد متغیرها را بدانیم.

مرحله 1: متغیر

متغیر محتوی داده است. می توان به طور مکرر در یک برنامه استفاده کرد.

مثلا:

[cceN_cpp theme = "dawn"] اندازه (500 ، 500) ؛ بیضی (100 ، 250 ، 50 ، 50) ؛ بیضی (200 ، 250 ، 50 ، 50) ؛ بیضی (300 ، 250 ، 50 ، 50) ؛ بیضی (400 ، 250 ، 50 ، 50) ؛

[/cceN_cpp]

این بخش از کد از متغیرها استفاده نکرده است. چهار دایره را روی صفحه ترسیم می کند. ما می توانیم عرض و ارتفاع آنها را یکسان بدانیم. اکنون که یکسان است ، به منظور به حداقل رساندن ورودی مکرر داده ها ، می توان علامتی را برای نمایش آن تعریف کرد. این علامت متغیر است.

در اینجا کد بعد از اضافه کردن یک متغیر آمده است:

[cceN_cpp theme = "dawn"] اندازه (500 ، 500) ؛ int a = 50 ؛ بیضی (100 ، 250 ، a ، a) ؛ بیضی (200 ، 250 ، a ، a) ؛ بیضی (300 ، 250 ، a ، a) ؛ بیضی (400 ، 250 ، a ، a) ؛

[/cceN_cpp]

ما به یک نتیجه کامل می رسیم!

از آنجا که متغیر a را تعریف کرده ایم ، می توانیم به راحتی پارامترها را تغییر دهیم. اگر a = 50 را به a = 100 تغییر دهیم ، عرض و ارتفاع همه دایره ها یکنواخت 100 می شود. بنابراین لازم نیست پارامترها را یکی یکی تغییر دهیم. متغیر واقعاً اختراع خوبی است.

مرحله 2: ایجاد متغیر

قبل از استفاده از متغیر ، باید گزاره ای ایجاد کرده و نوع داده آن را مشخص کنیم.

int i؛

من 50 یورو ؛

اولین جمله کد یک عبارت برای متغیر i ایجاد کرده است. int نمادی است که عمدتا برای اعلام متغیر استفاده می شود. هنگام اعلام ، یک اتاق در حافظه کامپیوتر ذخیره می شود ، که معادل تولید یک "جعبه" است که مخصوص بازگرداندن داده های صحیح استفاده می شود. جمله دوم مخفف واگذاری 50 است که توسط متغیر i اجرا می شود. پس از اجرای این جمله ، داده ها به طور پایدار در متغیر i ذخیره می شوند. یا می توانید تنبل تر باشید تا دو جمله بالا را در یک تکلیف و در حین اظهارنظر ترکیب کنید.

int i ＝ 50 ؛

نامگذاری متغیر نسبتاً رایگان است. اما گاهی اوقات باید به چیزی توجه کنیم.

مرحله 3: نامگذاری متغیر

• باید ترکیبی از الفبا و زیر خط باشد. این می تواند یک نماد یا یک کلمه باشد.

• به حروف حساس است. نام و نام می تواند متغیرهای متفاوتی باشد.

• سعی کنید تا آنجا که ممکن است نام آن را بگذارید تا به شما اجازه دهد در یک نگاه متوجه شوید. کاراکتر اولیه باید به جای یک عدد یا یک کاراکتر خاص ، یک الفبا باشد.

• بدون کلمات کلیدی مانند int ، float

موارد زیر برخی از جملات اشتباه است.

int $ a؛

int 89b ؛

در اینجا جملات صحیح آمده است:

int r؛

int super_24؛

int openTheDoor ؛

مرحله 4: نوع متغیر

به غیر از اعلام داده های صحیح ، ما می توانیم برای داده های اعشاری (همچنین داده های نقطه شناور) با کلمه کلیدی float اعلام کنیم.

شناور b = 0.5

ما باید به خاطر داشته باشیم که از چه نوع داده ای برای بیانیه خود استفاده کرده ایم. اگر از کلمه کلیدی int استفاده کرده ایم ، تخصیص اخیر نمی تواند 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 = a + b ؛ // به علاوه دو تخصیص و نتیجه آن را به 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 setup () {

}

void draw () {

}

استفاده ویژه باعث می شود فرمت فراخوانی آنها با سایر توابع متفاوت باشد. ما باید "void" را قبل از نام تابع اضافه کنیم ، که مخفف no "مقدار بازگشتی" است. پشت نام تابع ، ما باید پرانتز و پرانتز را اضافه کنیم.

[cceN_cpp theme = "dawn"] void setup () {print (1)؛ } void draw () {print (2)؛ } [/cceN_cpp]

بیایید به یک مثال نگاهی بیندازیم:

هنگامی که دکمه عملکرد را فشار می دهید ، کنسول ابتدا "1" و سپس به طور مداوم "2" خروجی می دهد تا زمانی که دکمه توقف را فشار داده یا پنجره را ببندید.

کد داخل پرانتز در تابع راه اندازی تنها برای یک بار اجرا می شود. در حالی که کد درون ترسیم عملکرد به طور مداوم در گردش است (اجرای پیش فرض 60 بار در ثانیه).

به دلیل این کاراکتر ، معمولاً از راه اندازی برای تنظیم اولیه ویژگی محیط ، مانند عرض و ارتفاع صفحه ، رنگ پس زمینه و تعیین انواع متغیرها استفاده می شود. در حالی که ما غالباً توابع ترسیم را به منظور ایجاد گرافیک متغیر تغییر یافته در ترسیم عملکرد قرار می دهیم.

مرحله نهم: دایره در حرکت افقی

با استفاده از تابع draw ، می توانیم انیمیشن های خود را ایجاد کنیم. روش نوشتن جلوه انیمیشن با پردازش بسیار "ناخوشایند" است. هیچ فرمان موجودی ندارد به عنوان مثال ، شکل خاصی را برای انجام منحنی تعیین کنید.

ما باید خودمان این جزئیات را تعریف کنیم. شما باید به برنامه بگویید که هر فریم قطعاً به چه نوع گرافیکی نیاز دارد.

کد زیر را در آن بنویسید (حالا بیایید این کار را با دست شروع کنیم):

[cceN_cpp theme = "dawn"] int x؛ int y؛ void setup () {اندازه (300 ، 300) ؛ x = 0 ؛ y = ارتفاع/2 ؛ } void draw () {background (234، 113، 107)؛ noStroke ()؛ بیضی (x ، y ، 50 ، 50) ؛ x = x+1 ؛ }

[/cceN_cpp]

این بخش از کد یک دایره متحرک را نمایش می دهد. متغیر اعلام شده قبلی x ، y برای ذخیره موقعیت مختصات استفاده می شود. تکالیف آن در تنظیم عملکرد اجرا می شود. کد اصلی کد زیر در ترسیم تابع است:

x = x + 1

آن را معادله ریاضی نبینید ، در غیر این صورت بسیار عجیب خواهد بود. در اینجا ، "＝" نمادی برای تعیین تکلیف است. نشان دهنده قرار دادن اعداد راست در متغیر چپ است. فرض کنید x 50 است ، هنگامی که کد اجرا شد ، سمت راست "＝" برابر با 50+1 است ، یعنی 51. نتیجه نهایی به متغیر x اختصاص داده می شود. بنابراین مقدار x 51 می شود.

روش برنامه را دنبال کنید ، هر بار که تابع یکبار عمل می کند ، مقدار x 1 افزایش می یابد. بنابراین هر بار که رسم می کنیم ، دایره در مقایسه با فریم قبلی یک جهت پیکسل را به صورت افقی به راست حرکت می دهد. بنابراین ، گرافیک متحرک می شود.

• به منظور به دست آوردن خوانایی بهتر کد ، ما باید اتاق خاصی را قبل از هر خط کد در براکت ها ذخیره کنیم. و باید تا حد امکان تراز شود. TAB یا چند فضای خالی را فشار دهید ، می تواند جمع شود.

• نماد فضای خالی و شکست خط در برنامه بر برنامه تأثیر نمی گذارد. بنابراین اگر یکی را بیشتر یا کمتر تایپ کنیم اشکالی ندارد.

در اینجا راه ساده تری برای بیان آن آمده است. برای اینکه دایره متغیر 1 را به صورت خودکار افزایش دهد ، باید آن را با فرمت زیر بنویسیم.

دایره ＝ دایره ＋1

کاملا ناخوشایند! اگر نام متغیر طولانی تر است ، باید کلمات بیشتری را تایپ کنیم. بنابراین پیشینیان تنبل ما ایده ای شبیه به این می اندیشند.

دایره

خیلی ساده نیست؟ به معنی افزایش 1 خودکار است. مشابه آن - - وجود دارد که به معنی کاهش 1 خودکار است.

اما اگر امیدواریم مقدار افزایش خودکار عدد دیگری مانند 2 باشد ، باید عبارت دیگری را امتحان کنیم.

دایره += 2

این برابر است با

دایره = دایره + 2

به طور مشابه ، - ＝ ، /= ، *= وجود دارد.

مرحله 10: جهت حرکت

اینکه گرافیک در چه جهتی حرکت می کند بستگی به نحوه تغییر مختصات شما دارد. اگر به y ＝ y ＋ 1 تغییر کند ، دایره به سمت پایین حرکت می کند. اگر bothx و y 1 افزایش پیدا کنند ، دایره به سمت پایین پایین سمت راست حرکت می کند. اگر آن را به عنوان نماد منفی بنویسیم ، در جهت مخالف حرکت می کند.

[cceN_cpp theme = "dawn"] int x، y؛ // می تواند چندین متغیر را همزمان اعلام کند ، برای جدا کردن از کاما استفاده کنید. void setup () {اندازه (300 ، 300) ؛ x = 0 ؛ y = 0 ؛ } void draw () {background (234، 113، 107)؛ noStroke ()؛ بیضی (x ، y ، 50 ، 50) ؛ x ++ ؛ y ++ ؛ }

[/cceN_cpp]

نرخ حرکت

60 فریم پیش فرض در ثانیه در ترسیم عملکرد را به خاطر دارید؟ با توجه به این نرخ ، دایره بالا 60 پیکسل در ثانیه به راست حرکت می کند.

اگر می خواهیم نرخ حرکت گرافیکی را تغییر دهیم ، دو روش وجود دارد: یکی این است که هر زمان که تغییر می کند مقدار x را افزایش دهیم.

x ＝ x ＋ 10

سرعت را در مقایسه با نسخه اصلی 10 برابر افزایش داده است!

روش دیگر تغییر فرکانس تازه سازی بوم است. frameRate ()

این عملکرد می تواند فرکانس پخش بوم را تغییر دهد. frameRate (10) را در تنظیمات عملکرد بنویسید ، 60 فریم اصلی در ثانیه را به 10 فریم در ثانیه تغییر می دهد. سرعت آن 6 برابر قبل کاهش می یابد.

مرحله 11: پیش زمینه نادیده گرفته شده

همه مثالهای قبلی پس زمینه را در رسم تابع می نویسند. آیا تا به حال فکر کرده اید که آن را در تنظیمات عملکرد بنویسید؟ آیا تفاوت هایی خواهد داشت؟ اکنون ، بیایید مثال حرکت افقی را به روز کنیم.

[cceN_cpp theme = "dawn"] int x، y؛ void setup () {اندازه (300 ، 300) ؛ پس زمینه (234 ، 113 ، 107) ؛ x = 0 ؛ y = ارتفاع/2 ؛ } void draw () {noStroke ()؛ بیضی (x ، y ، 50 ، 50) ؛ x += 1 ؛ } [/cceN_cpp]

چه اتفاقی افتاده است؟ شاید نتواند دلیل تولید مشکل را به درستی درک کند. تابع noStroke را حذف کنید ، دوباره ضربه بزنید و مسیر حرکت دایره را ببینید.

اوه ، به دلیل حلقه ایجاد شده قبلی حذف نشده است! از آنجا که تنظیمات عملکرد فقط یک بار عمل می کند ، اگر پس زمینه را در بالای آن بنویسیم ، پس زمینه را فقط برای یک بار پر می کند و در مرحله بعد دیگر هیچ تاثیری نخواهد داشت. پس زمینه عملکرد مانند ابزار سطل رنگ است. پس از استفاده ، تمام محتویات موجود در بوم را به جای تنظیم فقط رنگ پس زمینه پوشش می دهد. ما آن را قبل از رسم تابع می نویسیم تا هر زمان که یک الگوی جدید ایجاد می کنیم قاب قبلی پوشانده شود. بنابراین ، دایره می تواند همانطور که انتظار داشتیم اجرا شود. به جز به خاطر سپردن کاربردهای هر تابع ، ما باید در مورد موقعیت کد فکر کنیم. در بسیاری از مواقع ، خط بالا یا پایین برای codea و نوشتن آن در داخل یا خارج از براکت ، جلوه های کاملاً متفاوتی ایجاد می کند. جهت کد دو بعدی است. اگر اشکالی ظاهر شود ، باید در این دو بعد کالیبره کنیم.

• این روش نقاشی تکرار نشده در صورت استفاده صحیح می تواند جلوه خاصی ایجاد کند. می توانید کد زیر را کپی کرده و امتحان کنید.

[cceN_cpp theme = "dawn"] void setup () {size (400، 400)؛ } void draw () {بیضی (عرض/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: تکان دادن دایره

اگر بخواهم جهت حرکت دایره را نامنظم کنم چطور؟ با عملکردی هوشمندانه ، می توانید این تأثیر را نیز درک کنید. تصادفی یک عملکرد متداول است. می توان از آن برای تولید تابع تصادفی استفاده کرد. مانند یک روح بدون ردیابی است. هنگامی که به متغیرها مربوط می شوید ، نمی توانید تصور کنید که بعد از آن چه خواهد شد.

فرمت فراخوانی:

تصادفی (زیاد)

High نشان دهنده حد بالایی تصادفی است و حد پایین پیش فرض 0 است. به عنوان مثال ، تصادفی (10). این عدد را از 0 تا 10 به طور تصادفی تولید می کند (0 شامل می شود اما 10 شامل نمی شود).

تصادفی (کم ، زیاد)

اگر دو پارامتر را تنظیم کنیم ، به مقدار تصادفی بین آنها باز می گردد. به عنوان مثال ، تصادفی (5 ، 10). این عدد از 5 تا 10 را به طور تصادفی تولید می کند (5 شامل می شود اما 10 شامل نمی شود).

مثال:

[cceN_cpp theme = "dawn"] float x؛

x = تصادفی (50 ، 100) ؛

چاپ (x) ؛ [/cceN_cpp]

هر بار که برنامه را اجرا می کنیم ، کنسول مقادیر متفاوتی را نشان می دهد.

• توجه: مقادیر ایجاد شده توسط تابع تصادفی متعلق به نوع نقطه شناور (نوع عدد اعشاری) است. اگر بخواهیم یک مقدار را به متغیر صحیح اختصاص دهیم ، باید آن را از طریق تابع int () تبدیل کنیم. تبدیل به دور انجام نمی شود بلکه قسمت اعشاری را مستقیماً حذف می کند. بنابراین خروجی int (تصادفی (5)) ، فقط 5 امکان دارد: 0 ، 1 ، 2 ، 3 ، 4.

پس از اینکه با استفاده از تابع تصادفی آشنا شدیم ، می توانیم مستقیماً به مورد زیر وارد شویم.

[cceN_cpp theme = "dawn"] int x، y؛ void setup () {اندازه (300 ، 300) ؛ x = عرض/2 ؛ y = ارتفاع/2 ؛ } void draw () {background (234، 113، 107)؛ noStroke ()؛ x += int (تصادفی (-5 ، 5)) ؛ y += int (تصادفی (-5 ، 5)) ؛ بیضی (x ، y ، 50 ، 50) ؛ }

[/cceN_cpp]

مقادیر مختصات قبلی اضافه شده ثابت هستند. فقط اگر مقدار تصادفی را افزایش دهیم ، دایره در جهت نامحدود حرکت می کند. با محدوده تصادفی بزرگتر ، بیشتر متزلزل می شود. از آنجا که تغییر مقدار بین فریم ها برگشت می خورد ، حرکت دیگر صاف نخواهد بود. در حالی که قاب قبلی در (150 ، 150) است ، قاب دوم در یک نگاه اجمالی به موقعیت (170 ، 170) حرکت می کند.

مرحله 13: مهاجرت دایره

دایره مهاجرت

آیا حرکت روان ایجاد می کند؟ نویز عملکرد می تواند به ما کمک کند. ریتم بهتری نسبت به تصادفی استاندارد دارد. و اعداد تصادفی تولید شده به طور تصادفی به طور مداوم هستند.

فرمت فراخوانی:

سر و صدا （t

نویز عملکرد نمی تواند محدوده خروجی آن را مشخص کند. برنامه تعریف می کند فقط می تواند اعداد نقطه شناور را از 0 تا 1 تولید کند و ورودی ثابت فقط می تواند خروجی ثابت داشته باشد.

[cceN_cpp theme = "dawn"] float x = noise (5)؛ شناور y = سر و صدا (5) ؛ چاپ (x ، y) ؛ [/cceN_cpp]

از آنجا که پارامترهای ورودی بالا 5 هستند ، بنابراین نتایج خروجی یکسان است. سپس چگونه می توان نتیجه را تغییر داد؟ پاسخ این است که پارامترهای ورودی را به صورت پویا تغییر دهید. در واقع ما می توانیم نویز را به عنوان یک آهنگ صوتی بی حد و حصر در نظر بگیریم ، پارامترهای ورودی درست مانند "زمان حال" است. اگر ورودی پارامتر پیوسته باشد ، خروجی نیز پیوسته خواهد بود.

[cceN_cpp theme = "dawn"] شناور x ، y ؛ void setup () {اندازه (700 ، 100) ؛ x = 0 ؛ پس زمینه (0) ؛ } void draw () {x += 1؛ y = سر و صدا (frameCount/100.0)*100 ؛ noStroke ()؛ بیضی (x ، y ، 2 ، 2) ؛ }

[/cceN_cpp]

در این حالت ، مسیر تغییر Y را ترسیم می کنیم تا بتوانیم نویز عملکرد را بهتر درک کنیم.

• در میان آن ، frameCount متغیر قاب فعلی را به دست می آورد. متفاوت از عرض ، ارتفاع قبلی ، بدون هیچ تغییری پایدار است. علاوه بر این ، از 0 شروع به افزایش می کند. اگر ما آن را با گرافیک متحرک نمایش اولیه خود درک کنیم ، صفحه ای را که به آن روی آورده ایم (و نه زمان تصور در برنامه) نشان می دهد.

• frameCount متغیر صحیح است. برنامه با تقسیم بر یک متغیر صحیح دیگر ، به طور پیش فرض نتیجه را به صورت یک عدد صحیح پردازش می کند.به منظور افزایش دقت نتیجه ، ما باید 100 را به 100.0 تغییر دهیم. تقسیم بر یک عدد نقطه شناور ، ما یک عدد نقطه شناور نیز دریافت می کنیم.

• برای تغییر محور Y از 0 به 100 ، باید نتیجه نویز را در 100 ضرب کنیم. بنابراین می توانیم دامنه مقدار تصادفی را کنترل کنیم.

برخی از شما که فکر می کنید ممکن است بپرسند "چرا باید frameCountby 100 را تقسیم کنیم؟ آیا نوشتن مستقیم frameCount خوب نیست؟" البته که میتوانید! اما در اینجا ، برای نمایش بهتر ویژگی های نویز عملکرد ، "نرخ پخش" را کند می کنیم. مثال زیر تغییرات مقدار خروجی را تحت نرخ تغییر متفاوت نشان می دهد.

[cceN_cpp theme = "dawn"] شناور x ، y1 ، y2 ، y3 ، y4 ، y5 ؛ void setup () {اندازه (700 ، 500) ؛ x = 0 ؛ پس زمینه (0) ؛ } void draw () {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 ()؛ بیضی (x ، y1 ، 2 ، 2) ؛ بیضی (x ، y2+100 ، 2 ، 2) ؛ بیضی (x ، y3+200 ، 2 ، 2) ؛ بیضی (x ، y4+300 ، 2 ، 2) ؛ بیضی (x ، y5+400 ، 2 ، 2) ؛ سکته مغزی (80) ؛ خط (0 ، 100 ، عرض ، 100) ؛ خط (0 ، 200 ، عرض ، 200) ؛ خط (0 ، 300 ، عرض ، 300) ؛ خط (0 ، 400 ، عرض ، 400) ؛ }

[/cceN_cpp]

شما می توانید پارامترهای متغیر در نویز عملکرد را به عنوان یک نوار پیشرفت در نظر بگیرید. تغییر پارامتر مانند حرکت نوار پیشرفت است. بنابراین وقتی دامنه متغیر این "آهنگ صوتی" بزرگتر باشد ، ویژگیهای پیوسته جلو و عقب ارزش خروجی ضعیف تر خواهد بود. (ما می توانیم تصور کنیم اگر یک قطعه موسیقی یا یک ویدیو را با سرعت 2 برابر 5 پخش کنیم ، چه اتفاقی می افتد. بار سرعت ، 20 برابر سرعت). وقتی دامنه بزرگتر از یک مقدار معین باشد ، تفاوت چندانی بین عملکرد تصادفی در تولید مقدار ندارد.

اگر بتوانید همه مثالهای بالا را درک کنید ، احساس خواهید کرد که ترسیم یک دایره مهاجر آسانتر نیست. شما می توانید اصول داخلی را نیز درک کنید.

[cceN_cpp theme = "dawn"] شناور x ، y ؛ void setup () {اندازه (300 ، 300) ؛ x = 0 ؛ } void draw () {background (234، 113، 107)؛ x = سر و صدا (frameCount/100.0 + 100)*300 ؛ y = سر و صدا (frameCount/100.0)*300 ؛ noStroke ()؛ بیضی (x ، y ، 50 ، 50) ؛ }

[/cceN_cpp]

اکنون ، حرکت دقیقاً مانند یک ژیروسکوپ دوار جالب تر است.

• دلیل اینکه چرا متغیر x در نویز تابع باید به اضافه 100 باشد به این دلیل است که آنها را برای یک فاصله جدا می کند. اگر پارامترهای xy در نویز تابع یکسان یا کاملاً نزدیک باشند ، تغییر مختصات x ، y به همان نزدیک می شود. این به این دلیل است که حرکت بسیار تصادفی تر می شود.

مرحله 14: دایره توسط موس حرکت می کند

بعد ، سرانجام به دو متغیر می رسیم که من بیشتر آنها را دوست دارم: mouseX و mouseY. در اولین نگاه از این دو مفهوم ، چشمانم از نور می درخشد. زیرا مستقیم ترین راه برای تعامل با گرافیک است. ما می توانیم برنامه های جالب زیادی با آن ایجاد کنیم.

مورد کاملاً ساده است:

[cceN_cpp theme = "dawn"] int x، y؛ void setup () {اندازه (300 ، 300) ؛ x = 0 ؛ y = 0 ؛ } void draw () {background (234، 113، 107)؛ noStroke ()؛ x = mouseX؛ y = mouseY ؛ بیضی (x ، y ، 50 ، 50) ؛ }

[/cceN_cpp]

mouseX می تواند مختصات x ماوس را بدست آورد ، در حالی که mouseY می تواند مختصات y را بدست آورد.

• بیایید سعی کنیم نماد مثبت و منفی را تغییر دهیم ، یا mouseX و mouseY را مبادله کنیم.

مرحله 15: پایان

با استفاده از این دستورات آشنا ، ممکن است بتوانید حرکت گرافیکی را انجام دهید. با استفاده از محتوای فصل آخر ، از تخیل خود به درستی استفاده کنید ، می توانید جلوه های متحرک جالب زیادی ایجاد کنید.

در فصل بعدی ما می توانیم نمونه های فراوان تری را مشاهده کنیم. در همان زمان ، ما از توابع ریاضی استفاده می کنیم و آن را با حرکت گرافیکی ترکیب می کنیم.

این مقاله از طراح Wenzy گرفته شده است.

مرحله 16: خواندن نسبی:

راهنمای برنامه نویسی جالب برای طراح-پردازش لمس اولیه

راهنمای برنامه نویسی جالب برای طراح-اولین برنامه پردازش خود را ایجاد کنید

این مقاله از: https://www.elecfreaks.com/10893.html است.

در صورت نیاز به کمک ، می توانید با آدرس: [email protected] تماس بگیرید.