‫كلية التقنية الصناعية‬

‫قسم الهندسة االلكترونية شعبة تقنية المعلومات‬

‫الرسم بالحاسوب‬
‫‪Computer Graphics‬‬
‫خريف ‪7102-7102‬‬

‫أ‪ .‬فاطمة علي المحجوب‬

 ‫الرسم بالحاسوب ‪Computer Graphics‬‬
‫ا‪ .‬فاطمة علي المحجوب‬ ‫المحاضرة ‪ :1‬لمحة عامة عن المنهج‬

‫مقرر الرسم بالحاسوب‬

‫توزيع المحاضرات‬

‫الرسم بالحاسوب‬ ‫ت‪.‬أ ‪218‬‬

‫األسبقيات‬ ‫س‪ .‬عملي‬ ‫س‪ .‬تمرين‬ ‫س‪ .‬نظري‬ ‫الوحدات‬

‫برمجة شيئية‬ ‫‪7‬‬ ‫‪0‬‬ ‫‪7‬‬ ‫‪3‬‬

‫هدف المقرر‬

‫يهدف هذا المقرر إلى تعريف الطالب بأساسيات الرسم بالحاسوب ‪.Computer graphics‬‬
‫والهدف الرئيسي هو تعريف الطالب بأهم الخوارزميات المستخدمة إلظهار البيانات بشكل مرئي‬
‫على الحاسوب‪.‬‬

‫متطلبات المقرر‬

‫أساسيات البرمجة‪ ،‬هياكل بيانات‪ ،‬وأساسيات الجبر الخطي والمصفوفات‪.‬‬

‫مفردات المنهج‪ :‬الجزء النظري‬

‫الموضوع‬ ‫م‬
‫مقدمة عن الرسم بالحاسوب‬ ‫‪.0‬‬
‫رسم األشكال األساسية‪ :‬خوارزميات رسم الخطوط ‪Line Drawing algorithm‬‬ ‫‪.7‬‬
‫رسم األشكال األساسية‪ :‬خوارزميات رسم الدوائر ‪Circle Drawing Algorithm‬‬ ‫‪.8‬‬
‫خوارزميات تعبئة األشكال ‪Filling Algorithm‬‬ ‫‪.4‬‬
‫خوارزميات القص ‪Clipping Algorithm‬‬ ‫‪.5‬‬
‫التحويالت الهندسية ‪ :Transformations‬نظام المحاور المتجانسة‬ ‫‪.6‬‬
‫التحويالت الهندسية ثالثية البعد‬ ‫‪.2‬‬
‫االسقاط المنظوري والمتعامد ‪Orthogonal and Perspective Projections‬‬ ‫‪.2‬‬

‫‪2‬‬
 ‫الرسم بالحاسوب ‪Computer Graphics‬‬
‫ا‪ .‬فاطمة علي المحجوب‬ ‫المحاضرة ‪ :1‬لمحة عامة عن المنهج‬
‫الجزء العملي‬

‫الموضوع‬ ‫م‬
‫مكتبة الرسم ‪OpenGL‬‬ ‫‪.0‬‬
‫رسم أشكال ثنائية البعد‬ ‫‪.7‬‬
‫رسم الدوائر واألشكال المنحنية‬ ‫‪.8‬‬
‫معالجة الحدث (الفارة ولوحة المفاتيح والحركة)‬ ‫‪.4‬‬
‫استخدام التحويالت الهندسية‬ ‫‪.5‬‬
‫الرسوم المتحركة ‪Animation‬‬ ‫‪.6‬‬
‫استخدام القوائم‬ ‫‪.2‬‬

‫توزيع الدرجات‬
‫‪%22‬‬ ‫امتحان نصفي نظري‬
‫‪%22‬‬ ‫امتحان عملي‬
‫‪%52‬‬ ‫واجبات عملية‬
‫‪%02‬‬ ‫االمتحان النهائي‬

‫واجبات‪:‬‬
‫تطبيق البكمان‬ ‫الواجب ‪1‬‬
‫استخدام التحويالت الهندسية لتصميم ساعة تماثلية‬ ‫الواجب ‪2‬‬
‫تطبيق األسهم‬ ‫الواجب ‪3‬‬
‫محاكاة بسيطة للعبة سناك ‪ snake‬من خالل تصوير جسم الحية على شكل‬ ‫الواجب ‪4‬‬
‫رأس وجسم‪ .‬ومع النقر على الفارة يزداد حجم الحية بمقدار ثابت‪.‬‬
‫التحكم في لون مستطيل بالزيادة والنقصان لدرجات األحمر واألخضر‬ ‫الواجب ‪5‬‬
‫واألزرق من خالل قائمة منبثقة‪.‬‬

‫‪3‬‬
 ‫الرسم بالحاسوب ‪Computer Graphics‬‬
‫ا‪ .‬فاطمة علي المحجوب‬ ‫المحاضرة ‪ :0‬مقدمة عن الرسم بالحاسوب‬

‫مقدمة عن الرسم بالحاسوب‬

‫‪Computer Graphics‬‬

‫إن الرسم بالحاسوب هو إحدى أهم مظاهر القدرة الضخمة والفائقة للحاسوب‪ ،‬والتي أثرت‬
‫حياتنا بالكثير من التطبيقات وفي مجاالت مختلفة‪ .‬ويعنى هذا المجال من علوم الحاسوب بالتعامل‬
‫مع الرسوم والصور واألفالم وكافة المجاالت التي تستخدم فيها‪ .‬ولقد أدى التطور الكبير في‬
‫استخدام الرسوم إلى ثورة تقنية هائلة في صناعة الحواسيب بإدخال الرسوم والصور إلى الحاسوب‬
‫والذي يسر طريقة استخدام الحاسوب لجميع الناس سواء المتخصصين أو غيرهم بشكل كبير جدًا‪،‬‬
‫وساعد على زيادة انتشار الحاسوب بحيث أصبح جزء ال يتج أز من حياتنا اليومية‪ ،‬وأصبحت‬
‫الصور والرسومات في الحاسوب جزء رئيسي من نظام التشغيل ومن التطبيقات وكافة البرامج‪.‬‬

‫أن حاسة البصر لإلنسان هي أهم حواسه‪ ،‬فاإلنسان يتعامل مع الصور بطريقة أفضل‬
‫وأسرع من النصص المكتوبة ومن الكالم المنطوق‪ ،‬فالصورة خير من ألف كلمة‪ .‬كما أن الرسوم‬
‫تثري القطع النصية لتجعلها أقرب للواقع‪.‬‬

‫لقد أحدث حاسوب آبل ‪ Apple‬ثورة هائلة بإصداره لنظا م التشغيل الماكنتوش ‪ Macintosh‬الذي‬
‫امتلك أول واجهة رسومية‪ ،‬وسمي بصديق المستخدم ‪ User Friendly‬مما أحدث في تغير باقي‬
‫أنظمة التشغيل مثل الويندوز وتحولها من واجهة نصية إلى واجهة رسومية‪.‬‬

‫كما أن تطور استخدام الحاسوب ساعد على تطور مجاالت كثيرة ومهمة‪ ،‬وفتح آفاق أوسع‬
‫الستخدامات جديدة للحاسوب وسهل استخدام مهام كثيرة ومحاكاة لكثير من العمليات مستحيلة‬
‫التطبيق‪.‬‬

‫‪0‬‬
 ‫الرسم بالحاسوب ‪Computer Graphics‬‬
‫ا‪ .‬فاطمة علي المحجوب‬ ‫المحاضرة ‪ :0‬مقدمة عن الرسم بالحاسوب‬

‫واجهة لنظام التشغيل ‪ DOS‬وأخرى لنظام التشغيل ‪Macintosh‬‬

‫ما هو الرسم بالحاسوب؟‬

‫الرسم بالحاسوب هو إنشاء تصويري ألشياء حقيقية أو وهمية من نماذج قائمة على الحاسوب‪.‬‬
‫وهو تقنية للتواصل والتفاعل مع المعلومات بصورة مرئية‪ .‬كما يمكن تعريفه بأنه استخدام‬
‫الحاسوب لصنع أو إنشاء وعرض الصور‪.‬‬

‫‪2‬‬
 ‫الرسم بالحاسوب ‪Computer Graphics‬‬
‫ا‪ .‬فاطمة علي المحجوب‬ ‫المحاضرة ‪ :0‬مقدمة عن الرسم بالحاسوب‬

‫المجاالت المتعلقة بالرسم بالحاسوب‪:‬‬

‫‪ ‬معالجة الصور الرقمية‪.‬‬

‫‪ ‬التصوير ثالثي األبعاد‪.‬‬
‫‪ ‬المرئيات ‪.visualization‬‬
‫‪ ‬الواقع االفتراضي ‪.virtual reality‬‬
‫‪ ‬تفاعل المستخدم ‪.user interaction‬‬

‫العناصر األساسية للرسم بالحاسوب‪:‬‬

‫‪ .1‬النمذجة ‪ :Modeling‬تمثيل الخيارات‪ ،‬العمليات الهندسية ‪.geometric processing‬‬

‫‪ .2‬التصيير ‪ :Rendering‬التحويالت الهندسية‪ ،‬الرؤية ‪ ،Visibility‬محاكاة الضوء‪.‬‬
‫‪ .3‬التفاعل ‪ :Interaction‬أجهزة اإلدخال‪ /‬اإلخراج‪ ،‬أدوات‪.‬‬
‫‪ .4‬الرسوم المتحركة ‪ :Animation‬شخصيات تحاكي الواقع‪ ،‬الظواهر الطبيعية‪ ،‬البيئة‬
‫المحيطة‪.‬‬

‫مجاالت استخدام رسوم الحاسوب‬

‫‪ .2‬التصميم الهندسي اإلنشائي في مجال‬ ‫‪ .1‬الصحافة وطباعة المجالت والصحف‬

‫العمارة واإلنشاء والبناء‪.‬‬ ‫والكتب‪.‬‬

‫‪6‬‬
 ‫الرسم بالحاسوب ‪Computer Graphics‬‬
‫ا‪ .‬فاطمة علي المحجوب‬ ‫المحاضرة ‪ :0‬مقدمة عن الرسم بالحاسوب‬

‫‪ .5‬التصوير الطبي لتشخيص األمراض‪،‬‬ ‫‪ .3‬التصميم الهندسي بالحاسوب‪ ،‬تصميم‬

‫مثل‪ :‬التصوير المقطعي‪ ،‬األشعة فوق‬ ‫الماكينات‪ ،‬السيارات والطائرات واألجهزة‬
‫الصوتية‪ ،‬المناظير الطبية‪.‬‬ ‫الميكانيكية المختلفة‪.‬‬

‫‪ .6‬االعالنات والدعايات التجارية‪ ،‬مثل‪:‬‬ ‫الكهربائي‬ ‫الهندسي‬ ‫‪ .4‬التصميم‬

‫دعايات التلفزيون‪ ،‬اللوحات اإلعالنية‬ ‫واإللكتروني‪ ،‬لتصميم األجهزة الكهربائية‬
‫الثابتة والمتحركة‪.‬‬ ‫والدوائر اإللكترونية المختلفة‪.‬‬

‫‪7‬‬
 ‫الرسم بالحاسوب ‪Computer Graphics‬‬
‫ا‪ .‬فاطمة علي المحجوب‬ ‫المحاضرة ‪ :0‬مقدمة عن الرسم بالحاسوب‬

‫‪ .9‬مجال األلعاب المختلفة عبر‬ ‫‪ .7‬إنتاج األفالم الطويلة والقصيرة الدرامية‬

‫الحاسوب‪.‬‬ ‫وتصويرها‪ .‬وانتاج األفالم التعليمية‬
‫واألفالم التوضيحية والدراسية باستخدام‬
‫رسوم الكرتون من الرسوم الثنائية والثالثية‬
‫البعد الثابتة والمتحركة‪.‬‬

‫‪ .8‬المحاكاة والواقع االفتراضي وخاصة في‬

‫باإلضافة إلى مجاالت أخرى موجودة أو‬ ‫التدريب والتأهيل‪ ،‬مثل قيادة الطائرات‬
‫مستقبلية ال يتسع المجال لذكرها‪.‬‬ ‫والسفن والسيارات ورواد الفضاء واجراء‬
‫التجارب العلمية‪.‬‬

‫‪8‬‬
 ‫الرسم بالحاسوب ‪Computer Graphics‬‬
‫ا‪ .‬فاطمة علي المحجوب‬ ‫المحاضرة ‪ :0‬مقدمة عن الرسم بالحاسوب‬

‫البرامج والتطبيقات المستخدمة للرسم بالحاسوب‬

‫أن برامج الرسم والصور هي األداة التي يستخدمها أي فنان‪ ،‬أو مهندس‪ ،‬أو مصور‪ ،‬أو صحفي‪،‬‬
‫أو مبرمج لبناء وتصميم الرسوم وتحريرها ومعالجتها‪ .‬وهذه البرامج تحتوي على كافة األدوات‬
‫والمستلزمات لتصميم وانشاء رسوم هندسية وألعاب ورسوم حرة بدال من القلم والورقة‪ .‬كما تحتوي‬
‫هذه البرامج على أدوات لتخزين الصور وتعديلها وتغيير حجمها ومعالجتها مثل‪ :‬دمج الصور‬
‫وتلوينها وتغيير ألوانها والتحكم بدرجات اإلضاءة والتباين وغيرها‪.‬‬

‫يمكن تقسيم البرامج والتطبيقات الخاصة بالرسوم والصور إلى المجاالت التالية‪:‬‬

‫‪ .0‬برامج الرسوم الحرة والتصميم بالحاسوب ‪CAD‬‬

‫تتراوح هذه البرامج من بسيطة مثل‪ :‬برامج الرسم والتلوين لألطفال إلى البرامج األكثر تعقيدا‬
‫التخصصية مثل برامج معالجة الصور وانشاء الرسوم االحترافية‪ ،‬والتصميم الهندسي‪ ،‬والمعماري‬
‫واإلنشائي‪ ،‬وجميعها تعتمد على العمليات الحسابية والهندسية والفنية مثل تصميم الجسور والمباني‬
‫والطائرات والسيارات واألجهزة اإللكترونية والماكينات‪.‬‬

‫‪ .7‬برامج معالجة الصور ‪Photo Processing‬‬

‫وهي البرامج والتطبيقات المستخدمة في معالجة الصور المختلفة التي تأتي من الكامي ار الرقمية‬
‫أو من الماسح الضوئي‪ .‬وتسمح هذه البرامج بمعالجة الصور وتحريرها والقيام بعمليات مختلفة‬

‫‪9‬‬
 ‫الرسم بالحاسوب ‪Computer Graphics‬‬
‫ا‪ .‬فاطمة علي المحجوب‬ ‫المحاضرة ‪ :0‬مقدمة عن الرسم بالحاسوب‬

‫عليها مثل تخزينها وتغيير حجمها ودقة عرضها ودمج الصور وتغيير السطوع واإلضاءة‪ .‬كما‬
‫يمكن تعديل األلوان في الصور لتظهر بغير ألوانها الحقيقية‪.‬‬

‫‪ .8‬برامج الواقع االفتراضي ‪Virtual Reality‬‬

‫وهي برامج حديثة تستخدم تقنيات حديثة مثل النظارات والشاشات الثالثية األبعاد على الجدران‪،‬‬
‫أجهزة التحسس والفارة الخاصة‪ ،‬وبعض األدوات التفاعلية المختلفة‪ .‬وجميع هذه التقنيات معتمدة‬
‫على ثالثة أشياء وهي الغمس أو االندماج‪ ،‬التفاعل‪ ،‬والتخيل للمستخدم‪ .‬بحيث تتكامل جميعها‬
‫ليشعر المستخدم وكأنه منغمس كليًا في عالم افتراضي جديد يتفاعل معه ويشعر به وكأنها‬
‫حقيقة ملموسة‪.‬‬

