منتديات الفريق العربي - النسخة الخفيفة

المساعدة - البحث - قائمة الأعضاء - التقويم

نسخة كاملة: الدرس الأول Graphics In C++ Using OpenGL

برمجة - شبكات - كمبيوتر - منتديات الفريق العربي للبرمجة > منتديات لغات البرمجة العام > منتدى برمجة الألعاب والجرافيكس والتصميم > قسم : برمجة الألعاب والجرافكس باستخدام مكتبة OpenGL .

Final Heaven

Mar 6 2007, 11:27 AM

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

لقد تعلمت الغرافيكس في كورس طويل في الجامعة و إستفدت منه الكثير و بصراحة أحببت أن أوصل ما تعلمته فقررت البدأ بوضع دروس لما تعلمته

و أتمنى من الله التوفيق، سيكون تركيزي في هذه الدروس على غرافيكس بالمفهوم و لكن بإستخدام OpenGL فهي ما إستخدمته و لما فيها من

إمكانيات رائعة

سأحاول بقدر ما أستطيع التحدث عن:

Simple OpenGL Programs - WorldWindow and Viewports - Vector Operations + Cliping - Camera

Modeling Objects (Meshing) - Light and 3D Color In Open GL - Hiden Surface Removal

و لقد رأيت الكثير من الدروس الرائعة الموجودة في داخل المنتدى و سأستعين بها في شرحي بإذن الله

هذا مقال للأخ CompuM4n و فيه مقدمة جميلة عن OpenGL

سلسلة دروس OpenGL

هنا مقال الأخ علي الدعيج رحمه الله مقدمة عن OpenGL

الدرس رقم صفر

و هذا لموضوع فيه جميع دروسه

مجموعة دروس OpenGL

و هذه لفصول كتاب جميل أعتقد أنه مترجم من Redbook و فيه شرح رائع و جميل، جزى الله الإخوة الذي عملوا على وضعه

بذور كتاب الـ OpenGL

و سأكون معتمدا على هذه الكتب أيضاً:

Graphics In C++ Using OpenGL: Francis S Hill

Red Book For OpenGL

Blue Book For OpenGL

أما IDE الذي سأقوم بإستخدامه هو منصة Dotnet أي أن عملي هو على C++.Net

و سأعتمد بشكل رئيسي على OpenGL Utilities Toolkit و التي هي GLUT 3.7.6

و هاهية الملفات الخاصة بها مع و مكان وضعها لإستخدامها:

إضغط لإظهار المرفق

GLUT.h File
VC\PlatformSDK\Include\gl\GLUT.h

glut32.lib File
VC\PlatformSDK\Lib\glut32.lib

glut32.dll File
WINDOWS\system32\glut32.dll

أما الآن فطريقة فتح project جديد لكتابة الكود فهناك إثنان:

newproject -> win32console application -> empty application

newproject -> CLR console application

فالأولى هي لكتابة standard c++ code على منصة دوت نت

أما الثانية فهي تتيح لنا إستخدام managed code في برنامجنا مما يتيحلنا الإستفادة من نظام دون نت و تسهيل عملنا بشكل كبير

و لكني سأعتمد على النظام الأول لإعتمادي على standard code

Final Heaven

Mar 6 2007, 01:07 PM

و الآن سأبدأ الحديث عن كيفية بداية كتابة كود يستخدم OpenGL

علينا أن نبدأ بمناداة المكتبات الخاصة

كود
#include <windows.h>   // use as needed for your system

و سبب إحتياجي لها أن OpenGL سيقوم بمنادات الكثير من الأوامر الموجودة فيها لبناء Screen window

و ثانيا علينا منادات مكتبات OpenGL الموجودة في دوت نت مع GLUT التي وضعناها

كود
#include <gl/Gl.h>
#include <gl/glut.h>

و الآن علينا بكتابة function لإستخدامها في عمل initialize للحجم النقط و لون الخلفية و لون الرسم و حجم و مساحة المكان الذي سأرسم فيه ... إلخ

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

كود
//<<<<<<<<<<<<<<<<<<<<<<< myInit >>>>>>>>>>>>>>>>>>>>
void myInit(void)
{
    glClearColor(1.0,1.0,1.0,0.0);       // set white background color
    glColor3f(0.0f, 0.0f, 0.0f);          // set the drawing color
    glPointSize(4.0);               // a ‘dot’ is 4 by 4 pixels
    glMatrixMode(GL_PROJECTION);
    glLoadIdentity();
    gluOrtho2D(0.0, 640.0, 0.0, 480.0);
}

و الإسم لهذه function أضعه كما أريد لأني سأقوم بمناداتها من main

فالسطر الأول هو لتحديد لون الخلفية على الشاشة التي سأقوم بالرسم عليها، و تأخذ أرقاما من نوع float و التي تحدد اللون من صفر إلى واحد فكلنا

نعلم بنظام RGBA و الذي هو Red Green Blue Alpha و هو في عديد من إستخداماته أضع الألوان بإختيار رقم بين 0 و 255 أما هنا

فبين 0 و 1 و اللون المطلوب ليكون خليفة هو اللون الأبيض

السطر الثاني لتحديد اللون الذي سأستخدمه في الرسم و هو بنظام RGB فقط و أيضا من 0 إلى 1 و لكن لاحظوا في نهاية الأمر نرى 3f و هي تعني

