Bezier منحنی

منحنی های Bezier در گرافیک کامپیوتری برای ترسیم اشکال، برای انیمیشن های CSS و در بسیاری از مکان های دیگر استفاده می شود.

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

نقاط کنترلی

یگ bezier curve توسط control points تعریف می شود.

ممکن است 2، 3، 4 یا بیشتر وجود داشته باشد.

به عنوان مثال منحنی دو نقطه:

منحنی سه نقطه:

منحنی چهار نقطه:

اگر به این منحنی ها دقت کنید، بلافاصله متوجه می شوید:

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

2. ترتیب منحنی برابر است با تعداد نقاط منهای یک. برای دو نقطه یک منحنی خطی داریم (این یک خط مستقیم است)، برای سه نقطه – منحنی درجه دوم (پارابولیک)، برای چهار نقطه – منحنی مکعبی.

3. یک منحنی همیشه در داخل بدنه محدب نقاط کنترل است:

   

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

مقدار اصلی منحنی های Bezier برای ترسیم – با جابجایی نقاط منحنی در حال تغییر است به صورت واضح.

سعی کنید نقاط کنترل را با استفاده از ماوس در مثال زیر جابجا کنید:

همانطور که متوجه شدید، منحنی در امتداد خطوط مماسی 1 → 2 و 3 → 4 کشیده می شود.

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

در اینجا چند نمونه آورده شده است:

De Casteljau’s الگوریتم

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

ابتدا بیایید مثال 3 امتیازی را ببینیم.

در اینجا نسخه ی نمایشی است، و توضیح در ادامه.

نقاط کنترل (1،2 و 3) را می توان توسط ماوس جابجا کرد. دکمه play را فشار دهید تا اجرا شود.

الگوریتم De Casteljau برای ساخت منحنی 3 نقطه ای بزیر:

1. نقاط کنترل را ترسیم کنید. در نسخه ی نمایشی بالا آنها با برچسب: 1، 2، 3.

2. ساخت بخش ها بین نقاط کنترل 1 → 2 → 3. در نسخه نمایشی بالا آنها قهوه ای هستند.

3. پارامتر t از0 به 1 حرکت می کند. در مثال بالا از مرحله 0.05 استفاده شده است: حلقه از 0، 0.05، 0.1، 0.15، ... 0.95، 1 می رود.

   برای هر یک از این مقادیر t:

   • در هر قطعه قهوه ای، نقطه ای را در فاصله متناسب با “t” از ابتدای آن در نظر می گیریم. از آنجایی که دو بخش وجود دارد، ما دو نقطه داریم.

     به عنوان مثال، برای t=0 – هر دو نقطه در ابتدای بخش ها خواهند بود و برای t=0.25 – در 25% طول قطعه از ابتدا، برای t=0.5 – 50 % (وسط)، برای t=1 – در انتهای بخش ها.

   • نقاط را به هم وصل کنید. در تصویر زیر بخش اتصال آبی رنگ آمیزی شده است.

For t=0.25	For t=0.5

4. اکنون در بخش آبی یک نقطه از فاصله متناسب با همان مقدار t بگیرید. یعنی برای t=0.25 (تصویر سمت چپ) یک نقطه در انتهای ربع سمت چپ بخش داریم و برای t=0.5 (تصویر سمت راست) – در وسط قطعه. در تصاویر بالای آن نقطه قرمز است.

5. از آنجایی که t از 0 تا 1 اجرا می‌شود، هر مقدار ‘t’ یک نقطه به منحنی اضافه می‌کند. مجموعه چنین نقاطی منحنی بزیه را تشکیل می دهد. در تصاویر بالا قرمز و سهمی است.

این یک روند برای 3 امتیاز بود. اما برای 4 امتیاز همینطور است.

نسخه ی نمایشی برای 4 امتیاز (امتیازها را می توان با ماوس جابه جا کرد):

الگوریتم 4 نقطه:

• نقاط کنترل را بر اساس بخش ها وصل کنید: 1 → 2، 2 → 3، 3 → 4. 3 قطعه قهوه ای وجود خواهد داشت.
• برای هر ‘t’ در بازه ‘0’ تا ‘1’:
  • از ابتدا روی این بخش ها در فاصله متناسب با «t» امتیاز می گیریم. این نقاط به هم متصل می شوند، به طوری که ما دو قطع سبز داریم.
  • در این بخش ها نقاطی متناسب با t می گیریم. ما یک بخش آبی دریافت می کنیم.
  • در قسمت آبی یک نقطه متناسب با t می گیریم. در مثال بالا قرمز است.
