شرح مادة CS 360 رسومات الحاسب - جامعة الاميرة نورة

مادة CS 360، رسومات الحاسب (Computer Graphics) بجامعة الاميرة نورة بنت عبدالرحمن هي المادة اللي تلتقي فيها الرياضيات بالفن. تخيلي ان كل لعبة لعبتيها، كل فلم انيميشن شفتيه، وكل فلتر صورة استخدمتيه على جوالك، وراه كود ورياضيات. في هذي المادة راح تفهمين كيف الكمبيوتر يرسم خط على الشاشة، كيف يحرك مجسم ثلاثي الابعاد، وكيف يضيف اضاءة تخلي المشهد يبان واقعي. المادة تعتمد على لغة C++ مع مكتبة OpenGL، وهذا يعني انك تتعاملين مباشرة مع الهاردوير اللي يرسم البكسلات على شاشتك.

لو انتي من اللي يحبون يشوفون نتيجة شغلهم بصريا، هذي المادة راح تعجبك. بدل ما تطبعين ارقام على الكونسول مثل المواد السابقة، هنا راح تشوفين اشكال والوان وحركة على الشاشة. بس خلينا نكون صريحين: المادة فيها رياضيات ثقيلة (مصفوفات، متجهات، وزوايا) فلو رياضياتك ضعيفة، خصصي وقت تراجعين فيه الاساسيات. لو تبين مراجعة سريعة لاساسيات C++ قبل ما تبدين، هذا راح يفيدك.

ليش رسومات الحاسب مهمة لمسارك؟

قبل ما نغوص في المواضيع، خلينا نفهم ليش هذي المادة تستاهل كل الجهد اللي راح تحطينه فيها:

• تطوير الالعاب: كل لعبة فيديو من Minecraft الى Genshin Impact مبنية على مفاهيم رسومات الحاسب. لو تبين تدخلين مجال Game Development، هذي المادة هي نقطة البداية الفعلية
• الواقع الافتراضي والمعزز (VR/AR): مجال ينمو بسرعة رهيبة وشركات كبيرة مثل Meta و Apple توظف مهندسات رسومات. فهمك للاسقاط والتحويلات الهندسية هو اساس هذا المجال
• الانيميشن والافلام: استوديوهات مثل Pixar و DreamWorks تستخدم نفس المبادئ اللي راح تتعلمينها. الفرق بس في حجم المشاريع
• معالجة الصور الطبية: تطبيقات CT Scan و MRI تعتمد على رسومات الحاسب في عرض الصور ثلاثية الابعاد للاعضاء
• فرص وظيفية مميزة: مبرمجات الرسومات يوصل راتبهم في شركات مثل NVIDIA و Unity الى اضعاف المبرمج العادي، والسبب بسيط: اللي يفهمون رياضيات الرسومات ويقدرون يكتبون shaders قليلين جدا مقارنة بالطلب

1. البكسل والالوان (Pixels & Colors)

البكسل هو اصغر وحدة على شاشتك. شاشتك عبارة عن شبكة ضخمة من البكسلات، كل بكسل له لون محدد. لما تفتحين صورة على جوالك وتكبرينها، تشوفين المربعات الصغيرة. هذي هي البكسلات.

نظام الاحداثيات

في OpenGL، الشاشة عندها نظام احداثيات. النقطة (0,0) ممكن تكون في الزاوية السفلية اليسرى (وهذا يختلف عن بعض الانظمة اللي تبدا من الزاوية العليا). كل بكسل عنده احداثيات (x, y) تحدد مكانه على الشاشة.

نموذج الالوان RGB

كل لون على الشاشة عبارة عن خلط ثلاثة الوان اساسية:

• R (Red): الاحمر، من 0 الى 255 (او من 0.0 الى 1.0 في OpenGL)
• G (Green): الاخضر
• B (Blue): الازرق

