1 Two‐Dimensional Geometric Transformations  การวาดภาพกราฟกแบบสองมิติดวย OpenGL รูปแบบตางๆ ท่ีไดศึกษามานั้น เปนการกําหนดจุดตางๆใหกับคําส่ังของ OpenGL เพื่อใหมีการวาดภาพวัตถุในตําแหนงตางๆของจอภาพ เม่ือผูพัฒนา โปรแกรมตองการเปล่ียนแปลงตําแหนงการวาดภาพวัตถุในพิกัดใดๆ บนจอภาพ ก็จะตองทําการเปล่ียนแปลงคาจุดตางๆใหกับคําส่ังของ OpenGL จะพบวาการเปล่ียนแปลงคาจุดๆท่ีตองการวาดภาพใหมนั้นทําไดยากพอสมควร ดังนั้นจึงมีการประยุกตใชสมการทางคณิตศาสตรเขามาชวยในการคํานวณรูปแบบทรงเรขาคณิต (Geometric) และนําระบบเมตริกซชวยในการคํานวณหาการเคล่ือนยายตําแหนงของวัตถุ (Transformations) ไปยังตําแหนงที่ตองการ ในบทความนี้เราจะศึกษาในเร่ือง Two-Dimensional Geometric Transformations โดยจะมีทฤษฎีท่ีเกี่ยวของดังนี้ 1. Two-Dimensional Translation คือการแปลงคาตําแหนงของวัตถุสองมิติบนระบบโคออดิเนท จากจุด , ไปยังจุดใดๆ คือ , ดังภาพท่ี 1-1 '( ', ')P x y

( , )P x y

Y

X

T 2. Two-Dimensional Rotation คือการหมุนวตัถุสองมิติบนระบบโคออดิเนท โดยจะมีการแปลงคามุมองศาของวัตถุเดิมไปยงัมุมองศาท่ีตองการดังภาพท่ี 1-2 Y

X

( ', ')x y

( , )x yr

r θφ 

    

COMPUTER GRAPHICS USING 

in 

Mr.Nattaphol  Jasungnuen and Poolsak Koseeyaporn,Ph.DDepartment of Teacher Training in Electrical Engineering King Mongkut’s Institute of Technology North Bangkok 

 

  ,    , คาพิกัด , ของตําแหนงใหมดังน้ี , (1) จากสมการท่ี (1) สามารถเขียนเปนเวคเตอรไดดังน้ี หรือ (2) , คือ Translation Vector หรือ Shift Vector ภาพท่ี 1-1 2D Translation ภาพท่ี 1-2 2D Rotation จากภาพท่ี 1-2 หาตําแหนง , ดังน้ี

               

(3) และหาตําแหนง   ,  จากสมการ  , (4) นําสมการ (4) แทนลงใน (3) จะได

      (5) จาก (5) สามารถเขียนสมการแปลงคาตําแหนงของวัตถุไดดังน้ี ·

· (6) หาคา Rotation Matrix ไดเปน (7)

  2 Two‐Dimensional Geometric Transformations จากภาพท่ี 1-2 เปนการคํานวณหา 2D-Rotation Matrix เทียบกับจุด Origin (0, 0) ถาตองการคํานวณหาตําแหนงการหมุนของวัตถุท่ีทําการแปลงคาตําแหนงสองมิติบนระบบโคออดิเนท จากจุด , ไปยังจุด , โดยเทียบกับจุดใดๆคือ ( , ) ดังภาพท่ี 1-3 สามารถเขียนสมการไดดังนี้ ( ', ')x y

( , )x y

Y

X

( , )r rx y

rr θ จะเห็นไดวาสมการท่ี (8) และ (10) จะไดผลลัพทเทากัน จากสมการท่ีเกี่ยวของ เราสามารถนําสมการใชสรางเปนฟงกชันสําหรับการคํานวณรวมกับคําส่ัง OpenGL ได โดยจะสรางโคดตนแบบของโปร เจ็คดวย OpenGL AppWizard ตามข้ันตอนตอไปนี้ ขั้นตอนท่ี 1 การสรางโปรเจ็คดวย OpenGL Application Wizard - ดับเบ้ิลคลิกไอคอนเปดโปรแกรม Microsoft Visual C++ ทําการสรางโปรเจ็คใหมช่ือ OpenGLTransformation โดยใช OpenGL Application Wizard และกดปุม OK ดังภาพท่ี 1-4 ภาพท่ี 1-4 สรางโปรเจ็คใหมดวย OpenGL AppWizard จากภาพท่ี 1-3 หาตําแหนง , จากการหมุนจาก , เปน   , แลวเลือ่นจากตําแหนง Origin ไปยังจุด , ดังนี ้

               (8) เราสามารถหาสมการจาก การเลื่อนจุด  , ไปยังจุด Origin แลวทําการหมุนเปนมุม จากนั้นทําการเลือ่นจากจุด Origin ไปยัง  , เดิม ซ่ึงเขียนสมการดังนี ้

