2024年2月29日 星期四

電腦圖學WEEK02

 

1. 下載課本範例
https://jsyeh.org/3dcg10/


2. windows.zip 解壓縮 => 下載\windows\
3. data.zip 解壓縮 => 下載\windows\data


4. 點擊 Shapes.exe 可以讓你試著用 mouse 來切換程式的參數


5. 左邊的mouse右鍵,可切換 "大頂點" ,多一點顏色
6. 右邊的mouse右鍵,可切換 "點,線,面"
7. 右邊的mouse左鍵,按住綠色數字,可上下拖曳數字大小


來試試看GL_TRIANGLES

1. 左邊設成 "多一點顏色" toogle colors at vertices
2. 左邊切換成 TRIANGLES
3. 每個頂點,都可以有自己的色彩

今天的第一個程式

1.先把freeglut裝在桌面


2. 點開freeglut檔案之後 點選lib 複製最短的檔案 並取名libglut32.a


3. 開啟codeblock跟OpenGL開new project開啟GLUT


4. 就會出現上禮拜的紅色圖形


5. 將全部程式碼刪除,並複製上禮拜茶壺程式碼


6. 並新增第5行程式碼就能讓茶壺變色了!!


可以用小畫家 , 來挑選我們的顏色

1.開啟小畫家 , 把你的圖貼上去 , 利用滴管來吸色 , 再用編輯色彩來看他的數字


2.程式裡 glColor3f ( r , g , b ) 是 0.0 ~ 1.0中間 , 所ˋ以我們就把吸道的顏色 / 255.0 就可以了

3. ex.    glColor3f(128/255.0,128/255.0,255/255.0);

4. 我們畫兩個茶壺一個大一個小

#include <GL/glut.h> ///第18行留下來,使用GLUT外掛

void display()
{
    glColor3f(128/255.0,128/255.0,255/255.0);///2/29今天加這行
    glutSolidTeapot( 0.3 );

    glColor3f(0/255.0,255/255.0,255/255.0);
    glutSolidTeapot( 0.2 );

    glutSwapBuffers();
}

int main(int argc, char *argv[])///第138行,main()函式
{
    glutInit(&argc, argv);///第140行,開啟GLUT功能
    glutInitDisplayMode(GLUT_RGB | GLUT_DOUBLE | GLUT_DEPTH);///第143行
    glutCreateWindow("2024電腦圖學第01週");///第145行,開一個GLUT視窗
    glutDisplayFunc(display);///148行, 要用display()函式來畫圖

       glutMainLoop();///174行,主要的迴圈,在這裡一直運作,不結束
}


畫一個彩色的三角形

1. 開啟一個新專案 week02_glut_color_triangle

2.貼上剛剛的 week02_glut_color_teapot程式碼

3.修改圖片上的 glutSwapBuffers();前的程式碼

///week02_glut_color_triangle
#include <GL/glut.h> ///第18行留下來,使用GLUT外掛

void display()
{
    glBegin(GL_POLYGON); ///開始畫(多邊型)
        glColor3f(1,0,0); glVertex2f(0, 1);
        glColor3f(0,1,0); glVertex2f(+1,-0.6);
        glColor3f(0,0,1); glVertex2f(-1,-0.6);

    glEnd(); ///結束畫
    glutSwapBuffers();
}

int main(int argc, char *argv[])///第138行,main()函式
{
    glutInit(&argc, argv);///第140行,開啟GLUT功能
    glutInitDisplayMode(GLUT_RGB | GLUT_DOUBLE | GLUT_DEPTH);///第143行
    glutCreateWindow("2024電腦圖學第01週");///第145行,開一個GLUT視窗
    glutDisplayFunc(display);///148行, 要用display()函式來畫圖

       glutMainLoop();///174行,主要的迴圈,在這裡一直運作,不結束
}



用小畫家幫我們找到頂點座標

1. File_New_Project , GLUT專案 week02_glut_glVertex2f_mspaint

2. 開一個小畫家 ,  把一張圖放進來 , 建議大小 400x400 中心點 200x200

3. 一樣修改glutSwapBuffers();前的程式碼

///week02_glut_glVertex2f_maspaint
#include <GL/glut.h> ///第18行留下來,使用GLUT外掛

void display()
{
    glBegin(GL_POLYGON); ///開始畫
        glVertex2f((34-200)/200.0 , -(76-200)/200.0);
        glVertex2f((48-200)/200.0 , -(131-200)/200.0);
        glVertex2f((85-200)/200.0 , -(59-200)/200.0);
    glEnd(); ///結束畫

    glBegin(GL_POLYGON); ///開始畫
        glVertex2f((383-200)/200.0 , -(79-200)/200.0);
        glVertex2f((348-200)/200.0 , -(146-200)/200.0);
        glVertex2f((312-200)/200.0 , -(55-200)/200.0);
    glEnd(); ///結束畫

    glutSwapBuffers();
}