يعني اللون الابيض = (255, 255, 255)، الاسود = (0, 0, 0)، والاحمر الصافي = (255, 0, 0).

// تحديد لون الخلفية في OpenGL
// القيم من 0.0 (صفر) الى 1.0 (كامل)
glClearColor(0.0f, 0.0f, 0.3f, 1.0f); // خلفية زرقاء غامقة
glClear(GL_COLOR_BUFFER_BIT);

// رسم نقطة بلون احمر
glColor3f(1.0f, 0.0f, 0.0f); // احمر صافي
glBegin(GL_POINTS);
    glVertex2f(100.0f, 150.0f); // نقطة عند (100, 150)
glEnd();

رسم اشكال بسيطة

// رسم مثلث ملون
glBegin(GL_TRIANGLES);
    glColor3f(1.0f, 0.0f, 0.0f); // رأس احمر
    glVertex2f(200.0f, 300.0f);

    glColor3f(0.0f, 1.0f, 0.0f); // رأس اخضر
    glVertex2f(100.0f, 100.0f);

    glColor3f(0.0f, 0.0f, 1.0f); // رأس ازرق
    glVertex2f(300.0f, 100.0f);
glEnd();

لما تحطين لون مختلف لكل رأس، OpenGL يخلط الالوان تلقائيا بينهم وينتج تدرج لوني. هذي العملية اسمها Color Interpolation وراح تفهمين رياضياتها اكثر لما نوصل للتظليل.

2. خوارزميات رسم الخطوط (Line Drawing Algorithms)

سؤال يبان بسيط: كيف يرسم الكمبيوتر خط مستقيم بين نقطتين؟ مو بالبساطة اللي تتخيلينها. الشاشة مقسمة لبكسلات (مربعات)، والخط المستقيم سلس ومستمر. فالمشكلة: كيف نختار البكسلات اللي “تمثل” الخط بشكل اقرب للحقيقة؟

خوارزمية Bresenham

خوارزمية Bresenham من اشهر الخوارزميات في رسومات الحاسب وتجي كثير في الاختبارات. الفكرة الاساسية: بدل ما نستخدم عمليات عشرية (بطيئة على الهاردوير)، نستخدم بس عمليات صحيحة (جمع وطرح ومقارنة).

الخطوات المبسطة:

1. احسبي الفرق في x: dx = x2 - x1
2. احسبي الفرق في y: dy = y2 - y1
3. عندك متغير قرار (decision parameter) يبدا بـ: p = 2*dy - dx
4. في كل خطوة:
   • لو p سالب: البكسل التالي هو (x+1, y) و p = p + 2*dy
   • لو p موجب: البكسل التالي هو (x+1, y+1) و p = p + 2*dy - 2*dx

// تطبيق مبسط لخوارزمية Bresenham
void bresenhamLine(int x1, int y1, int x2, int y2) {
    int dx = x2 - x1;
    int dy = y2 - y1;
    int p = 2 * dy - dx; // متغير القرار الاولي

    int x = x1, y = y1;
    glBegin(GL_POINTS);
    while (x <= x2) {
        glVertex2i(x, y); // ارسمي البكسل
        if (p < 0) {
            p = p + 2 * dy; // البكسل التالي نفس y
        } else {
            p = p + 2 * dy - 2 * dx;
            y++; // البكسل التالي y تزيد 1
        }
        x++;
    }
    glEnd();
}

خوارزمية DDA

خوارزمية DDA (Digital Differential Analyzer) ابسط من Bresenham بس تستخدم عمليات عشرية. الفكرة: احسبي ميل الخط (slope) وزيدي y بمقدار الميل مع كل خطوة في x. سهلة في الفهم بس ابطأ على الهاردوير لان العمليات العشرية اثقل.

3. التحويلات الهندسية (Geometric Transformations)

هذا الموضوع اللي يعتبرونه اصعب جزء في المادة، وبنفس الوقت اهم جزء. كل حركة تشوفينها في لعبة فيديو او فلم (شخصية تمشي، كاميرا تدور، مجسم يكبر) كلها تحويلات هندسية.

