電腦圖學筆記week17

總複習

 Step01

• 開啟CodeBlocks
  
• 建立新GLUT專案  week17_demo
• 將week17_demo.cbp檔打開然後將workingdir " "內改成"."

• 回去執行程式後發現城市跑不動

         

• 所以要去freeglut資料夾->bin->freeglut.dll將他複製到week17_demo的資料夾裡面
  
  
• 可以執行了
• 將10行程式碼導入

• 加入打光函式，打完再將mylight()導入main函式

const GLfloat light_ambient[]  = { 0.0f, 0.0f, 0.0f, 1.0f };

const GLfloat light_diffuse[]  = { 1.0f, 1.0f, 1.0f, 1.0f };

const GLfloat light_specular[] = { 1.0f, 1.0f, 1.0f, 1.0f };

const GLfloat light_position[] = { 2.0f, 5.0f, 5.0f, 0.0f };

const GLfloat mat_ambient[]    = { 0.7f, 0.7f, 0.7f, 1.0f };

const GLfloat mat_diffuse[]    = { 0.8f, 0.8f, 0.8f, 1.0f };

const GLfloat mat_specular[]   = { 1.0f, 1.0f, 1.0f, 1.0f };

const GLfloat high_shininess[] = { 100.0f };

void mylight(){

    glEnable(GL_DEPTH_TEST);

    glDepthFunc(GL_LESS);

    glEnable(GL_LIGHT0);

    glEnable(GL_NORMALIZE);

    glEnable(GL_COLOR_MATERIAL);

    glEnable(GL_LIGHTING);

    glLightfv(GL_LIGHT0, GL_AMBIENT,  light_ambient);

    glLightfv(GL_LIGHT0, GL_DIFFUSE,  light_diffuse);

    glLightfv(GL_LIGHT0, GL_SPECULAR, light_specular);

    glLightfv(GL_LIGHT0, GL_POSITION, light_position);

    glMaterialfv(GL_FRONT, GL_AMBIENT,   mat_ambient);

    glMaterialfv(GL_FRONT, GL_DIFFUSE,   mat_diffuse);

    glMaterialfv(GL_FRONT, GL_SPECULAR,  mat_specular);

    glMaterialfv(GL_FRONT, GL_SHININESS, high_shininess);

}

• 把glm.h、glm.c加入week17_demo，把glm.c改成glm.cpp
• add files將glm.cpp導入CodeBlocks中

• 加入攝影機，並在main函式加入glutReshapeFunc(reshape);

void reshape(int w,int h){

    float ar = (float)w/(float)h;

    glViewport(0,0,w,h);

    glMatrixMode(GL_PROJECTION);

    glLoadIdentity();

    gluPerspective(60,ar,0.1,100.0);

    glMatrixMode(GL_MODELVIEW);

    glLoadIdentity();

    gluLookAt(0,0,-5, 0,0,0, 0,1,0);

}

• 加入複數貼圖，先宣告兩個整數 GLuinit tex1,tex2;
• 在main函式中 加入 tex1= myTexture("data/.......");
• tex2 = myTexture("data/......");
• 在 display()內加入 glBindTexture(GL_TEXTURE_2D, tex1);
• glBindTexture(GL_TEXTURE_2D , tex2);

電腦圖學筆記week16

Step01-1

• alpha內插公式 : alpha: `0.0~1.0`

    angle = alpha*新 + (1-alpha)*舊

    ex: alpha=0 -> 舊，alpha=1 -> 新，alpha=0.5 -> 半新半舊

• 使用Excel或Google Spreadsheet練習內插

    

Step01-2

• 建立一個新GLUT專案 week16_interpolation(內插) ，貼上week15_angles_TRT的程式碼
• 記錄四個動作存檔(s)並執行(r)，會感覺不連續

 

• 修改程式碼
• 在按'p'時，t=alpha值，當t<30(可以自己設定大小，讓內插角度變更細更多)時執行myInterpolate，讓角度從舊的慢慢變成新的，t>=30時執行myread函式，讓新角度帶進舊角度裡面，並輸出新角度。

Step02-1

    利用計時器將動作印出來

• 讓程式可以自動播放
• 利用glutTimerFunc的函數跟timer函式   

    glutTimerFunc( 等多久(毫秒)  ,  timer  ,  t參數  );

Step02-2

    攝影機

    gluLookAt(    (x,y,z),                (x,y,z),                (x,y,z));

                       攝影機位置        攝影機看哪

