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

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

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

مرحله 1: حرکت و عملکرد

اجازه دهید چندین عکس ناشناخته را به شما نشان دهم تا سلیقه شما تحریک شود.

این چیه؟ اکنون فقط این س keepال را ابتدا نگه دارید و بعد از آن خواهید دانست و از آن استفاده خواهید کرد.

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

چند تصویر را می توانید از تصاویر بالا تشخیص دهید؟ چه نوع رابطه ای با حرکت دارند؟ حالا بیایید یک تابع درجه دوم را انتخاب کنیم ، برخی پارامترها را به صورت تصادفی اضافه کرده و ببینیم چه اتفاقی می افتد. به عنوان مثال ، y = x² / 100.

این تصویر عملکرد است. کد زیر را کپی کنید.

[cceN_cpp theme = "dawn"] شناور x ، y ؛ void setup () {اندازه (300 ، 300) ؛ پس زمینه (0) ؛ x = 0 ؛ } void draw () {stroke (255)؛ سکته مغزی وزن (2) ؛ y = توان (x ، 2) / 100.0 ؛ // تابع pow به nth قدرت عدد تعیین برمی گردد. (x ، 2) نشان دهنده مربع x است. پارامتر اول شماره پایه و پارامتر دوم شاخص است. نقطه (x ، y) ؛ x ++ ؛ } [/cceN_cpp]

جلوه اجرا

بعد ، تابع sin را انتخاب کنید. فرمول: y = 150 + sin (x).

کد زیر را کپی کنید.

[cceN_cpp theme = "dawn"] شناور x ، y ؛ void setup () {اندازه (300 ، 300) ؛ پس زمینه (0) ؛ x = 0 ؛ } void draw () {y = height/2 + sin (رادیان (x)) * 150 ؛ // تابع شعاعی x را به زاویه تبدیل می کند. x ++ ؛ سکته مغزی (255) ؛ سکته مغزی وزن (2) ؛ نقطه (x ، y) ؛ } [/cceN_cpp]

جلوه اجرا

این گرافیکی است که پس از کار با کد دریافت می کنیم. و این مسیر حرکت آنهاست. در مقایسه با نمونه قبلی ، نتیجه مشخص است. تصویر عملکرد در واقع مربوط به مسیر حرکت است! به اندازه کافی ساده است. فقط باید مقدار x، y را به صورت مختصات جایگزین کنید. آهنگ قبلی که ترسیم کردیم معادل گرافیک تابع y = x² / 100 است. در حالی که آهنگ دوم برابر است با گرافیک تابع y = 150 + sin (x). اما در برنامه ، جهت محور y عکس است. بنابراین ، در مقایسه با گرافیک اصلی ، آهنگ وارونه خواهد بود. اکنون ، من حدس می زنم شما باید این احساس را داشته باشید که برخی از س difficultالات دشواری که مدت ها در ذهن شما وجود داشته است فوراً حل می شوند. شگفت انگیز است که از این عملکردهای فوق العاده ای که قبلاً یاد گرفته ایم می توان برای کنترل حرکت گرافیکی استفاده کرد!

مرحله 2: نوشتن تابع

من چندین عملکرد متداول را در زیر لیست کرده ام. امیدوارم این موارد به ما در ترجمه توابع به کد قابل تشخیص توسط کامپیوتر کمک کند.

بنابراین ، فرمول زیر در برنامه باید به این صورت نوشته شود:

y = x² → y = توان (x ، 2) یا y = sq (x)

y = x³ → y = توان (x ، 3)

y = xⁿ → y = توان (x ، n)

y = 4ⁿ → y = توان (4 ، n)

y ＝ logₑ² → y = log (2)

y = e² → y = exp (2)

y = √5 → y = sqrt (5)

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

عملکرد مثلثاتی

اکنون ، بیایید بیشتر بدانیم تا برخی از نوشته های توابع مثلثاتی را بدانیم.

ما باید توجه داشته باشیم که در برنامه ورودی پارامتر تابع نسبت به زاویه ، رادیان را تصویب می کند. بنابراین sin90 ° باید در گناه نوشته شود (PI -2). اگر با این روش آشنایی ندارید ، می توانید از تابع randians استفاده کنید تا زاویه را از قبل به رادیان تبدیل کنید و سپس sin （radians را بنویسید (90)).

استفاده از درجه های عملکرد نسبتاً مخالف است. می تواند شعاع را به زاویه تبدیل کند. چاپ (درجه (PI/2)) را مستقیماً در ناحیه ویرایش وارد کنید ، و ببینید چه چیزی به شما می رسد.

مرحله 3: حرکت گرافیکی را با عملکرد مثلثاتی کنترل کنید

در اینجا یک مورد برای شما وجود دارد که می توانید تأثیر واقعی حرکت گرافیکی را مشاهده کنید.

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

گناه تابع یک تابع دوره ای است. حداقل مقدار آن 1 － و حداکثر مقدار 1 است. ارتفاع صفحه 300 است. به y = sin (شعاع (x)) * 150 + 150 ارجاع داده می شود ، بنابراین محدوده تغییر مقدار y در 0 به خوبی کنترل می شود تا 300

دایره چرخش

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

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

یک مثال ساده:

[cceN_cpp theme = "dawn"] شناور x ، y ، r ، R ، زاویه ؛ void setup () {اندازه (300 ، 300) ؛ r = 20 ؛ // قطر دایره R = 100؛ // شعاع مسیر حرکت x = 0؛ زاویه = 0 ؛ y = ارتفاع/2 ؛ } void draw () {background (234، 113، 107)؛ ترجمه (عرض/2 ، ارتفاع/2) ؛ // نقطه اصلی را به مرکز صفحه منتقل کنید. noStroke ()؛ x = R * cos (زاویه) ؛ y = R * sin (زاویه) ؛ بیضی (x ، y ، r ، r) ؛ زاویه += 0.05 ؛ } [/cceN_cpp]

نگاه کن! یک دایره در حال چرخش ظاهر می شود! در اینجا ، متغیر مستقل دیگر در حال افزایش بیت تبدیل زاویه نیست (برابر با θ در تصویر). مخفف زاویه است. در میان آن ، xy ضریب R نسبتاً ضرب کرده است ، که منجر به گسترش شعاع حرکت دایره می شود (R برای شعاع است). اگر R را ضرب نکند ، مسیر حرکت آن در محدوده -1 تا 1 محدود می شود.

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

y = (عبارت ناشناخته x؟) ؛

x ＋＋؛

بنابراین ما باید ایده خود را تغییر دهیم. زاویه دیگری را به عنوان متغیر مستقل انتخاب کنید و سپس از تابع sin و cos برای تبدیل آن به مختصات افقی و عمودی استفاده کنید.

x = R * cos (زاویه) ؛

y = R * sin (زاویه) ؛

زاویه += 0.05 ؛

شاید برخی از شما تعجب کنید که چرا می تواند مسیر حرکت دایره را نشان دهد. با توجه به تعریف تابع مثلثاتی ، ما به راحتی می توانیم استدلال کنیم که این تابع نسبت طرف مقابل به هیپوتنوز را گناه می کند. تابع cos نسبت مجاور به هیپوتنوز است. مهم نیست که نقطه دایره کجا باشد ، r (شعاع) بدون تغییر باقی می ماند. بنابراین ما می توانیم بیان مختصات x و مختصات y را به پایان برسانیم.

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

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

با این حال ، عملکرد sin و cos مشترک است. اگر می خواهید ایجاد سطح بالاتری داشته باشید ، بهتر است سعی کنید آن را به طور کامل بشناسید. اگر این س itselfال به خودی خود ما را به یادگیری دانش ریاضی بیشتر ترغیب کند ، چیزهای جالب تری در انتظار شماست تا آنها را کشف کنید.

اینها تصاویری نزدیک به عملکرد مثلثاتی هستند.

مرحله 4: سیستم مختصات حرکت

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

ترجمه عملکرد

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

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

ترجمه (الف ، ب)

اولین پارامتر مخفف حرکت به جهت مثبت محور x برای یک پیکسل است. پارامتر دوم مخفف حرکت به جهت مثبت محور y برای b پیکسل است.

این دو کد را مقایسه کنید و سعی کنید هر تفاوتی را پیدا کنید. (به منظور ساده سازی کد ، می توانیم اندازه عملکرد را حذف کنیم ، عرض و ارتفاع صفحه به طور پیش فرض 100 است).

قبل از استفاده:

بیضی (0 ، 0 ، 20 ، 20) ؛

بعد از استفاده:

ترجمه (50 ، 50) ؛

بیضی (0 ، 0 ، 20 ، 20) ؛

چرخش عملکرد

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

چرخش (الف)

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

قبل از استفاده:

بیضی (50 ، 50 ، 20 ، 20) ؛

پس از مصرف:

چرخش (رادیان (30)) ؛

بیضی (50 ، 50 ، 20 ، 20) ؛

اثر در برنامه این است که دایره را به دور نقطه مرکزی مختصات در جهت عقربه های ساعت به مدت 30 درجه بچرخانید.

مقیاس تابع

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

مقیاس (الف)

این عملکرد می تواند سیستم مختصات را کوچک کند. مقدار برای مقیاس بندی است. هنگامی که پارامتر فراتر از 1 است ، سپس بزرگنمایی کنید. اگر کمتر از 1 است ، آن را بزرگنمایی کنید.

قبل از استفاده:

بیضی (0 ، 0 ، 20 ، 20) ؛

پس از مصرف:

مقیاس (4) ؛

بیضی (0 ، 0 ، 20 ، 20) ؛

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

مقیاس (4 ، 2) ؛

بیضی (0 ، 0 ، 20 ، 20) ؛

برهم نهی تابع تبدیل

در اینجا ، برهم نهی همه چیز مربوط به تغییرات مربوط به سیستم مختصات کنونی است. به عبارت دیگر ، می توان اثرات را روی هم قرار داد.

ترجمه (40 ، 10) ؛

ترجمه (10 ، 40) ؛

بیضی (0 ، 0 ، 20 ، 20) ؛

اثر نهایی آن برابر خواهد بود

ترجمه (50 ، 50) ؛

بیضی (0 ، 0 ، 20 ، 20) ؛

برای چرخش عملکرد یکسان است

چرخش (رادیان (10)) ؛

چرخش (رادیان (20)) ؛

بیضی (50 ، 50 ، 20 ، 20) ؛

مساوی با

چرخش (رادیان (30)) ؛

بیضی (50 ، 50 ، 20 ، 20) ؛

هر دو مقیاس تابع و چرخش مرکز در نقطه اصلی به مقیاس و چرخش. اگر می خواهیم جلوه چرخش را با موقعیت مرکزی (50 ، 50) بدست آوریم ، باید برعکس فکر کنیم. ابتدا نقطه اصلی را به موقعیت (50 ، 50) منتقل کنید ، سپس تابع تبدیل چرخشی را اضافه کنید. در نهایت گرافیک خود را روی نقطه اصلی نقاشی کنید.

قبل از استفاده:

بیضی (50 ، 50 ، 50 ، 20) ؛

پس از مصرف:

ترجمه (50 ، 50) ؛

چرخش (رادیان (45)) ؛

بیضی (0 ، 0 ، 50 ، 20) ؛ // به منظور مشاهده تغییر زاویه چرخش ، ما یک بیضی ساخته ایم.

ممکن است پیچیده به نظر برسد. فقط باید بیشتر تمرین کنید تا آن را درک کنید. (همچنین می توانید دنباله عملکرد ترجمه و چرخش را تغییر دهید تا تفاوت را مشاهده کنید.)

حرکت افقی و حرکت دایره ای

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

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

[cceN_cpp theme = "سپیده دم"]

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

مختصات دایره تغییر نمی کند اما سیستم مختصات آن تغییر می کند.

چرخش حرکت

[cceN_cpp theme = "dawn"] شناور r ، R ، زاویه ؛ void setup () {اندازه (300 ، 300) ؛ r = 20 ؛ // بعد دایره R = 100؛ // شعاع مسیر حرکت} void draw () {background (234، 113، 107)؛ ترجمه (عرض/2 ، ارتفاع/2) ؛ // نقطه اصلی را به مرکز صفحه منتقل کنید. چرخش (زاویه) ؛ noStroke ()؛ بیضی (0 ، R ، r ، r) ؛ زاویه += 0.05 ؛ } [/cceN_cpp]

آیا بسیار واضح تر و ساده تر از عملکرد مثلثاتی نیست؟ شاید اینجا سوالی داشته باشید کد چرخشی را به عنوان مثال در نظر بگیرید. بدیهی است ، تابع تبدیل فوق الذکر نسبی است و امکان اضافه شدن را فراهم می کند. اگر ترجمه (عرض/2 ، ارتفاع/2) را به ترسیم تابع بنویسیم ، آیا این بدان معنا نیست که هر بار که تابع یکبار کار می کند ، سیستم مختصات فاصله ای را حرکت می دهد در جهت پایین سمت راست از پایه اصلی؟ منطقی است که برای همیشه در مرکز صفحه نمایش نخواهد ماند.

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

دسترسی به وضعیت مختصات

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

مثال:

[cceN_cpp theme = "dawn"] pushMatrix ()؛ // ذخیره وضعیت سیستم مختصات ترجمه (50 ، 50) ؛ بیضی (0 ، 0 ، 20 ، 20) ؛ popMatrix ()؛ // خواندن وضعیت سیستم مختصات rect (0 ، 0 ، 20 ، 20) ؛ [/cceN_cpp]

در این مثال ، قبل از استفاده از translate (50 ، 50) ، از تابع pushMatrix. برای ذخیره وضعیت فعلی سیستم مختصات استفاده می کنیم. این ، در عین حال ، وضعیت اولیه است. پس از رسم یک دایره و سپس پیاده سازی popMatrix ، به این وضعیت باز می گردد. در این زمان ، تابع rect را پیاده کنید ، خواهید دید که تحت تأثیر ترجمه قرار نگرفته است بلکه یک مربع در گوشه سمت چپ بالای نقطه اصلی ترسیم می کند.

علاوه بر این ، تابع pushMatrix و popMatrix اجازه تودرتو را می دهند.

مثلا

pushMatrix ()؛

pushMatrix ()؛

popMatrix ()؛

popMatrix ()؛

به منظور نشان دادن رابطه آن بصری ، ما قالب متراکم را انتخاب می کنیم.

حرکت ترکیبی یا حرکت در حرکت؟

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

مانند ترکیب حرکت افقی با حرکت چرخشی سیستم مختصات. نکته در اینجا این است که فقط در یک جهت حرکت کنید.

[cceN_cpp theme = "dawn"] int x، y؛ زاویه شناور ؛ void setup () {اندازه (300 ، 300) ؛ پس زمینه (234 ، 113 ، 107) ؛ noStroke ()؛ x = 0 ؛ // وقتی مقدار اولیه x 0 است ، می توانیم این جمله کد را نادیده بگیریم. هنگام اعلام متغیر ، مقدار پیش فرض 0. y = 0 است ؛ // مشابه موارد فوق. زاویه = 0 ؛ // مشابه موارد فوق. } void draw () {angle += 0.25؛ y-- ؛ ترجمه (عرض/2 ، ارتفاع/2) ؛ pushMatrix ()؛ چرخش (زاویه) ؛ بیضی (x ، y ، 5 ، 5) ؛ popMatrix ()؛ } [/cceN_cpp]

و حرکت دایره ای و مقیاس بندی سیستم مختصات وجود دارد.

[cceN_cpp theme = "dawn"] شناور x ، y ، زاویه ؛ void setup () {اندازه (300 ، 300) ؛ پس زمینه (234 ، 113 ، 107) ؛ noStroke ()؛ } void draw () {angle += 0.01؛ x = گناه (زاویه) * 100 ؛ y = cos (زاویه) * 100 ؛ ترجمه (عرض / 2 ، ارتفاع / 2) ؛ pushMatrix ()؛ مقیاس (1 + 0.1 * گناه (زاویه * 10)) ؛ بیضی (x ، y ، 5 ، 5) ؛ popMatrix ()؛ } [/cceN_cpp]

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

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

مرحله 6: استفاده جامع

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

[cceN_cpp theme = "dawn"] شناور x1 ، y1 ، x2 ، y2 ، r ، R ؛ شناور زاویه 1 ، زاویه 2 ؛ void setup () {اندازه (300 ، 300) ؛ r = 12 ؛ R = 120 ؛ زاویه 1 = 0 ؛ angle2 = PI/4 ؛ } void draw () {background (234، 113، 107)؛ noStroke ()؛ ترجمه (عرض / 2 ، ارتفاع / 2) ؛ زاویه 1 += 0.02 ؛ زاویه 2 += 0.06 ؛ x1 = R *sin (angle1) ؛ y1 = R* cos (angle1) ؛ x2 = R/2 *sin (angle2) ؛ y2 = R/2 *cos (angle2) ؛ بیضی (x1 ، y1 ، r/2 ، r/2) ؛ بیضی (x2 ، y2 ، r ، r) ؛ بیضی (-x1 ، -y1 ، r/2 ، r/2) ؛ بیضی (-x2 ، -y2 ، r ، r) ؛ بیضی (x1 ، -y1 ، r/2 ، r/2) ؛ بیضی (x2 ، -y2 ، r ، r) ؛ بیضی (-x1 ، y1 ، r/2 ، r/2) ؛ بیضی (-x2 ، y2 ، r ، r) ؛ سکته مغزی (255) ؛ سکته مغزی وزن (3) ؛ خط (x1 ، y1 ، x2 ، y2) ؛ خط (-x1 ، -y1 ، -x2 ، -y2) ؛ خط (x1 ، -y1 ، x2 ، -y2) ؛ خط (-x1 ، y1 ، -x2 ، y2) ؛ } [/cceN_cpp]

این مثال شامل هیچ دانشی فراتر از فصل قبلی ما نیست.

برای کدام امتیازها مطابقت دارد؟ کدام خط ها مطابقت دارد؟ من هم نمی توانم آن را درک کنم. اما به یاد دارم که از بخش کوچکی از کد مشتق شده است.

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

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

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

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

[cceN_cpp theme = "dawn"] float browX ، earD ، eyeD ، faceD ؛ void setup () {اندازه (500 ، 500) ؛ } void draw () {background (200، 0، 0)؛ browX = 150 + sin (frameCount / 30.0) *20 ؛ earD = 180 + sin (frameCount / 10.0) *20 ؛ eyeD = 60 + گناه (frameCount/30.0) *50 ؛ faceD = 300 ؛ سکته مغزی وزن (8) ؛ بیضی (175 ، 220 ، earD ، earD) ؛ بیضی (عرض - 175 ، 220 ، earD ، earD) ؛ rect (100 ، 100 ، faceD ، faceD) ؛ خط (browX ، 160 ، 220 ، 240) ؛ خط (عرض ابرو X ، 160 ، عرض 220 ، 240) ؛ پر (تصادفی (255) ، تصادفی (255) ، تصادفی (255)) ؛ بیضی (175 ، 220 ، eyeD ، eyeD) ؛ بیضی (عرض -175 ، 220 ، eyeD ، eyeD) ؛ پر (255) ؛ نقطه (عرض/2 ، ارتفاع/2) ؛ مثلث (170 - cos (frameCount / 10.0) * 20 ، 300 - sin (frameCount / 10.0) * 20 ، عرض - (170 + cos (frameCount / 10.0) * 20) ، 300 + sin (frameCount / 10.0) * 20 ، 250 ، 350) ؛ } [/cceN_cpp]

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

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

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

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

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

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

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

اگر س questionsالی دارید ، می توانید یک ایمیل به [email protected] ارسال کنید.

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