عدد المرسلات و نوعها فعنما نرى 3i فهذا يعني بأن عدد المرسلات هو 3 و نوعها Integer و أما f فتعني float

أما السطر الثالث فأقوم به بتحديد حجم النقطة التي أرسم بها في البرنامج و أقول له له بأن النقط تعني كم pixel على الشاشة

السطر الرابع و الخامس أقوم بتحديد نظام الرسم و التحويل من buffer إلى الشاشة مع تفعيله و سنرى إستخدامها و المعنى الخاص بها بالضبط في

دروس قادمة إن شاء الله

أما السطر الأخير فهو لتحديد مساحة الرسم و تأخذ أربعة أمور و هي أطراف مكان الرسم أي بمعنى آخر:

gluortho2D
(فوق, تحت , يمين , يسار )

و عندما أرسل مثلا

gluortho2D
( -5 , 5 , -5 , 5 )

فمعناها بأن مساحة الرسم ما بين -5 و 5 في العرض و ما بين -5 و 5 في الطول و لكن دعونا من هذه الآن و أن نستخدم الأرقام التي في الأعلى حتى أقوم بشرح viewport

و التي تؤخذ هنا default و التي هي نفس مساحة الرسم التي وضعتها و هذه الميزة تستخدم للتحويل الآلي لمجال مساحة الرسم إلى الشاشة بالحجم و المكان الذي أريده عليها

و لا أريد إكمال الشرح في هذا الموضوع الآن كي لا تشعروا بالضياع

أما الآن فعلينا بوضع function و هي التي تكون مسؤولة عن الرسم في بداية البرنامج و إعادة الرسم بعد حالتي minimize و clipping

و تقدر أن تضع أية إسم لها لأنني سأعطيها لل OpenGL في main كي يستخدمها و لكن عليها أن تكون void و تأخذ void و سنرى كيف يمكنني معرفة

ما يجب أن تأخذ أو ترجع أي function أريد إعطائها لل OpenGL ليعتمدها في عمل معين و هو عن طريق رؤية Header File الخاص ب GLUT

كود
//<<<<<<<<<<<<<<<<<<<<<<<< myDisplay >>>>>>>>>>>>>>>>>
void myDisplay(void)
{
    glClear(GL_COLOR_BUFFER_BIT);     // clear the screen
    glBegin(GL_POINTS);
    glVertex2i(100, 50); // draw three points

    glVertex2i(100, 130);

    glVertex2i(150, 130);
    glEnd();
    glFlush();                         // send all output to display
}

فالسطر الأول هو لتنظيف Buffer و هو المكن المحجوز في الذاكرة للرسم و عمل المعادلات الحسابية المطلوبة قبل إرسالها إلى الشاشة

أما السطر الثاني فهذا أمر في OpenGL أرسل له نوع الرسم الذي أريده من النقط التي سأكتبها بعده

و أما السطور الثلاثة الأخرى فقمت بإرسال نقاط ثلاث لرسمها كنقاط لأنني أرسلت ل glBegin ما يعني له بأن الرسم سيكون نقط

و لا حظوا glVertex2i فهذا الأمر أرسل له النقاط المطلوبة فهو يأخذ نقطتان معتمداعلى مساحة الرسم التي حددت في الأعلى و التي هي gluortho2d

فكما قلنا سابقا 2 تعني مرْسَلان و i تعني integer

و بعد إنتهائي من رسم النقاط المطلوبة علي إغلاق مجال رسم النقط و أضع glEnd و التي تعني بأن النقاط المكتوبة ما بين glBegin و glEnd سترسم بنظام

المطلوب منها و المرسل إلى glbegin في الأعلى، فإن قمنا بإرسال GL_LINES فإنها ستقوم بأخذ كلّ نقطتين على حده و ترسم بينهما خطاً و أما GL_LINE_STRIP

فإنها ستوصل كل النقاط ببعضها البعض حتى تصل إلى آخر نقطة موجوة ما بين glbegin و glend و أما إن قمنا بإرسال GL_LINE_LOOP فإنها ستوصل كل النقاط ببعضها

البعض و توصل أيضا النقطة الأخير بالنقطة الأولى

و أخيراً السطر الأخير و الذي يعني أرسل ما رسم في buffer إلى الشاشة كي يشاهد

و هنا سنرى ثلاث نقط باللون الأسود

و أخيرا علينا الآن بكتابة Main للبرنامج

و سنرى تغييرا عما تعلمناه في برمجة c++ العادية
كود
//<<<<<<<<<<<<<<<<<<<<<<<< main >>>>>>>>>>>>>>>>>>>>>>
void main(int argc, char** argv)
{
    glutInit(&argc, argv);          // initialize the toolkit
    glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB); // set display mode
    glutInitWindowSize(640,480);     // set window size
    glutInitWindowPosition(100, 150); // set window position on screen
    glutCreateWindow("my first attempt"); // open the screen window
    glutDisplayFunc(myDisplay);     // register redraw function
    myInit();
    glutMainLoop();              // go into a perpetual loop
}

فهنا نرى بأن ال main تأخذ مرسلين يحتاجهما لإستخدام مكتبة OpenGL

و في السطر الأول أرسل هذين المرسلين ل function خاصة ب OpenGL لتفعيلها

