الفريق العربي للبرمجةأرشيف المنتديات · 2000 – 2023
نسخة أرشيفية للقراءة فقط — التسجيل والمشاركة مغلقان، والمحتوى محفوظ كما كان.

مثال ) إنشاء صورة متحركة ( animated Image ) مع الشرح

مغلق
بدأه Abdullah.Alshammeri في 23 يوليو 2007 · 7 رد · 6,629 مشاهدة · في OpenGL
مشاركة: واتساب X فيسبوك تيليجرام
#1 صاحب الموضوع

السلام عليكم .

أيضا .. كثيرا ما نسمع سؤال عن إنشاء صورة متحركة في OpenGL . .

هناك عدة طرق .. وبعدة دوال ’’

الجديد هنا استخدام الدالة glDrawPixels لعرض الصور .. وهذا أسهل ,

سبق أن وضع الاخ حسن الجودي درس مشابه باستخدام الSDL ,

نحن سنقوم بنفس الفكرة .. لكن باستخدام OpenGL .

أولا : سأفرض أنك قرأت هذا الدرس وفهمت كل شيء .

مثال : رسم صورة وتحريكها في OpenGL ( مع الشرح)

الهدف من المثال هو عرض صورة متحركة ..

أولا نحتاج لعدة صور .. تمثل الانيمشن .. طبعا يجب " أو ينصح بشدة " أن تكون بنفس الطول والعرض والنوع .. الخ .. حتى لاتدخل في مشاكل أخرى ,

post-42837-1185204161_thumb.jpg

طبعا الصور فرقتها .. يعني كل صورة في ملف ..

1.bmp

2.bmp

3.bmp

4.bmp

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

هنا عندنا أمرين مهمين :

- تحميل الصور :

أنا اريد تحميل 4 صور .. لذا أنشأت اربع structure لتحمل قيم أربع صور كما هو ظاهر أمامكم .

AUX_RGBImageRec **image;

   /*******************************/
   image = new AUX_RGBImageRec*[4];
   image[0] = new AUX_RGBImageRec();
   image[1] = new AUX_RGBImageRec();
   image[2] = new AUX_RGBImageRec();
   image[3] = new AUX_RGBImageRec();

   image[0] = auxDIBImageLoad("1.bmp");
   image[1] = auxDIBImageLoad("2.bmp");
   image[2] = auxDIBImageLoad("3.bmp");
   image[3] = auxDIBImageLoad("4.bmp");
	/*******************************/

- الانيمشن :

الان في كل ثانية نريد أن نرسم صورة معينة ..

لذا وضعت عداد سميته index يزداد في كل ثانية بمقدار واحد .. واذا كان أكبر من ثلاثة .. نرجع مرة اخرى للصورة رقم صفر .. ثم نرسم الصورة .. كما هو ظاهر أمامكم .

void display(void)
{
   glClear (GL_COLOR_BUFFER_BIT);
   glLoadIdentity();

   glRasterPos2i( 100,100 );
   glDrawPixels(image[index]->sizeX,image[index]->sizeY,GL_RGB,GL_UNSIGNED_BYTE,image[index]->data);

   glutSwapBuffers();
}


void Timer(int val)
{
	index+=1; 
	if(index >3)
		index=0;

	glutTimerFunc(1000,Timer,val);
	glutPostRedisplay();
}

اأي سؤال ,, اي استفسار .. أنا حاضر.

animated_image.zip

تم تعديل هذه المشاركة بواسطة الشمري في 23 يوليو 2007 في 18:29

logo1.png تطبيق طمأنينة ، نسخة بيتا على أندرويد

عبدالله الشمّري - Al-Shammari

CodingAlone.com

twitter @abshammeri

abshammeri AT gmail.com

github : abshammeri

#2

شكرا لك اخي لكن عندي مشكله انه كل ما اتعامل مع اي برنامج فيه صور ال compiler بيعطينيzero error لكن عند التنفيذ بيطلّع fatal erro

وهذا نص الخطأ لما نفذت برنامجك المرفق

Main.obj : error LNK2001: unresolved external symbol _auxDIBImageLoadA@4

ياريت تقدر اتساعدني لانه بحاجه للتعامل مع الصور وادراجها .جزاك الله كل الخير على المعلومات.

#3

انت لم تربط المكتبة ...glaux.lib

اكتبي هذا السطر في أول البرنامج ..

#   pragma comment (lib, "glaux.lib")

logo1.png تطبيق طمأنينة ، نسخة بيتا على أندرويد

عبدالله الشمّري - Al-Shammari

CodingAlone.com

twitter @abshammeri

abshammeri AT gmail.com

github : abshammeri