, · · ,    , , (9) 1 00 10 0 1

·00

0 0 1·1 00 10 0 1

      

 11

0 0 1  (10)  ภาพท่ี 1-3 2D Rotation

  3 Two‐Dimensional Geometric Transformations - จะปรากฏ OpenGL Wizard เลือก Tap OpenGL Lighting กําหนดไมใหมีการแสดงแสง สะทอนวัตถุ ใหเลือก None ดังภาพท่ี 1-5 ภาพท่ี 1-5 กําหนด OpenGL Lighting (แสงสะทอนวัตถุ) - เลือก Tap OpenGL Projection ใหกําหนดการแสดงภาพแบบ Perspective ดังภาพท่ี 1-6 ภาพท่ี 1-6 กําหนด Perspective ลักษณะการมองเห็นวัตถุ

  4 Two‐Dimensional Geometric Transformations - เลือก Tap OpenGL Shading กําหนดใหวตัถุมีลักษณะพืน้ผิวเปนแบบ Smooth Shading ดังภาพท่ี 1-7 ภาพท่ี 1-7 กําหนดพืน้ผิวเปนแบบ Smooth Shading - เลือก Tap OpenGL Alpha Blend เพื่อกําหนดการแสดงภาพสามมิติแบบโปรงใส ตัวอยางตอไป นี้เปนการวาดภาพสองมิติ ไมจําเปนตองเลือกการแสดงภาพแบบ Alpha Blend ดังภาพท่ี 1-8 ภาพท่ี 1-8 กําหนด Alpha Blend แสดงภาพแบบโปรงใส

  5 Two‐Dimensional Geometric Transformations - เลือก Tap OpenGL Fog กําหนดพื้นหลังสีหมอกหรือสีดาํ ตัวอยางตอไปน้ีกําหนดเปนพื้นสีดํา เลือก No ดังภาพท่ี 1-9 ภาพท่ี 1-9 OpenGL Fog กําหนดพืน้หลัง - เลือก Tap OpenGL Texture เปนการกําหนดกระบวนการนําภาพวาด หรือ Image มาใชกับพื้นผิว หรือนํามาหอหุมรอบๆวัตถุโคงได ในตัวอยางนี้ไมเลือกการสนับสนุน Texture Mapping ดังภาพท่ี 1-10 ภาพท่ี 1-10 OpenGL Texture Mapping

  6 Two‐Dimensional Geometric Transformations - เลือก Tap OpenGL Animation เปนการกําหนดใหวัตถุสามารถเคล่ือนไหวได ในตัวอยางนี้จําเปนตองสนบัสนุน Automation เลือกตอบ No ดังภาพท่ี 1-11 ภาพท่ี 1-11 กําหนด OpenGL Animation - เลือก Tap Selection สําหรับข้ันตอนนี้ใหเลือก No และคลิก OK ดังภาพท่ี 1-12 ภาพท่ี 1-12 กาํหนดการ Selection วัตถุ

  ความสาของ GeoMatrix Tแกไขโคขั้นตอนที Matrix Rฟงช่ันท่ีเฟงกชันตลงในไฟOpenGLT ………#ifdef#defin#endif//เริ่มแทร#includ//Glob//Set rGLfloatGLfloat

เม่ือทโคดตนแบบสการรันโปรแ จากภาพท่ี 1-มารถเฉพาะกometric TrTranslation แดโปรแกรมใ ท่ี 2 สรางฟงกการคํานวณ 2Rotation ใหทํเกี่ยวกับการ Tตางๆเกี่ยวกับฟล OpenGLTrTransformationภาพท่ี 1-…… f _DEBUG ne new DEBUGf รกโคดโปรแกรมต้ังde <math.h> bal function anrange for worldt xwcMin = 0.0t ywcMin = 0.0

