تابع arc در Processing – ترسیم یک کمان (قوس)

تابع arc در Processing، این امکان را به ما می‌دهد تا به سادگی بتوانیم یک شکل قوس (کمان) مانندی را ترسپیم کنیم! البته با این تابع، می‌توان دایره، نیم دایره و حتی بیضی نیز ترسیم کرد و علت آن را با توجه به توضیحاتی که در طول این مطلب خواهم داد، متوجه می‌شوید! پس در ادامه با فول کده همراه باشید.

راهنما

سینتکس و ساختار حالت‌های مختلف تابع:

arc(a, b, c, d, start, stop)

ورودی‌ها:

• a (از نوع float): مقدار x مبداء مختصات قوس
• b (از نوع float): مقدار y مبداء مختصات قوس
• c (از نوع float): عرض قوس
• d (از نوع float): ارتفاغ قوس
• start (از نوع float): زاویه‌ی شروع (بر اساس رادیان)
• stop (از نوع float): زاویه‌ی پایان (براساس رادیان)

خروجی: void (ندارد)

در واقع این تابع، با دریافت یک مبداء مختصات، عرض و ارتفاع، یک بیضی را در نظر می‌گیرد! سپس به کمک start و stop، فقط آن بخش از بیضی را که مشخص می‌کنیم، نمایش می‌دهد!

مثال‌‌ها

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

مثال 1:

arc(50, 55, 50, 50, 0, HALF_PI); // کمان اول
noFill();
arc(50, 55, 60, 60, HALF_PI, PI); // کمان دوم
arc(50, 55, 70, 70, PI, PI+QUARTER_PI); // کمان سوم
arc(50, 55, 80, 80, PI+QUARTER_PI, TWO_PI); // کمان چهارم

مثال 2:

arc(50, 50, 80, 80, 0, PI+QUARTER_PI, OPEN);

مثال 3:

arc(50, 50, 80, 80, 0, PI+QUARTER_PI, CHORD);

مثال 4:

arc(50, 50, 80, 80, 0, PI+QUARTER_PI, PIE);

مثال 5: تصور کنید که می‌خواهیم شکل زیر را ترسیم کنیم! که در آن، چهار قوس از مرکز صفحه و به صورت تمام صفحه ترسیم شده است؛ و همچنین در اینجا، به جای رادیان، از مقدار درجه استفاده خواهیم کرد تا مفهوم زاویه‌ی start و stop را بهتر متوجه شوید. (البته درجه را به کمک متدهایی که در بالا معرفی شد، به رادیان تبدیل خواهیم کرد).

به صورت زیر عمل می‌کنیم:

background(255);
fill(255, 0, 0);
arc(width/2, height/2, width, height, (float) Math.toRadians(0)  , (float) Math.toRadians(90));
fill(0, 255, 0);
arc(width/2, height/2, width, height, (float) Math.toRadians(90) , (float) Math.toRadians(180));
fill(0, 0, 255);
arc(width/2, height/2, width, height, (float) Math.toRadians(180), (float) Math.toRadians(270));
fill(0, 0, 0);
arc(width/2, height/2, width, height, (float) Math.toRadians(270), (float) Math.toRadians(360));

با متد background و fill که طبیعتا باید از قبل آشنایی داشته باشید؛ background برای مشخص کردن رنگ پس‌زمینه بوده و fill نیز برای مشخص کردن رنگ داخل شکل‌های ترسیمی می‌باشد. اما در مورد arc:

1. از آنجایی که مرکز مختصات تمامی قوس‌ها، در وسط صفحه خواهد بود؛ بنابراین، عرض و ارتفاع صفحه را بر دو تقسیم می‌کنیم. (width و height، شامل عرض و ارتفاع صفحه است.)
2. در اینجا، تمامی قوس‌ها بایستی به صورت تمام صفحه ترسیم شوند؛ و از آنجایی که مرکز تمامی قوس‌ها در وسط صفحه قرار دارد، بنابراین از width و height صفحه برای width و height قوس‌ها استفاده می‌کنیم تا کل منطقه را پوشش دهند؛ اما شاید برایتان سوال شود که چرا آنها را بر دو تقسیم نمی‌کنیم؟! برای پاسخ به این سوال مهم، فرض کنید عرض و ارتفاع صفحه برابر 500 است؛ و اگر بخواهیم قوسی را از مرکز ترسیم کنیم، x=250 و y=250 خواهد شد (نصف عرض و ارتفاع صفحه است)! حالا اگر عرض قوس را 100 در نظر بگیریم، این 100 بر دو تقسیم شده و 50 تای آن برای راست مبداء مختصات قوس و 50 تای آن نیز برای چپ مبداء مختصات در نظر گرفته می‌شود! و از آنجایی که در بالا گفتیم که “تابع arc در واقع ابتدا یک دایره را با توجه به مختصات و طول و عرض در نظر گرفته و سپس تنها بخشی از آن دایره که توسط start و stop مشخص شده است را نمایش می‌دهد”، بنابراین این توضیح را بهتر درک خواهید کرد. البته در مثال 6 نیز با رسم یک دایره، به درک کامل‌تر این توضیحات خواهیم پرداخت.
3. زاویه‌ها را در بالا، به صورت درجه‌ای تنظیم کرده‌ایم! 0 به 90، 90 به، 180، 180 به 270 و 270 به 360! اما من برای اینکه بتوانید محل‌های شروع و پایان این زاویه‌ها را بهتر درک کنید، پیشنهاد می‌کنم مقدار 0 را به 45 تغییر دهید! سپس خواهید دید که قوس قرمز رنگ از کجا ترسیم می‌شود و بدین ترتیب می‌توانید متوجه شوید که 0 دقیقا کجاست؛ و در نهایت، بقیه‌ی مقادیر را هم خودتان به سادگی درک خواهید کرد.

مثال 6: این مثال، رسم یک دایره به کمک arc است! و هدف آن نیز درک بهتر مثال قبل می‌باشد:

برای رسم، به صورت زیر عمل می‌کنیم:

arc(width/2, height/2, width, height, (float) Math.toRadians(0), (float) Math.toRadians(360));

در مورد مختصات که توضیحات کافی در مثال قبل داده شد؛ اما در اینجاست که آن توضیح دوم مثال قبلی کامل‌تر می‌شود!

یک دایره، برابر با 360 درجه است و بنابراین قوس ما باید از 0 تا 360 درجه را به طور کامل نمایش دهد! یعنی یک دایره‌ی کامل! و اگر فرض کنیم که عرض و ارتفاع صفحه هردو 500 باشند، مرکز 250,250 خواهد شد! با این حال، وقتی عرض و ارتفاع صفحه را به عنوان عرض و ارتفاع قوس در نظر بگیریم:

• برای عرض: 250 تا در سمت راست مبداء مختصات قوس و 250 تا در سمت چپ آن ترسیم می‌شود.
• برای طول: 250 تا در سمت بالای مبداء مختصات قوس و 250 تا در پایین آن ترسیم می‌شود.

و در واقع، شعاع نیز برابر 250 خواهد شد!

اگر چنانچه توضیحات گنگی در این مطلب وجود دارد، لطفا از طریق نظرات اطلاع دهید تا آن را واضح‌تر بیان کنم. 🙂