الانتقال (Translation)

الانتقال يعني تحريك شكل من مكان لمكان بدون ما يتغير حجمه او شكله. في OpenGL نستخدم glTranslatef():

// نقل مربع 100 وحدة يمين و 50 وحدة فوق
glPushMatrix(); // احفظي الحالة الحالية
    glTranslatef(100.0f, 50.0f, 0.0f); // x, y, z
    // ارسمي الشكل هنا
    glutWireCube(40.0); // مكعب بحجم 40
glPopMatrix(); // ارجعي للحالة الاصلية

رياضيا، لو عندك نقطة (x, y) وتبين تنقلينها بمقدار (tx, ty)، النقطة الجديدة تصير (x + tx, y + ty). سهلة صح؟

الدوران (Rotation)

الدوران يعني تلفين شكل حول نقطة معينة بزاوية محددة. في OpenGL نستخدم glRotatef():

// دوران 45 درجة حول محور Z
glPushMatrix();
    glRotatef(45.0f, 0.0f, 0.0f, 1.0f);
    // الارقام: (الزاوية، محور X، محور Y، محور Z)
    // (1.0 = فعل هذا المحور، 0.0 = لا)
    glutWireCube(40.0);
glPopMatrix();

رياضيا، الدوران يستخدم sin و cos. النقطة (x, y) بعد الدوران بزاوية θ تصير:

• x’ = x * cos(θ) - y * sin(θ)
• y’ = x * sin(θ) + y * cos(θ)

التحجيم (Scaling)

التحجيم يعني تكبير او تصغير الشكل. في OpenGL نستخدم glScalef():

// تكبير الشكل الضعف في X والنص في Y
glPushMatrix();
    glScalef(2.0f, 0.5f, 1.0f);
    // x تتضاعف، y تنص، z ما تتغير
    glutWireCube(40.0);
glPopMatrix();

glPushMatrix و glPopMatrix: انقذي حياتك

هذي اهم نقطة في التحويلات وكثير من الطالبات ينسونها. تخيلي ان glPushMatrix() مثل ما تحفظين “bookmark” للحالة الحالية، و glPopMatrix() ترجعك لذلك البوكمارك. بدونهم، كل تحويل يتراكم على اللي قبله ويصير عندك فوضى كاملة.

// رسم شكلين كل واحد بتحويلاته الخاصة
glPushMatrix(); // احفظي الحالة
    glTranslatef(100.0f, 0.0f, 0.0f);
    glRotatef(30.0f, 0.0f, 0.0f, 1.0f);
    glutWireCube(20.0); // مكعب 1: منقول ومدور
glPopMatrix(); // ارجعي للحالة الاصلية

glPushMatrix(); // احفظي مرة ثانية
    glTranslatef(-100.0f, 0.0f, 0.0f);
    glScalef(2.0f, 2.0f, 2.0f);
    glutWireCube(20.0); // مكعب 2: منقول ومكبر
glPopMatrix(); // ارجعي مرة ثانية

تجميع التحويلات (Composite Transformations)

في الواقع، تحتاجين تجمعين اكثر من تحويل. مثلا: دوران حول نقطة غير المركز يحتاج 3 خطوات:

1. انقلي الشكل عشان النقطة المطلوبة تصير على المركز
2. دوري
3. انقلي الشكل راجع لمكانه الاصلي

// دوران 90 درجة حول النقطة (50, 50) بدل المركز
glPushMatrix();
    glTranslatef(50.0f, 50.0f, 0.0f);  // 3. ارجعي
    glRotatef(90.0f, 0.0f, 0.0f, 1.0f); // 2. دوري
    glTranslatef(-50.0f, -50.0f, 0.0f); // 1. انقلي للمركز
    // ارسمي الشكل
    glutWireCube(30.0);