في السطر الثاني أحدد نوع Buffer المستخدم و الألوان

في السطر الثالث أحدد حجم الشاشة screen التي سأظهر الرسوم عليها

في السطر الرابع أحدد مكان ظهور الشاشة من جهة الأعلى اليسار فالأرقام تعلني بأنها ستظهر على الجهة اليسرى العليا للشاشة و تبتعد عن الأطراف

من اليسار تبعد 100 pixel و من الأعلى تبعد 150 pixel

السطر الخامس أرسل أمر لإنشاء Screen Window و التي ستظهر عليها الرسوم و أرسل لها Title أي عنوان للForm الذي سيظهر

السطر السادس علي الآن تحديد function التي سيستخدمها OpenGL للرسم و إعادة الرسم و أرسلة له إسم function التي كتبتها ليستخدمها

السطر السابع أقوم بمناداة التعريفات و التحديدات الأولية للرسم و التي كتبت في أول البرنامج

أما السطر الأخير فهو كي تبقى main تعمل و إلا فستظهر الصورة و تختفي بسرعة لإنتهاء البرنامج إن أزيل هذا السطر

و هذا الملف الذي قمت بشرحه في المرفقات:

إضغط لإظهار المرفق

و هذه صورة للنتيجة:

إضغط لإظهار المرفق

و الله وليّ التوفيق

عمار زاهدة

Mar 6 2007, 01:36 PM

السلام عليكم
ألف شكر لك أخي العزيز على الدرس
شرح جميل و واضح
و السلام

Final Heaven

Mar 7 2007, 08:33 AM

شكرا لك يا أخ عمار

و الآن يا إخوتي سنقوم بالعمل على رسم بعض الأشكال لفهم عملية الرسم بشكل جيد في OpenGL

فالكود الموجود في الأعلى هو ذاته ما سنستخدم و الشئ الوحيد الذي سيكون عليه التغيير هو function myDisplay

أما باقي الأوامر فسبتقى ذاتها تقريباً، و إن أردت تغييرا آخر غير إسم title ل screen window في main

كما رأينا سابقاً بأننا حددنا مساحة الرسم و التي هي gluortho2d و هذه تستخدم لعمل رسومات 2D و سنرى لاحقاً

كيف نقوم بعمل رسومات 3D و عندها سيكون تحدي لمن يستطيع عمل برنامج 3D Robot يتحرك و ذا ألوان ثلاثية الأبعاد

مع منزل يدخل إليه و أهم شئ أن يكون لدينا Hidden Surface Removal بصراحة هذا البرنامج كان أحد Assignments

التي قمنا بها بالجامعة و لا أخفيكم كان أرحمها

لنعد إلى موضوعنا، فكما قلنا حددنا مساحة الرسم بخط العرض من 0 إلى 640 و خط الطول من 0 إلى 480

أي أن النقاط التي سأقوم برسمها عليها أن تقوم بين هذه الأرقام و أي رقم أضعه في نقطة لترسم فإن برنامج سيقوم

بعمل بما يسمى Clipping سأقوم بشرحه لاحقا و لكن في مفهومه البسيط عدم العمل على رسم أي نقطة خارج إطار الرسم

دعونا نرى الآن كيف نقوم برسم عدة أشكال، التعديل سيكون فقط على Function myDisplay

لنرسم خطاً مستقيما بإستخدام GL_LINE_STRIP و كما رأينا شرحها سابقا بأنها توصل جميع النقاط بخط واحد حتى تصل إلى

النقطة الأخيرة و تقف عندها:

كود
void myDisplay(void)
{
    glClear(GL_COLOR_BUFFER_BIT);     // clear the screen
    glBegin(GL_LINE_STRIP);
    glVertex2i(50, 100);    // draw the chimney
    glVertex2i(50, 120);
    glVertex2i(60, 120);
    glVertex2i(60, 110);
    glEnd();
    glFlush();                         // send all output to display
}

لا حظوا بأن النقاط أخذت في المساحة المطلوبة ما بين 0 إلى 640 عرض و ما بين 0 إلى 480 طول

بأننا إستخدمنا glVertex2i و كما تذكرون بأن i تعني بأنها ستأخذ Integer values

(نقطة على خط الطول, نقطة على خط العرض)
glVertex2i
2f
3i
3f

و أما في حالة 3i أو 3f فإنها تأخذ نفس المعنى مع زيادة النقطة على الخط الثالث و الذي هو Z-Axis و

الذي نستخدمه في العمل على 3D Objects

و هذه صورة الرسم:
إضغط لإظهار المرفق

و إستخدام GL_LINE_LOOP هو ذاته لافرق و تستطيع رؤية عملها من تطبيقه على البرنامج نفسه فقط

تقوم بتغيير ما بداخل glBegin من GL_LINE_STRIP إلى GL_LINE_LOOP

و الآن دعونا نرى كيف نرسم مربعا أو شكلا رباعي الأضلاع و هو إستخدام glRecti و التي تأخذ نقطتان

و الذان هما طرفا المربع أو المستطيل المعاكسان، أي النقطة التي في أقصى اليسار السفلي و النقطة

التي في أقصى اليمين العلوي و طبعا نقدر على عكس النقطتين و لكن سيحدث تغيير في الرسم بأن الشكل الرباعي