Step03-1

• 建立新GLUT專案 week16_camera_projection_glitLookAt
• 備份專案內本來的轉圈圈的程式碼到記事本
• aspect ratio 長寬比 ex. 1920x1080, 1280x720, 640x480, 16:9, 4:3

• 程式碼:

void reshape(int w,int h){

    float ar = (float) w / (float) h;

    glViewport(0,0,w,h);

    glMatrixMode(GL_PROJECTION);///3D->2D

    glLoadIdentity();

    gluPerspective(60,ar,0.1,100);

    glMatrixMode(GL_MODELVIEW);///3D Model+View

    glLoadIdentity();

    gluLookAt(0,0,3,  ///eye

              0,0,0, ///看哪裡

              0,1,0);///up向量

}

• 這樣視窗也能等比例拉大拉小

電腦圖學筆記week15

 Step01-1

• 開CodeBlocks->建立新的Empty File week15-1_PlaySound.cpp 

#include <windows.h>

#include <stdio.h>

int main()

{

    printf("PlaySound()之前\n");

    PlaySound("badbad.wav", NULL, SND_SYNC);

    printf("PlaySound()之後\n");

}

• 但執行不了，因為還沒有在settings->compiler加入winmm

• 執行真的聲音，去BBC網站下載免費聲音，在把檔案解壓縮後放到跟week15-1_PlaySound.cpp 一樣位置的資料夾內，再執行即可

• 另存新檔 week15-2_SND_SYNC_SNDASYNC.cpp
•  SND_SYNC -> 等待同步， SND_ASYNC -> 不等待同步 (直接執行下一行)

Step02-1

• SND_ASYNC 不等待會比較快執行到下一行，互動性會比較好

#include <windows.h>

#include <stdio.h>

int main()

{

    PlaySound("07071034.wav", NULL, SND_ASYNC);

    while(1){

        printf("請輸入數字:");

        int N;

        scanf("%d",&N);

        if(N==1) PlaySound("do.wav", NULL, SND_ASYNC);

        if(N==2) PlaySound("re.wav", NULL, SND_ASYNC);

        if(N==3) PlaySound("mi.wav", NULL, SND_ASYNC);

    }

}

只能播wav檔不能播mp3檔，因為mp3檔被壓縮過，wav檔沒被壓縮過，所以執行程式碼時，如果把壓縮過的mp3檔讓音效卡讀取時就會無法讀取，所以只能用原始大小的wav檔

Step02-2

    讓程式可以讀取mp3

• 去moodle下載CMP3_MCI.h，並放到week15資料夾內
• 建立新的Empty File week15-3_mp3.cpp
• 再程式碼內新增 #include "CMP3_MCI.h"

#include <stdio.h>
#include "CMP3_MCI.h"
CMP3_MCI mp3;
int main ()
{
    mp3.Load("07071034.wav");
    mp3.Play();
    printf("輸入數字程式卡住");
    int N;
   scanf("%d",&N);

}

Step02-3

• 建立新GLUT專案 week15-1_angles_TRT_again
• Copy上周的程式碼並貼上
• myWrite()會寫一行，myRead()會讀一行
• 為了只讀取到動作完成的位置，所以要把motion()裡面的myWrite()去掉
• 因為在motion()裡面myWrite()會將所有過程都記錄下來
• 然後要在keyboard()裡面新增動作s，當按下s後會儲存當前手臂的位置

Step03-1

    讓機器人擺動作

• 需要3D Model (glm.h,glm.cpp .obj....)
• 需要切割模型分別讀入
• 使用TRT程式轉動分割後的模型
• keboard() 切換關節， mouse motion()用滑鼠轉動關節
• 建立一個新GLUT專案 week15_hw_gundam_parts
• 用Notepad++將工作目錄的路徑改成 "."

• 將glut資料夾內的freeglut.dill檔按複製到week15_hw_gundam_parts內

• 把glm.h跟glm.c複製到week15_hw_gundam_parts內

Week15作業: 

• 先去網路找模型再用maya切割成各個身體部位
• 選取要切割的部位 -> shift+右鍵 ->  multi-cut

• 再將模型匯出到week15_hw_gundam_parts的data內

• 程式碼環節:
• 宣告模型空指標NULL

• 讓每個部位的關節，透過鍵盤切換關節的轉動

• 在void display()裡面將關節讀入

• 調整程式碼，讓關節合起來