#4

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

(glutviewport(0,0,(glsizei)w,(glsizei)h

glPushMatrix&glPopMatrix

glMatrixMode(GL_PROJECTION)&Modelview

اذا اتكرمت اخي تشرحي بالضبط شوه عملهن ووظيفتهم الاساسية

وحده وحده ولاتنسى في العجلة الندامة؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟!!!!! :P

glsizeiشوه يعني

شغله ثانيه انا عندي فكرة بالضبط نفس ما انت عامل لكن 3صور حاولت اعمل مثل برنامجك وعدلت باني عملت 3structureوال image3لكن حجم الصور مختلف عن حجم صورك هذا من جهة ومن جهة ثانية انا اصلا بدي ارجع عكسي يعني مثلا حسب برنامجك لما يوصل 4 يرجع 3ثم2ثم1 بمعنى index لا ترجع للصفر بل تنقص بمقدار واحد والصور تقريبا نفس الحجم والمشكلة انه بنفذ واول ما تظهر الشاشه السوداء بيعطي

error نصه

"Image file conversion error"

تظهر ب boxصغيرعلى عدد الصور يعني ثلاثة مش عارفة وين المشكلة مع اني والله كثير حاولت لكن اكيد لاني مبتدئه في شي موه فاهمته وخصوصا انك ماشرحت كل شي في برنامجك وسامحني على اني استخدمت برنامجك لعمل برنامجي بالله عليك سامحني لاني فعلا مبتدئه

اشرحلي حبه حبه لكن رجائي الوحيد لا تعطيني رابط وتحكيلي مشروح فيه الهي يرضى عليك ويرضيك ويوفقك انا من انصار توحيد الاتجاه وشكرا

تم تعديل هذه المشاركة بواسطة Susan AL_Salem في 24 يوليو 2007 في 22:24

#5

بالنسبة للMatrix في OpenGL .. هذه شرحها يطول . . .

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

بدون تعمق .

أولا : المصفوفات :

المقصود بالمصفوفة matrix .. هي المصفوفة العادية اللي تنشئيها بالسي بهذه الطريقة :

float m[16];

هذه هي المصفوفة .. لاحظي أنه دائما حجمها = 16 . . ويوجد سبب لذلك .. لايهمنا الان .

ثانيا : المصفوفات وعلاقتها بالOpenGL :

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

فمثلا glTranslatef تعدل على المصفوفة بحيث تدخل قيم الازاحة اللي ادخلتها .

أنت مالك علاقة عن كيفية عملها الان ... كل مايهمك أن تعرف 5 دوال فقط :

glTranslatef

glRotatef

glScalef

glPopMatrix

glPushMatrix

ثانيا : المصفوفات في OpenGL :

يوجد ثلاث أنواع من المصفوفات ,, سأتلكم عن نوعين فقط :

GL_PROJECTION : وهي خاصة بنظام الاحداثيات .. افهميها كذا ... يعني اذا أردت تغيير الاحداثيات اللي على النافذة

فإنك تخبرين OpenGL بأن يتحول الى GL_PROJECTION ثم تعدلي على الاحداثيات ..

كيف تعدلي على الاحداثيات ؟

الجواب . باستخدام glOrtho أو gluOrtho2D .

مثال :

glMatrixMode (GL_PROJECTION);
   glLoadIdentity ();
   gluOrtho2D(0,w,0,h);

تحولنا الى المصفوفة GL_PROJECTION عشان نغير بالاحداثيات .

ثم صفرنا المصفوفة " أقصد حولناها الى مصفوفة الوحدة" ..

ثم غيرنا الاحداثيات ...

حيث البارمتر الاول في الدالة gluOrtho2D : يمثل جهة اليسار .. ووضعته صفر .

البارمتر الثاني : يمثل جهة اليمين .. وجعلته يساوي عرض النافذة w .. يعني لو كان عرض النافذة 400 فإن w= 400 .

لاحظ أن البارمتر الثاني أكبر من الاول .

البارمتر الثالث: جهة الاسفل ووضعته صفر .

البارمتر الرابع: جهة الاعلى .. وجعلته يساوي طول النافذة .. فمثلا لو كانت النافذة 400 فان الارتفاع h=400 .

لاحظ أن البرمتر الرابع أكبر من الثالث .

بالتالي رح يكون شكل الاحداثيات كذا , " افرض النافذة عرضها =400 , وطولها = 400 .

post-42837-1185317220_thumb.jpg

الان .. خلصنا .. وسوينا الاحداثيات ... نروح الى المصفوفة GL_MODELVIEW :

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

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

بالنسبة للمصفوفة GL_MODELVIEW و glPush , glPop .. هذه كلها شرحتها هنا بالتفصيل . .

/index.php?showtopic=83823

اقتباس
glsizeiشوه يعني

هذا نوع من البيانات .. معرف كذا :

typedef int GLsizei;

يعني تقدرين بدلا من كتابة GLsizei .. تكتبي int .

والهدف من كتابتها هو تحويل الرقم من float الى int .. ومو لازم تكتبيها ... يعني يصير شكل الكود .

   glViewport (0, 0,  w,  h);

بالنسبة للمصفوفات في OpenGL ,, تحتاج لوقت لاستيعابها .. بمجرد قراءة درس .. ثم مراجعتها بعد يومين او ثلاثة .. ستجدي نفسك فاهمه الموضوع .. . واذا أردت فهم كامل .. تحتاجين لمعرفة المصفوفات رياضيا ..

اقتباس
شغله ثانيه انا عندي فكرة بالضبط نفس ما انت عامل لكن 3صور حاولت اعمل مثل برنامجك وعدلت باني عملت 3structureوال image3لكن حجم الصور مختلف عن حجم صورك هذا من جهة ومن جهة ثانية انا اصلا بدي ارجع عكسي يعني مثلا حسب برنامجك لما يوصل 4 يرجع 3ثم2ثم1 بمعنى index لا ترجع للصفر بل تنقص بمقدار واحد والصور تقريبا نفس الحجم والمشكلة انه بنفذ واول ما تظهر الشاشه السوداء بيعطي

error نصه

"Image file conversion error"

هناك عدة أمور يجب أن تؤخذ بعين الاعتبار :

1- جميع الصور لازم تكون من نوع BMP .. يعني jpg ماينفع .

2- طول الصورة و عرض الصورة .. كل واحد لازم يكون يساوي :

2 أو 4 أو 8 أو 16 أو 32 أو 64 أو 128 او 256 او 512 ... يعني لازم يكون= " 2 اس n " .

أيضا تأكدي أن الملفات في داخل مجلد مشروعك .. يعني استدعيتها صح .

عموما ... أرفقي الكود والصور .. عشان نشوف المشكلة .. اذا ما انحلت ..

وهذا مثال يقوم بعرض الصور رقم 1 ثم 2 ثم 3 ثم 4 ويعود مرة اخرى .. 3 , 2 , 1

index+=d ;

if(index >3)

{

d=-1; // اجعل العداد يتناقص

index=2; // ارجع للصورة الثالثة

}

if(index<0)

{

d=1;

index=1;//ارجع للصورة الثانية

}

Animated_Image_2.zip

logo1.png تطبيق طمأنينة ، نسخة بيتا على أندرويد

عبدالله الشمّري - Al-Shammari

CodingAlone.com

twitter @abshammeri

abshammeri AT gmail.com

github : abshammeri

#6

أخي جزاك الله خيرا على مجهودك لكن الاستدعاء اعتقد انه صح ليش؟ لانه ببساطة ماغيرت على برنامجك الااشياء بسيطة والصورBMPوانا متاكدة انه المشكله بطول الصور باحداثياتها والله اعلم

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

Swing.rar

تم تعديل هذه المشاركة بواسطة Susan AL_Salem في 25 يوليو 2007 في 19:22

#7

كلامك صحيح .

الخطأ يتعلق بالصورة وليس بالكود ..

الصورة يجب أن تكون RGB يعني 24 بت فقط ,

post-42837-1185389952_thumb.jpg

والصور المستخدمة هي RGBA وهذا خطأ .

وهذا واضح من اسم التركيب AUX_RGBImageRec .

بالتالي يجب أن تتستخدمي برامج تقوم بتحويل الصورة الى BMP و من نوع RGB يعني 24 بت .

أنا استخدمت الفوتوشوب .

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

بالمرفقات الصورتين بعد تحويلهما الى RGB .. وعمل البرنامج بعدها بشكل صحيح .

images.zip

تم تعديل هذه المشاركة بواسطة الشمري في 25 يوليو 2007 في 22:00

logo1.png تطبيق طمأنينة ، نسخة بيتا على أندرويد

عبدالله الشمّري - Al-Shammari

CodingAlone.com

twitter @abshammeri

abshammeri AT gmail.com

github : abshammeri

#8

والله مش عارفة كيف اشكرك على العموم صورة 5 زابطة لكن صورة 7 لازالت نفس الشي وبعرض 5 وبعدين بطلع خطأ عند 7 لكن الف شكر على المعلومة وطلب ثاني ياريت تفتح ايميلك الي دائما بتحطة مع المرفقات ضروري.

هذا الموضوع مغلق.

مواضيع مشابهة