بدلا من رسمه من النقطة السفلى صعودا إلى النقطة العليا، سينعكس عملها و يبدأ من النقطة العليا إلى السفلى

و لكن لا مشكلة فيها و أنظروا إلى سهولة إستخدامها:

كود
//<<<<<<<<<<<<<<<<<<<<<<<< myDisplay >>>>>>>>>>>>>>>>>
void myDisplay(void)
{
     glClearColor(1.0,1.0,1.0,0.0); // white background
     glClear(GL_COLOR_BUFFER_BIT);  // clear the window
     glColor3f(0.6,0.6,0.6);          // bright gray
     glRecti(20,20,100,70);
     glColor3f(0.2,0.2,0.2);          // dark gray
     glRecti(70, 50, 150, 130);
     glFlush();
}

و هذا هو الشكل:
إضغط لإظهار المرفق

الشمري

Mar 7 2007, 11:48 AM

إقتباس

سأحاول بقدر ما أستطيع التحدث عن:

Simple OpenGL Programs - WorldWindow and Viewports - Vector Operations + Cliping - Camera

Modeling Objects (Meshing) - Light and 3D Color In Open GL - Hiden Surface Removal

رائع ..
انا اريد ان افهم برمجة الجرافكس وليس OpenGL ..

.,,,
تابع .. ليصبح الموضوع مرجع ,

Final Heaven

Mar 7 2007, 05:36 PM

إن شاء الله أخيّا و لكن صبراً حتى أنهي الأساس

كما تحدثنا سابقاً عن الأوامر التي أستطيع من خلالها الرسم، و هذه الصورة ترينا جميع الأوامر التي نقدر على

إستخدامها في glBegin و التي أخذتها من أحد الأجزاء من الكتاب المترجم في الأعلى:

إضغط لإظهار المرفق

و التي نرى من خلالها شروحات لما أقدر على إستخدامه، و تستطيع رؤية التطبيق لهذه الأوامر في Redbook

و الكتاب المترجم أيضاً فتطبيقها سهل جدا كما رأينا سابقا

و الآن سأتحدث من Mouse Events و Keyboard Events

و الجميل أننا سنتعامل معها كما تعاملنا مع myDisplay بحيث أقوم بتعريف أي function أحتاجها و أطلب

من OpenGL إستخدامها للغرض المراد و لكن بشروط و سنرى ما هي، كما و أنك إن أردت رؤية أموامر أخرى

تريدها تستطيع الوصول إليها و ترى الشروط لها عن طريق البحث في ملف glut.h

أو الذهاب من خلال IDE عبر right click على include الخاصة بها و الضغط على الإختيار الذي يقوم بفتح الملف

و هكذا نكتب function ل mouse و هناك عدة functions غيرها نجدها في header file و لها إستخدامات عديدة

و ها هي function mouse و هي لبرنامج يقوم بأخذ نقطتين من mouse و يرسم Rectangle بينها

كود
//<<<<<<<<<<<<<<<<<<<<<<<< myMouse >>>>>>>>>>>>>>>>>
void myMouse(int button, int state, int x, int y)
{
    static GLintPoint corner[2];
    static int numCorners = 0;                // initial value is 0
    if(button == GLUT_LEFT_BUTTON && state == GLUT_DOWN){
        corner[numCorners].x = x;
        corner[numCorners].y = screenHeight - y;    // flip y coordinate
        numCorners++;                    // have another point
        if(numCorners == 2){
            glRecti(corner[0].x, corner[0].y, corner[1].x, corner[1].y);
            numCorners = 0;                // back to 0 corners
        }
    }
    else if(button == GLUT_RIGHT_BUTTON && state == GLUT_DOWN){
        glClear(GL_COLOR_BUFFER_BIT);            // clear the window
    }
    glFlush();
}

و كما نرى عليها أن ترجع void و تأخذ أربع:

الأولى و هي button و هي لنتأكد من أن الزر الذي ضغط هو المطلوب (الأيمن أم الأيسر أم الأوسط)

و الثانية للتأكد من أنها ضغطت

أنظر إلى if statement لترى كيف إستخدمناهما

و الثالثة و الرابعة هما النقطة على خط العرض و هي X و الأخرى هي النقطة على خط الطول و هي Y

و لكن علي التنويه بأن Y في حالة الرسم العادية أرصد مكانها من حيث أن الجهة اليسرى السفلى هي (0,0)

أما في Mouse فإن الجهة العليا اليسرى هي (0,0) و لذا عند الرسم علينا طرح طول Screen من Y التي أتت

من Mouse و ترون في المكود screenHeight-Y و هذه كما حددنا الطول من البرنامج الأول أي Y - ي480

لأن Y قيمتها عند Mouse ترصد من أعلى إلى أسفل و في حالة الرسم كرسم Rectangle أحددها كأني أقرأ

من أسفل إلى أعلى

فهنا عند الضغط على الرز الأيسر يأخذ البرنامج X و Y ثم يسجلها في array من رقمين لكلاس GLintPoint

كتبت من قبل المبرمج و هاهية:

كود
class GLintPoint{
public:
     GLint x,y;
};

و من ثمّ بتأكد من أن النقطتان أخذتا ليقوم برسم rectangle

و نجد أيضا بأننا عندما نضغط على الرز الأيمن للmouse نقوم بمسح الشاشة من ما قمنا برسمه

