2024年2月29日 星期四

啵咕咕的筆記 Week02

  week02

將課堂檔案下載解壓縮,將data資料夾放入windows資料夾 

開啟shapes.exe ,能用mouse切換程式的參數

左邊mouse右鍵,切頂點大小








右邊mouse右鍵,切換點、線、面








右邊mouse左鍵,按住綠色數字,上下拖曳數字大小








試試GL_TRIANGLES 

左邊切換多一點顏色,TRIANGLES









今天的first,把freeglut放到桌面 把其中的libfreeglut.a複製改成libglut32.a

file-new-project,glut專案,week02_glut_color_teapot

glut要設定桌面的freeglut

上週十行程式拿來用

#include <GL/glut.h> 

void display()

{

    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("2024電腦圖學第02週"); 

    glutDisplayFunc(display); 


    glutMainLoop(); 

}

改顏色可用小畫家滴管吸顏色,編輯色彩看數字,程式裡是0.0~1.0之間,所以除255.0

ex: glColor3f(192/255.0, 233/255.0, 160/255.0);

之後畫雙茶壺,一大一小,不同色彩









之後挑戰畫三角形

file-new-project,glut專案,week02_glut_color_triangle

把剛剛week02_glut_color_teapot貼上修改




用小畫家找頂點座標

file-new-project,glut專案,week02_glut_glvertex2f_mspaint

開小畫家,放圖進來,建議400*400,中心點在(200,200)

口訣,減一半、除一半


用三角函數迴圈畫圓









做小改變

在cos,sin位子*改變大小,+-移動位置









用三個圓做出米老鼠圖形








BK Week02


1. 先試著把 "Shapes" 打開

    a. 下載 "data.zip" , "windows,zip" 並且解壓縮

    b. 把  "data.zip"  解壓縮後的 "data" 資料夾丟入 "windows,zip" 解壓縮後的資料夾 "windows"

    c. 開啟 "Shapes.exe"

 2. 右邊黑框滑鼠右鍵可調 "點、線、面、顏色" 左鍵壓著可拉數值調整



##今天第一個程式:week02_glut_color_teapot
0. 注意!先把 "freeglut" 裝在桌面,再把 "freeglut\lib\libfreeglut.a" 複製成 libglut32.a
1. File-New-Project, GLUT專案, "week02_glut_color_teapot",小心 "點點點" 的目錄要選 "桌面"
2. 下一步, GLUT 要設定 "桌面" 的freeglut
3. 貼上上茶壺的程式碼
4. 加上1行 "glColor3f(1,1,0);"


##利用小畫家滴管選擇我需要的顏色
1. 輸入 "glColor3f(R數值/255.0,G數值/255.0,B數值/255.0)"
    a. "/255.0" 是因為 Color 浮點數在0~3之間


##做彩色三角形


##用小畫家,找到頂點座標
1. File-New-Project, Glut專案 "week02_glut_glvertex2f_mspaint"
2. 開一個小畫家,把一張圖放進來 (建議400*400)
    a. mouse所在的點畫面左下角會有座標
3. 口訣: 減一半、除一半、Y加負號


##畫圓
1. cos=x, sin=y
2. cos,sin 前面乘一個數決定圓形的大小
2. cos,sin 後面加一個數決定圓形的位子


##HW2-Netflix








從0到0.01的電腦圖學 Week02

 教材地點:
https://jsyeh.org/3dcg10/

1. 下載資料:
    a. 05/04 Examples:[data]
    b. 05/04
 Examples:[win32]

2. 範例程式碼:

    windows→Shapes

3. GLUT程式1 :改變茶壺顏色

    #include <GL/glut.h>   //使用GLUT函式庫
    void display(){
        glColor3f(0.71,1,1);  //改變顏色
        glutSolidTeapot(0.5);
        glutSwapBuffers();
    }
    int main(int argc, char *argv[]){ //main()函式
        glutInit(&argc, argv); //開啟GLUT功能
        glutInitDisplayMode(GLUT_RGB | GLUT_DOUBLE | GLUT_DEPTH);
        glutCreateWindow("電腦圖學第01周"); //開一個GLUT視窗
        glutDisplayFunc(display); //display()函式畫圖
        glutMainLoop(); //主要的迴圈 不結束程式
    }
因為glColor3f(r,g,b)的三個參數僅可以放0~1間的浮點數,所以我們可以使用 /255.0 做整數轉浮點數的操作
glColor3f(255 /255.0, 255 /255.0 , 180 /255.0);
4. GLUT程式2 :繪製彩色三角形
黃色畫線處為繪製多邊形的方法

#include <GL/glut.h>   //使用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[]){ //main()函式
    glutInit(&argc, argv); //開啟GLUT功能
    glutInitDisplayMode(GLUT_RGB | GLUT_DOUBLE | GLUT_DEPTH);
    glutCreateWindow("電腦圖學第01周"); //開一個GLUT視窗
    glutDisplayFunc(display); //display()函式畫圖
    glutMainLoop(); //主要的迴圈 不結束程式
}