電腦圖學筆記week14

 Step01-1

• 在codeblocks建立一個新的Empty file，再建立一個week14-1_fprintf裡面放week14-1.cpp

• 讀入(fopen開啟檔案、fprintf寫檔、fclose關檔)

#include <stdio.h>

int main()

{

    FILE * fout = fopen("file.txt", "w+");

        printf("Hello World\n"); ///小黑印出來

        fprintf(fout,"Hello World\n"); ///檔案印出來

        fclose(fout);

}

• 讀入+印出(跟上一步一樣，先建立一個week14-1_fprintf_fscanf裡面放week14-2.cpp)

#include <stdio.h>

int main()

{

    FILE * fout = fopen("file.txt", "w+");

    fprintf(fout,"3.1515926");

    fclose(fout);

    float angle=0;

    FILE * fin = fopen("file.txt", "r");

    fscanf(fin,"%f", &angle);

    printf("讀到了角度%f",angle);

    fclose(fin);

}

Step01-2

    將week13_rect_many_TRT拿來修改

• 新增一個新的glut專案 week14_angle_fprintf

FILE * fout = NULL;

void myWrite(){

    if(fout == NULL) fout = fopen("file.txt", "w+");

    for(int i=0 ; i<20 ; i++){

        printf("%.1f", angle[i]);

        fprintf(fout, "%.1f",angle[i]);

    }

}

• 並在 void motion裡面新增myWrite();  讓myWrite可以運作

• 因為上面的圖不好看，所以新增兩行程式碼來讓它變好看

Step02-1

    開始做動畫!

• 建立一個新glut專案  week14_angles_fprintf_fscanf
• 新增下面的程式碼讓手臂轉起來然後按住'r'可以讓手臂照著之前的軌跡自動旋轉

void myWrite(){

    if(fout == NULL) fout = fopen("file.txt", "w+");

    for(int i=0 ; i<20 ; i++){

        printf(" %.1f ", angle[i]);    /////"%.1f前後要空格不然數字會擠再一起"

        fprintf(fout, " %.1f ",angle[i]);    /////"%.1f前後要空格不然數字會擠再一起"

    }

    printf("\n");   ////跳行，讓數字不要擠在一起

    fprintf(fout,"\n");  ////跳行，讓數字不要擠在一起

}

void myread(){

    if(fout != NULL){   fclose(fout); fout=NULL;  }

    if(fin == NULL) fin = fopen("file.txt", "r");

    for(int i=0 ; i<20 ; i++){

        fscanf(fin, "%f",&angle[i]);

    }

    glutPostRedisplay();

}

• 在keyboard這個函式內新增 if(key=='r') myread(); 這樣按'r'手臂才會自動旋轉

Step02-2

    了解為甚麼有時候檔案file.txt會放在奇怪的地方

    ans: 因為glut專案需要freeglut.dll所以會被放到freeglut\bin裡面

    解決辦法: 

    1.將專案中的.cbp檔案打開然後把紅色框框""中的路徑改成"."

    2.執行這個專案，但發現freeglut.dll出問題了

    3.把freeglut\bin裡面的freeglut.dll這個檔案複製到現在執行的專案的資料夾內

    4.成功!

Step03-1

    glutTimerFunc() 計時器

• 開新GLUT專案 week14_timer
• void timer (int t) 寫timer
• glutTimerFunc( 等多久  ,  timer  ,  t參數  );

#include <stdio.h>

#include <GL/glut.h>

void timer (int t){

    printf("起床，現在時間: %d\n",t);

}

void display(){

}

int main (int argc, char** argv){

    glutInit(&argc, argv);

    glutInitDisplayMode(GLUT_DOUBLE | GLUT_DEPTH);

    glutCreateWindow("week14 timer");

    glutTimerFunc(2000, timer, 1);

    glutTimerFunc(3000, timer, 2);

    glutTimerFunc(4000, timer, 3);

    glutTimerFunc(5000, timer, 4);

    glutTimerFunc(6000, timer, 5);

    glutDisplayFunc(display);

    glutMainLoop();

}

Step03-2

    期末作品30秒，每秒30格,900個timer，太多了，所以程式應       該自動化，利用函式呼叫函式

• 建立新GLUT專案week14_timer_one_by_one
• 設定過五秒後第0個t

#include <stdio.h>

#include <GL/glut.h>

void timer (int t){

    printf("起床，現在時間: %d\n",t);

    glutTimerFunc(1000,timer, t+1);

}

