# Week02

電腦圖學 2023-02-22 Week02

1. 主題: 點、線、面、色彩

2. 親手打造 GLUT 程式

3. 實作: glColor3f(r,g,b); glVertex2f(x,y); 實心茶壼、形狀

4. 回家作業: 20+ 頂點

step01-1

step01-1_File-New-Project,GLUT專案,點點點選桌面,week02_GLUT_first 第一個專案的名字。在檔案總管裡,把桌面-葉正聖老師的 freeglut壓緒檔點開,裡面的freeglut資料夾複製到桌面,再把 lib的libfreeglut.a複製成libglut32.a 便可在CodeBlocks繼續,完成。老師帶大家看177行程式碼..

請複製程式 10行

```cpp

#include <GL/glut.h>

void display()

{

glutSolidTeapot( 0.3 );

glutSwapBuffers();

}

int main(int argc, char *argv[])

{ ///上面是特別的 main()函式, 有很多參數

glutInit(&argc, argv); ///把 GLUT 開起來

glutInitDisplayMode(GLUT_RGB | GLUT_DOUBLE | GLUT_DEPTH);

///上面這行,把顯示的模式設定好!

glutCreateWindow("GLUT Shapes"); ///要開視窗

glutDisplayFunc(display); ///要顯示的對應函式

glutMainLoop(); ///最後用 main迴圈,壓在最後面

}

```

step01-2

step01-2_有了基礎的10行程式碼,我們嘗試加上色彩 glColor3f(r,g,b) 比如說 glColor3f(1,1,0) 是黃色。再配合不同大小的茶壼,便能看到比較多變化的程式

```cpp

#include <GL/glut.h>

void display()

{

glColor3f(0,1,0); ///step01-2 綠色

glutSolidTeapot( 0.5 ); ///step01-2 畫出一個實心的大茶壼, 它的大小 0.5

glColor3f(1,1,0); ///step01-2 黃色

glutSolidTeapot( 0.3 ); ///step01-1 畫出一個實心的小茶壼, 它的大小 0.3

glutSwapBuffers(); ///step01-1 請GLUT把畫面swap送到顯示的地方

}

int main(int argc, char *argv[])

{ ///step01-1 上面是特別的 main()函式, 有很多參數

glutInit(&argc, argv); ///step01-1 把 GLUT 開起來

glutInitDisplayMode(GLUT_RGB | GLUT_DOUBLE | GLUT_DEPTH); ///上面這行,把顯示的模式設定好!

glutCreateWindow("GLUT Shapes"); ///step01-1 要開視窗

glutDisplayFunc(display); ///step01-1 要顯示的對應函式

glutMainLoop(); ///step01-1 最後用「主要的迴圈」,卡在最後面

}

```

step02-1

step02-1_有了色彩,今天的第二個重點是頂點Vertex, 對應的程式是 glVertex2f(x,y); 有3個頂點,包在 glBegin(GL_POLYGON) 及 glEnd() 中間, 便能繪製出3角形。座標要注意要開、不能共線,才畫得出來。

```cpp

#include <GL/glut.h>

void display()

{

glColor3f(0,1,0); ///step01-2 綠色

///glutSolidTeapot( 0.5 ); ///step01-2 畫出一個實心的大茶壼, 它的大小 0.5

glBegin(GL_POLYGON); ///開始畫多邊形

glVertex2f( 0, 1); ///頂點 Vertex

glVertex2f(-1,-1); ///頂點 Vertex

glVertex2f(+1,-1); ///頂點 Vertex

glEnd(); ///結束畫

glColor3f(1,1,0); ///step01-2 黃色

glutSolidTeapot( 0.3 ); ///step01-1 畫出一個實心的小茶壼, 它的大小 0.3

glutSwapBuffers(); ///step01-1 請GLUT把畫面swap送到顯示的地方

}

int main(int argc, char *argv[])

{ ///step01-1 上面是特別的 main()函式, 有很多參數

glutInit(&argc, argv); ///step01-1 把 GLUT 開起來

glutInitDisplayMode(GLUT_RGB | GLUT_DOUBLE | GLUT_DEPTH); ///上面這行,把顯示的模式設定好!

glutCreateWindow("GLUT Shapes"); ///step01-1 要開視窗

glutDisplayFunc(display); ///step01-1 要顯示的對應函式

glutMainLoop(); ///step01-1 最後用「主要的迴圈」,卡在最後面

}

```

step02-2