و علينا أن ننوه إلى أن هذا الكود كي يعمل علينا إضافة هذا الكود إلى Main و هو لإخبار OpenGL

عن function المسؤولة عن Mouse Events

كود
glutMouseFunc(myMouse);

و ها هو كود البرنامج:
إضغط لإظهار المرفق

Final Heaven

Mar 7 2007, 07:34 PM

و الآن علينا أن نكمل بالعمل على Keyboard Events و التي نتبع فيها الطريقة ذاتها بالتعامل ل Mouse Events

أنظروا إلى الكود:

كود
//<<<<<<<<<<<<<<<<<<<<<<<< myKeyboard >>>>>>>>>>>>>>>>
void myKeyboard(unsigned char theKey, int mouseX, int mouseY){
    GLint x = mouseX;
    GLint y = screenHeight - mouseY; // flip the y value as always
    switch(theKey)
    {
    case 'p':
        drawDot(x, y);    // draw a dot at the mouse position
        glFlush();
        break;
    case GLUT_KEY_LEFT: List[++last].x = x; // add a point
        List[  last].y = y;
        break;
    case 'e':
        exit(-1);        //terminate the program
    default:
        break;              // do nothing
    }
}

و كما نرى بأنها تأخذ الحرف الذي ضغط على Keyboard مع مكان وجود Mouse

و لاحظوا معي أنني هنا أيضا قمت بطرح طول Screen من Y التي تخص Mouse لنفس السبب السابق

و نرى فيها بأن كاتب البرنامج يستخدم switch لمعرفة الرز الذي ضغط و بهذه البساطة نستخدم هذه Events

ثمّ علينا تعريف OpenGl بها من خلال إعطائه إياها في Main و هي:

كود
glutKeyboardFunc(myKeyboard);

و لكن علينا أن نعلم بأن هذه function التي تخص Keyboard Events لا تعمل سوى على بعض المفاتيح

على Keyboard و تهتم بالأحرف و لكن هناك أخرى نستطيع إستخدامها موجودة في Header File و تعمل

على جميع أزرار Keyboard سأتركها لكم لتبحثوا عنها (بصراحة خلال ثوان ستجدونها في Header )

و هذا كود البرنامج:
إضغط لإظهار المرفق

Final Heaven

Mar 7 2007, 09:35 PM

و إليكم هذا الكود المفيد ايضا عن إستخدام glBegin
إضغط لإظهار المرفق

و التحدي الآن هو عمل برنامج Paint و ما تعلمناه كافٍ و وافٍ، و صدقوني لو قرأتم و قرأتم لن تستفيدوا شيئا

حتى تقوموا بتطبيق ما تعلّمتم و صدقوني كان هذا كله جزءاً من محاضرة (المحاضرة الأولى) سلمنا بناءً عليه في

محاضرتنا التالية برنامج Paint ك Assignment ، و صدقوني ليست بالصعوبة التي قد تتصوّرون فأروني

همّتكم إن رغبتم

و هذا هو البرنامج الذي قمت به وقتها:
(تحتاج لتشغيله وجود Dotnet framework 2.0 مع وجود ملف glut32.dll في windows\system32)

إضغط لإظهار المرفق

Final Heaven

Mar 8 2007, 10:20 PM

وصلة الدرس الثاني

Final Heaven

Mar 26 2007, 08:29 PM

نظرا لكثرة السؤال عن أكواد جاهزة للدرس إرتأيت إلى وضع كتاب Red Book مع الأمثلة الخاصة به

مع بعض الأمثلة من كتاب F.Hill و التي لم تكن كاملة في أصلها

كتاب Red Book
إضغط لإظهار المرفق

أمثلة الكتاب Red Book Code Examples
إضغط لإظهار المرفق

أمثلة بسيطة من كتاب F.Hill
إضغط لإظهار المرفق

الشوق والدمعة

Apr 5 2007, 02:08 AM

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

Final Heaven

Apr 6 2007, 07:04 PM

هناك مكتبة إسمها ctime

حيث تكتبين

كود
#include <ctime>

مما يمكنك من إستخدام

كود
time_t  told = (unsigned int) time(NULL);

حيث يقوم بإرجاع عدد الثوان من سنة 1970

و الطريقة التي قمت بإستخدامها في برنامج لي هي أن أقوم بتسجيل هذه الثوان في أول البرنامج

و أقوم بأخذ الثوان مرة أخرى و أطرحها من الثوان الأولى التي سجلتها و أرى إن كان التوقيت

الذي أريد قد مر أم لا و لزيادة المفهوم هذه دالة تقوم بعمل ما بداخل if كل خمس ثوان

كود
time_t told = (unsigned int) time(NULL);
time_t tnew;

while( CONDITION ){
     tnew = (unsigned int) time(NULL);
     if( tnew - told >= 5 ){
         //do here ur work then

          told=tnew;
     }
}

هذا الكود سيفيد في وضع أوقات محددة لتغيير شئ ما و هناك طريقة أخرى بإستخدام function إسمها glutTimerFunc

إقرئي عنها و هي تقوم بعمل إعادة مناداة function معينة كل فترة من الزمن

و الآن لتغيير اللون عليك بإستخدام كود glColor3f قبل الرسم كي يرسم باللون الذي تريدين و إن أردت تغيير اللون

تلقائيا و بشكل عشوائي إستخدمي كمرسلات لها