ทําการกําหนสําหรับรองรับกรมจะไดผล-13 ข เปนโปรการวาดภาพแransformationและ Matrix Rในสวนตางๆ กชันการคํานว2D Geometriทําการเพิ่มฟงTransformatiการ TransforransformationView.cpp -13 ก แสดง CG_NEW งแตบรรทัดน้ี d Variable fund coordinates. 0, xwcMax = 250, ywcMax = 25

ดคาตางๆครบบคําส่ังของ Oของโปรแกรรแกรมท่ี Opeแบบสองมิติเns ผูเขียนโปรRotation เพื่อใดังข้ันตอนท่ี วณคา Transic Transformกชันลงในโปions กําหนดrmations ไดทnView.cpp ดัClass View ction. 

55.0; 55.0; 

Twบทุกข้ันตอน OpenGL โดยมตนแบบดังenGL สรางข้ึเทานั้น ดังนั้นรแกรมตองทํใหโปรแกรม 2 formations mations จะปรปรแกรมโดยเดใหเปนฟงกชทุกสวนของโปดังนี้ กําหนดคwo‐Dimensio OpenGL Apจะสรางคลาสภาพท่ี 1-13 ข้นตามท่ีผูใชงนกระบวนกาทําการเพ่ิมโปมสามรถคํานว ะกอบดวยฟงเลือกท่ี Tap Cชันแบบ Gloปรแกรม ดังนภาพท่ี 1-1 าเริ่มตนของระบบnal Geometrpplication Wสตางๆ ดังภาพข านกําหนด โารทางคณิตศาปรแกรมในสววณคา Transfoงกชันของ MClass View ดัobal functioนั้นใหทําการแ13 ข ตัวอยาง AppWiบ Coordinate ric TransformWizard จะทําพท่ี 1-13 ก แดยโปรเจ็คตัวาสตรซ่ึงจะศึวนของการคํormations ไดatrix Translaดังภาพท่ี 1-13n ซ่ึงสามารแทรกโคดโปโปรแกรม Opizard สรางข้ึน 7mations การสรางละเม่ือทําวอยางนี้มีศึกษาเร่ืองานวณคา ด โดยการation และ 3 การเพิ่มถเรียกใชรแกรม penGL น

  8 Two‐Dimensional Geometric Transformations OpenGLTransformationView.cpp (ตอ) ………………………………. class wcPt2D{ public:    GLfloat x,y; };  typedef GLfloat Matrix3x3 [3][3];  Matrix3x3 matComposite; const GLdouble pi = 3.14159;   //Construct the 3 by 3 identity matrix void matrix3x3SetIdentity(Matrix3x3 matIdent3x3) {   GLint row,col;   for(row= 0;row<3;row++)   for(col = 0;col<3;col++)     {       matIdent3x3 [row][col] = (row == col);     } }   //Premultiply matrix m1 times m2 ,Store result in m2. void Matrix3x3PreMultiply(Matrix3x3 m1,Matrix3x3 m2) {   GLint row,col;   Matrix3x3 matTemp;   for(row =0;row<3;row++)     for(col = 0; col<3;col++)     {       matTemp [row][col] =          (m1[row][0]) * (m2[0][col]) +          (m1[row][1])* (m2[1][col]) +         (m1[row][2]) * (m2[2][col]);     }   for(row =0;row<3;row++)     for(col=0;col<3;col++)       m2[row][col] = matTemp [row][col]; }  //Translate function. void translate2D(GLfloat tx,GLfloat ty) {   Matrix3x3 matTransl;   //Initailize translation matrix to identity   matrix3x3SetIdentity(matTransl);    matTransl [0][2] = tx;   matTransl [1][2] = ty;    //Concatenate matTransl with the compisite matrix.   Matrix3x3PreMultiply(matTransl , matComposite); } 

สรางคลาสเก็บโครงสรางของตําแหนง x, y สราง Array สําหรับเก็บคา Matrix 3x3 ฟงกชันสําหรับกําหนด Matrix Identity ตรวจสอบจํานวน Row และ Column ตองมีคาเทากัน ฟงกชันสําหรับใชในการคูณ Matrix โดยจะนําคาผลคูณเก็บใน m2 1 00 10 0 1