void display(){

}

int main (int argc, char** argv){

    glutInit(&argc, argv);

    glutInitDisplayMode(GLUT_DOUBLE | GLUT_DEPTH);

    glutCreateWindow("week14 timer");     ////glutTimerFunc( 等多久  ,  timer  ,  t參數  );

    glutTimerFunc(5000, timer, 0);

    glutDisplayFunc(display);

    glutMainLoop();

}

Step03-3

    播放聲音

• 到Teams的電腦圖學第14周下載do.wav
• 修改week14_timer_one_by_one的程式碼
• PlaySound("do.wav", NULL , SND_ASYNC);

    

電腦圖學筆記week13

 glRectf

Step01-1

1. 在codeblocks建立一個新專案week13_rect
2. 把10行程式碼貼上去，並加上glRectf的函式

電腦圖學筆記week12

 Step01-1

1. 到jsyeh.org/3dcg10下載win、data，解壓縮後將data放入win裡面
2. 打開Transformation

glTranslatef(0.9,0,0) -> glRotatef(角度,0,1,0)

=>大小正常的車子轉動並往右邊移動(由內而外)(邊自轉邊向右邊移動)

glRotate(角度,0,1,0) -> glTranslatef(0.9,0,0)

=> 大小正常的車子移動到右方去旋轉(由內而外)(公轉)

Step01-2

1. 到圖學OpenGL教學資源
2. 案右下角ToDraw可以畫圖
3. 點拉程式碼可以調整程式碼的位置
4. myDrawObject(0) 可以畫一個圖案、myDrawObject(1) 可以畫第二個圖案
5. 先按angle=在案空白鍵 可以建立動畫

因為要讓圖形"轉動"，所以要將glRotatef()放在圖形的程式碼的上方去執行

Step02-1

1. 讓手臂能揮手而不是轉圈(改變中心點)
2. 把glTranslatef()，點一下變紅色，就可以移動左邊的東西
3. 移動旋轉移動(TRT)

    glPushMatrix();

        glTranslatef();//改變物體的位置

        glRotatef();//旋轉

        glTranslatef();//改變物體中心點的位置

        myDrawObject();//物體

Step02-2

1. 開始寫程式 打開CodeBlocks
2. 建立一個GLUT專案 week12_TRT
3. 放入10行程式碼(之前的筆記) -> 再把T-R-T(今天的筆記) 行放上去
4. 讓它自動旋轉 float angle=0;

Step03-1

1. 做出一個茶壺人

glColor3f(1,1,1); ///白色

    glutSolidTeapot(0.3);///茶壺身體

    glPushMatrix();

        glTranslatef(0.2,0,0);///3.將茶壺手臂往右邊移動

        glRotatef(angle,0,0,1); ///2.旋轉

        glTranslatef(0.2,0,0);/// 1.把茶壺手臂旋轉中心放到世界中心

        glColor3f(1,0,0);///紅色

        glutSolidTeapot(0.2);///茶壺手臂

    glPopMatrix();

Step03-2

    Homework 把茶壺改成真正的手臂

1. 要有3D模型 
2. 新增GLUT專案 week12_TRT_TRT
3. 拷貝上面的程式碼
4. 在茶壺手臂程式碼下方在增加glPushMatrix();..........glPopMatrix();

#include "glm.h"

GLMmodel * pmodel =NULL;//身體

GLMmodel * arm =NULL;//上手臂

GLMmodel * hand =NULL;//下手肘

    glmDraw(pmodel,....)

    glmDraw(arm,....)

    glmDraw(hand,....)

1. 增加左手

Step03-3

    複習Git指令

1. 開啟Git Bash
2. cd desktop
3. start . 開啟現在的目錄
4. git clone https://github.com/QASSBB/2022graphics1
5. cd 2022graphics1 進入倉庫目錄
6. git pull 是把雲端拉下來硬碟
7. start . 開啟現在的目錄，就可以複製程式
8. git status 看倉庫狀況
9. git add . 把複製的程式放到git帳冊
10. git status 看目前倉庫的狀況
11. git commit -m "week12" 確認git帳冊
12. git config -- global user.email "09160881@me.mcu.edu.tw"
13. git config --global user.name "qassbb"(12、13行第一次使用時才要做)
14. git push 推上雲端

Homework

使用前幾周教的程式碼，將程式碼分為頭、身體、手、腳四個部分。