Week02
電腦圖學 2023-02-22 Week02
1. 主題: 點、線、面、色彩
2. 親手打造 GLUT 程式
3. 實作: glColor3f(r,g,b); glVertex2f(x,y); 實心茶壼、形狀
4. 回家作業: 20+ 頂點
step01-1
## step01-1_親手打造GLUT程式10行, File-New-Project,GLUT專案,在桌面 week02-1_GLUT_first 專案, 再把 freeglut 的資料夾 解到桌面上, 再把 freeglut的lib的libfreeglut.a 複製成 libglut32.a 便偽裝好。便能設定GLUT並完成。挑出10行程式碼
我們要從 GLUT 範例中, 剪貼10行程式碼
```cpp
#include <GL/glut.h> //step01-1 使用 GL/glut.h
void display()
{
glutSolidTeapot( 0.3 ); /// 畫出實心的茶壼
glutSwapBuffers(); ///交換顯示出來
}
int main(int argc, char *argv[])
{ ///這個 main() 是比較厲害的 main()
glutInit(&argc, argv); /// 要開始 GLUT 的功能
glutInitDisplayMode(GLUT_RGB | GLUT_DOUBLE | GLUT_DEPTH);
/// 要設定 GLUT 的顯示模式 ...
glutCreateWindow("GLUT Shapes"); ///要建一個窗字,叫 "..."
glutDisplayFunc(display); /// 要顯示的函式 display()
glutMainLoop(); ///最後要有 glutMainLoop(); 主要迴圈卡最後面
}
```
step01-2
step01-2_有了基礎10行GLUT程式(畫茶壼),開始今天的第1行程式(色彩) glColor3f(r,g,b)。比如說 glColor3f(0,1,0) 會設定綠色, glColor3f(1,1,0) 會設定黃色。之後畫的茶壼,會用你設定的色彩來畫。
```cpp
#include <GL/glut.h> //step01-1 使用 GL/glut.h
void display()
{
glColor3f(1,1,0); ///step01-2 色彩 黃色
glutSolidTeapot( 0.5 ); /// 畫出實心的大茶壼
glColor3f(0,1,0); ///step01-2 色彩 綠色
glutSolidTeapot( 0.3 ); /// 畫出實心的小茶壼
glutSwapBuffers(); ///交換顯示出來
}
int main(int argc, char *argv[])
{ ///這個 main() 是比較厲害的 main()
glutInit(&argc, argv); /// 要開始 GLUT 的功能
glutInitDisplayMode(GLUT_RGB | GLUT_DOUBLE | GLUT_DEPTH);
/// 要設定 GLUT 的顯示模式 ...
glutCreateWindow("week02"); ///要建一個窗字,叫 "..."
glutDisplayFunc(display); /// 要顯示的函式 display()
glutMainLoop(); ///最後要有 glutMainLoop(); 主要迴圈卡最後面
}
```
step02-1
step02-1_有了簡單的10行程式碼,還有glColor3f()之後, 我們要再學會Vertex頂點。glBegin(GL_POLYGON) 開始畫多邊形, glEnd()結束畫多邊形, 中間放很多個 glVertex2f(x,y) 來描出頂點座標。小心, 頂點座標不能共線。
大部分程式碼都和前面一樣, 剪貼就好!
```cpp
#include <GL/glut.h>
void display()
{
glColor3f(0,1,0); ///綠色的
glBegin(GL_POLYGON);
glVertex2f(0,1); ///上面
glVertex2f(-1,-1);///左下角
glVertex2f(+1,-1);///右下角
glEnd();
glColor3f(1,1,0);
glutSolidTeapot( 0.3 );
glutSwapBuffers();
}
int main(int argc, char * argv[] )
{
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_RGB|GLUT_DOUBLE|GLUT_DEPTH);
glutCreateWindow("week02");
glutDisplayFunc(display);
glutMainLoop();
}
```
step02-2
step02-2_三角形可設一個色彩,也能每個頂點都設定不同的色彩, 所以有人程式的寫法,會把三角色的色彩與頂點放在同一行, 方便閱讀。現在做出彩色的三角形了。
```cpp
#include <GL/glut.h>
void display()
{
///glColor3f(0,1,0); ///step02-1 綠色的
glBegin(GL_POLYGON);
glColor3f(1,0,0); glVertex2f(0,1); ///上面 紅色
glColor3f(0,1,0); glVertex2f(-1,-1);///左下角 綠色
glColor3f(0,0,1); glVertex2f(+1,-1);///右下角 籃色
glEnd();
glColor3f(1,1,0);
glutSolidTeapot( 0.3 );
glutSwapBuffers();
}
int main(int argc, char * argv[] )
{
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_RGB|GLUT_DOUBLE|GLUT_DEPTH);
glutCreateWindow("week02");
glutDisplayFunc(display);
glutMainLoop();
}
```
step02-3
step02-3_回家作業需要用很多頂點來畫圖,但頂點座標怎麼來呢,可以用小畫家幫我們算座標。假設小畫家裡是200x200的圖,那把它減掉一半100,0..200的座標,會變成-100...+100的座標。再除一半100.0, 就會變成 -1.0到+1.0 這樣就可以有座標了。另外要小心,y的方向,在數學是y向上、在小畫家是y向下,所以要再加個負號。
```cpp
#include <GL/glut.h>
void display()
{ ///用小畫家幫我們寫程式
glBegin(GL_POLYGON);
glVertex2f( (65-100)/100.0, -(54-100)/100.0 );
glVertex2f( (34-100)/100.0, -(138-100)/100.0 );
glVertex2f( (59-100)/100.0, -(138-100)/100.0 );
glVertex2f( (87-100)/100.0, -(53-100)/100.0 );
///先減一半,再除一半,y變負號
///0...200 => -100...+100 => -1.0 +1.0
glEnd();
glutSwapBuffers();
}
int main(int argc, char * argv[] )
{
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_RGB|GLUT_DOUBLE|GLUT_DEPTH);
glutCreateWindow("week02");
glutDisplayFunc(display);
glutMainLoop();
}
```
step03-1
step03-2
沒有留言:
張貼留言