منحنى بيزير

منحني بيزير هو منحني يستخدم في الرسومات الحاسوبية لرسم الاشكال، الخاصة بالرسوم المتحركة باستخدام CSS و ايضا في اماكن اخري.

هناك اشياء بسيطة تستحق الدراسة مرة واحدة ثم بعد ذلك تشعر بالارتياح في عالم الرسومات المتجهةو علوم الرسوم المتحركة المتقدمة.

نقاط التحكم

منحنى بيزير يتم تعريفه من خلال نقاط التحكم.

قد يكون هناك 2 أو 3 أو 4 أو أكثر من نقطة تحكم .

مثال علي ، منحني بنقطتين:

منحني بثلاث نقاط:

منحني باربع نقاط:

إذا نظرت بتمعن إلى هذه المنحنيات ، يمكنك ملاحظة ذلك على الفور:

1. النقاط ليست دائما علي المنحني. هذا طبيعي تمامًا ، سنرى لاحقًا كيف تم بناء المنحنى.

2. درجةالمنحنى يساوي عدد النقاط ناقص واحد. بالنسبة إلى نقطتين ، لدينا منحنى خطي (خط مستقيم) ، لثلاث نقاط – منحنى تربيعي (قطع مكافئ) ، لأربع نقاط – منحنى تكعيبي.

3. المنحني دائما بداخل الغلاف المحدب (convex hull) من نقاط التحكم :

   

Because of that last property, in computer graphics it’s possible to optimize intersection tests. If convex hulls do not intersect, then curves do not either. So checking for the convex hulls intersection first can give a very fast “no intersection” result. Checking the intersection of convex hulls is much easier, because they are rectangles, triangles and so on (see the picture above), much simpler figures than the curve.

تظهر القيمة الرئيسية لمنحنيات بيزير للرسم عن طريق تحريك النقاط التي يتغير بها المنحنى بشكل بديهي*.

حاول تحريك نقاط التحكم باستخدام الماوس في المثال أدناه:

كما تلاحظ ، فإن المنحنى يمتد على طول خطوط الظل 1 ← 2 و 3 ← 4.

بعد بعض التدريب ، يصبح من الواضح كيفية وضع النقاط للحصول على المنحنى المطلوب. ومن خلال ربط عدة منحنيات ، يمكننا عمليًا الحصول على أي شيء.

وهنا بعض الأمثلة:

خوارزمية دي كاستيلجاو(De Casteljau’s algorithm)

هناك معادلة رياضية لمنحنيات بيزير ، لكن دعونا نغطيها لاحقًا ، لأن خوارزمية دي كاستيلجاو (De Casteljau’s algorithm) مطابقة للتعريف الرياضي وتظهر بصريًا كيف يتم بناؤها.

لنرى أولاً مثال النقاط الثلاث.

إليك العرض التوضيحي والتفسير التالي.

يمكن تحريك نقاط التحكم (1و2و3) بواسطة الماوس. ثم اضغط على زر “تشغيل” لتشغيله.

خوارزمية دي كاستيلجاو لبناء منحني بيزير ثلاثي النقاط:

1. ارسم نقاط تحكم ، في العرض أعلاه تم تصنيفهم: 1, 2, 3.

2. قم ببناء شرائح بين نقاط التحكم 3 → 2 →1. في العرض أعلاه هم بني.

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 ستكون في منطقة الوسط ، عند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 حتي يتبقي نقطة واحدة.

هذه النقاط معا تشكل المنحني.

قم بتشغيل الأمثلة وإيقافها لرؤية الخطوط بوضوح وكيفية إنشاء المنحنى.

منحنى الذي يشبه y=1/t:

المنحني المتعرج يعمل بشكل جيد:

ايضا من الممكن صنع حلقة :

منحنى بيزير غير أملس ( هذا ممكن أيضًا):

إذا كان هناك شيء غير واضح في وصف الخوارزمية ، فالرجاء إلقاء نظرة على الأمثلة الحية أعلاه لمعرفة كيفية بناء المنحنى.

نظرًا لأن الخوارزمية تكرارية ، يمكننا بناء منحنيات بيزير بأي درجة نريد ، أي باستخدام 5 أو 6 نقاط تحكم أو أكثر. لكن من الناحية العملية ، فإن العديد من النقاط أقل فائدة. عادةً ما نأخذ 2-3 نقاط ، وبالنسبة للخطوط المعقدة نلصق عدة منحنيات معًا ، وهذا أسهل في التطوير والحساب.

رياضيات

يمكن وصف منحنى بيزير باستخدام صيغة رياضية.

كما رأينا – ليست هناك حاجة في الواقع لمعرفة ذلك ، يقوم معظم الناس برسم المنحنى عن طريق تحريك النقاط بالماوس. ولكن إذا كنت مهتمًا بالرياضيات – ها هي.

بالنظر إلى إحداثيات نقاط التحكم Pi: أول نقطة تحكم لها إحداثيات P1 = (x1, y1), الثانية: P2 = (x2, y2), وهكذا ، يتم وصف إحداثيات المنحنى بواسطة المعادلة التي تعتمد على معامل t من المقطع[1،0].

• صيغة منحنى ذو نقطتين:

  P = (1-t)P1 + tP2

• منحني 3 نقاط:

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

• منحني 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

بدلا من x3, y3, x2, y2, x1, y1 يجب أن نضع إحداثيات 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 من خلال نقاط التحكم الخاصة بهم.

رأينا تعريفين لمنحنيات بيزيير:

1. باستخدام عملية الرسم: خوارزمية دي كاستيلجاو(De Casteljau’s algorithm).
2. استخدام المعدلات الرياضية.

خصائص جيدة لمنحنيات بيزير:

• يمكننا رسم خطوط ناعمة بالماوس عن طريق تحريك نقاط التحكم.
• يمكن صنع الأشكال المعقدة من عدة منحنيات بيزيير.

الاستخدام:

• في رسومات الحاسوب ، النمذجة ، محررات الرسوم المتجهة. الخطوط ايضا ممكن ان توصف بمنحنيات بيزير.
• في تطوير الويب – للرسومات على Canvas وبتنسيق SVG. بالمناسبة ، الأمثلة “الحية” أعلاه مكتوبة في SVG. إنها في الواقع مستند SVG واحد يتم إعطاؤه نقاطًا مختلفة كمعاملات. يمكنك فتحه في نافذة منفصلة ومشاهدة المصدر: demo.svg.
• في الرسوم المتحركة لدى CSS لوصف مسار وسرعة الرسوم المتحركة.