5. GLUT程式3 :使用小畫家工具輔助作圖
座標點可以使用小畫家找出來,先知道圖片大小,然後使用公式將頂點繪製出來,後繪製圖塊出來
口訣:座標點減一半除一半
glVertex2f((座標點x-圖片x軸像素值大小/2)/
圖片x軸像素值大小/2,
-(座標點y-圖片y軸像素值大小/2)/圖片y軸像素值大小/2);

6. GLUT程式4 :繪製圓形

使用三角函數繞著圓心做圖(使用座標點( cos() ,sin() ))可獲得圓形

#include <GL/glut.h>   //使用GLUT函式庫
#include <math.h>
void display(){
    glBegin(GL_POLYGON); //開始畫
        for(float a=0; a<=3.1415926*2; a+=0.01)
        glVertex2f( cos(a),sin(a) );
    glEnd(); //結束畫
    glutSwapBuffers();
}
int main(int argc, char *argv[]){ //main()函式
    glutInit(&argc, argv); //開啟GLUT功能
    glutInitDisplayMode(GLUT_RGB | GLUT_DOUBLE | GLUT_DEPTH);
    glutCreateWindow("電腦圖學第01周"); //開一個GLUT視窗
    glutDisplayFunc(display); //display()函式畫圖
    glutMainLoop(); //主要的迴圈 不結束程式
}




Do You feel alone
Can you hear me now?
Your mind is far away,still on the earth
Many times you are hurting your self
You can't be just a life on the shelf

And I say why we can't stop all this sacrifice?
I know that all the lies became the stone in your heart
I wonder how long you gonna survive
We didn't see all it's meaning
----Into the Sky ,澤野 弘之

點麵線,加色素(2024色彩圖學)

 


電腦圖學 2024-02-29 Week02
1. 主題: 點、線、面、色彩
2. 課本範例
3. glColor3f(r,g,b);
4. glVertex3f(x,y,z);
5. glBegin(); ... glEnd();
6. 親手打造圖學程式
7. 回家完成HW2



            範例:
            https://jsyeh.org/3dcg10/
            中的[data][win32],把[data]放進[win32]中執行[Shapes.exe]




二重茶壺


七彩三角形

    
園與米奇



valorant點線面色彩week02

 1.輸入網址,下載data.zip、windows.zip


 2.兩個檔案解壓縮,打開Shapes.exe
3.左邊按右鍵可以改變頂點大小(Toggle big vertices)跟顏色(Specify colors@vertices)
  3-1.右邊按右鍵則是可以改變想要的形狀

  3-2.選取圖形TRIANGLE,並改它的顏色及形狀(上兩個有數值的是改變的是紫色的點位置及顏色, 中兩個有數值的是改變的是黃色的點位置及顏色,下兩個有數值的是改變的是藍色的點位置及顏色)
4.打開codeblocks,並打開GLUT檔,並記得去moodle下載GLUT檔,重複操作上禮拜的步驟。並貼上上禮拜10行茶壺程式,並改變顏色(在桌面解壓縮,並進入lib,複製檔名最小的並貼上;然後重新命名為libglut32.a)




 5.打開一個新的GLUT,設計成三原色三角形(改變顏色及座標)[glColor3f(顏色)、glVertex2f(座標)]

6.打開一個新的GLUT,並打開小畫家,並設定400*400,中心點200*200,並貼上一個圖片
口訣:減一半,除一半
利用程式家小畫家輔助設計一個圖片程式(小畫家吸管可以知道所想要的顏色的三個數值,但由於3f,所以值會在0-1之間,所以數值記得除以255.0)



7.打開一個新的GLUT,利用迴圈並宣告圓的x座標,y座標跟半徑來畫圓



8.將今天的檔案上傳到github











點、線、面、色彩Week02

 1.下載data,win32

2.解壓縮window.zip,data.zip,把data檔丟到window
3.點擊Shapes.exe
4.左邊畫面mouse右鍵,可切換【大頂點】、變顏色、右邊畫面mouse右鍵,可切換【點、線、面】、右邊畫面mouse左鍵,按住綠色數字,可上下拖動數字大小
5.點GL_TRIANGLES三個點對應
6.把freeglut裝在桌面,把freeglut\lib\libfreeglut.a複製改成libglut32.a
7.開codeblock,File-New-Project開GLUT專案,GLUT要設定桌面的freeglut
8.刪了改成上周10行,再加一行
9.可以在小畫家吸顏色然後/255.0,改變你想要的顏色
10.畫兩個茶壺一大一小不同顏色
11.做彩色三角形,把茶壺的刪了改成

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();

POLYGON多邊形、Color顏色、Vertex頂點


12.用小畫家找頂點座標,File-New-Project開GLUT專案week02_glut_glVertex2f_mspaint

開小畫家放一張圖,視窗建議400x400,中心點再200,200

口訣減一半、除一半

13.畫圓用迴圈數學計算要用#include <math.h>,cos()就是x、sin()就是y
14.glVertex2f(0.2*(大小)cos(a)+0.5(cx),0.2*(大小)sin(a)+0.5(cy));

15.簡化