‫تستخدم هذه النوعية من البرامج في محاكاة التطبيقات العلمية صعبة التخيل أو التطبيق‪ ،‬مثل‬
‫المختبرات االفتراضية إلجراء التجارب الكيميائية والفيزيائية‪ ،‬باإلضافة إلى محاكاة قيادة‬
‫الطائرات والسيارات والسفن‪ .‬وأيضا صياغة وتخيل بعض الصور االفتراضية للنجوم والكواكب‬
‫والكون التي تأتي بياناتها من الفضاء والتلسكوبات المختلفة‪.‬‬

‫‪52‬‬
 ‫الرسم بالحاسوب ‪Computer Graphics‬‬
‫ا‪ .‬فاطمة علي المحجوب‬ ‫المحاضرة ‪ :0‬مقدمة عن الرسم بالحاسوب‬

‫كما تستخدم هذه البرامج في الطب مثل إجراء الكشوفات والتشخيص واجراء العمليات بواسطة‬
‫المناظير واستخدام المسح الم قطعي للمخ ولجسم اإلنسان‪ .‬كما تستخدم في ألعاب الكمبيوتر‬
‫الثنائية والثالثية البعد‪.‬‬

‫‪ .4‬برامج الرسوم والصور المتحركة وانتاج األفالم‬

‫تستخدم رسوم الحاسوب في إنتاج الرسوم المتحركة لألطفال والجماالت التعليمية والعلمية كما‬
‫تستخدم في انتاج االعالنات والدعايات واألفالم التسجيلية والدراما‪.‬‬

‫‪55‬‬
 ‫الرسم بالحاسوب ‪Computer Graphics‬‬
‫ا‪ .‬فاطمة علي المحجوب‬ ‫المحاضرة ‪ :7‬تقنيات عرض الرسومات‬

‫تقنيات عرض الرسومات‬

‫‪Graphics Display Technologies‬‬

‫ال يخفى على أحد‪ ،‬أن أجهزة العرض تلعب الدور األساسي في تصميم وتطوير تطبيقات رسومات‬
‫الحاسوب الثنائية والثالثية األبعاد‪ ،‬ويعتمد عليها كليا لمعاينة ما تمت برمجته‪ .‬سيتم التعرف على‬
‫أهم وسائل العرض المستخدمة مع الحاسوب‪.‬‬

‫أنواع أجهزة عرض الرسومات‬

‫يمكن تصنيف شاشات العرض ‪ CRT‬وفقا لطريقة إظهار الصورة إلى نوعين‪ :‬شاشات العرض‬
‫المتجهة ‪ Vector displays‬والنقطية ‪.Raster displays‬‬

‫شاشات العرض المتجهة ‪Vector displays‬‬

‫تعتمد في عملها على ذراع إلكتروني ‪ electron beam‬لرسم الخطوط‪ .‬ويمكن للذراع االنحراف‬
‫العش وائي والحركة وفق االحداثي السيني والصادي‪ .‬ويستخدم هذا االسلوب مع راسم االشارة‬
‫‪.Oscilloscope‬‬

‫‪52‬‬
 ‫الرسم بالحاسوب ‪Computer Graphics‬‬
‫ا‪ .‬فاطمة علي المحجوب‬ ‫المحاضرة ‪ :7‬تقنيات عرض الرسومات‬

‫الشاشات النقطية ‪Raster Display‬‬

‫معظم أجهزة العرض الحديثة من هذا النوع‪ .‬ويمكن تصور الشاشة كمجموعة من الخطوط األفقية‪،‬‬
‫حيث يتم إضاءة كل خط عند مواضع منفصلة‪ ،‬لتظهر الشاشة على شكل شبكة ‪ raster grid‬من‬
‫النقاط ‪ spots‬يسمى كل موضع بكسل ‪ .Pixel‬وإلظهار الصور واألشكال يتم إضاءة شبكة‬
‫البكسالت بشكل تتابعي بترتيب مسح ‪ raster scan order‬كالتالي‪:‬‬

‫‪ ‬مسح صف واحد في كل مرة‬

‫‪ ‬مسح الصفوف من اليسار إلى اليمين‪.‬‬

‫كل حركة من اليسار إلى اليمين تسمى خط المسح ‪ .scan line‬يتم إيقاف القضيب ‪ beam‬خالل‬
‫االنتقال من صف آلخر للبدء من اليسار‪.‬‬

‫‪53‬‬
 ‫الرسم بالحاسوب ‪Computer Graphics‬‬
‫ا‪ .‬فاطمة علي المحجوب‬ ‫المحاضرة ‪ :7‬تقنيات عرض الرسومات‬

‫‪50‬‬
 ‫الرسم بالحاسوب ‪Computer Graphics‬‬
‫ا‪ .‬فاطمة علي المحجوب‬ ‫المحاضرة ‪ :7‬تقنيات عرض الرسومات‬

‫يتم فهرسة كل موضع بزوج من األرقام الصحيحة ‪ ،(i,j) integer‬يمثل ‪i‬‬

‫رقم العمود للشاشة أما ‪ j‬فيمثل رقم الصف‪.‬‬

‫دقة العرض ‪display resolution‬‬

‫تعرف دقة العرض بعدد المواضع المنفصلة على الشاشة‪ ،‬ويشار إليها‬
‫بحاصل ضرب األعمدة والصفوف ‪.Columns×rows‬‬

‫‪ ‬دقة العرض الشاشة المثالي هو‪ 1024×768:‬أو ‪1282×1224‬‬

‫نسبة الجانب ‪display aspect ratio‬‬