كود
( rand() % 256 ) / 255.0

فهذه المعادلة سوف تعطيك رقما عشوائيا ما بين 0 و 1

أما للرسم بشكل دائري قومي بقراءة circle conversion في الدرس الثاني إن فهمت مقصدك

بالتوفيق

الشوق والدمعة

Apr 6 2007, 11:59 PM

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

Final Heaven

Apr 7 2007, 07:54 AM

كتبت لك هذا المثال الذي يقوم برسم دائرة و تحريكها و يتغير لونها كل 3 ثوان بشكل عشوائي

Executable File
إضغط لإظهار المرفق

Code
إضغط لإظهار المرفق

الشوق والدمعة

Apr 7 2007, 07:02 PM

الف شكر يااخ حقيقة انت انسان متميز والف شكر علي المساعدة

الشوق والدمعة

Apr 13 2007, 06:30 PM

السلام عليكم ورحمة الله وبركاته
لو سمحت يا لخ final heaven
ممكن تساعدني في عمل ثلاث خطوط كعقارب للساعة وجعلها تدور كل واحدة منها بسرعة اقل من الاخره في الحقيقة انا عملتها لكن الخط مايدور معايا استخدمت دالة التدوير لكن للاسف مهي راضية ممكن تساعدني او تعطيني اي مثال وارجوا ان يكون في اقرب وقت عشان تسليم الواجب بكرة .
وشكرااااا

Final Heaven

Apr 17 2007, 10:27 AM

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

لدي رجاء منك يا أختي

أولا أتمنى منك عدم جعل أي سؤال يخص شخصا محددا في المنتدى كي يقوم آخرون بإجابتك أيضا و المساعدة

ثانيا أتمنى منك وضع مواضيعك ذات الأسئلة من هذا القبيل في موضوع جديد ليكون بين المواضيع الجديدة و يقوم

كل من يدخل المنتدى العزيز برؤيته و يرى إن كانت لديه المقدرة على المساعدة

ثالثا أتمنى أن يكون الرد على هذا الموضوع فقط في إطار الدرس الذي فيه

رابعاً أتمنى منك وضع الكود الذي قمت به كي نرى أخطائك و نساعدك على فهمها بإذن الله

الشوق والدمعة

Apr 18 2007, 05:33 PM

مشكور علي ذوقك ومعليش علي الازعاج وانا لوماكنت واثقة من اجابتك ما خصيتك ولك جزيل الشكر

Final Heaven

Apr 18 2007, 07:47 PM

أختي مشكورة على هذه الثقة و لكن هناك من في المنتدى من هو أكثر مني خبرة في هذا المجال و تخصيصك

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

و كما و أني مشغول و علي درس كثير و ضغط كبير لأنني في الأسابيع الأخيرة في الجامعة

مما يمنعني من التواجد و المساعدة لفترة من الزمن

و صدقيني أنا تلميذ لدى أصحاب الخبرة في هذا المنتدى الرائع

بالتوفيق

alzahrani

Apr 28 2007, 10:06 PM

عزيزي الكريم لو سمحت أريد كود بإستخدام open gl
يحرك المستخدم الفأرة فيرسم البرنامج خط ويرسم كذلك البرنامج خط عكس اتجاة الفأرة

alzahrani

Apr 28 2007, 10:12 PM

أخي العزيز لو سمحت أريد كود بإستخدام open gl يحرك المستخدم الفأرة فيرسم ويرسم كذلك في الإتجاة المعاكس

to be my self

May 11 2007, 10:25 PM

لأخFinal Heaven تفضلت مشكوراً بشرح وافي ل Graphics In C++ Using OpenGL وكان من التطبيقات اللافته للنظر هو تطبيق Paint فهل من الممكن أن تعطيني الكود لهذا التطبيق أو على الأقل الطريقة لعمله أو ترشيدني لما يعينني على كتابته ثم ما هو الDotnet framework 2.0 لأن البرنامج لا يعمل بشكل كامل عندي وجزاك الله خيراً

Final Heaven

Jun 25 2007, 01:56 PM

إن شاء الله سأشرح طريقة عمله إن شاء الله و لكن إصبر علي أسبوعين حتى أنهي إمتحاناتي

Dotnet Framework 2.0 هو Runtime Environment خاص بالبرامج المكتوبة بلغة Dotnet

تقدر على تحميله مجانا من موقع Microsoft

nono5

Jun 27 2007, 10:57 PM

كنت عايزة ارسم شجرة بحيث اعطية النودذ وبتدى يوصل بينهم ممكن تساعدنى

Final Heaven

Jun 28 2007, 03:08 PM

على ما فهمت تقدرين رسم عدّة دوائر على الشاشة و في نفس الوقت

تضعين نقطة الوسط لكل دائرة في array و من ثمّ تصلينهم ببعضهم البعض

من خلال Loop لا أعلم إن أفدتك لأنني لم أرسم شيئا مماثلا قبلا

Final Heaven

Jul 4 2007, 05:57 PM

بسم الله الرحمن الرحيم

الطريقة التي إتبعتها في عمل برنامج Paint

أولا لقد قمت بكتابة كلاس لكل من أوامر الرسم من أمر رسم الخط و أمر رسم المربع و غيره

و كمثال هذا كلاس للنقطة و كلاس لرسم الخط:

كود