glPopMatrix();

تذكري: الترتيب بالعكس في الكود. الخطوة 1 تنكتب اخر شيء لانها تتطبق اول.

4. القطع (Clipping)

القطع يعني: ايش يظهر على الشاشة وايش ينقطع. لو عندك خط طويل يمتد خارج حدود النافذة، الجزء اللي برا النافذة ما يترسم. هذي عملية القطع وهي مهمة جدا لتحسين الاداء.

خوارزمية Cohen-Sutherland

من اشهر خوارزميات قطع الخطوط. الفكرة الاساسية:

1. قسمي الفضاء لـ 9 مناطق حول نافذة العرض. كل منطقة لها كود من 4 بتات (bits):

   • بت 1: فوق النافذة
   • بت 2: تحت النافذة
   • بت 3: يمين النافذة
   • بت 4: يسار النافذة

2. احسبي كود كل نهاية من الخط:

   • لو الطرفين كودهم 0000: الخط كله داخل النافذة (ارسميه كامل)
   • لو AND المنطقي بين الكودين لا يساوي 0000: الخط كله برا (ما ترسمينه)
   • غير كذا: الخط يعبر الحدود وتحتاجين تقطعينه

3. اقطعي عند الحد اللي الخط يعبره واعيدي الحساب.

5. الاسقاط (Projection)

الاسقاط هو كيف نحول العالم ثلاثي الابعاد (3D) الى صورة ثنائية الابعاد (2D) على الشاشة. تخيلي عينك (او الكاميرا): العالم حولك ثلاثي الابعاد، بس الصورة اللي تشوفينها على شبكية العين ثنائية الابعاد. هذا بالضبط اللي يسويه الاسقاط.

الاسقاط المتوازي (Orthographic Projection)

في الاسقاط المتوازي، الاشياء ما تصغر كل ما بعدت. مثل ما لو تنظرين لمبنى من بعيد جدا، كل الادوار تبان بنفس الحجم. يستخدم كثير في الرسومات الهندسية والتقنية.

// اعداد اسقاط متوازي
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
// يسار، يمين، تحت، فوق، قريب، بعيد
glOrtho(-200.0, 200.0, -200.0, 200.0, -500.0, 500.0);
glMatrixMode(GL_MODELVIEW);

الاسقاط المنظوري (Perspective Projection)

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

// اعداد اسقاط منظوري
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
// زاوية الرؤية، نسبة العرض/الارتفاع، المستوى القريب، البعيد
gluPerspective(60.0, 1.0, 1.0, 1000.0);
glMatrixMode(GL_MODELVIEW);

تشبيه الكاميرا: فكري في الاسقاط المتوازي مثل كاميرا تصوير مسطحة (scanner)، والاسقاط المنظوري مثل كاميرا عادية. الكاميرا العادية تعكس العمق (الاشياء البعيدة اصغر)، بينما الماسح الضوئي ما يفرق معه البعد.

6. رسوم ثلاثية الابعاد (3D Graphics)

لحد الحين كنا نتعامل مع 2D (محورين x و y). الحين نضيف المحور الثالث z (العمق). بدل (x, y) تصير النقطة (x, y, z). المفاهيم نفسها (تحويلات، اسقاط، رسم) بس في بعد اضافي.

رسم اشكال ثلاثية الابعاد جاهزة

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

// رسم مكعب صلب ثلاثي الابعاد
glPushMatrix();
    glTranslatef(0.0f, 0.0f, -5.0f); // بعديه عن الكاميرا
    glRotatef(30.0f, 1.0f, 1.0f, 0.0f); // دوريه شوي
    glColor3f(0.2f, 0.6f, 0.9f); // لون ازرق فاتح
    glutSolidCube(2.0); // مكعب صلب بحجم 2
glPopMatrix();