สรางฟงกชัน Translate2D จากสมการท่ี (2) 0 0 00 0 00 0 0

สราง Matrix ขนาด 3x3 1 0 00 1 00 0 1

  Set Identity Matrix กําหนดคาใหกับ Matrix โดยการคูณดวยฟงกชัน PreMutiply และเก็บผลการคูณท่ีตัวแปร matComposite

  9 Two‐Dimensional Geometric Transformations OpenGLTransformationView.cpp (ตอ) void rotate2D(wcPt2D pivotPt , GLfloat theta){   Matrix3x3 matRot;   //Initailize rotation matrix to indentity   matrix3x3SetIdentity(matRot);    matRot[0][0]=cos(theta);   matRot[0][1]=­sin(theta);   matRot[0][2]=pivotPt.x *(1­cos(theta))+ ( pivotPt.y * sin(theta));    matRot[1][0]=sin(theta);   matRot[1][1]=cos(theta);   matRot[1][2]=pivotPt.y *(1­cos(theta))­ ( pivotPt.x * sin(theta));      //Concatenate matRot with the composite matrix.   Matrix3x3PreMultiply(matRot , matComposite); }  void scale2D(GLfloat sx,GLfloat sy,wcPt2D fixedPt) {   Matrix3x3 matScale;   //Initialize scaling matrix to identity.   matrix3x3SetIdentity(matScale);      matScale[0][0]= sx;   matScale[0][2]= (1­sx)*(fixedPt.x);   matScale[1][1]= sy;   matScale[1][2]= (1­sy)*(fixedPt.y);      //Concatenate matScale with the composite matrix.   Matrix3x3PreMultiply(matScale,matComposite);  } //Using the Composite matrix. Caculate transformaed coordinates. void transformVerts2D(GLint nVerts,wcPt2D* verts) {   GLint k;   GLfloat temp;    for(k=0;k<nVerts;k++)   {           temp = matComposite[0][0]*verts[k].x +     matComposite [0][1]*verts[k].y +      matComposite[0][2];            verts[k].y = matComposite[1][0]*verts[k].x +     matComposite [1][1]*verts[k].y +      matComposite[1][2];      verts[k].x = temp;   } }  //Drawing function of the triangle  void triangle(wcPt2D *verts) {   GLint k;   glBegin(GL_TRIANGLES); 

for(k=0;k<3;k++) { 

    glVertex2f(verts[k].x , verts[k].y); } 

  glEnd(); } 

, · · ,   , ,  

=11

0 0 1 

, · , · ,  , ,  ,   

= 0 1