• این نقاط با هم منحنی را تشکیل می دهند.

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

با توجه به N از نقاط کنترل:

1. ما آنها را به هم وصل می کنیم تا در ابتدا بخش های N-1 را بدست آوریم.
2. سپس برای هر ‘t’ از ‘0’ تا ‘1’، روی هر قسمت در فاصله متناسب با ‘t’ یک نقطه می گیریم و آنها را به هم وصل می کنیم. بخش N-2 وجود خواهد داشت.
3. مرحله 2 را تکرار کنید تا تنها یک نقطه باقی بماند.

این نقاط منحنی را می سازند.

Run and pause examples to clearly see the segments and how the curve is built.

منحنی که شبیه «y=1/t» است:

نقاط کنترل زیگزاگ نیز به خوبی کار می کنند:

ایجاد یک حلقه امکان پذیر است:

یک منحنی غیر صاف Bezier (آره، این هم ممکن است):

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

از آنجایی که الگوریتم بازگشتی است، می توانیم منحنی های Bezier را با هر ترتیبی بسازیم، یعنی: با استفاده از 5، 6 یا بیشتر نقطه کنترل. اما در عمل بسیاری از نکات کمتر مفید هستند. معمولاً 2-3 نقطه می گیریم و برای خطوط پیچیده چندین منحنی را به هم می چسبانیم. توسعه و محاسبه آن ساده تر است.

ریاضی

منحنی بزیه را می توان با استفاده از یک فرمول ریاضی توصیف کرد.

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

با توجه به مختصات نقاط کنترل Pi: اولین نقطه کنترل دارای مختصات P1 = (x1</ sub>، y1)، دوم: P2 = (x2، y2 )، و به همین ترتیب، مختصات منحنی با معادله ای توصیف می شوند که به پارامتر ‘t’ از بخش ‘[0،1]’ بستگی دارد.

• فرمول منحنی 2 نقطه ای:

  P = (1-t)P1 + tP2

• برای 3 نقطه کنترل:

  P = (1−t)2P1 + 2(1−t)tP2 + t2< /sup>P3

• برای 4 نقطه کنترل:

  P = (1−t)3P1 + 3(1−t)2tP2 +3(1−t)t2P3 + t3P4

اینها معادلات برداری هستند. به عبارت دیگر، می‌توانیم x و y را به جای P قرار دهیم تا مختصات مربوطه را بدست آوریم.

به عنوان مثال، منحنی 3 نقطه ای توسط نقاط (x,y) تشکیل می شود که به صورت زیر محاسبه می شود:

• x = (1−t)2x1 + 2(1−t)tx2 + t2x3
• y = (1−t)2y1 + 2(1−t)ty2 + t2y3

به جای x1، y1، x2، y2، x3 ، y3 باید مختصات 3 نقطه کنترل را قرار دهیم، و سپس با انتقال ‘t’ از ‘0’ به ‘1’، برای هر مقدار ‘t’ ‘(x,y)’ از منحنی را خواهیم داشت.

به عنوان مثال، اگر نقاط کنترل (0،0)، (0.5، 1) و (1، 0) باشند، معادلات تبدیل می شوند:

• x = (1−t)2 * 0 + 2(1−t)t * 0.5 + t2 * 1 = (1-t)t + t2 = t
• y = (1−t)2 * 0 + 2(1−t)t * 1 + t2 * 0 = 2(1-t)t = –2t2 + 2t

اکنون که t از 0 تا ‘1’ اجرا می شود، مجموعه مقادیر (x,y) برای هر t منحنی چنین نقاط کنترلی را تشکیل می دهد.

خلاصه

منحنی های Bezier با نقاط کنترل آنها تعریف می شوند.

ما دو تعریف از منحنی های Bezier دیدیم:

1. استفاده از فرآیند ترسیم: الگوریتم De Casteljau.
2. استفاده از فرمول های ریاضی.

خواص خوب منحنی های Bezier:

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

استفاده:

• در گرافیک کامپیوتری، مدل سازی، ویرایشگرهای گرافیکی برداری. فونت ها با منحنی های Bezier توصیف می شوند.
• در توسعه وب – برای گرافیک روی بوم و در قالب SVG. به هر حال، مثال های ‘زنده’ بالا در SVG نوشته شده اند. آنها در واقع یک سند SVG هستند که نقاط مختلفی به عنوان پارامتر به آنها داده می شود. می توانید آن را در یک پنجره جداگانه باز کنید و منبع را ببینید: demo.svg.
• در انیمیشن CSS برای توصیف مسیر و سرعت انیمیشن.