// رسم كرة
glPushMatrix();
    glTranslatef(3.0f, 0.0f, -5.0f);
    glColor3f(0.9f, 0.3f, 0.3f); // لون احمر
    // نصف القطر، عدد الشرائح الطولية، الشرائح العرضية
    glutSolidSphere(1.0, 30, 30);
glPopMatrix();

الفرق بين Solid و Wire

• glutSolidCube: يرسم مكعب ملون (صلب) تقدرين تشوفين الاسطح
• glutWireCube: يرسم الحواف بس (هيكل سلكي). مفيد في مرحلة التطوير عشان تشوفين الهيكل

7. الاضاءة والتظليل (Lighting & Shading)

بدون اضاءة، كل الاشكال تبان مسطحة ومملة حتى لو هي ثلاثية الابعاد. الاضاءة هي اللي تعطي الاشياء حجم ومظهر واقعي. تخيلي كرة بدون اضاءة: تبان دائرة مسطحة. اضيفي اضاءة وفجاة تشوفين الانعكاس والظل والعمق.

انواع الاضاءة في OpenGL

1. الاضاءة المحيطية (Ambient Light): ضوء منتشر في كل مكان بالتساوي. مثل ضوء الغرفة العام: ما تقدرين تحددين مصدره بس كل شيء مضاء. بدون هذا النوع، الاجزاء اللي ما يوصلها ضوء مباشر تصير سوداء تماما.

2. الاضاءة المنتشرة (Diffuse Light): ضوء يجي من اتجاه محدد وينعكس في كل الاتجاهات. مثل ضوء الشمس على ورقة بيضاء: الجهة المواجهة للشمس اكثر سطوعا بس الانعكاس مو في اتجاه واحد. هذا النوع يعطي احساس بالحجم والابعاد.

3. الاضاءة اللامعة (Specular Light): الانعكاس اللامع اللي تشوفينه على الاسطح المصقولة. مثل البقعة البيضاء اللي تشوفينها على تفاحة لامعة او كرة بلاستيكية. يعتمد على زاوية النظر وزاوية مصدر الضوء.

تفعيل الاضاءة في OpenGL

// تفعيل نظام الاضاءة
glEnable(GL_LIGHTING);
glEnable(GL_LIGHT0); // فعلي المصدر الاول

// تحديد موقع مصدر الضوء
GLfloat lightPos[] = {200.0f, 300.0f, 200.0f, 1.0f};
glLightfv(GL_LIGHT0, GL_POSITION, lightPos);

// تحديد لون الضوء المنتشر (ابيض)
GLfloat diffuse[] = {1.0f, 1.0f, 1.0f, 1.0f};
glLightfv(GL_LIGHT0, GL_DIFFUSE, diffuse);

// تحديد خصائص سطح الشكل
GLfloat matColor[] = {0.3f, 0.7f, 0.3f, 1.0f};
glMaterialfv(GL_FRONT, GL_DIFFUSE, matColor);

اخطاء شائعة في CS 360

هذي الاخطاء اللي تتكرر في كل ترم ومن السهل تتجنبينها لو عرفتيها مسبقا:

1. نسيان glPushMatrix و glPopMatrix: هذا الخطا رقم واحد. لو ما حفظتي الحالة قبل التحويلات، كل تحويل يتراكم. ترسمين شكلين وتلاقين الثاني في مكان غريب لانه حصل على تحويلات الاول + تحويلاته. القاعدة: كل ما كتبتي Push، لازم يكون فيه Pop مقابل.

2. ترتيب التحويلات غلط: كتبتي glTranslate ثم glRotate وتتوقعين ينتقل ثم يدور، بس الحقيقة هو يدور اول ثم ينتقل. تذكري: اقرب دالة للشكل تتنفذ اول. ارسمي الخطوات على ورقة لو كنتي مو متاكدة.

3. نسيان glFlush او glutSwapBuffers: كتبتي كل كود الرسم بس ما يظهر شيء على الشاشة. السبب غالبا انك نسيتي تستدعين glFlush() (او glutSwapBuffers() لو تستخدمين Double Buffering) في نهاية دالة الرسم.