step02-2_其實每一個頂點,都可以有自己的色彩, 也就是一行裡,同時寫2行的程式 glColor3f(r,g,b); glVertex2f(x,y) 配合往右一個TAB縮排,方便理解

```cpp

#include <GL/glut.h>

void display()

{

///glColor3f(0,1,0); ///step01-2 綠色

///glutSolidTeapot( 0.5 ); ///step01-2 畫出一個實心的大茶壼, 它的大小 0.5

glBegin(GL_POLYGON); ///step02-1 開始畫多邊形

glColor3f(1,0,0); glVertex2f( 0, 1); ///紅色的頂點 Vertex step02-2

glColor3f(0,1,0); glVertex2f(-1,-1); ///綠色的頂點 Vertex step02-2

glColor3f(0,0,1); glVertex2f(+1,-1); ///藍色的頂點 Vertex step02-2

glEnd(); ///step02-1 結束畫

glColor3f(1,1,0); ///step01-2 黃色

glutSolidTeapot( 0.3 ); ///step01-1 畫出一個實心的小茶壼, 它的大小 0.3

glutSwapBuffers(); ///step01-1 請GLUT把畫面swap送到顯示的地方

}

int main(int argc, char *argv[])

{ ///step01-1 上面是特別的 main()函式, 有很多參數

glutInit(&argc, argv); ///step01-1 把 GLUT 開起來

glutInitDisplayMode(GLUT_RGB | GLUT_DOUBLE | GLUT_DEPTH); ///上面這行,把顯示的模式設定好!

glutCreateWindow("GLUT Shapes"); ///step01-1 要開視窗

glutDisplayFunc(display); ///step01-1 要顯示的對應函式

glutMainLoop(); ///step01-1 最後用「主要的迴圈」,卡在最後面

}

```

step02-3

step02-3_回家作業,要用很多個頂點來畫圖。老師挑了一張皮卡丘的圖來示範, 可利用大的正方形先畫出背景, 再畫你的圖形。可用小畫家的滴管+色彩編輯器來挑顏色,再除255.0便能換算到0到1間的浮點數。座標可用「減一半、除一半、y變負的」來找到頂點

```cpp

#include <GL/glut.h>

void display()

{

glColor3f(247/255.0, 247/255.0, 247/255.0);

glBegin(GL_POLYGON);

glVertex2f( 1, 1);

glVertex2f(-1, 1);

glVertex2f(-1,-1);

glVertex2f( 1,-1);

glEnd();

glColor3f(244/255.0, 209/255.0, 33/255.0);

glBegin(GL_POLYGON);

glVertex2f( (45-100)/100.0, -(134-100)/100.0 );

glVertex2f( (36-100)/100.0, -(171-100)/100.0 );

glVertex2f( (108-100)/100.0, -(179-100)/100.0 );

glVertex2f( (104-100)/100.0, -(117-100)/100.0 );

///口訣:減一半、除一半、y變負號

glEnd();

glutSwapBuffers(); ///step01-1 請GLUT把畫面swap送到顯示的地方

}

int main(int argc, char *argv[])

{ ///step01-1 上面是特別的 main()函式, 有很多參數

glutInit(&argc, argv); ///step01-1 把 GLUT 開起來

glutInitDisplayMode(GLUT_RGB | GLUT_DOUBLE | GLUT_DEPTH); ///上面這行,把顯示的模式設定好!

glutCreateWindow("GLUT Shapes"); ///step01-1 要開視窗

glutDisplayFunc(display); ///step01-1 要顯示的對應函式

glutMainLoop(); ///step01-1 最後用「主要的迴圈」,卡在最後面

}

```

step03-1

step03-1_有個挑戰,要如何利用glVertex2f()畫出一個圓。暗示1可用迴圈2行來做,便不用畫很多頂點,想像100邊形, 暗示2與cos()及sin()有關,暗示3與直角三角形有關。畫出單位圓後,發現x與cos()有關, y與sin()有關。配合PI 3.1415926 的兩倍來寫迴圈,最後改成自訂函式myCircle()及參數r,x,y等

```cpp

///Week02-3_circle_cos_sin

#include <GL/glut.h>

#include <math.h> ///cos() 和 sin() 要用

void myCircle(float r, float x, float y)

{

glBegin(GL_POLYGON); ///step02-1 開始畫多邊形

for(float a = 0; a< 2*3.1415926; a+=0.01){

glVertex2f( r*cos(a)+x, r*sin(a)+y );

}

glEnd(); ///step02-1 結束畫

}