int main(int argc, char *argv[])///第138行,main()函式
{
    glutInit(&argc, argv);///第140行,開啟GLUT功能
    glutInitDisplayMode(GLUT_RGB | GLUT_DOUBLE | GLUT_DEPTH);///第143行
    glutCreateWindow("2024電腦圖學第01週");///第145行,開一個GLUT視窗
    glutDisplayFunc(display);///148行, 要用display()函式來畫圖

       glutMainLoop();///174行,主要的迴圈,在這裡一直運作,不結束
}


4.口訣 : 減一半 , 除一半 , Y 加負號

5.就可以做出老師安妮雅的兩個角


如何畫一個圓


1.開啟一個新專案 week02_glut_cos_sin_circle

2.修改程式碼

///week02_glut_cos_sin_circle
#include <GL/glut.h> ///第18行留下來,使用GLUT外掛
#include <math.h>

void display()
{
    glBegin(GL_POLYGON); ///開始畫
    for(float a=0; a<=3.1415*2; a+=0.1)
    {
        glVertex2f( cos(a), sin(a) );
    }
    glEnd(); ///結束畫

    glutSwapBuffers();
}

int main(int argc, char *argv[])///第138行,main()函式
{
    glutInit(&argc, argv);///第140行,開啟GLUT功能
    glutInitDisplayMode(GLUT_RGB | GLUT_DOUBLE | GLUT_DEPTH);///第143行
    glutCreateWindow("2024電腦圖學第01週");///第145行,開一個GLUT視窗
    glutDisplayFunc(display);///148行, 要用display()函式來畫圖

       glutMainLoop();///174行,主要的迴圈,在這裡一直運作,不結束
}

修改圓形跟移動圓形

1.紅色為修改圓形半徑

2.橘色為圓形x軸方向移動

3.綠色為圓形y軸方向移動

///week02_glut_cos_sin_circle
#include <GL/glut.h> ///第18行留下來,使用GLUT外掛
#include <math.h>

void display()
{
    glBegin(GL_POLYGON); ///開始畫
    for(float a=0; a<=3.1415*2; a+=0.1)
    {
        glVertex2f( 0.2*cos(a)+0.5, 0.2*sin(a)+0.5 );
    }
    glEnd(); ///結束畫

    glutSwapBuffers();
}

int main(int argc, char *argv[])///第138行,main()函式
{
    glutInit(&argc, argv);///第140行,開啟GLUT功能
    glutInitDisplayMode(GLUT_RGB | GLUT_DOUBLE | GLUT_DEPTH);///第143行
    glutCreateWindow("2024電腦圖學第01週");///第145行,開一個GLUT視窗
    glutDisplayFunc(display);///148行, 要用display()函式來畫圖

       glutMainLoop();///174行,主要的迴圈,在這裡一直運作,不結束
}

畫一隻米奇



///week02_glut_cos_sin_circle
#include <GL/glut.h> ///第18行留下來,使用GLUT外掛
#include <math.h>
void myCircle(float x,float y,float r)
{
    glBegin(GL_POLYGON);
    for(float a=0; a<=3.1415*2; a+=0.1)
    {
        glVertex2f(r*cos(a)+x,r*sin(a)+y);
    }
    glEnd();
}
void display()
{
    myCircle(0.5,0.5,0.3);
    myCircle(-0.5,0.5,0.3);
    myCircle(0,-0.1,0.6);
    glutSwapBuffers();
}

int main(int argc, char *argv[])///第138行,main()函式
{
    glutInit(&argc, argv);///第140行,開啟GLUT功能
    glutInitDisplayMode(GLUT_RGB | GLUT_DOUBLE | GLUT_DEPTH);///第143行
    glutCreateWindow("2024電腦圖學第01週");///第145行,開一個GLUT視窗
    glutDisplayFunc(display);///148行, 要用display()函式來畫圖

       glutMainLoop();///174行,主要的迴圈,在這裡一直運作,不結束
}















於
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)
  • 超級有用的電腦圖學筆記 Week01
     1.今天加入一個Blogger  2.創立一個自己的品牌  3.每周一篇,標籤(學號姓名,WeekXX)  4.第二節學到如何放圖片  5.老師教我們許多截圖法  6.實際在WebGL Water操作3D的球 (https://madebyevan.com/webgl-wate...
  • 吟霖根本我婆
    week16-1_sample_gluLookAt 在resize()函式 加入gluLookAt() 2想再按按鍵時看不同位置 if(key=='?') week16-2_glut_glutReshapeFunc_gluPerspective_gluLookAt...
  • 魚鱗☆ﾟ.*･｡電腦圖學 Week16
      1. week16-0_sample (1)安裝freeglut (2)安裝opencv，重開CodeBlocks  --> 詳細去看 魚鱗電腦圖學Week05-1 (3) 打開新專案，命名為： week1 6-0_sample 2. 下載課本範例☆ﾟ.*･｡ (1)進...