4. خلط بين GL_PROJECTION و GL_MODELVIEW: OpenGL عنده مصفوفتين رئيسيتين. GL_PROJECTION للاسقاط (الكاميرا) و GL_MODELVIEW لتحريك الاشكال. لو سويتي تحويلات على المصفوفة الغلط، النتيجة تكون مشوهة وغريبة.

5. حساب Bresenham غلط: نسيان تحديث متغير القرار p بشكل صحيح او نسيان التعامل مع الحالات الخاصة (مثل خط ميله اكبر من 1). دائما ارسمي الجدول كامل خطوة بخطوة.

6. تجاهل تفعيل GL_DEPTH_TEST: في الرسم ثلاثي الابعاد، بدون اختبار العمق الاشكال القريبة ممكن تختفي خلف الاشكال البعيدة. فعلي glEnable(GL_DEPTH_TEST) اول شيء في برنامجك.

خطة مذاكرة CS 360

ادوات ومصادر مفيدة

مصادر تعليمية

• LearnOpenGL.com: من افضل المواقع لتعلم OpenGL. الشروحات مفصلة ومرتبة من البداية. حتى لو الموقع بالانجليزي، الكود واضح وتقدرين تتابعينه مع ترجمة
• كتاب Computer Graphics: Principles and Practice: المرجع الكلاسيكي في رسومات الحاسب. ثقيل بس يغطي كل المواضيع من البكسلات الى الاضاءة
• قناة The Cherno على يوتيوب: يشرح OpenGL بشكل عملي مع مشاريع حقيقية

ادوات التطوير

• Visual Studio: الـ IDE الانسب لـ C++ مع OpenGL على ويندوز. تاكدي من اعداد GLUT بشكل صحيح (فيه تيوتوريالات كثيرة على يوتيوب)
• Code::Blocks: بديل اخف لو جهازك مواصفاته متوسطة. يشتغل مع OpenGL بدون مشاكل
• GeoGebra: اداة مجانية للرياضيات. تقدرين ترسمين المصفوفات والتحويلات الهندسية بصريا عشان تفهمين ايش يصير رياضيا

نصائح عملية

• شغلي الكود بنفسك: مو بس تقرين الكود، انسخيه وشغليه وغيري الارقام وشوفي ايش يصير. هذي اسرع طريقة تفهمين التحويلات
• ارسمي على ورقة: قبل ما تكتبين اي كود تحويلات، ارسمي الشكل الاصلي والشكل المطلوب على ورقة وحددي الخطوات
• احفظي القوانين: في الاختبار ما عندك وقت تشتقين القوانين. احفظي معادلات الدوران ومعادلات Bresenham وطبقيها بسرعة
• ذاكري مع زميلاتك: رسومات الحاسب من المواد اللي المذاكرة الجماعية تفيد فيها كثير لان كل واحدة ممكن تشرح موضوع بطريقة مختلفة

خلاصة

مادة CS 360 رسومات الحاسب من المواد اللي تفتح لك عيون على عالم ثاني في علوم الحاسب. مو بس حفظ وتلقين، انتي تبنين اشياء وتشوفينها قدامك على الشاشة. صحيح فيها رياضيات وفيها تفاصيل تقنية كثيرة، بس لما تفهمين المفاهيم الاساسية (البكسلات، التحويلات، الاسقاط، الاضاءة) باقي الموضوع يمشي.

ركزي على ثلاث نقاط: اول شيء افهمي الرياضيات ورا كل عملية مو بس احفظي الكود. ثاني شيء تمرني على حل الاسئلة اليدوية (Bresenham، Cohen-Sutherland، التحويلات) لانها تجي في كل اختبار. ثالث شيء اكتبي كود كثير وجربي وغيري وشوفي النتائج بعينك.

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