0 10 0 1

 ฟงกชันคํานวณคา Transformation ฟงกชันสําหรับวาดภาพ Triangle

  10 Two‐Dimensional Geometric Transformations  ในข้ันตอนท่ีผานมานั้นเปนการสรางฟงกชันสําหรับการคํานวณคา Transformation เม่ือทําการเปด Tap Class View จะแสดงรายละเอียดของแตละฟงกชันเพิ่มเขามาดังภาพท่ี 14 ซ่ึงประกอบดวยฟงกชันแบบ Global ในข้ันตอนตอไป จะตองแกไขโคดโปรแกรมของฟงกชั OnSize() และ OnPaint() ในคลาส COpenGLTransformationView ดังข้ันตอนท่ี 3 ขั้นตอนท่ี 3 แกไขโคดโปรแกรมใน OnSize() ของ คลาส COpenGLTransformationView File: OpenGLTransformationView.CPP เนื่องจากการทํางานทางดานกราฟกของ OpenGL และการแสดงผลวนิโดวนัน้ จะทํางานพรอมกัน โดยการแปลงคาพิกัดของ OpenGL ไปแสดงผลบนวินโดว สามารถทําไดโดยใชคําส่ัง glViewport และการสรางภาพในสวนของ geometry ใน Computer graphics นั้นใช Matrix operators เพื่อใหไดภาพท่ีเราตองการ (โดยเฉพาะกบัสามมิติ ซ่ึงซับซอน) ภาพท่ี 14 รายละเอียด Class View void COpenGLTransformationView::OnSize(UINT nType, int cx, int cy) {   CView::OnSize(nType, cx, cy);   width=cx;   height=cy;      if(cx && cy)                               {        glViewport( 0, 0 , width, height);     glMatrixMode(GL_PROJECTION);     glLoadIdentity();      glMatrixMode(GL_MODELVIEW);     glLoadIdentity();     gluOrtho2D(xwcMin,xwcMax,ywcMin,ywcMax);     glClear(GL_COLOR_BUFFER_BIT);     } } 

  11 Two‐Dimensional Geometric Transformations ขั้นตอนท่ี 4 แกไขโคดโปรแกรมใน OnPaint ของคลาส COpenGLTransformationView File: OpenGLTransformationView.CPP void COpenGLTransformationView::OnPaint() {   //Call Device Context   CPaintDC dc(this);     //Define initail position for triangle.   GLint nVerts = 3;   wcPt2D verts[3] = { {0.0 , 0.0} , {150.0 , 0.0}, {75.0 , 150.0} };    //Caculate position of triangle centroid.   wcPt2D centroidPt;    GLint k, xSum= 0, ySum= 0;   for (k=0;k<nVerts;k++)   {     xSum += verts[k].x;     ySum += verts[k].y;   }   centroidPt.x = GLfloat(xSum)/GLfloat(nVerts);   centroidPt.y = GLfloat(ySum)/GLfloat(nVerts);    wcPt2D pivPt,fixedPt;    pivPt = centroidPt;   fixedPt = centroidPt;    //Set Geomatric transformation parameters   GLfloat tx=m_spinx, ty=­m_spiny;   GLfloat sx=0.5,sy=0.5;   GLdouble theta = pi;    glClear(GL_COLOR_BUFFER_BIT);   glColor3f(0.0 , 0.0 ,1.0);    //Set initial fill collor is bule.   triangle(verts);     //Diaplay bule triangle.    //Initialize composite matrix to indentity.   matrix3x3SetIdentity(matComposite);    //Construct composite matrix for transformation sequence.   scale2D(sx,sy,fixedPt);    //First transformation :scale .   rotate2D(pivPt,theta);    //Second transfornation :Rotation.   translate2D(tx,ty);    //Final transformation:Translate.    //Apply composite matrix to Triangle Vertices.   transformVerts2D(nVerts,verts);    glColor3f(1.0 , 0.0 , 0.0);    //Set color for transformed triangle.   triangle(verts);     //Diaplay red transformaed triangle.    glFlush();    SwapBuffers(hDC);     ValidateRect(NULL); } 

กําหนดตําแหนงใหมที่ตองการ Transformation 

อัตราขยายภาพ และมุมองศาของวัตถุสองมิติ

m_spinx และ m_spiny คือคาตําแหนงการเคล่ือนยายเมาท โดยท่ี OpenGL Application Wizard สรางใหกับโปรเจ็คอัติโนมัติ ซึ่ง m_spinx และ m_spiny กําหนดใหเปนตัวแปรแบบโกบอลสามารถเรียกใชตัวแปรในสวนตางๆของโปรแกรมได

  ภาพวัตถุได ภาพตแดงคือ ภจะมีมุมอตนแบบ จากภาพท่ี 1-ถุไปตําแหนงตตนแบบท่ียังไภาพท่ีมีการคํองศาเปล่ียนไ เม่ือทดลองคตําแห ภาพท่ี 1-15 เปนผลขอตางๆ สามารถไมทําการเปล่ีานวณคา Traไป 90 องศาคลิกเมาทลาก หนงและขนาดเดิมCentroid  1-15ผลของโองโปรแกรมกถทําไดโดยกาล่ียนแปลงใดๆansformation า จึงสงผลให ภาพสีแดงก็จมของวัตถุสองมติิ Twปรแกรม Ope กราฟกท่ีมีควารคลิกเมาทแๆคือ ภาพสีนํ แลว โดยมีขภาพท่ีทําการจะเคล่ือนท่ีไดตําแหนงใ

wo‐DimensioenGLTransfoามสามารถในแลวลาก ก็จะสาเงิน จะมีมุมขนาดลดลงเปร Transformaดตามตองการใหมที่เคล่ือนยา

ผลของก

nal Geometrormation นการ Transfoสามารถเคล่ือมองศาของภานอัตราสวนคation กลับทิ ายดวยเมาท การ Transform

ric Transformormations โดอนวัตถุไปตามาพเปนศูนย แคร่ึงหนึ่งของขิศทางตรงขาmations 

12mations ดยการยายมตองการและภาพสีขนาดเดิม มกับภาพ 2