‫تعرف نسبة الجانب ‪ display aspect ratio‬بأنه النسبة بين الحجم األفقي والحجم العامودي‬
‫للشاشة )‪.(display aspect ratio = horizontal size: vertical size‬‬

‫‪ ‬والقيمة المثالية لشاشات عرض الحاسوب هي ‪4:3 or 5:4‬‬

‫‪ ‬وللتلفزيون العادي تساوي ‪4:3‬‬
‫‪ ‬ولتلفزيون الدقة العالية ‪ HDTV‬تساوي ‪16:9‬‬

‫دقة العرض ‪(dots per inch) dpi‬‬

‫تحسب قيمة ‪ dpi‬من الفراغ بين نقاط الشبكة‪.‬‬

‫‪ ‬وتتراوح قيمتها في الشاشات الحالية ما بين ‪72-130 dpi‬‬

‫‪ ‬أما الهواتف النقالة وأجهزة ‪ PDA‬يمكن أن تزيد عن ‪.200+ dpi‬‬
‫‪ ‬وفي خرج الطابعات الليزرية فتتراوح ما بين ‪.300-1200 dpi‬‬

‫‪52‬‬
 ‫الرسم بالحاسوب ‪Computer Graphics‬‬
‫ا‪ .‬فاطمة علي المحجوب‬ ‫المحاضرة ‪ :7‬تقنيات عرض الرسومات‬

‫تقنيات عمل الشاشات النقطية ‪Raster Display‬‬

‫توجد تقنيات عرض مختلفة مثل شاشات انبوبة الكاثود ‪ CRT‬وشاشة السائل الكريستال ‪LCD‬‬
‫وغيرها‪ .‬وتتفاوت هذه التقنيات من حيث جودة الصور وخبرة االستخدام‪ .‬وسيتم التعرف شاشات‬
‫انبوبة الكاثود ‪ CRT‬للتوضيح‪.‬‬

‫شاشة أنبوبة الكاثود )‪Cathode Ray Tube (CRT‬‬

‫تعتمد أنبوبة الكاثود في عملها على ظاهرة فيزيائية‪ ،‬تتمثل‬

‫في أن مادة الفسفور تشع ضوء إذا تم قصفها بسيل من‬
‫اإللكترونات ذات سرعة وجهد تكفي لتحفيز إلكترونات مادة‬
‫الفسفور واكسابها طاقة لتتحرر من حزمة التكافؤ إلى حزمة‬
‫الطاقة األعلى‪ ،‬وأثناء انطالقها للحزمة األعلى فإنها تطلق‬
‫مجموعة من الفوتونات التي تمثل الضوء المنبعث‪.‬‬

‫مكونات شاشة أنبوبة الكاثود‬

‫تتكون الشاشة من أنبوبة مفرغة من الهواء‪ ،‬مصنوعة من الزجاج الشفاف‪ ،‬ولها طرفين‪ ،‬الطرف‬
‫الكبير يمثل الشاشة ‪ ، Screen‬وهو مطلي من الداخل بطبقة متجانسة من مادة الفسفور‪ ،‬ويوجد‬
‫اآلنود النهائي حول طبقة الفسفور‪ .‬أما الطرف اآلخر من األنبوبة فيتكون من جزئيين هما‪ :‬مدفع‬
‫االلكترونات ‪ Electron gun‬وملفات تحريك شعاع االلكترونات ‪.Deflection Coils‬‬

‫‪56‬‬
 ‫الرسم بالحاسوب ‪Computer Graphics‬‬
‫ا‪ .‬فاطمة علي المحجوب‬ ‫المحاضرة ‪ :7‬تقنيات عرض الرسومات‬

‫مدفع االلكترونات ‪:Electron gun‬‬

‫يتكون المدفع من األجزاء التالية‪:‬‬

‫‪ .1‬عنصر تسخين ‪.Heating Element‬‬

‫‪ .2‬الكاثود ‪.Cathode‬‬
‫‪ .3‬شبكة تحكم ‪.Control Grid‬‬
‫‪ .4‬آنود التسريع ‪Acceleration Anode‬‬
‫‪ .5‬آنود التركيز والتوجيه ‪Focusing Grid‬‬

‫ملفات تحريك شعاع االلكترونات ‪Deflection Coils‬‬

‫تتحكم في زحزحة وتحريك شعاع االلكترونات‪ .‬ويوجد نوعين من هذه الملفات‪:‬‬

‫‪ .1‬ملفات تحريك الشعاع األفقية‪.‬‬

‫‪ .2‬ملفات تحريك الشعاع الرأسية‪.‬‬

‫مبدأ عمل الشاشة‬

‫يقوم عنصر التسخين بتسخين الكاثود‪ ،‬فتبدأ االلكترونات بالتحرر من سطح الكاثود وتنطلق في‬
‫اتجاه آنود التسريع مرو ار بشبكة التحكم‪ ،‬نحو آنود التركيز الذي يقوم بتركيز الشعاع وتوجيهه في‬
‫شكل شعاع الكترونات منطلق بسرعة هائلة نحو الشاشة‪ .‬يقع الشعاع المنطلق على الشاشة تحت‬
‫تأثير مجال كهرومغناطيسي ناتج عن ملفات تحريك الشعاع األفقية والعمودية التي تتحكم في‬
‫زحزحة وتحريك شعاع االلكترونات في شكل خطوط أفقية وعمودية على الشاشة‪ .‬يصطدم شعاع‬
‫االلكترونات المركز والموجه بطبقة الفسفور في نقطة محددة فتصبح مضيئة‪ ،‬وهذه النقطة هي‬
‫البكسل ‪.Pixel‬‬

‫تقوم شبكة التحكم بتحديد عدد االلكترونات وكثافته ضمن الشعاع‪ ،‬ويتم تغذية شبكة التحكم بإشارة‬
‫الفيديو المطلوب عرضها على الشاشة‪ .‬فإذا كانت إشارة الفيديو صغيرة‪ ،‬فإن شبكة التحكم تقع‬
‫تحت جهد سلبي قليل مما يؤدي إلى انطالق عدد كبير من االلكترونات‪ ،‬فيكون توهج الشاشة‬
‫عالي‪ .‬أما إذا كانت إشارة الفيديو كبيرة‪ ،‬فإن شبكة التحكم تقع تحت جهد سلبي أكبر‪ ،‬مما يؤدي‬

‫‪57‬‬
 ‫الرسم بالحاسوب ‪Computer Graphics‬‬
‫ا‪ .‬فاطمة علي المحجوب‬ ‫المحاضرة ‪ :7‬تقنيات عرض الرسومات‬

‫إلى منع واعاقة مرور االلكترونات‪ ،‬وبالتالي تقليل عدد االلكترونات المنطلقة نحو الشاشة‪ ،‬مما‬
‫يجعل النقطة التي يصطدم بها الشعاع معتمة أو أقل توهجا‪.‬‬

‫يتحرك الشعاع على الشاشة بطريقة المسح الكامل للشاشة بخطوط أفقية تمأل الشاشة رأسيا من‬
‫األعلى إلى األسفل‪ .‬مكونا نقاط متوهجة ومعتمة على الشاشة‪ ،‬تمثل الصورة‪.‬‬

‫يمكن للعين البشرية تمييز الصورة إذا التقطتها من بعد معين‪ .‬لقد تم تحديد البعد األمثل (في حالة‬
‫التلفزيون) للمشاهدة وتمييز نقطتين متالصقتين‪ ،‬وبإضاءة معقولة‪ ،‬بأقل بعد عن الشاشة بالعالقة‬
‫التالية‪ 𝐷/𝐻 ≈ 4:‬حيث ‪ D‬المسافة بين العين والشاشة‪ H ،‬ارتفاع الشاشة‪ .‬وبالتالي فإن أقل‬
‫مسافة يمكن للمشاهد تمييز صورة على الشاشة هي‪ 𝐷 ≅ 4𝐻 :‬أما في حالة الحاسوب فإن البعد‬
‫األمثل يعتمد على معايير أخرى مثل دقة ونوع الشاشة‪.‬‬

‫جميع شاشات ‪ CRT‬مستطيلة الشكل‪ ،‬وتتفق مع النسية ‪ .4:3‬والشاشة المستطيلة هي األفضل‬

‫للعين لمشاهدة الصور الثابتة أو المتحركة‪ ،‬ألن نعظم األحداث تقع في المحور األفقي وبالتالي‬
‫من الضروري أن يكون عرض الشاشة أكبر من ارتفاعها‪.‬‬

‫كيفية تكون الصورة على الشاشة النقطية ‪Raster‬‬

‫يجب أن تكون الصورة التي تش اهدها العين على الشاشة مستمرة‪ ،‬وأي حركة ضمن هذه الصور‬
‫يجب أن تتم بنعومة بحيث ال نالحظ أي اهتزاز أو تقطع ليبدو المشهد طبيعي‪ .‬لذلك استغل العلماء‬
‫من خاصية هامة للعين البشرية وهي خاصية حفظ الصورة ‪ ،Image Persistence‬تنشأ هذه‬
‫الخاصية نتيجة لوجود األالف من األعصاب البصرية التي تتحفز عند استقبالها للضوء الساقط‬
‫عليها فتقوم بإرسال إشارات عبر النهايات العصبية إلى الدماغ الذي يترجم هذه اإلشارات إلى صور‬
‫ملونة ثالثية البعد وبقدرة هللا سبحانه وتعالى يستمر هذا التحفيز حتى بعد توقف الضوء الساقط‬
‫ولمدة ‪ 1/16‬من الثانية (‪ .)0.0625 second‬أي أن الصورة تظل مطبوعة في النهايات العصبية‬
‫للمدة المذكورة‪.‬‬
‫‪58‬‬
 ‫الرسم بالحاسوب ‪Computer Graphics‬‬
‫ا‪ .‬فاطمة علي المحجوب‬ ‫المحاضرة ‪ :7‬تقنيات عرض الرسومات‬

‫من هذه الخاصية وجد العلماء أن معدل مسح وعرض الصور على الشاشة يجب أن يكون أكبر‬
‫من ‪ 16‬صورة في الثانية الواحدة حتى تستطيع العين أن تشاهد الصورة كأنها طبيعية ومستمرة‬
‫وبدون تقطع‪ .‬وفي األفالم السينمائية يتم التقاط ‪ 24‬صورة في الثانية للمشهد‪ ،‬ويتم عرضها بنفس‬
‫المعدل أي بسرعة ‪ 24‬صورة في الثانية‪ .‬وفي بداية ظهور التلفزيون تم استخدام ‪ 25‬إطار صورة‬
‫‪ Frame‬في الثانية الواحدة للنظام األوروبي و‪ 32‬إطار صورة في الثانية الواحدة للنظام األمريكي‪.‬‬
‫ويتم عرض إطار ا لصورة على الشاشة عن طريق مسح الشاشة بشعاع االلكترونات أفقيا ورأسيا‬
‫بطول وعرض الشاشة وهذا ما يسمى بمسح الشاشة ‪.Raster‬‬

‫وبالرغم من استخدام ‪ 15‬أو ‪ 32‬إطار في الثانية إال أن الصور كانت تعاني من عدم الوضوح‬
‫وقلة الجودة واهتزاز الصور والتقطع في الحركة ووجود ظل أو شبه اهتزاز في الصورة‪ ،‬لذلك ظهرت‬
‫تقنيات مسح جديدة مثل المسح المتداخل ‪ interlaced Scanning‬والمتتالي ‪Progressive‬‬
‫‪.Scanning‬‬

‫‪59‬‬
 ‫الرسم بالحاسوب ‪Computer Graphics‬‬
‫أ‪ .‬فاطمة علي المحجوب‬ ‫المحاضرة ‪ :8‬جهاز التحكم في العرض‬

‫جهاز التحكم في العرض ‪Video Display Controller‬‬

‫وهو إحدى المكونات الرئيسية في الحاسوب‪ ،‬ويطلق عليه بطاقة العرض ‪ ،Display Card‬أو‬
‫بطاقة الفيديو ‪ .Video card‬تستقبل هذه البطاقة أوامر الرسم ‪ Graphics Commands‬من‬
‫المعالج وتقوم بمعالجتها وتحويلها إلى إشارات فيديو ‪ RGB Sync‬يتم تغذيتها إلى الشاشة‪.‬‬

‫مكونات جهاز التحكم في العرض‬

‫‪ .1‬معالج الرسومات ‪:Display Processor‬‬

‫‪ .2‬ذاكرة الصورة النقطية ‪Frame Buffer‬‬
‫‪ .3‬مولد إشارة الفيديو ‪Video Signal Generator‬‬

‫مخطط مبسط لمكونات جهاز التحكم في العرض‬

‫‪22‬‬
 ‫الرسم بالحاسوب ‪Computer Graphics‬‬
‫أ‪ .‬فاطمة علي المحجوب‬ ‫المحاضرة ‪ :8‬جهاز التحكم في العرض‬

‫معالج الرسومات ‪Display Processor‬‬

‫ويسمى أيضا بالطرف األمامي ‪ .Front End‬يقوم معالج الرسوم باستالم أوامر الرسم من المعالج‬
‫الرئيسي للحاسوب‪ ،‬ويقوم بترجمتها إلى أرقام تشير إلى قيمة البكسل في الصورة‪ ،‬وتحتوي هذه‬
‫األرقام على موقع البكسل ودرجة اللون ‪ . RGB‬بعد ذلك يقوم المعالج بإرسال هذه القيم إلى ذاكرة‬
‫الصورة النقطية‪ .‬في السابق كان المعالج الرئيسي للحاسوب هو معالج الرسوم‪ ،‬فتم استخدام معالج‬
‫خاص بالرسوم سمي )‪ Graphics Processing Unit(GPU‬مع ذاكرة خاصة به مهمته معالجة‬
‫أوامر الرسم التي تأتي من المعالج الرئيسي وارسالها إلى مصفوفة الصورة النقطية‪ ،‬وهذا ساعد في‬
‫تسريع عملية إظهار الصورة على الشاشة والتخفيف من أعباء المعالج الرئيسي ليتمكن من القيام‬
‫بمهام أخرى‪.‬‬

‫شكل () استخدام معالج خاص وذاكرة خاصة بالرسم في جهاز العرض‬

‫ذاكرة الصورة النقطية ‪Frame Buffer‬‬

‫ذاكرة الصورة النقطية وتسمى أيضا بمصفوفة البكسالت النقطية ‪ .Bitmap Pixels Array‬وهي‬
‫قلب جهاز التحكم في العرض‪ ،‬حيث يتم االحتفاظ بقيمة كل عنصر (أو بكسل ‪ )pixel‬من‬
‫عناصر شاشة العرض على شكل جدول أو مصفوفة‪.‬‬

‫مولد إشارة الفيديو ‪Video Signal Generator‬‬

‫ويسمى بالطرف الخلفي ‪ ،Back End‬وهو المسئول عن توليد إشارة الفيديو المطلوبة لتغذية‬
‫الشاشة‪ .‬فهو يقوم بترجمة قيمة البكسالت المخزنة في ذاكرة الصورة النقطية إلى ألوان وتدرجاتها‬
‫المناسبة‪ .‬ومن تم توليد إشارة فيديو مكونة من ثالث إشارات ‪ ،RGB‬وتوليد إشارة المزامنة ‪Sync‬‬
‫‪ Signal‬تستخدم لتحديد ب داية ونهاية كل حقل وبداية ونهاية كل خط أفقي‪ .‬وفي كل مرة يتم تحديث‬

‫‪25‬‬
 ‫الرسم بالحاسوب ‪Computer Graphics‬‬
‫أ‪ .‬فاطمة علي المحجوب‬ ‫المحاضرة ‪ :8‬جهاز التحكم في العرض‬

‫الحقل أو اإلطار يتم قراءة مصفوفة الصورة النقطية وتحويلها إلى إشارات فيديو ثم ترسل هذه‬
‫اإلشارات إلى شاشة العرض‪ ،‬ويتكرر هذا ما بين ‪ 62‬إلى ‪ 82‬مرة في الثانية‪.‬‬

‫معايير تقييم أداء جهاز التحكم أو بطاقة العرض‬

‫‪ .1‬سرعة ونوعية معالج الرسوم ‪.GPU‬‬

‫‪ .2‬حجم ذاكرة الصورة النقطية‪.‬‬
‫‪ .3‬نوع وسرعة ذاكرة بطاقة العرض‪.‬‬

‫التعامل مع األحرف واألرقام والرموز على شاشة العرض‬

‫ليتمكن جهاز العرض من إظهار جميع الحروف واألرقام والرموز الخاصة المدخلة من لوحة‬
‫المفاتيح على الشاشة‪ ،‬تم حجز جزء من ذاكرة الصورة النقطية لهذا الغرض‪ ،‬يسمى بذاكرة األحرف‬
‫والرموز ‪ .Character-based Frame Buffer‬وأحيانا تأتي على شكل ذاكرة مستقلة‪ .‬تتكون‬
‫هذه الذاكرة من جزأين‪:‬‬
‫‪ ‬الجزء األول وهي ذاكرة األحرف والرموز‪ ،‬وهي عبارة عن مصفوفة تحتوي على رموز آسكي‬
‫‪ ASCII code‬لجميع الحروف والرموز‪.‬‬
‫‪ ‬الجزء الثاني وهو مولد أشكال األحرف والرموز‪ ،‬يقوم بتحديد أشكال الحروف في مصفوفة‬
‫البكسالت وذلك بتظليل البكسالت المحددة لتوليد الحروف المطلوبة‪ .‬وترسل على شكل‬
‫مجموعات إلى جهاز توليد إشارات الفيديو‪.‬‬

‫إظهار األحرف على الشاشة باستخدام ذاكرة األحرف والرموز‬

‫‪22‬‬
 ‫الرسم بالحاسوب ‪Computer Graphics‬‬
‫المحاضرة ‪ :4‬مكتبة الرسم ‪ OpenGL/GLUT‬أ‪ .‬فاطمة علي المحجوب‬

‫مقدمة حول مكتبة الرسوم المفتوحة ‪OpenGL‬‬

‫تعتبر مكتبة ‪ OpenGL‬أفضل مكتبة للرسم ثالثي األبعاد عالي الدقة‪ ،‬ومع تطور بطاقات العرض‬
‫وسرعة األجهزة بدأت تطرح أيضا كمكتبة للرسم التفاعلي‪ .‬اضافة لكونها مكتبة مفتوحة وتعمل على‬
‫أكثر من منصة ‪ ،cross-platform‬ولكنها مكتبة تفتقر لوظائف تتبع لوحة المفاتيح وعمل نوافذ‬
‫وقوائم وطباعة نصوص‪ ،‬ألن هذا خارج أهداف تصميمها‪ ،‬لهذا جاءت المكتبة ‪ .GLUT‬وهي أيضا‬
‫مكتبة مستقلة المنصة ‪ ،cross-platform‬وتقوم بالتعامل مع النوافذ ولوحة المفاتيح والفأرة وغيرها‪.‬‬
‫وبهذا يكون البرنامج بالكامل مستقل المنصة ‪.cross-platform‬‬

‫إن مكتبة الرسوميات المفتوحة )‪ (Open Graphics Library‬عبارة عن واجهة برمجة‬

‫للتطبيقات مستقلة المنصة‪ ،‬أي التطبيقات التي تعمل في عدة بيئات وعدة أنظمة تشغيل‪ .‬وهي‬
‫متوافقة مع عدة لغات برمجة‪ ،‬ومصممة إلنتاج رسوميات حاسوب ثنائية وثالثية األبعاد‪ .‬وتحوي‬
‫الواجهة أكثر من ‪ 252‬استدعاء دالي مختلف يمكن استخدامها لرسم مناظر ثالثية األبعاد معقدة‬
‫هندسية بسيطة كالنقاط والخطوط والمضّلعات‪ .‬وفي عالم رسومات الحاسوب‬
‫ّ‬ ‫مكونات‬
‫باستخدام ّ‬
‫المكونات باسم األشكال األساسية ‪ .Primitive‬تم تطوير ‪ OpenGL‬في البدء من‬
‫ّ‬ ‫تعرف هذه‬
‫قبل شركة سيليكون غرافيكس وحققت شيوعا وانتشا ار كبيرين في ألعاب الفيديو‪ ،‬وتنافست مع‬
‫‪ Direct3D‬المستخدمة على منصات مايكروسوفت ويندوز‪ .‬وتستخدم المكتبة ‪ OpenGL‬بشكل‬
‫واسع في تطبيقات ‪ CAD‬والواقع االفتراضي‪ ،‬والتمثيل المرئي العلمي والتمثيل المرئي‬
‫متنوعة أخرى لها صلة بميدان رسومات الحاسوب‪.‬‬
‫للمعلومات‪ ،‬ومحاكاة الطيران وفي تطبيقات ّ‬

‫تم تصميم المكتبة على أساس محورين أساسيين هما‪:‬‬

‫وخاصة‬
‫ّ‬ ‫المكونات الصلبة في الرسومات‬
‫ّ‬ ‫موحدة وسهلة للوصول إلى قدرات‬
‫‪ ‬توفير واجهة ّ‬
‫الثالثية األبعاد منها‪.‬‬
‫ّ‬
‫كل اإلنجازات‬
‫المنصات الصلبة عبر إجبار ّ‬
‫ّ‬ ‫‪ ‬إخفاء االختالفات المتواجدة بين شتّى أنواع‬
‫المعرفة في المواصفات‪.‬‬
‫ّ‬ ‫الميزات‬
‫المتوافقة على دعم جميع ّ‬

‫‪23‬‬
 ‫الرسم بالحاسوب ‪Computer Graphics‬‬
‫المحاضرة ‪ :4‬مكتبة الرسم ‪ OpenGL/GLUT‬أ‪ .‬فاطمة علي المحجوب‬

‫الهندسية‪ ،‬مثل النقاط‪ ،‬والخطوط‬

‫ّ‬ ‫التعرف على األساسيات‬
‫ّ‬ ‫ئيسية للمكتبة في‬
‫المهمة الر ّ‬
‫ّ‬ ‫تتمثّل‬
‫ثم تحويلها إلى مجموعة من النماذج‪ .‬إن أغلب أوامر المكتبة تقوم أساسا‬
‫والمضلّعات أساسا‪ ،‬ومن ّ‬
‫بوصف خصائص األشكال األساسية‪.‬‬

‫نموذج المكتبة ‪OpenGL‬‬

‫يوضح الشكل (‪ )1‬العالقة بين كال من البرنامج التطبيقي ‪،application program‬‬

‫ونظام الرسوم ‪ ،graphics system‬واجهزة االدخال واالخراج ‪input and output‬‬
‫‪ device‬والمستخدم ‪.user‬‬

‫مثال ‪ :1‬هيكلية برنامج ‪OpenGL‬‬

‫البرنامج التطبيقي لديه نموذجه الداخلي الذي يحدد ما الذي يقوم به‪ ،‬ويرسم الرسوم‬
‫باستخدام تسهيالت ‪ facilities‬نظام الرسوم‪ ،‬في حالتنا هذه‪ ،‬المكتبة ‪.OpenGL‬‬

‫‪20‬‬
 ‫الرسم بالحاسوب ‪Computer Graphics‬‬
‫المحاضرة ‪ :4‬مكتبة الرسم ‪ OpenGL/GLUT‬أ‪ .‬فاطمة علي المحجوب‬

‫المستخدم يشاهد الرسومات‪ ،‬ويستخدم أجهزة اإلدخال مثل الماوس ولوحة المفاتيح‬
‫للتفاعل‪ .‬والمعلومات حول تفاعل المستخدم يتم ارسالها إلى التطبيق‪ ،‬والذي بدوره يحدد‬
‫اإلجراء الذي سيتخذ‪ .‬وعادة‪ ،‬يقوم التطبيق بإجراء تغييرات على نموذجه الداخلي‪،‬‬
‫والذي يؤدي إلى تحديث الرسومات‪ ،‬لتبدأ حلقة أخرى في دورة التفاعل‪.‬‬

‫لقد تم تصميم برنامج ‪ OpenGL‬لتكون منصة مستقلة ‪platform-independent‬‬

‫وجهاز مستقل ‪ ،device-independent‬لذلك فهي ال تتأثر بموديالت وأنواع أجهزة‬
‫عرض الرسومات وأجهزة التفاعل المستخدمة‪ ،‬ولكنها تهتم بالدوال ‪ functions‬التي‬
‫تشير إلى النوافذ ‪ windows‬واألحداث ‪.events‬‬

‫‪ ‬نافدة ‪ OpenGL‬هي مساحة مستطيلة على شاشة جهاز العرض حيث يتم رسم‬
‫الرسومات‪ .‬عادة ما تتوافق نافذة ‪ OpenGL‬بالضبط مع النافذة التي تدار من قبل‬
‫مدير النافذة ‪ .Manager window‬ومن الممكن أن يكون هناك نوافذ ‪OpenGL‬‬
‫متعددة نشطة في نفس الوقت على شاشة واحدة‪.‬‬
‫‪ ‬ينتج الحدث في برنامج ‪ OpenGL‬عندما يقوم المستخدم بتشغيل جهاز إدخال‪.‬‬
‫ولالستجابة لهذا الحدث‪ ،‬يجب أن يوفر التطبيق دالة ‪ ،function‬تعرف باسم دالة‬
‫إجابة النداء ‪ ،callback function‬للتعامل مع هذا الحدث‪ .‬برنامج ‪OpenGL‬‬
‫يستدعي تلقائيا دالة إجابة النداء ويمرر لها بيانات الحدث‪.‬‬
‫‪ ‬في الواقع‪ ،‬برنامج ‪ OpenGL‬ال يقوم برسم الرسومات مباشرة في النافذة‪ ،‬بل يقوم‬
‫برسمها في هياكل البيانات ‪( data structure‬مصفوفة البكسالت) داخل برنامج‬
‫‪ OpenGL‬والتي تسمى مخزن اإلطار ‪ ،frame-Buffer‬أو المخزن ‪.Buffer‬‬
‫وبشكل دوري يقوم برنامج ‪ OpenGL‬بنسخ البكسالت من المخزن إلى النافذة‪.‬‬

‫‪22‬‬
 ‫الرسم بالحاسوب ‪Computer Graphics‬‬
‫المحاضرة ‪ :4‬مكتبة الرسم ‪ OpenGL/GLUT‬أ‪ .‬فاطمة علي المحجوب‬

‫هيكل برنامج الرسم باستخدام المكتبة ‪OpenGL‬‬

‫المثال التالي يحتوي على أبسط برنامج للرسم يستخدم المكتبة ‪ .OpenGL‬ومهمته‬
‫إظهار نافذة يمكن استخدامها إلظهار الرسوم ثنائية وثالثية البعد‪.‬‬

‫‪26‬‬
 ‫الرسم بالحاسوب ‪Computer Graphics‬‬
‫المحاضرة ‪ :4‬مكتبة الرسم ‪ OpenGL/GLUT‬أ‪ .‬فاطمة علي المحجوب‬

‫‪#include‬‬ ‫‪ o‬يبدأ البرنامج بتحميل مكتبة الرسم ‪ glut‬من خالل العبارة‬

‫>‪ .<GL/glut.h‬وكل برامج ‪ OpenGL‬يجب أن تحتوي على هذه العبارة‪.‬‬
‫‪ o‬يحتوي برنامج ‪ OpenGL‬على دالتين أساسيتين هما‪ :‬الدالة الرئيسية )(‪،main‬‬
‫ودالة إجابة النداء )(‪ ،display‬وهذه الدالة مهمة جدا وتحتاج إلى تفصيل أكثر‬
‫من خالل شرح دوال إجابة النداء ‪.callback functions‬‬

‫الدالة الرئيسية )(‪main‬‬

‫‪ o‬تنفيذ أي برنامج بلغة ‪ C‬أو ‪ C++‬يبدأ عند الدلة )(‪ .main‬في برامج الرسم يتم‬
‫تضمين هذه الدالة باألوامر التالية‪:‬‬
‫‪ ‬استدعاء الدالة ;)‪ glutInit (&argc, argv‬لتهيئة المكتبة ‪ .glut‬ويجب البدء‬
‫بهذا االستدعاء قبل البدء باستخدام أي دالة من دوال المكتبة ‪ .glut‬المتغيرين‬
‫‪ argc, argv‬يجب أن تتساوى مع متغيرات دالة التطبيق )(‪.main‬‬
‫‪ ‬استدعاء الدالة ;)"‪ ، glutCreateWindow ("ex1‬إلنشاء نافذة ‪OpenGL‬‬
‫لتقديم ‪ rendering‬والتفاعل ‪ ،interaction‬مع تحديد عنوان النافذة كمتغير‬
‫للدالة‪ .‬المكتبة ‪ glut‬تخصص رقم صحيح لتعريف هذه النافذة ‪windows‬‬
‫‪ ،identifier‬وهي النتيجة التي تقوم الدالة بإرجاعها‪ .‬ويمكن استخدام رقم‬
‫التعريف هذا عندما يحتوي برنامج ‪ OpenGL‬عدة نوافذ للتمييز بينها‪ .‬بشكل‬
‫افتراضي يتم ضبط حجم النافذة ‪ size‬التي يتم انشائها بهذا األمر على‬
‫)‪ (300,300‬بكسل‪ ،‬أما موضع النافذة ‪ position‬فهو أعلى يسار الشاشة‪.‬‬
‫وللتحكم في حجم أو موضع الشاشة يمكن استخدام الدالتين‪:‬‬
‫)(‪ glutInitWindowSize‬أو)(‪. glutInitWindowPosition‬‬

‫‪27‬‬
 ‫الرسم بالحاسوب ‪Computer Graphics‬‬
‫المحاضرة ‪ :4‬مكتبة الرسم ‪ OpenGL/GLUT‬أ‪ .‬فاطمة علي المحجوب‬

‫دوال إجابة النداء ‪Callback functions‬‬

‫يوجد اختالف بين دوال إجابة النداء ‪ Callback‬ودوال لغة ‪ C‬العادية‪ ،‬وهذا االختالف‬
‫يكمن في أن التطبيق ال يمكنه استدعاء دوال إجابة النداء مباشرة كما يستدعي الدوال‬
‫العادية‪ ،‬بل يقوم برنامج ‪ OpenGL‬باستدعاء هذه الدوال عندما يقرر إنه بحاجة إليها‪.‬‬

‫في المثال(‪ )1‬تم استخدام دالة إجابة نداء واحدة وهي األساسية في جميع برامج الرسم‪.‬‬
‫وهذه الدالة تحتوي على جميع الرسومات التي يجب على ‪ OpenGL‬عرضها على‬
‫النافذة‪ .‬تم استخدام الدالة )(‪ glutDisplayFunc‬إلخبار ‪ OpenGL‬أيا من دوال‬
‫التطبيق يجب استدعائها عند الحاجة لتحديث وانعاش ‪ refresh‬النافذة لرسم‬
‫الرسومات‪.‬‬

‫الدالة )(‪ glutDisplayFunc‬تقوم بتسجيل اسم دالة االستدعاء ليتم طلبها عندما‬
‫يحتاج ‪ OpenGL‬لعرض أو إعادة عرض محتويات النافذة‪ .‬وعلى التطبيق أن يحتوي‬
‫على دالة استدعاء وهذا ليس اختياريا‪ .‬ويجب أن تكون دالة االستدعاء‪ ،‬كما في الدالة‬
‫)(‪ ،Display‬بالشكل التالي‪void (*func)(void){ } :‬‬

‫التسميات في مكتبة الرسوم‬

‫لتسهيل تذكر األسماء األساسية اعلم أن‪:‬‬

‫‪ ‬الثوابت تكون كلها بأحرف كبيرة يفص للل بين كلماتها الش للرطة الس للفلية _ ‪ ،‬وتبدأ باس للم المكتبة‬
‫مثل ‪.GLUT_RGB‬‬
‫‪ ‬أس ل للماء الدوال ‪ functions‬تبدأ باس ل للم المكتبة بحروف ص ل للغيرة ثم بأحرف اس ل للتهاللية كبيرة وال‬
‫يفصل بينها الشرطة السفلية مثل‪glutInitWindowSize :‬‬
‫‪ ‬يلحق باس ل ل للم الدالة أحيانا البعد ‪ dimension‬الذي تتعامل معه (اما ‪ 2‬أو ‪ 3‬أو ‪ )4‬ونوعه اما‬
‫صل للحيح ‪ ، i‬أو عش ل للري ‪ f‬أو بالدقة المض ل للاعفة ‪ ،d‬مثال‪ ،glVertex2i(int x,int y) :‬أما‬
‫إذا كنا سلنضلع مؤشلر على عنوان اإلحداثيات وليس اإلحداثيات نفسلها فيتم إضلافة الحرف ‪v‬‬

‫‪28‬‬
 ‫الرسم بالحاسوب ‪Computer Graphics‬‬
‫المحاضرة ‪ :4‬مكتبة الرسم ‪ OpenGL/GLUT‬أ‪ .‬فاطمة علي المحجوب‬

‫مثال )‪ glVertex3fv(float *fptr‬حيث ‪ fptr‬هي مؤش ل ل ل ل للر لمص ل ل ل ل للفوفة ‪ array‬بها ثالث‬
‫عناصر مثل‪.float fptr[3]={x,y,z} :‬‬
‫‪ ‬تبدأ أنواع البيانات ‪ Data Type‬التي توفرها مكتبة الرسل ل ل للوم المفتوحة باسل ل ل للم المكتبة وبأحرف‬
‫كبيرة ثم نوع البيانات بأحرف صغيرة مثال‪GLfloat :‬‬

‫‪29‬‬
 ‫الرسم بالحاسوب ‪Computer Graphics‬‬
‫أ‪ .‬فاطمة علي المحجوب‬ ‫المحاضرة ‪ :5‬خوارزميات رسم الخط‬

‫خوارزميات رسم خط‬

‫‪Line Drawing Algorithms‬‬

‫الخط ‪ Line‬هو العنصر األساسي في الرسوم‪ .‬ويتكون في الواقع من عدد ال نهائي من النقاط‬
‫المحصورة بين نقطتي بداية ونهاية الخط‪ ،‬ولكن عند تمثيله في الصور الرقمية‪ ،‬ال يمكن إال رسم‬
‫مجموعة محددة من البكسالت المنفصلة وبأحجام محددة‪ .‬ولرسم خط يجب تحديد النقطتين المراد‬
‫ربطهما بخط‪ .‬تهدف هذه المحاضرة للتعرف على أهم ثالث خوارزميات لرسم الخطوط على الشاشة‪،‬‬
‫وقبل الخوض في خوارزميات الرسم سنجري بعض التمارين لتوضيح طريقة عمل هذه الخوارزميات‪.‬‬

‫تمرين‬
‫‪ .1‬ارسم باليد على الشكل (‪ )1‬الخطوط التي تصل بين أزواج النقاط التالية‪.‬‬
‫‪ .2‬ثم استخدم الشكل (‪ )2‬لتمثيل الخطوط في الفقرة (‪ )1‬على الشاشة‪ ،‬وتحديد أي بكسل يجب‬
‫تلوينها لتمثيل كل خط‪.‬‬
‫)‪A. (1, 15) to (8, 15‬‬ ‫)‪B. (3.5, 13.5) to (11.5, 13.5‬‬
‫)‪C. (1, 6) to (6, 11‬‬ ‫)‪D. (1, 5) to (8, 7‬‬
‫)‪E. (1, 0) to (7, 4‬‬

‫‪32‬‬
 ‫الرسم بالحاسوب ‪Computer Graphics‬‬
‫أ‪ .‬فاطمة علي المحجوب‬ ‫المحاضرة ‪ :5‬خوارزميات رسم الخط‬

‫االجابة‬

‫لرسم الخطوط األفقية والعمودية يمكن ملئ (تلوين) جميع البكسالت بالقرب من نقطتي‬
‫النهاية وكل البكسالت المحصورة بينها‪ .‬ولكن عند رسم الخطوط المائلة‪ ،‬تظهر مشكلة أيا‬
‫من البكسالت يجب ضبطها ‪.set‬‬

‫‪35‬‬
 ‫الرسم بالحاسوب ‪Computer Graphics‬‬
‫أ‪ .‬فاطمة علي المحجوب‬ ‫المحاضرة ‪ :5‬خوارزميات رسم الخط‬

‫عند استخدام طريقة نييف ‪ Naïve approach‬يتم تلوين كل البكسالت التي يمر بها الخط‪.‬‬
‫فنالحظ ظهور سمك ‪ thickness‬للخطوط‪ .‬ويعتمد سمك الخط على الميل‪.‬‬

‫توجد طريقة أخرى يتم فيها رسم الخط كمستطيل رفيع ‪ ،Line as a thin rectangle‬حيث‬
‫يتم ضبط كل البكسالت التي تقع داخل مركز المستطيل‪ .‬والسؤال هنا‪ :‬ما هو العرض‬
‫المثالي للمستطيل؟‬

‫‪ ‬يزداد سمك الخط مع زيادة عرض المستطيل‪.‬‬

‫‪ ‬عند تصغير عرض المستطيل تظهر فراغات ضمن الخط المرسوم‪.‬‬
‫‪ ‬العرض المثالي للمستطيل يعتمد على ميل الخط المراد رسمه‪.‬‬

‫خوارزميات رسم الخط المستقيم‬

‫‪ ‬العينات الموحدة ‪Uniform Sampling‬‬

‫‪ ‬المحلل التفاضلي الرقمي )‪Digital Differential Analyzer(DDA‬‬
‫‪ ‬خوارزمية منتصف الخط ‪Midpoint line algorithm‬‬
‫‪ ‬خوارزمية بريزنهام ‪Bresenham's algorithm‬‬

‫‪32‬‬
 ‫الرسم بالحاسوب ‪Computer Graphics‬‬
‫أ‪ .‬فاطمة علي المحجوب‬ ‫المحاضرة ‪ :5‬خوارزميات رسم الخط‬

‫خوارزمية العينات الموحدة ‪Uniform Sampling‬‬

‫في هذه الخوارزمية يتم أخذ عينات للخط خالل فترات متساوية‪ ،‬ويتم ضبط البكسالت األقرب إلى‬
‫العينة‪.‬‬

‫البارمتري لتمثيل الخط‪:‬‬

‫استخدام الشكل ا‬
‫‪x=(1-t) x0+t.x1‬‬ ‫]‪t[0,1‬‬
‫‪y=(1-t) y0+t.y1‬‬
‫يتم أخذ العينات للخط خالل فترات متساوية للمتغير ‪.t‬‬
‫‪ ‬العينات تؤخذ خالل‪𝑡 = 0, 1⁄𝑁 , 2⁄𝑁, … … , 1 :‬‬
‫‪ ‬عدد العينات ‪.N+1‬‬
‫‪ ‬ما هو العدد األمثل للعينات؟‬

‫عدد عينات صغير جدا‬ ‫عدد عينات كبير جدا‬

‫‪ ‬أفضل قيمة للعينات ‪ N‬يعتمد على ميل الخط‪.‬‬

‫‪33‬‬
 ‫الرسم بالحاسوب ‪Computer Graphics‬‬
‫أ‪ .‬فاطمة علي المحجوب‬ ‫المحاضرة ‪ :5‬خوارزميات رسم الخط‬

‫خوارزمية المحلل التفاضلي الرقمي )‪Digital Differential Analyzer(DDA‬‬

‫تركز هذه الخوارزمية على ضمان رسم خط رفيع بدون فراغات‪ ،‬من خالل أخذ عينات للخط خالل‬
‫فترات متساوية‪.‬‬

‫الخط الذي يميل إلى كونه أفقي أكثر من عمودي‪ ،‬يتم أخذ عينة خالل كل عمود بين نقطتي‬
‫النهاية‪ .‬اما الخط الذي يميل إلى كونه عمودي أكثر من أفقي‪ ،‬فيتم أخذ عينة خالل كل صف بين‬
‫نقطتي النهاية‪ .‬أربع حاالت سيتم أخذها في االعتبار‪.‬‬

‫‪30‬‬
 ‫الرسم بالحاسوب ‪Computer Graphics‬‬
‫أ‪ .‬فاطمة علي المحجوب‬ ‫المحاضرة ‪ :5‬خوارزميات رسم الخط‬

‫تقوم خوارزمية المحلل التفاضلي الرقمي برسم خط بسيط بين النقطتين )‪p0(x0,y0‬‬
‫و)‪ ،p1(x1,y1‬بإتباع الخطوات التالية‪:‬‬

‫إدخال إحداثيات النقطتين ‪. P0،P1‬‬ ‫الخطوة ‪:1‬‬

‫حساب المسافة األفقية والعمودية بين النقطتين‪:‬‬ ‫الخطوة ‪:2‬‬
‫‪𝑑𝑥 = 𝑥1 − 𝑥2‬‬
‫‪𝑑𝑦 = 𝑦1 − 𝑦2‬‬
‫تحديد عدد الخطوات ‪ Steps‬الالزمة للتحرك من النقطة األولى إلى النقطة‬ ‫الخطوة ‪:3‬‬
‫الثانية‪ ،‬ويتم ذلك بمقارنة قيمة ‪ dy‬و‪ ،dx‬فإذا كانت ‪ dx>dy‬تكون الخطوات في‬
‫اتجاه المحور ‪ X‬أكثر من الخطوات في اتجاه المحور ‪.Y‬‬
‫|𝑦𝑑| > |𝑥𝑑| 𝑓𝑖‬
‫;|𝑥𝑑| = 𝑠𝑝𝑒𝑡𝑠‬
‫𝑒𝑠𝑙𝑒‬
‫;|𝑦𝑑| = 𝑠𝑝𝑒𝑡𝑠‬
‫حساب مقدار الزيادة في اتجاه المحورين ‪: Y،X‬‬ ‫الخطوة ‪:4‬‬

‫𝑥𝑑‬
‫= 𝑡𝑛𝑒𝑚𝑒𝑟𝑐𝑛𝑖𝑥‬ ‫;‬
‫𝑠𝑝𝑒𝑡𝑠)𝑡𝑎𝑜𝑙𝑓(‬
‫𝑦𝑑‬
‫= 𝑡𝑛𝑒𝑚𝑒𝑟𝑐𝑛𝑖𝑦‬ ‫;‬
‫𝑠𝑝𝑒𝑡𝑠 )𝑡𝑎𝑜𝑙𝑓(‬

‫وضع أو رسم نقطة ‪ pixel‬عند اإلحداثيات )‪ (x,y‬مع كل خطوة كالتالي‪:‬‬ ‫الخطوة ‪:5‬‬

‫‪32‬‬
 ‫الرسم بالحاسوب ‪Computer Graphics‬‬
‫أ‪ .‬فاطمة علي المحجوب‬ ‫المحاضرة ‪ :5‬خوارزميات رسم الخط‬

‫خوارزمية بريزنهام ‪Bresenham's line algorithm‬‬

‫وهي طريقة أخرى لرسم الخطوط‪ .‬والميزة الكبيرة في هذه الخوارزمية هي أنها تستخدم األرقام‬
‫الصحيحة فقط في الحسابات‪ ،‬وتتم الحركة من خالل المحور ‪ X‬خالل فترات موحدة وفي كل خطوة‬
‫يتم االختيار ما بين نقطتين مختلفتين‪ .‬فكما في الشكل التالي‪ ،‬لالنتقال من الموضع )‪ (2,3‬نحتاج‬
‫لالختيار ما بين النقطتين )‪ (3,3‬أو )‪ (3,4‬وبالطبع فإن االختيار األفضل هو للنقطة األقرب إلى‬
‫الخط األصلي‪.‬‬

‫يبين الشكل التالي الحالة عن الموضع ‪ ،xk+1‬المسافة العمودية أعلى الخط ا لرياضي أشير لها بل‬
‫‪ ،dup‬والمسافة أسفل الخط أشير لها ‪.dlow‬‬

‫قيمة اإلحداثي ‪ y‬عند النقطة ‪ xk+1‬يمكن حسابها من الصورة العامة لمعادلة الخط المستقيم‪:‬‬
‫𝑏 ‪𝑦 = 𝑚(𝑥𝑘 + 1) +‬‬

‫وبالتالي يمكن حساب ‪ dup‬و‪ dlow‬كما يلي‪:‬‬

‫𝑘𝑦 ‪𝑑𝑙𝑜𝑤 = 𝑦 − 𝑦𝑘 = 𝑚(𝑥𝑘 + 1) + 𝑏 −‬‬

‫𝑏 ‪𝑑𝑢𝑝 = (𝑦𝑘 + 1) − 𝑦 = 𝑦𝑘 + 1 − 𝑚(𝑥𝑘 + 1) −‬‬

‫‪36‬‬
 ‫الرسم بالحاسوب ‪Computer Graphics‬‬
‫أ‪ .‬فاطمة علي المحجوب‬ ‫المحاضرة ‪ :5‬خوارزميات رسم الخط‬

‫يمكن استخدام هاتين المعادلتين التخاذ قرار تحديد النقطة األقرب للخط الحقيقي‪ .‬هذا القرار يعتمد‬
‫على الفرق بين المسافتين ‪ dup‬و‪ dlow‬كالتالي‪:‬‬

‫‪𝑑𝑙𝑜𝑤 − 𝑑𝑢𝑝 = 2𝑚(𝑥𝑘 + 1) − 2𝑦𝑘 + 2𝑏 − 1‬‬

‫بالتعويض عن ‪m=dy/dx‬‬

‫𝑦𝑑‬
‫‪𝑑𝑥(𝑑𝑙𝑜𝑤 − 𝑑𝑢𝑝 ) = 𝑑𝑥(2‬‬ ‫)‪(𝑥 + 1) − 2𝑦𝑘 + 2𝑏 − 1‬‬
‫𝑘 𝑥𝑑‬
‫)‪𝑑𝑥(𝑑𝑙𝑜𝑤 − 𝑑𝑢𝑝 ) = 2𝑑𝑦. 𝑥𝑘 − 2𝑑𝑥. 𝑦𝑘 + 2𝑑𝑦 + 𝑑𝑥(2𝑏 − 1‬‬

‫‪𝑑𝑥(𝑑𝑙𝑜𝑤 − 𝑑𝑢𝑝 ) = 2𝑑𝑦. 𝑥𝑘 − 2𝑑𝑥. 𝑦𝑘 +C‬‬

‫وبالتالي فإن بارامتر القرار ‪ Pk‬للخطوة ‪ K‬يحسب بالمعادلة‪:‬‬

‫) 𝑝𝑢𝑑 ‪𝑝𝑘 = 𝑑𝑥(𝑑𝑙𝑜𝑤 −‬‬

‫𝐶 ‪𝑝𝑘 = 2𝑑𝑦. 𝑥𝑘 − 2𝑑𝑥. 𝑦𝑘 +‬‬

‫إشارة المتغير ‪ Pk‬تشير إلى قيمة 𝑝𝑢𝑑 ‪ .𝑑𝑙𝑜𝑤 −‬فإذا كانت سالبة فسيتم اختيار النقطة السفلية‬
‫أما إذا كانت موجبة فيتم اختيار النقطة العلوية‪ .‬تذكر أن الحركة تتم على طول المحور ‪ X‬بخطوات‬
‫موحدة‪ ،‬وبالتالي يتم إجراء كل لحسابات بأرقام صحيحة غير عشرية‪ .‬في الخطوة ‪ k+1‬ومتغير‬
‫القرار يحسب بالمعادلة‪:‬‬

‫𝐶 ‪𝑝𝑘+1 = 2𝑑𝑦. 𝑥𝑘+1 − 2𝑑𝑥. 𝑦𝑘+1 +‬‬

‫بطرح قيمة ‪ Pk‬من ‪ pk+1‬نحصل على‪:‬‬

‫) 𝑘𝑦 ‪𝑝𝑘+1 − 𝑝𝑘 = 2𝑑𝑦(𝑥𝑘+1 − 𝑥𝑘 ) − 2𝑑𝑥. (𝑦𝑘+1 −‬‬

‫وألن ‪ xk+1=xk+1‬إذن‪:‬‬

‫) 𝑘𝑦 ‪𝑝𝑘+1 = 𝑝𝑘 + 2𝑑𝑦 − 2𝑑𝑥. (𝑦𝑘+1 −‬‬

‫حيث ‪ yk+1-yk‬تساوي ‪ 2‬أو ‪ 1‬حسب إشارة ‪.pk‬‬

‫تحسب القيمة االبتدائية ‪ p0‬عند الموضع )‪ (x0,y0‬بالمعادلة‪:‬‬

‫𝑥𝑑 ‪𝑝0 = 2𝑑𝑦 −‬‬

‫‪37‬‬
 ‫الرسم بالحاسوب ‪Computer Graphics‬‬
‫أ‪ .‬فاطمة علي المحجوب‬ ‫المحاضرة ‪ :5‬خوارزميات رسم الخط‬

‫من خالل الحسابات السابقة‪ ،‬يمكن تلخيص خوارزمية بريزنهام في حالة ميل الخط ‪ m<1‬في‬
‫الخطوات التالية‪:‬‬

‫الخطوة ‪ :1‬إدخال إحداثيات النقطتين ‪ ،P0،P1‬بحيث يحتفظ المتغير ‪ P0‬بالقيمة التي في جهة‬
‫اليسار‪.‬‬
‫الخطوة ‪ :2‬ارسم النقطة )‪.(x0,y0‬‬
‫الخطوة ‪ :3‬احسب قيمة كال من ‪ (2dy-2dx), 2dy, dx, dy‬تم احسب قيمة البارامتر ‪Pk‬‬
‫االبتدائية من المعادلة‪:‬‬

‫𝑥𝑑 ‪𝑝0 = 2𝑑𝑦 −‬‬

‫الخطوة ‪ :4‬عند كل قيمة ‪ Xk‬على طول الخط‪ ،‬إبدأ من ‪ ،k=0‬وقم بإجراء االختبار التالي‪:‬‬

‫‪If pk < 0 then‬‬ ‫‪the next point to plot is (xk+1, yk) and 𝑝𝑘+1 = 𝑝𝑘 +‬‬
‫𝑦𝑑‪2‬‬
‫‪Otherwise,‬‬ ‫𝑥𝑑‪𝑝𝑘+1 = 𝑝𝑘 + 2𝑑𝑦 − 2‬‬
‫الخطوة ‪ :5‬أعد تكرار الخطوة ‪ 4‬حتى )‪ (dx-1‬مرة‪.‬‬

‫في حالة أن ميل الخط ‪ ،m>1‬يمكن تكرار الحسابات السابقة إليجاد قيمة ‪ ،Pk‬وستتحصل على‬
‫نتائج متشابهة‪ ،‬فقط استبدل المتغيرين ‪ x,y‬مع بعض‪.‬‬

‫خوارزمية نقطة المنتصف ‪Mid-Point Algorithm‬‬

‫وهي تحسين لخوارزمية بريزنهام تم تعديلها من قبل ‪ .Pitteway and Van Aken‬بافتراض أنه‬
‫تم وضع النقطة ‪ P‬عند اإلحداثيات )‪ (x,y‬وأن ميل الخط المراد رسمه هو ‪ K‬حيث ‪ .0≤k≤1‬القرار‬
‫المطلوب اتخاذه هو االختيار بين الموضعين ‪ E‬أو ‪ .N‬ويتم اختيار النقطة األقرب لنقطة التقاطع‬
‫‪.Q‬‬

‫‪38‬‬
 ‫الرسم بالحاسوب ‪Computer Graphics‬‬
‫أ‪ .‬فاطمة علي المحجوب‬ ‫المحاضرة ‪ :5‬خوارزميات رسم الخط‬

‫لتحقيق ذلك‪ ،‬يتم أوال حساب نقطة المنتصف )‪ .M(x+1,y+1/2‬فإذا كانت نقطة التقاطع ‪Q‬‬
‫أسفل النقطة ‪ M‬يتم اختيار النقطة ‪ E‬واال فاالختيار يقع على النقطة ‪ .N‬ولتفحص هذا‪ ،‬نحتاج‬
‫إلى استخدام المعادلة الضمنية للخط المستقيم وهي كالتالي‪:‬‬

‫𝑦 ‪𝑓 (𝑥, 𝑦) = 𝑚𝑥 + 𝑏 −‬‬

‫في حالة القيمة الموجبة لميل الخط ‪ m‬عند النقطة المعطاة ‪X:‬‬

‫‪ ‬إذا كان ‪ y‬تقع على الخط فإن ‪.f(x,y)=0‬‬

‫‪ ‬إذا كان ‪ y‬تقع أعلى الخط فإن ‪.f(x,y)<0‬‬
‫‪ ‬إذا كان ‪ y‬تقع أسفل الخط فإن ‪.f(x,y)>0‬‬

‫‪39‬‬
 ‫الرسم بالحاسوب ‪Computer Graphics‬‬
‫أ‪ .‬فاطمة علي المحجوب‬ ‫المحاضرة ‪ :6‬خوارزميات رسم الدائرة‬

‫خوارزميات رسم الدائرة‬

‫‪Circle Generation Algorithm‬‬

‫إن رسم الدوائر على الشاشة أكثر تعقيدا بقليل من رسم الخطوط‪ .‬من أشهر الخوارزميات‬
‫المستخدمة لرسم الدوائر هما خوارزمية بريزنهام وخوارزمية نقطة المنتصف‪ .‬هاتان‬
‫الخوارزميتان تستندان إلى فكرة إيجاد النقطتان المتتاليتان الالزمة لرسم الدائرة‪ .‬وسيتم توضيح‬
‫ذلك فيما يلي‪ :‬معادلة الدائرة هي‪ ،𝑥 2 + 𝑦 2 = 𝑟 2 :‬حيث ‪ r‬هو نصف قطر الدائرة‪ .‬يمكن‬
‫االستفادة من الشكل المتماثل للدائرة في اجراء الحسابات على ثمن واحد من الدائرة واستنتاج‬
‫النقاط المنارة في باقي األثمان‪.‬‬

‫خوارزمية بريزنهام لرسم الدائرة‬

‫ال يمكن عرض دائرة متصلة على شاشة نقطية‪ .‬لذلك علينا اختيار موضع البكسل األقرب‬
‫إلكمال رسم القوس‪ .‬من خالل الشكل التالي‪ ،‬يمكنك مشاهدة موضع البكسل )‪ (x,y‬واألن‬
‫نحتاج لتحديد أين نضع البكسل التالية واالختيار ما بين‪ N(x+1,y) :‬أو )‪.S(x+1,y-1‬‬

‫يمكن أخذ هذا القرار باالعتماد على المتغير ‪ ،d‬كالتالي‪:‬‬

‫‪02‬‬
 ‫الرسم بالحاسوب ‪Computer Graphics‬‬
‫أ‪ .‬فاطمة علي المحجوب‬ ‫المحاضرة ‪ :6‬خوارزميات رسم الدائرة‬

‫‪ ‬إذا كانت ‪ d<=0‬فالنقطة التالية هي )‪. N(x+1,y‬‬

‫‪ ‬أما إذا كانت ‪ d>0‬فالنقطة التالية هي )‪.S(x+1,y-1‬‬

‫خطوات الخوارزمية‪:‬‬

‫الخطوة ‪ :1‬أدخل إحداثيات مركز الدائرة ونصف قطرها واحفظها في المتغيرات ‪ x,y,r‬على‬
‫التوالي‪ .‬وضع ‪.P=0, Q=R‬‬
‫الخطوة ‪ :2‬اجعل متغير القرار ‪.d=3-2R‬‬
‫الخطوة ‪ :3‬كرر الخطوات التالية حتى الخطوة ‪ 8‬طالما ‪.x<y‬‬
‫الخطوة ‪ :4‬استدعي الدالة )‪.DrawCircle(x,y,p,q‬‬
‫الخطوة ‪ :5‬اجعل ‪.P=P+1‬‬
‫الخطوة ‪ :6‬إذا كانت ‪ d<0‬فإن ‪ d=d+4*x+6‬واال‪:‬‬
‫الخطوة ‪ :7‬اضبط ‪ y=y+1‬و ‪.d=d+4(x-y)+10‬‬
‫الخطوة ‪ :8‬استدعي الدالة )‪.DrawCircle(x,y,p,q‬‬

‫الدالة ‪ DrawCircle‬لها الشكل التالي‪:‬‬

‫‪Draw Circle Method(X, Y, P, Q).‬‬

‫{‬
‫;)‪Call SetPixel (X + P, Y + Q‬‬
‫;)‪Call SetPixel (X - P, Y + Q‬‬
‫;)‪Call SetPixel (X + P, Y - Q‬‬
‫;)‪Call SetPixel (X - P, Y - Q‬‬
‫;)‪Call SetPixel (X + Q, Y + X‬‬
‫;)‪Call SetPixel (X - Q, Y + X‬‬
‫;)‪Call SetPixel (X + Q, Y - X‬‬
‫;)‪Call SetPixel (X - Q, Y - X‬‬
‫}‬

‫‪05‬‬
 ‫الرسم بالحاسوب ‪Computer Graphics‬‬
‫أ‪ .‬فاطمة علي المحجوب‬ ‫المحاضرة ‪ :6‬خوارزميات رسم الدائرة‬

‫خوارزمية نقطة المنتصف لرسم الدائرة‪:‬‬

‫يمكن تلخيص خطوات الخوارزمية في النقاط التالية‪:‬‬

‫الخطوة ‪ :1‬أدخل نصف قطر الدائرة ‪ ،r‬واحداثيات مركز الدائرة )‪ .(xc,yc‬وحدد أول نقطة‬
‫تقع على محيط الدائرة والتي إحداثياتها )‪.(x0,y0)=(0,r‬‬
‫الخطوة ‪ :2‬احسب القيمة االبتدائية للمتغير ‪ Pk‬وهي‪P0=5/4-r :‬‬

‫لمعرفة كيفية الوصول لهذ المعادلة تتبع الشرح التالي‪:‬‬

‫‪02‬‬
 ‫الرسم بالحاسوب ‪Computer Graphics‬‬
‫أ‪ .‬فاطمة علي المحجوب‬ ‫المحاضرة ‪ :6‬خوارزميات رسم الدائرة‬

‫الخطوة ‪ :3‬عند كل موضع لل ‪ xk‬بداية مع ‪ ،k=0‬نفذ االختبار التالي‪:‬‬

‫الخطوة ‪ :4‬أوجد نقاط التماثل في األثمان السبعة المتبقية‪.‬‬

‫الخطوة ‪ :5‬انقل كل حساب للموضع )‪ (x,y‬إلى المسار الدائري حول المركز )‪ (xc,yc‬وارسم‬
‫نقطة عند هذه اإلحداثيات‪.‬‬

‫الخطوة ‪ :6‬كرر الخطوات من ‪ 3‬إلى ‪ 5‬حتى ‪.x>=y‬‬

‫‪03‬‬
 ‫الرسم بالحاسوب ‪Computer Graphics‬‬
‫أ‪ .‬فاطمة علي المحجوب‬ ‫المحاضرة ‪ :2‬خوارزميات تعبئة المضلعات‬

‫خوارزميات تعبئة المضلعات ‪Polygon Filling‬‬

‫المضلع عبارة عن مجموعة مرتبة من الرؤوس‪ ،‬كما في الشكل أدناه‪ .‬ولتعبئة مضلع بلون ما‪،‬‬
‫نحتاج إلى تحديد البكسالت التي تقع على محيط المضلع‪ ،‬والبكسالت الموجودة داخله‪ .‬في هذه‬
‫المحاضرة سنرى كيف يمكننا تعبئة المضلعات باستخدام تقنيات مختلفة‪.‬‬

‫خوارزمية مسح الخط ‪Scan Line Algorithm‬‬

‫تعمل هذه الخوارزمية بمد خط المسح ‪ Scan Line‬حتى يتقاطع مع حواف المضلع‪ .‬تم يتم‬
‫تعبئة النقاط بين زوجين متقاطعين باللون المطلوب‪ .‬كما في الشكل التالي‪.‬‬

‫الخطوات التالية تبين كيف تعمل خوارزمية مسح الخط‪:‬‬

‫حدد قيمة ‪ ymax, ymain‬للمضلع المعطى‪.‬‬ ‫الخطوة ‪:1‬‬

‫مرر خط المسح ليتقاطع مع كل حافة للمضلع من ‪ ymin‬إلى ‪ .ymax‬ثم قم‬ ‫الخطوة ‪:2‬‬
‫بتسمية كل نقطة تقاطع لخط المسح مع المضلع ولتكن‪.p0, p1, p2, p3 :‬‬
‫‪.p0,‬‬ ‫رتب نقاط التقاطع بشكل تصاعدي بالنسبة محور ‪ X‬مثل‪p1, p2, p3 :‬‬ ‫الخطوة ‪:3‬‬
‫امأل النقاط بلون التعبئة ما بين كل زوجين من النقاط بالتبادل‪ .‬أي إمالء ما‬ ‫الخطوة ‪:4‬‬
‫بين النقطتين ‪ ،p0, p1‬وتجاهل ما بين ‪ ،p1, p2‬وملء ما بين النقطتين ‪p2,‬‬
‫‪. p3‬‬

‫‪00‬‬
 ‫الرسم بالحاسوب ‪Computer Graphics‬‬
‫أ‪ .‬فاطمة علي المحجوب‬ ‫المحاضرة ‪ :2‬خوارزميات تعبئة المضلعات‬

‫خوارزمية التعبئة بالغمر ‪Flood Fill Algorithm‬‬

‫قد نرغب أحيانا في تعبئة مضلع بحيث يتم استخدام لون للتعبئة يختلف عن لون المحيط‪ .‬في هذه‬
‫الحالة يتم رسم الكائنات بلون داخلي عوضا عن البحث عن لون المحيط الفعلي‪ ،‬كما في خوارزمية‬
‫تعبئة المحيط ‪ .Boundary Filling Algorithm‬في خوارزمية التعبئة بالغمر يتم االعتماد على‬
‫لون التعبئة ‪ Fill Color‬بدال من لون المحيط‪ .‬حيث يتم استبدال اللون الداخلي للكائن بلون التعبئة‪.‬‬
‫وتتوقف الخوارزمية عندما ال تعد هناك بكسالت داخلية بال لون‪ .‬وتعتمد هذه الخوارزمية على‬
‫طريقة الجارات األربع ‪ 4-Connected‬أو طريقة الجارات الثمانية ‪.8-Connected‬‬

‫خوارزمية تعبئة المحيط ‪Boundary Filling Algorithm‬‬

‫هذه الخوارزمية تقوم بالتقاط نقطة داخل الكائن‪ ،‬وتبدأ بالتعبئة حتى تالمس حواف الكائن‪ .‬لتعمل‬
‫هذه الخوارزمية يجب أن يكون لون التعبئة ولون المحيط أو الحواف مختلفين‪ .‬في هذه الخوارزمية‬
‫نفترض أن لون المحيط موحد للكائن بالكامل‪ .‬وهنا أيضا يمكن استخدام طريقة الجارات األربع ‪4-‬‬
‫‪ Connected‬أو طريقة الجارات الثمانية ‪.8-Connected‬‬

‫طريقة الجارات األربع ‪4-Connected‬‬

‫في هذه الطريقة بعد تعبئة أي بكسل يتم أيضا تعبئة البكسالت األربع المجاورة له والمبينة في‬
‫الشكل أدناه‪ .‬وتستمر هذه العملية حتى الوصول للحواف التي لها لون مخالف‪.‬‬

‫‪02‬‬
 ‫الرسم بالحاسوب ‪Computer Graphics‬‬
‫أ‪ .‬فاطمة علي المحجوب‬ ‫المحاضرة ‪ :2‬خوارزميات تعبئة المضلعات‬

‫خطوات الخوارزمية‬

‫حدد قيمة البدرة ‪ seed point‬وهي نقطة إحداثياتها )‪،(seedx, seedy‬‬ ‫الخطوة ‪:1‬‬
‫ولون التعبئة ‪ fillColor‬واللون االفتراضي ‪.defualtColor‬‬
‫حدد قيمة لون حواف المضلع‪.‬‬ ‫الخطوة ‪:2‬‬
‫إذا كانت البدرة الحالية بلون افتراضي‪ ،‬قم بتكرار الخطوات ‪4‬و ‪ 5‬حتى‬ ‫الخطوة ‪:3‬‬
‫الوصول إلى بكسالت المحيط‪.‬‬

‫‪If getpixel(x,y) = defualtColor then repeat step 4 and 5‬‬

‫غير قيمة اللون االفتراضي إلى لون التعبئة للبدرة‪.‬‬ ‫الخطوة ‪:4‬‬

‫)‪setPixel(seedx, seedy, fillColor‬‬

‫كرر عملية تغيير اللون مع البكسالت األربع المجاورة للبدرة‪.‬‬ ‫الخطوة ‪:5‬‬

‫)‪FloodFill (seedx – 1, seedy, fcol, dcol‬‬

‫)‪FloodFill (seedx + 1, seedy, fcol, dcol‬‬
‫)‪FloodFill (seedx, seedy - 1, fcol, dcol‬‬
‫)‪FloodFill (seedx – 1, seedy + 1, fcol, dcol‬‬
‫توقف‬ ‫الخطوة ‪:6‬‬

‫عند استخدام طريقة الجارات األربع تقع مشكلة كالمبينة في الشكل أدناه‪ ،‬فعند تعبئة المنطقة‬
‫الداخلية ال يتم إال تعبئة جزء منها‪ ،‬في هذه الحالة يكون استخدام طريقة الثماني جارات هي‬
‫األفضل‪.‬‬

‫‪06‬‬
 ‫الرسم بالحاسوب ‪Computer Graphics‬‬
‫أ‪ .‬فاطمة علي المحجوب‬ ‫المحاضرة ‪ :2‬خوارزميات تعبئة المضلعات‬

‫طريقة الجارات الثمانية ‪8-Connected‬‬

‫في هذه الطريقة يتم استخدام البكسالت الثمانية المجاورة للبكسل المعني‪ ،‬كما هو مبين في‬
‫الشكل أدناه‪ .‬فباإلضافة إلى البكسالت األربع المستخدمة في الطريقة السابقة يتم استخدام‬
‫البكسالت الموجودة على قطري المربع المحيط بالبكسل الحالية‪ .‬وبنفس الطريقة تتم عملية‬
‫التعبئة وتستمر حتى الوصول إلى محيط الشكل‪.‬‬

‫خطوات الخوارزمية‬

‫الخطوة ‪ :1‬حدد قيمة البدرة ‪ seed point‬وهي نقطة إحداثياتها )‪ ،(seedx, seedy‬ولون‬
‫التعبئة ‪ fillColor‬واللون االفتراضي ‪.defualtColor‬‬
‫حدد قيمة لون حواف المضلع‪.‬‬ ‫الخطوة ‪:2‬‬
‫إذا كانت البدرة الحالية بلون افتراضي‪ ،‬قم بتكرار الخطوات ‪4‬و ‪ 5‬حتى‬ ‫الخطوة ‪:3‬‬
‫الوصول إلى بكسالت المحيط‪.‬‬
‫‪If getpixel(x,y) = defualtColor then repeat step 4 and 5‬‬
‫غير قيمة اللون االفتراضي إلى لون التعبئة للبدرة‪.‬‬ ‫الخطوة ‪:4‬‬

‫)‪setPixel(seedx, seedy, fillColor‬‬

‫كرر عملية تغيير اللون مع البكسالت الثمانية المجاورة للبدرة‪.‬‬ ‫الخطوة ‪:5‬‬

‫)‪FloodFill (seedx – 1, seedy, fillColor, defualtColor‬‬

‫)‪FloodFill (seedx + 1, seedy, fillColor, defualtColor‬‬
‫)‪FloodFill (seedx, seedy - 1, fillColor, defualtColor‬‬
‫)‪FloodFill (seedx, seedy + 1, fillColor, defualtColor‬‬
‫)‪FloodFill (seedx – 1, seedy + 1, fillColor, defualtColor‬‬

‫‪07‬‬
 ‫الرسم بالحاسوب ‪Computer Graphics‬‬
‫أ‪ .‬فاطمة علي المحجوب‬ ‫المحاضرة ‪ :2‬خوارزميات تعبئة المضلعات‬

‫)‪FloodFill (seedx + 1, seedy + 1, fillColor, defualtColor‬‬

‫)‪FloodFill (seedx + 1, seedy - 1, fillColor, defualtColor‬‬
‫)‪FloodFill (seedx – 1, seedy - 1, fillColor, defualtColor‬‬
‫توقف‬ ‫الخطوة ‪:6‬‬

‫تنجح طريقة الجارات الثمانية في تعبئة الشكل المبين أدناه‪ ،‬في حين عجز طريقة الجارات األربع‬
‫على ذلك‪.‬‬

‫اختبار الداخل والخارج ‪Inside-Outside Test‬‬

‫تعرف هذه الطريقة أيضا بطريقة عد األرقام ‪ .Counting Number Method‬أثناء تعبئة‬
‫المضلعات‪ ،‬غالبا ما نحتاج إلى تحديد ما إذا كانت بكسل ما تقع داخل الشكل أم خارجه‪.‬‬
‫توجد طريقتين لمعرفة ذلك هما‪:‬‬

‫‪ ‬قاعدة فردي‪-‬زوجي ‪Odd-Even Rule‬‬

‫‪ ‬قاعدة اللفة المفردة الالصفرية ‪Nonzero winding number rule‬‬

‫قاعدة فردي‪-‬زوجي ‪Odd-Even Rule‬‬

‫في هذه الطريقة‪ ،‬يتم عد الحواف المتقاطعة على طول الخط الذي تقع عليه النقطة )‪ (x,y‬وممتد‬
‫إلى ما النهاية‪ .‬فإذا كان عدد التقاطعات في الجانبين األيسر واأليمن للنقطة )‪ (x,y‬فردي‪ ،‬فإن‬
‫النقطة )‪ (x,y‬تقع داخل الشكل المضلع‪ .‬أما إذا كان عدد التقاطعات زوجي فهي خارج المضلع‪.‬‬
‫الشكل التالي يوضح هذا المفهوم‪ .‬حيث نجد أنه عند النقطة )‪ ،(x,y‬عدد التقاطعات في الجانب‬

‫‪08‬‬
 ‫الرسم بالحاسوب ‪Computer Graphics‬‬
‫أ‪ .‬فاطمة علي المحجوب‬ ‫المحاضرة ‪ :2‬خوارزميات تعبئة المضلعات‬

‫األيسر هو ‪ ،5‬وعددها في الجانب األيمن ‪ . 3‬في كال الجانبين العدد فردي وبالتالي فإن النقطة‬
‫)‪ (x,y‬تقع داخل المضلع‪.‬‬

‫قاعدة اللفة المفردة الالصفرية ‪Nonzero winding number rule‬‬

‫تستخدم هذه القاعدة أيضا مع األشكال غير المعقدة‪ ،‬الختبار ما إذا كانت نقطة معطاة تقع داخل‬
‫أم خارج المضلع‪ .‬لتبسيط هذه الطريقة يمكن استخدام الشكل أدناه واتباع الخطوات التالية‪:‬‬

‫الخطوة ‪ :1‬قم بوضع اتجاه الحركة على كل الحواف على طول محيط المضلع‪.‬‬
‫الخطوة ‪ :2‬ارسم خط مسح يمر بالنقطة المراد اختبارها‪.‬‬
‫الخطوة ‪ :3‬قم بإعطاء القيمة ‪ 1‬للحواف التي تتجه لألعلى‪ ،‬وقيمة ‪ 1-‬لباقي الحواف‪.‬‬
‫الخطوة ‪ :4‬افحص قيم اتجاه الحواف التي يمر بها خط المسح واجمعها‪.‬‬
‫الخطوة ‪ :5‬إذا كان المجموع ال يساوي صفر‪ ،‬فإن النقطة قيد االختبار تكون نقطة داخلية‬
‫‪ interior point‬أي تقع داخل المضلع‪ ،‬واال فهي نقطة خارجية ‪.exterior point‬‬

‫‪09‬‬
 ‫الرسم بالحاسوب ‪Computer Graphics‬‬
‫أ‪ .‬فاطمة علي المحجوب‬ ‫المحاضرة ‪ :2‬التحويالت الهندسية‬

‫التحويالت الهندسية ‪Geometric Transformations‬‬

‫التحويالت الهندسية ثنائية البعد‬

‫التحويالت الهندسية هي مجموعة من العمليات التي تطبق على األشكال الهندسية المراد رسمها‪،‬‬
‫بهدف تغيير موقع أو حجم أو اتجاه الشكل الهندسي‪ .‬وتتنوع هذه التحويالت طبقا لعدد المحاور‬
‫التي تستخدمها إلى تحويالت ثنائية البعد واخرى ثالثية البعد‪ .‬تتم هذه التحويالت على المحور‬
‫السيني أو المحور الصادي إلزاحة ‪ Translate‬أو تدوير ‪ Rotate‬أو تقييس ‪ Scaling‬الشكل‬
‫الهندسي المراد رسمه‪.‬‬

‫إزاحة شكل ثنائي البعد ‪2D-Translation‬‬

‫إلزاحة شكل ما‪ ،‬يتم إضافة قيمة اإلزاحة إلى كل رأس من رؤوس الشكل المراد إزاحته‪ ،‬فيتغير‬
‫موقع الشكل‪ .‬وتختلف طريقة إزاحة األشكال الهندسية حسب نوع الشكل‪ ،‬فإزاحة خط مستقيم يتطلب‬
‫إزاحة رأسيه أي نقطتي البداية والنهاية‪ ،‬أما إزاحة الدائرة فيتم بإزاحة مركزها‪ ،‬وفي حالة األشكال‬
‫متعددة األضالع أي المضلع ‪ Polygon‬فيجب إزاحة كل رأس من رؤوسه‪ .‬بإفتراض أن إحداثيات‬
‫الرأس هي )‪ (x,y‬والمطلوب إزاحة هذا الرأس بمقدار ) 𝑦𝑡 ‪ (𝑡𝑥 ,‬إلى الموقع ) ‪ .(𝑥 ′ , 𝑦 ′‬المعادلة‬
‫التالية تبين عملية النقل ‪.‬‬

‫𝑥𝑡 ‪𝑥 ′ = 𝑥 +‬‬
‫𝑦𝑡 ‪𝑦 ′ = 𝑦 +‬‬

‫لتسهيل عمليات التحويالت سيتم استخدام مصفوفة أحادية البعد يطلق عليها مصفوفة اإلزاحة‬
‫‪ Translation Matrix‬أو متجه اإلزاحة ‪ ،Translation Vector‬وكما في المعادلة التالية‪:‬‬

‫‪𝑥′‬‬ ‫𝑥𝑡‬ ‫𝑥‬

‫]𝑦[ ‪[ ′ ] = [𝑡 ] +‬‬
‫𝑦‬ ‫𝑦‬

‫تدوير شكل ثنائي البعد ‪2D- Rotation‬‬

‫لتدوير شكل ما‪ ،‬يتم تدوير رؤوسه حول محور يسمى محور التدوير ‪ Rotation Axis‬وبزاوية‬
‫معينة ‪ ‬تسمى زاوية الدوران ‪ Rotation Angle‬والتي من خاللها يتم تحديد إتجاه الدوران‪ .‬فالقيمة‬

‫‪22‬‬
 ‫الرسم بالحاسوب ‪Computer Graphics‬‬
‫أ‪ .‬فاطمة علي المحجوب‬ ‫المحاضرة ‪ :2‬التحويالت الهندسية‬

‫الموجبة تجعل الدوران عكس اتجاه عقارب الساعة ‪ Counterclockwise‬والقيمة السالبة تجعل‬
‫الدوران بإتجاه عقارب الساعة ‪ .Clockwise‬أما النقطة التي تجري حولها عملية الدوران فتسمى‬
‫نقطة التدوير ‪ Rotation point‬أو نقطة االرتكاز ‪ ،Pivot point‬واحداثياتها ) 𝑟𝑦 ‪ (𝑥𝑟 ,‬وغالبا‬
‫ما تكون نقطة األصل ))‪.(0,0‬‬

‫التدوير حول نقطة األصل‬

‫يبين الشكل التالي عملية تدوير النقطة )‪ (x,y‬حول نقطة األصل وبزاوية ‪ ‬لتصبح ) ‪.(𝑥 ′ , 𝑦 ′‬‬
‫ولحساب إحداثيات النقطة بعد التدوير يتم أول تمثيل إحداثيات النقطة )‪ (x,y‬األصلية أي قبل‬
‫الدوران باإلحداثيات القطبية بإستخدام المعادالت‪:‬‬

‫∅𝑠𝑜𝑐𝑟 = 𝑥‬
‫∅𝑛𝑖𝑠𝑟 = 𝑦‬

‫ولحساب موقع النقطة األصلية الجديد ) ‪ ،(𝑥 ′ , 𝑦 ′‬يتم االستعانة ببعض العالقات المثلثية‬
‫‪ Trigonometric Identities‬كما يلي‪:‬‬

‫𝜃𝑛𝑖𝑠∅𝑛𝑖𝑠𝑟 ‪𝑥 ′ = 𝑟𝑐𝑜𝑠(∅ + 𝜃 ) = 𝑟𝑐𝑜𝑠∅𝑐𝑜𝑠𝜃 −‬‬

‫𝜃𝑠𝑜𝑐∅𝑛𝑖𝑠𝑟 ‪𝑦 ′ = 𝑟𝑠𝑖𝑛(∅ + 𝜃 ) = 𝑟𝑐𝑜𝑠∅𝑠𝑖𝑛𝜃 +‬‬

‫بالتعويض عن قيم ‪ x,y‬من المعادلتين )‪ (1,2‬في المعادلتين )‪ (3,4‬نتحصل على‪:‬‬

‫𝜃𝑛𝑖𝑠𝑦 ‪𝑥 ′ = 𝑥𝑐𝑜𝑠𝜃 −‬‬

‫𝜃𝑠𝑜𝑐𝑦 ‪𝑦 ′ = 𝑥𝑠𝑖𝑛𝜃 +‬‬

‫وباستخدام المصفوفات يمكن إعادة كتابة المعادالت كما يلي‪:‬‬

‫‪𝑥′‬‬ ‫𝜃𝑠𝑜𝑐‬ ‫𝑥 𝜃𝑛𝑖𝑠‪−‬‬

‫[ = ]‪[ ′‬‬ ‫]𝑦[ ‪] .‬‬
‫𝑦‬ ‫𝜃𝑛𝑖𝑠‬ ‫𝜃𝑠𝑜𝑐‬
‫ولتدوير نقطة حول نقطة غير نقطة األصل مثال النقطة ) 𝑟𝑦 ‪ ،(𝑥𝑟 ,‬فيتم أوال إزاحة الشكل إلى‬
‫نقطة األصل‪ ،‬ومن تم تدوير الشكل بزاوية تدوير ‪ ،‬وأخي ار إزاحة الشكل إلى مكانه األصلي في‬
‫النقطة ) 𝑟𝑦 ‪ .(𝑥𝑟 ,‬وبالتالي تصبح المعادالت السابقة كما يلي‪:‬‬

‫𝜃𝑛𝑖𝑠) 𝑟𝑦 ‪𝑥 ′ = 𝑥𝑟 + (𝑥 − 𝑥𝑟 )𝑐𝑜𝑠𝜃 − (𝑦 −‬‬

‫‪25‬‬
 ‫الرسم بالحاسوب ‪Computer Graphics‬‬
‫أ‪ .‬فاطمة علي المحجوب‬ ‫المحاضرة ‪ :2‬التحويالت الهندسية‬

‫𝜃𝑠𝑜𝑐) 𝑟𝑦 ‪𝑦 ′ = 𝑦𝑟 + (𝑥 − 𝑥𝑟 )𝑠𝑖𝑛𝜃 + (𝑦 −‬‬

‫وبإستخدام المصفوفات‪:‬‬

‫‪𝑥′‬‬ ‫𝑟𝑥‬ ‫𝜃𝑠𝑜𝑐‬ ‫𝑟𝑥 ‪−𝑠𝑖𝑛𝜃 𝑥 −‬‬

‫[ ‪[ ′ ] = [𝑦 ] +‬‬ ‫] 𝑦 ‪] . [𝑦 −‬‬
‫𝑦‬ ‫𝑟‬ ‫𝜃𝑛𝑖𝑠‬ ‫𝜃𝑠𝑜𝑐‬ ‫𝑟‬

‫تقييس شكل ثنائي ‪2D Scaling‬‬

‫يقصد بالتقييس التحكم في حجم شكل معين‪ .‬ويتم ذلك بضرب كل رأس من رؤوس الشكل بمعامل‬
‫التقييس ‪ Scaling factor‬والتي سيرمز لها بالرمزين ‪ Sx, Sy‬على المحورين السيني والصادي‪.‬‬
‫وبالتالي تصبح احداثيات الرؤوس بعد التقييس كما في المعادالت التالية‪:‬‬

‫𝑥𝑆 ∗ 𝑥 = ‪𝑥 ′‬‬
‫𝑦𝑆 ∗ 𝑦 = ‪𝑦 ′‬‬

‫وبالمصفوفات تصبح المعادالت‪:‬‬

‫‪𝑥′‬‬ ‫𝑥𝑆‬ ‫‪0‬‬ ‫𝑥‬

‫‪[ ′] = [ 0‬‬ ‫𝑦𝑆‬ ‫]‬ ‫∗‬ ‫[‬ ‫]𝑦‬
‫𝑦‬

‫لتقليص حجم الشكل يجب أن تكون معامالت التقييس أصغر من ‪ ،1‬أما جعلها أكبر من ‪ 1‬فيتم‬
‫تكبير الشكل‪ .‬وليبقى الشكل بحجمه األصلي يتم تسوية معامالت التقييس بالواحد‪.‬‬

‫اإلحداثيات المتجانسة ‪Homogenous Coordinates‬‬

‫نحتاج في كثير من األحيان إلى إجراء سلسلة من التحويالت الهندسية على األشكال في وقت‬
‫واحد‪ ،‬كأن يتم تدويره ثم إزاحته ومن تم تدويره ثم تكبيره ومن ثم إزاحته وهكذا‪ .‬وهذا يعني دمج عدد‬
‫من التحويالت في حركة واحدة‪ .‬فكان الحل هو إليجاد مصفوفة قادرة على تمثيل كل التحويالت‬
‫ال مصفوفة التحويل التالية‪:‬‬
‫المطلوبة‪ .‬فمث ً‬

‫‪𝑃′ = 𝑀1. 𝑃 + 𝑀2‬‬

‫تعني أن ‪ 𝑃′‬يمتل نتيجة المتجه ‪ P‬بعد ضربه في المصفوفة ‪ M1‬التي تمثل تدوير أو تقييس‬
‫المتجه ومن ثم إضافة المصفوفة ‪ M2‬إليه والتي تمثل عملية إزاحة المتجه‪ .‬المشكلة هنا أن أبعاد‬
‫المصفوفات المختلفة قد تسبب أخطاء وخاصة عند ضرب المصفوفات‪ .‬فكان الحل في حالة‬

‫‪22‬‬
 ‫الرسم بالحاسوب ‪Computer Graphics‬‬
‫أ‪ .‬فاطمة علي المحجوب‬ ‫المحاضرة ‪ :2‬التحويالت الهندسية‬

‫األشكال ثنائية البعد هو استخدام مصفوفة مربعة واحدة تتكون من ثالثة أعمدة وثالثة صفوف‪.‬‬
‫فاالحداثي اإلفتراضي الثالث هو االحداثي المتجانس ‪ Homogenous Coordinate‬وتكون قيمته‬
‫مساوية للواحد لتجنب الضرب في الصفر‪ .‬بإضافة اإلحداثي المتجانس يتم التعامل مع إحداثيات‬
‫الرؤوس بالصيغة )‪.(x,y,1‬‬

‫وباالعتماد على اإلحداثيات المتجانسة سيتم إعادة كتابة كل مصفوفات التحويالت السابقة بالشكل‬
‫التالي‪:‬‬

‫مصفوفة اإل زاحة ‪Translation Matrix‬‬

‫‪1‬‬ ‫‪0‬‬ ‫𝑥𝑡‬

‫‪𝑇 = [0‬‬ ‫‪1‬‬ ‫] 𝑦𝑡‬
‫‪0‬‬ ‫‪0‬‬ ‫‪1‬‬
‫وبالتالي فإن معادلة اإلزاحة تصبح‪:‬‬

‫‪𝑥′‬‬ ‫‪1 0‬‬ ‫𝑥 𝑥𝑡‬

‫‪′‬‬
‫‪[𝑦 ] = [0 1‬‬ ‫]𝑦[ ‪𝑡𝑦 ] .‬‬
‫‪1‬‬ ‫‪0 0‬‬ ‫‪1‬‬ ‫‪1‬‬

‫مصفوفة الدوران ‪ Rotation Matrix‬حول نقطة األصل‬

‫𝜃𝑠𝑜𝑐‬ ‫𝜃𝑛𝑖𝑠‪−‬‬ ‫‪0‬‬

‫𝜃𝑛𝑖𝑠 [ = 𝑅‬ ‫𝜃𝑠𝑜𝑐‬ ‫]‪0‬‬
‫‪0‬‬ ‫‪0‬‬ ‫‪1‬‬
‫وتكون معادلة الدوران حول النقطة نقطة األصل هي‪:‬‬

‫‪𝑥′‬‬ ‫𝜃𝑠𝑜𝑐‬ ‫𝜃𝑛𝑖𝑠‪−‬‬ ‫𝑥 ‪0‬‬

‫‪′‬‬
‫𝜃𝑛𝑖𝑠 [ = ] 𝑦[‬ ‫𝜃𝑠𝑜𝑐‬ ‫]𝑦[ ‪0] .‬‬
‫‪1‬‬ ‫‪0‬‬ ‫‪0‬‬ ‫‪1 1‬‬
‫مصفوفة التقييس ‪Scaling Matrix‬‬

‫𝑥𝑆‬ ‫‪0‬‬ ‫‪0‬‬

‫‪𝑆 = [0‬‬ ‫𝑦𝑆‬ ‫]‪0‬‬
‫‪0‬‬ ‫‪0‬‬ ‫‪1‬‬
‫وبالتالي فإن معادلة التقييس تكون‪:‬‬

‫‪23‬‬
 ‫الرسم بالحاسوب ‪Computer Graphics‬‬
‫أ‪ .‬فاطمة علي المحجوب‬ ‫المحاضرة ‪ :2‬التحويالت الهندسية‬

‫‪𝑥′‬‬ ‫𝑥𝑆‬ ‫‪0‬‬ ‫𝑥 ‪0‬‬

‫‪′‬‬
‫‪[𝑦 ] = [ 0‬‬ ‫𝑦𝑆‬ ‫]𝑦[ ‪0] .‬‬
‫‪1‬‬ ‫‪0‬‬ ‫‪0‬‬ ‫‪1 1‬‬
‫معكوس التحويالت ‪Invers Transformation‬‬

‫يستخدم معكوس التحويالت إلعادة األشكال إلى وضعها األصلي‪ .‬وفيما يلي معكوس مصفوفات‬
‫التحويالت الثالثة‪.‬‬
‫معكوس مصفوفة اإلزاحة ‪Translation Matrix‬‬
‫‪1‬‬ ‫𝑥𝑡‪0 −‬‬
‫‪−1‬‬
‫𝑇‬ ‫‪= [0‬‬ ‫] 𝑦𝑡‪1 −‬‬
‫‪0‬‬ ‫‪0‬‬ ‫‪1‬‬
‫معكوس مصفوفة الدوران ‪Rotation Matrix‬‬
‫𝜃𝑠𝑜𝑐‬ ‫𝜃𝑛𝑖𝑠‬ ‫‪0‬‬
‫‪−1‬‬
‫𝑅‬ ‫𝜃𝑛𝑖𝑠‪= [−‬‬ ‫𝜃𝑠𝑜𝑐‬ ‫]‪0‬‬
‫‪0‬‬ ‫‪0‬‬ ‫‪1‬‬
‫معكوس مصفوفة التقييس ‪Scaling Matrix‬‬
‫‪1‬‬
‫‪0‬‬ ‫‪0‬‬
‫𝑥𝑆‬
‫= ‪𝑆 −1‬‬ ‫‪1‬‬
‫‪0‬‬ ‫‪0‬‬
‫𝑦𝑆‬
‫‪[0‬‬ ‫‪0‬‬ ‫]‪1‬‬

‫التدوير حول نقطة ما ‪General Pivot-Point Rotation‬‬

‫لتدوير شكل حول نقطة غير نقطة األصل‪ ،‬مثال النقطة ) 𝑟𝑦 ‪ ،(𝑥𝑟 ,‬يتم اتباع الخطوات التالية‪:‬‬

‫‪ .1‬إزاحة الشكل إلى نقطة األصل‪.‬‬

‫‪ .2‬تدوير الشكل بزاوية تدوير ‪.‬‬
‫‪ .3‬إزاحة الشكل إلى مكانه األصلي في النقطة ) 𝑟𝑦 ‪.(𝑥𝑟 ,‬‬

‫وبذلك فإن مصفوفة الدوران حول النقطة ) 𝑟𝑦 ‪ (𝑥𝑟 ,‬تأخذ الشكل التالي‪:‬‬

‫‪20‬‬
 ‫الرسم بالحاسوب ‪Computer Graphics‬‬
‫أ‪ .‬فاطمة علي المحجوب‬ ‫المحاضرة ‪ :2‬التحويالت الهندسية‬

‫‪1‬‬ ‫𝜃𝑠𝑜𝑐 𝑟𝑥 ‪0‬‬ ‫𝜃𝑛𝑖𝑠‪−‬‬ ‫‪0 1‬‬ ‫𝑟𝑥‪0 −‬‬

‫‪𝑅 = [0‬‬ ‫𝜃𝑛𝑖𝑠 [ ‪1 𝑦𝑟 ] .‬‬ ‫𝜃𝑠𝑜𝑐‬ ‫‪0] . [0‬‬ ‫] 𝑟𝑦‪1 −‬‬
‫‪0‬‬ ‫‪0 1‬‬ ‫‪0‬‬ ‫‪0‬‬ ‫‪1 0‬‬ ‫‪0‬‬ ‫‪1‬‬
‫𝜃𝑠𝑜𝑐‬ ‫𝜃𝑛𝑖𝑠‪−‬‬ ‫𝜃𝑛𝑖𝑠 𝑟𝑦 ‪𝑥𝑟 (1 − 𝑐𝑜𝑠𝜃 ) +‬‬
‫𝜃𝑛𝑖𝑠 [ = 𝑅‬ ‫𝜃𝑠𝑜𝑐‬ ‫] 𝜃𝑛𝑖𝑠 𝑟𝑥 ‪𝑦𝑟 (1 − 𝑐𝑜𝑠𝜃 ) −‬‬
‫‪0‬‬ ‫‪0‬‬ ‫‪1‬‬
‫وتكون معادلة الدوران حول النقطة ) 𝑟𝑦 ‪ (𝑥𝑟 ,‬هي‪:‬‬

‫‪𝑥′‬‬ ‫𝜃𝑠𝑜𝑐‬ ‫𝜃𝑛𝑖𝑠‪−‬‬ ‫𝑥 𝜃𝑛𝑖𝑠 𝑟𝑦 ‪𝑥𝑟 (1 − 𝑐𝑜𝑠𝜃 ) +‬‬

‫‪′‬‬
‫𝜃𝑛𝑖𝑠 [ = ] 𝑦[‬ ‫𝜃𝑠𝑜𝑐‬ ‫]𝑦[ ‪𝑦𝑟 (1 − 𝑐𝑜𝑠𝜃 ) − 𝑥𝑟 𝑠𝑖𝑛𝜃 ] .‬‬
‫‪1‬‬ ‫‪0‬‬ ‫‪0‬‬ ‫‪1‬‬ ‫‪1‬‬

‫التقييس حول نقطة ثابتة ‪General Fixed-Point Scaling‬‬

‫لتصغير أ و تكبير شكل بداللة نقطة ثابتة مثل النقطة ) 𝑓𝑦 ‪ ،(𝑥𝑓 ,‬يتم اتباع الخطوات التالية‪:‬‬

‫‪ .1‬إزاحة الشكل إلى نقطة األصل‪.‬‬

‫‪ .2‬ضرب رؤوس الشكل بمعامل التقييس‪.‬‬
‫‪ .3‬أعد الشكل إلى مكانه األصلي‪.‬‬

‫وبذلك فإن مصفوفة التقييس حول النقطة ) 𝑓𝑦 ‪ (𝑥𝑓 ,‬تأخذ الشكل التالي‪:‬‬

‫‪1‬‬ ‫‪0‬‬ ‫𝑥𝑆 𝑓𝑥‬ ‫‪0‬‬ ‫‪0 1‬‬ ‫𝑓𝑥‪0 −‬‬

‫‪𝑆 = [0‬‬ ‫‪1‬‬ ‫‪𝑦𝑓 ] . [ 0‬‬ ‫𝑦𝑆‬ ‫‪0] . [0‬‬ ‫] 𝑓𝑦‪1 −‬‬
‫‪0‬‬ ‫‪0‬‬ ‫‪1‬‬ ‫‪0‬‬ ‫‪0‬‬ ‫‪1 0‬‬ ‫‪0‬‬ ‫‪1‬‬
‫𝑥𝑆‬ ‫‪0‬‬ ‫) 𝑥𝑆 ‪𝑥𝑓 (1 −‬‬
‫‪𝑆 = [0‬‬ ‫𝑦𝑆‬ ‫]) 𝑦𝑆 ‪𝑦𝑓 (1 −‬‬
‫‪0‬‬ ‫‪0‬‬ ‫‪1‬‬
‫وبالتالي فإن معادلة التقييس حول نقطة ثابتة لها الشكل التالي‪:‬‬

‫‪𝑥′‬‬ ‫𝑥𝑆‬ ‫‪0‬‬ ‫𝑥 ) 𝑥𝑆 ‪𝑥𝑓 (1 −‬‬

‫‪′‬‬
‫‪[𝑦 ] = [ 0‬‬ ‫𝑦𝑆‬ ‫]𝑦[ ‪𝑦𝑓 (1 − 𝑆𝑦 )] .‬‬
‫‪1‬‬ ‫‪0‬‬ ‫‪0‬‬ ‫‪1‬‬ ‫‪1‬‬

‫‪22‬‬
 ‫الرسم بالحاسوب ‪Computer Graphics‬‬
‫أ‪ .‬فاطمة علي المحجوب‬ ‫المحاضرة ‪ :2‬التحويالت الهندسية‬

‫التحويالت الهندسية ثالثية األبعاد ‪3D Geometric Transformation‬‬

‫تتم هذه التحويالت على المحاور الثالثة‪ .x, y, z :‬وبالتالي سيتم توسيع المصفوفة المتجانسة‬
‫إلستعاب اإلحداثيات الثالثة باإلضافة إلى االحداثي المتجانس فتصبح رباعية ‪.4x4‬‬

‫إزاحة الشكل ثالثي األبعاد ‪3D Translation‬‬

‫إلزاحة النقطة )‪ (x,y,z‬بمقدار ) 𝑧𝑡 ‪ (𝑡𝑥 , 𝑡𝑦 ,‬لتصبح ) ‪ (𝑥 ′ , 𝑦 ′ , 𝑧 ′‬نستخدم المعادالت‪:‬‬

‫𝑥𝑡 ‪𝑥 ′ = 𝑥 +‬‬
‫𝑦𝑡 ‪𝑦 ′ = 𝑦 +‬‬
‫𝑧𝑡 ‪𝑧 ′ = 𝑧 +‬‬
‫وباستخدام المصفوفات تصبح‪:‬‬
‫‪𝑥′‬‬ ‫‪1‬‬ ‫‪0‬‬ ‫𝑥 𝑥𝑡 ‪0‬‬
‫‪′‬‬ ‫‪0‬‬ ‫‪1‬‬ ‫𝑦 𝑦𝑡 ‪0‬‬
‫𝑦‬
‫[ = ]‪[ ′‬‬ ‫] [‪].‬‬
‫𝑧‬ ‫‪0‬‬ ‫‪0‬‬ ‫𝑧 𝑧𝑡 ‪1‬‬
‫‪1‬‬ ‫‪0‬‬ ‫‪0‬‬ ‫‪0 1‬‬ ‫‪1‬‬

‫التدوير ثالثي األبعاد ‪3D Rotation‬‬

‫يمكن تدوير األشكال الثالثية على إحدى المحاور الثال ثة وبالتالي تنقيم عمليات تحويل التدوير‬
‫إلى‪:‬‬

‫‪ .1‬التدوير حول المحور ‪z‬‬

‫وتكون معادلة التدوير كما يلي‪:‬‬

‫𝜃𝑛𝑖𝑠𝑦 ‪𝑥 ′ = 𝑥𝑐𝑜𝑠𝜃 −‬‬

‫𝜃𝑠𝑜𝑐𝑦 ‪𝑦 ′ = 𝑥𝑠𝑖𝑛𝜃 +‬‬
‫𝑧 = ‪𝑧′‬‬

‫وباستخدام المصفوفات يمكن إعادة كتابة المعادالت كما يلي‪:‬‬

‫‪26‬‬
 ‫الرسم بالحاسوب ‪Computer Graphics‬‬
‫أ‪ .‬فاطمة علي المحجوب‬ ‫المحاضرة ‪ :2‬التحويالت الهندسية‬

‫‪𝑥′‬‬ ‫𝜃𝑠𝑜𝑐‬ ‫𝜃𝑛𝑖𝑠‪−‬‬ ‫‪0‬‬ ‫𝑥 ‪0‬‬

‫‪′‬‬
‫𝑦‬ ‫𝜃𝑛𝑖𝑠‬ ‫𝜃𝑠𝑜𝑐‬ ‫‪0‬‬ ‫𝑦 ‪0‬‬
‫[ = ]‪[ ′‬‬ ‫] [‪].‬‬
‫𝑧‬ ‫‪0‬‬ ‫‪0‬‬ ‫‪1‬‬ ‫𝑧 ‪0‬‬
‫‪1‬‬ ‫‪0‬‬ ‫‪0‬‬ ‫‪0‬‬ ‫‪1 1‬‬
‫‪ .2‬التدوير حول حور ‪x‬‬

‫وتكون معادلة التدوير كما يلي‪:‬‬

‫𝜃𝑛𝑖𝑠𝑧 ‪𝑦 ′ = 𝑦𝑐𝑜𝑠𝜃 −‬‬
‫𝜃𝑠𝑜𝑐𝑧 ‪𝑧 ′ = 𝑦𝑠𝑖𝑛𝜃 +‬‬
‫𝑥 = ‪𝑥′‬‬
‫وباستخدام المصفوفات يمكن إعادة كتابة المعادالت كما يلي‪:‬‬
‫‪𝑦′‬‬ ‫𝜃𝑠𝑜𝑐‬ ‫𝜃𝑛𝑖𝑠‪−‬‬ ‫𝑦 ‪0 0‬‬
‫‪′‬‬ ‫𝜃𝑛𝑖𝑠‬ ‫𝜃𝑠𝑜𝑐‬ ‫𝑧 ‪0 0‬‬
‫[ = ]‪[𝑧 ′‬‬ ‫] [‪].‬‬
‫𝑥‬ ‫‪0‬‬ ‫‪0‬‬ ‫𝑥 ‪1 0‬‬
‫‪1‬‬ ‫‪0‬‬ ‫‪0‬‬ ‫‪0 1 1‬‬
‫‪ .3‬التدوير حول حور ‪y‬‬
‫وتكون معادلة التدوير كما يلي‪:‬‬
‫𝜃𝑛𝑖𝑠𝑥 ‪𝑧 ′ = 𝑧𝑐𝑜𝑠𝜃 −‬‬
‫𝜃𝑠𝑜𝑐𝑥 ‪𝑥 ′ = 𝑧𝑠𝑖𝑛𝜃 +‬‬
‫𝑦 = ‪𝑦′‬‬

‫وباستخدام المصفوفات يمكن إعادة كتابة المعادالت كما يلي‪:‬‬

‫‪𝑧′‬‬ ‫𝜃𝑠𝑜𝑐‬ ‫𝜃𝑛𝑖𝑠‪−‬‬ ‫‪0‬‬ ‫𝑧 ‪0‬‬

‫‪′‬‬
‫𝑥‬ ‫𝜃𝑛𝑖𝑠‬ ‫𝜃𝑠𝑜𝑐‬ ‫‪0‬‬ ‫𝑥 ‪0‬‬
‫[ = ]‪[ ′‬‬ ‫] [‪].‬‬
‫𝑦‬ ‫‪0‬‬ ‫‪0‬‬ ‫‪1‬‬ ‫𝑦 ‪0‬‬
‫‪1‬‬ ‫‪0‬‬ ‫‪0‬‬ ‫‪0‬‬ ‫‪1 1‬‬
‫التقييس ثالثي األبعاد ‪3D Scaling‬‬

‫ال تختلف عن التقييس الثنائي األبعاد اال في إضافة المحور ‪ z‬في مصفوفة التحويل‪.‬‬

‫‪𝑥′‬‬ ‫𝑥𝑆‬ ‫‪0‬‬ ‫‪0‬‬ ‫𝑥 ‪0‬‬

‫‪′‬‬ ‫‪0‬‬ ‫𝑦𝑆‬ ‫‪0‬‬ ‫𝑦 ‪0‬‬
‫𝑦‬
‫[ = ]‪[ ′‬‬ ‫] [‪].‬‬
‫𝑧‬ ‫‪0‬‬ ‫‪0‬‬ ‫𝑧𝑆‬ ‫𝑧 ‪0‬‬
‫‪1‬‬ ‫‪0‬‬ ‫‪0‬‬ ‫‪0‬‬ ‫‪1 1‬‬

‫‪27‬‬