#ifndef GLINTPOINT_H
#define GLINTPOINT_H

const int SCREEN_HEIGHT=480;
const int SCREEN_WIDTH=640;

class GLintPoint{
public:
    GLintPoint(){
        x=0;
        y=0;
    }
    GLint x, y;
};

#endif

كود

#ifndef LINE_H
#define LINE_H

#include "glintpoint.h"

class Line{
public:
    GLintPoint linePoint;
    int LINE_WIDTH;
    int LINE_HEIGHT;
    Line(){
        LINE_WIDTH=40;
        LINE_HEIGHT=60;
        linePoint.x=50;
        linePoint.y=SCREEN_HEIGHT-20;
    }

    GLint getX(){
        return linePoint.x;
    }

    GLint getY(){
        return linePoint.y;
    }

    GLint getNextX(){
        return (linePoint.x+LINE_WIDTH);
    }

    GLint getNextY(){
        return (linePoint.y-LINE_HEIGHT);
    }

    void drawLineTool(){
        glBegin(GL_LINES);
        glVertex2i(80,(SCREEN_HEIGHT-30));
        glVertex2i(60,(SCREEN_HEIGHT-70));
        glEnd();
        glFlush();
    }

    void drawPressedLineTool(){
        glColor3f(0.0f, 0.0f, 0.0f);
        glRecti(getX(),getY(),getNextX(),getNextY());
        glColor3f(1.0f, 1.0f, 1.0f);
        glBegin(GL_LINES);
        glVertex2i(80,(SCREEN_HEIGHT-30));
        glVertex2i(60,(SCREEN_HEIGHT-70));
        glEnd();
        glFlush();
    }
};

#endif

الكلاس الأول سهل و مفهوم و لكن فيه أيضا متغيران لتحديد حجم الشاشة التي سأعمل عليها للرسم

أما الكلاس الثاني فهو لتحديد رسمة الخط و شكلها على شريط الأدوات كما ترون

int LINE_WIDTH
int LINE_HEIGHT

هذه لتحديد حجم المربع الذي سيرسم فيه الخط على شريط الأدوات

أما drawLine

فهي لرسم أدات الخط على شريط الأدوات بالشكل العادي

أما drawPressedLineTool

فهي تعنى برسم الأداة بألوان مغايرة عند الضغط عليها في شريط الأدوات

أما في الملف الرئيسي الذي يحتوي على Main

فهذا شكل Mouse Function

كود

void myMouse(int button, int state, int x, int y)
{
    if(line.getX()<x && line.getY()>y && line.getNextX()>x && line.getNextY()<(SCREEN_HEIGHT-y) && button == GLUT_LEFT_BUTTON && state == GLUT_DOWN){
        setFalse();
        linePressed=true;
        drawToolsRectangle();
        line.drawPressedLineTool();
        pointsNumber=0;
    }

    glColor3f(Red, Green, Blue);
    if(linePressed && x>100 && button == GLUT_LEFT_BUTTON && state == GLUT_DOWN){
        if(pointsNumber==0){
            linePoint.x=x;
            linePoint.y=y;
            glBegin(GL_POINT);
            glVertex2i(linePoint.x,SCREEN_HEIGHT-linePoint.y);
            glEnd();
            glFlush();
            pointsNumber++;
        }
        else if(pointsNumber==1){
            pointsNumber=0;
            glBegin(GL_LINES);
                glVertex2i(linePoint.x,SCREEN_HEIGHT-linePoint.y);
                glVertex2i(x,SCREEN_HEIGHT-y);
            glEnd();
            glFlush();
        }
    }

    if(button == GLUT_RIGHT_BUTTON && state == GLUT_DOWN){
        myDisplay();
    }
}

و كما ترون قمت بتحديد الأداة التي قمت بالضط عليها عن طريق Boolean و التي هي linePressed

و من ثم أقوم بإعادة رسم شرط الأدوات كي أزيل أي أداة كنت قد ضغط عليها قبلا و أقوم بإعادة رسم الأدات التي

ضغط عليها بألوان أخرى كي تكون مميزة كما رأينا في الكلاس Line في الأعلى

و بعدها هناك أرى إن كان مكان الضغط على الماوس هو مكان الرسم أم لا

و أقوم بالرسم ، و هنا لأنني أقوم برسم خط بين نقطتين فقط فقد إحتجت إلى variable لحساب كلما

أرسلت نقطتين عن طريق الماوس أقوم برسم خط بينهما و الذي هو pointsNumber

أتمنى أن أكون قد أفدتكم بهذا

بن العيد

Jul 4 2007, 06:44 PM

السلام عليكم

إقتباس

تقدر على تحميله مجانا من موقع Microsoft

من هذا الرابط يمكن تحميل dot net framwork 2.0
http://www.microsoft.com/downloads/details...;displaylang=en

من هذا الرابط يمكن تحميل dot net framwork 3.0
http://www.microsoft.com/downloads/details...;displaylang=en

إقتباس

إن شاء الله سأشرح طريقة عمله إن شاء الله و لكن إصبر علي أسبوعين حتى أنهي إمتحاناتي

إن شاء الله بالتوفيق

Final Heaven

Jul 5 2007, 05:38 AM

شكرا لكم إخوتي

سأكمل هذه function التي أرسم بها شريط الأدوات في البرنامج و أستخدم فيها drawLineTool من كلاس Line

لرسم الخط في مكانه على شريط الأدوات

كود

void drawToolsRectangle(){
    glColor3f(0.84f, 0.84f, 0.84f);
    glRecti(0,0,100,SCREEN_HEIGHT);

    glColor3f(1.0f, 1.0f, 1.0f);

    glBegin(GL_LINE_LOOP);

        glVertex2i(10,(SCREEN_HEIGHT-20));
        glVertex2i(90,(SCREEN_HEIGHT-20));
        glVertex2i(90,(SCREEN_HEIGHT-200));
        glVertex2i(10,(SCREEN_HEIGHT-200));

    glEnd();

    glBegin(GL_LINE_LOOP);

        glVertex2i(90,(SCREEN_HEIGHT-200));
        glVertex2i(90,(SCREEN_HEIGHT-260));
        glVertex2i(10,(SCREEN_HEIGHT-260));
        glVertex2i(10,(SCREEN_HEIGHT-200));

    glEnd();

    glBegin(GL_LINES);

        glVertex2i(30,(SCREEN_HEIGHT-200));
        glVertex2i(30,(SCREEN_HEIGHT-260));

        glVertex2i(50,(SCREEN_HEIGHT-200));
        glVertex2i(50,(SCREEN_HEIGHT-260));

        glVertex2i(70,(SCREEN_HEIGHT-200));
        glVertex2i(70,(SCREEN_HEIGHT-260));

    glEnd();

    glColor3f(0.0f, 0.0f, 0.0f);
    glRecti(10,(SCREEN_HEIGHT-200),30,(SCREEN_HEIGHT-260));

    glColor3f(1.0f, 0.0f, 0.0f);
    glRecti(30,(SCREEN_HEIGHT-200),50,(SCREEN_HEIGHT-260));

    glColor3f(0.0f, 1.0f, 0.0f);
    glRecti(50,(SCREEN_HEIGHT-200),70,(SCREEN_HEIGHT-260));

    glColor3f(0.0f, 0.0f, 1.0f);
    glRecti(70,(SCREEN_HEIGHT-200),90,(SCREEN_HEIGHT-260));

    glColor3f(1.0f, 1.0f, 1.0f);
    glBegin(GL_LINES);

        glVertex2i(10,(SCREEN_HEIGHT-80));
        glVertex2i(90,(SCREEN_HEIGHT-80));

        glVertex2i(10,(SCREEN_HEIGHT-140));
        glVertex2i(90,(SCREEN_HEIGHT-140));

        glVertex2i(10,(SCREEN_HEIGHT-200));
        glVertex2i(90,(SCREEN_HEIGHT-200));

        glVertex2i(50,(SCREEN_HEIGHT-20));
        glVertex2i(50,(SCREEN_HEIGHT-200));

    glEnd();

    glColor3f(0.0f, 0.0f, 0.0f);
    line.drawLineTool();
}

و كما ترون فقد بدأت برسم المستطيل الكبير لشريط الأدوات و من ثم قمت بتحديد و تقسيمها إلى مربعات عبر

رسم خطوط بيضاء لتحديد حدود كل أداة من الأدوات و في النهاية قمت برسم الخط و الذي هو كلاس Line

في مكانه الذي حددته له على شريط الأدوات كي أقوم بالنقر عليه و إستخدامه للرسم

و هذا هو الكود للبرنامج مع وجود LineTool فقط

إضغط لإظهار المرفق

omar_cplusplus

Jul 10 2007, 12:53 AM

جزاكم الله خيراً

omar_cplusplus

Jul 10 2007, 01:03 PM

لدي سؤال بخصوص أوبن جي إل .....
هل تعمل تلك الأشياء في لينوكس ؟؟؟؟

Final Heaven

Dec 24 2007, 07:58 PM

نعم تقدر على إستخدام OpenGL في Linux

و الأسهل من خلال بحثي إستخدامك ل JOGL و عن طريق Netbeans هناك تسهيل رائع

و يمكنك من إنشاء ذات البرنامج على عدّة نظم تشغيل و تراها من هنا:

https://netbeans-opengl-pack.dev.java.net/

Final Heaven

Feb 12 2008, 07:25 PM

Bouncing Ball

إضغط لإظهار المرفق

إضغط لإظهار المرفق

salmayafa

Apr 2 2008, 10:32 PM

السلام عليكم
بارك الله فيك على هذا الشرح الرائع
ولكن اطلب منكم مساعدة اريد كود للماوس والكيبورد حيث عندما ارسم خط او اي شي وضغطت حرف d يعمل ديليت لاخر خط رسمتو او يمسحو كله
والسلام عليكم ورحمة الله

دعواتكم لاهلنا في غزة

[size="5"][/size]

adaj

Nov 6 2008, 09:55 PM

ياشباب أبغى اعرف كيف ارسم نجمة باللون الأحمر ونجمة على شكل
مضلعات

الشمري

Nov 7 2008, 04:01 PM

أخي ,استخدم البحث حتى لا تضطر لسؤال أحد

..

عموما هنا المطلوب :
http://www.arabteam2000-forum.com/index.ph...652&hl=نجمة

هذه "نسخة - خفيفة" من محتويات الرئيسية للإستعراض الكامل مع المزيد من الصور والخيارات الرجاء إضغط هنا.