Week 16 葉正聖老師示範

第16週 目標: 粒子系統(particles)、運鏡、換色, etc (看情況加上複習)
第17週 期末作品展示
1. gluLookAt( eyeX, eyeY, eyeZ,  objX, objY, objZ, upX, upY, upZ);
1.1. 裝 glut DevPak, 把你的期末作品開起來, 試著用 gluLookAt()來改改看攝影機的位子, 像是 45度俯視看你的臉

http://chchwy.blogspot.tw/2011/10/8-using-viewing-and-camera-transforms.html

Week 15 葉正聖老師示範

1. 提醒同學, 今天是第15週。我們在第17週要交期末作品! 這個月我們逐步往期末作品前進, 請每次都拿你的期末作品來加新功能。

Week15
Week16
Week17!!!!! Final Project Demo

2. 看一下學長姐們的期末作品








 =====
內插(interpolation)

動作A ------> 動作B
a=0 .................a=1

你的動作(angle[...])
angle[0] = angleOld[0]*(1-a) + angleNew[0]*a;   //內插公式
口訣: 交叉相乘

ex.
a=0, angle[0] 是 angleOld[0]
a=0.1, angleOld[0]*0.9 + angleNew[0]*0.1
a=0.5,  angleOld[0]*0.5 + angleNew[0]*0.5
a=0.9,
a=1, anlge[0] 是 angleNew[0]

第一節課重點: 有內插效果

第二節課重點: 複習兩週前的進度, 能用 mouse motion來改關節角度, 能存檔、讀檔, 並且和第一節課的成果結合

第三節課重點: 使用 timer 來讓讀檔/內插的動作, 可以自動播放

TODO: 請把你的期末作品要做什麼, 寫 出 來.....

Week 14 葉正聖老師示範

目標:
聲音: (4) 音效, (5) 音樂
動作: (1) 讀檔播放, (2) 自動播放 (使用timer計時器鬧鐘會定期響), (3) 內插變得較 smooth

1. 播放聲音 WAV音效 (未壓縮) (使用 PlaySound()函式)
2. 播放音樂 MP3檔 (使用 CMP3_MCI.h, 它是運用 mciSendString()的技巧, 但是我們只要會 Load及Play即可)


以下分別做介紹:
1. 播放聲音 WAV音效 (未壓縮) (使用 PlaySound()函式)
1.1. 重點是分成 前面 #include <Windows.h> 及 #include <mmsystem.h> 之後才能使用PlaySound()
1.2. PlaySound() 的用法是 PlaySound("檔名.wav", NULL, SND_ASYNC);
1.3. 比較一下 SND_ASYNC 及 SND_SYNC 的差別 (ASYNC是不等同步,直接各做各的) (SYNC是要等 PlaySound()整個播完, 才能接下去再做)

#include <stdio.h>
#include <windows.h>
#include <mmsystem.h>
int main()
{
  PlaySound("檔名.wav", NULL, SND_ASYNC);//這行以上才是重點

  printf("Please input a number:\n");
  int n; scanf("%d", &n);//這行只是要卡住的, 別隨便用啊!
}

2. 播放音樂 MP3檔 (使用 CMP3_MCI.h, 它是運用 mciSendString()的技巧, 但是我們只要會 Load及Play即可)

要讓你的機器人自動做動作哦!

Week13 葉正聖老師示範

0. 講課前, 先考大家幾個問題
0.1. Q: 請問我們課程最後要做出什麼? (大家要有方向!) A: 會跳舞的機器人
0.2. Q: 請問上週教什麼? A: T-R-T 可以對任意軸轉動
0.3. Q: 請問接下來要教什麼?

會跳舞的機器人 (上週教T-R-T)
Week13 調關節、寫檔案、讀檔案
Week14 聲音、特效、時間/內插、播動畫(timer計時器)
Week15 運鏡、節奏
Week16 (buffer...)
Week17 期末作品展示/票選最佳作品!!!!!

1. 目標: 會跳舞的機器人
2. 複習上週程式 (請做出來) (有幾個要小心的問題點, 請看上週的 Blog)
3. 加上 小右手、小左手 (如下圖) TODO: 請自己加上 右小腿、右腳掌、左小腿、左腳掌
4. TODO: 請使用鍵盤 1,2,3,4,5,6,7,8,9,0 來控制不同的關節轉動
5. TODO: 請用鍵盤來切換 angleID變數, 將今天的範例, 改用 陣列、變數、滑鼠, 來讓不同的關節轉動 (小心: 請記得把範例中所有的變數都變成陣列哦!)(小心: 請記得註冊 glutMouseFunc(mouse); 及 glutMotionFunc(motion); 哦!)

今天的技巧1: 可以利用 scale把後面的東西都變小
今天的技巧2: 可以利用 scale把後面的東西都變小
//T R S: Translate, Rotate, Scale, 要放在 glPushMatrix()/glPopMatrix() 裡面
今天的技巧3: 大的在外面、小的在裡面
glPushMatrix();//今天的技巧3: 大的在外面
glTranslatef(0.2,0,0);//右手
glRotatef(angleX, 0,0,1);
glTranslatef(0, -0.2, 0);
myHand();
glPushMatrix();//今天的技巧3: 小的在裡面
glTranslatef(0,-0.2,0);//小右手
glRotatef(angleX, 0,0,1);
glTranslatef(0, -0.2, 0);
myHand();
glPopMatrix();
glPopMatrix();

=====以下的程式碼馬上會刪掉=====
#include <GL/glut.h>
#include <opencv/highgui.h>
#include <opencv/cv.h>
#include <stdio.h>
//IplImage *img1, *img2, *img3, *img4;
//GLuint id1, id2, id3, id4;
IplImage * img[40];//技巧1: 可以把重覆的東西, 用陣列來簡化
GLuint id[40];//技巧1: 可以把重覆的東西, 用陣列來簡化
float angle1=0, angle2=0, angle3=0, angle4=0, angle5=0, angle6=0, angle7=0, angle8=0;
void myPrepareTexture(int i)//用參數來配, 找對應正確的變數
{//技巧3: 可以把重覆的東西, 用函式來簡化
cvCvtColor(img[i], img[i], CV_BGR2RGB);
glEnable(GL_TEXTURE_2D);
glGenTextures(1, &id[i]);
glBindTexture(GL_TEXTURE_2D, id[i]);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_LINEAR);
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, img[i]->width, img[i]->height, 0, GL_RGB, GL_UNSIGNED_BYTE, img[i]->imageData);
}
void myTexture()
{
img[0]=cvLoadImage("imgbody.png");
img[1]=cvLoadImage("imgHand1.png");
img[2]=cvLoadImage("imgLeg1.png");
for(int i=0;i<3;i++){//技巧2: 可以把重覆的東西, 用迴圈來簡化
myPrepareTexture(i);
}
}
void myPolygon(int num){//技巧3: 可以把重覆的東西, 用函式來簡化
glPushMatrix();
glScalef(0.3, 0.8, 0.8);
glBindTexture(GL_TEXTURE_2D, id[num]);
glBegin(GL_POLYGON);
glTexCoord2f(0, 0);   glVertex3f( -0.5,  0.5, 0);
glTexCoord2f(1, 0);   glVertex3f(  0.5,  0.5, 0);
glTexCoord2f(1, 1);   glVertex3f(  0.5, -0.5, 0);
glTexCoord2f(0, 1);   glVertex3f( -0.5, -0.5, 0);
glEnd();
glPopMatrix();
}
void myBody(){
myPolygon(0);
}
void myLeg(){
glPushMatrix();
glScalef(0.5, 0.5, 0.5);
myPolygon(1);
glPopMatrix();
}
void myHand(){
glPushMatrix();// 今天的技巧2: 可以利用 scale把後面的東西都變小
//T R S: Translate, Rotate, Scale, 要放在 glPushMatrix()/glPopMatrix()
glScalef(0.5, 0.5, 0.5);
myPolygon(2);
glPopMatrix();
}
void display()
{
glEnable(GL_DEPTH_TEST);
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
glPushMatrix();
glScalef(0.5, 0.5, 0.5);//今天的技巧1: 可以利用 scale把後面的東西都變小
myBody();
glPushMatrix();//今天的技巧3: 大的在外面
glTranslatef(0.2,0,0);//右手
glRotatef(angle1, 0,0,1);
glTranslatef(0, -0.2, 0);
myHand();
glPushMatrix();//今天的技巧3: 小的在裡面
glTranslatef(0,-0.2,0);//小右手
glRotatef(angle2, 0,0,1);
glTranslatef(0, -0.2, 0);
myHand();
glPopMatrix();
glPopMatrix();
glPushMatrix();
glTranslatef(-0.2,0,0);//左手
glRotatef(-angle3, 0,0,1);
glTranslatef(0, -0.2, 0);
myHand();
glPushMatrix();//今天的技巧3: 小的在裡面
glTranslatef(0,-0.2,0);//小右手
glRotatef(-angle4, 0,0,1);
glTranslatef(0, -0.2, 0);
myHand();
glPopMatrix();
glPopMatrix();
glPushMatrix();
glTranslatef(0.1,-0.3,0);//右腿
glRotatef(angle5, 0,0,1);
glTranslatef(0, -0.2, 0);
myLeg();
//請把小腿及腳掌做出來
glPushMatrix();
glTranslatef(0,-0.2,0);//右腿
glRotatef(angle6, 0,0,1);
glTranslatef(0, -0.2, 0);
myLeg();
glPopMatrix();
glPopMatrix();
glPushMatrix();
glTranslatef(-0.1,-0.3,0);//左腿
glRotatef(-angle7, 0,0,1);
glTranslatef(0, -0.2, 0);
myLeg();
//請把小腿及腳掌做出來
glPushMatrix();
glTranslatef(0,-0.2,0);//右腿
glRotatef(-angle8, 0,0,1);
glTranslatef(0, -0.2, 0);
myLeg();
glPopMatrix();
glPopMatrix();
glPopMatrix();
glutSwapBuffers();
}
void keyboard(unsigned char key, int x, int y)
{
if(key=='1') angle1+=3;
if(key=='2') angle1-=3;
if(key=='3') angle2+=3;
if(key=='4') angle2-=3;
if(key=='5') angle3+=3;
if(key=='6') angle3-=3;
if(key=='7') angle4+=3;
if(key=='8') angle4-=3;
glutPostRedisplay();

}
int main()
{
glutInitDisplayMode(GLUT_DOUBLE |GLUT_DEPTH);
glutCreateWindow("week12");
glutDisplayFunc(display);
glutKeyboardFunc(keyboard);
myTexture();//不要忘了加哦!
glutMainLoop();
}

5. TODO: 請用鍵盤來切換 angleID變數, 將今天的範例, 改用 陣列、變數、滑鼠, 來讓不同的關節轉動 (小心: 請記得把範例中所有的變數都變成陣列哦!)(小心: 請記得註冊 glutMouseFunc(mouse); 及 glutMotionFunc(motion); 哦!) (小心: 要用到的變數,在用到之 "前" 要宣告哦!)

6. 大家還記得存檔讀檔嗎?

Week 12 葉正聖示範

今天的目標: 做出會動的木頭人偶

1. 今天先用一個 T-R-T 對特定軸轉動的小考, 來讓同學複習這個關鍵技術
1.1. 洩題: 用 LINE 饅頭人, 來進行考試
1.2. 最後答案:
glPushMatrix();
  glTranslatef( -0.5, 0.5, 0 ); //Step 3
  glRotatef( -30,  0, 0, 1);// Step 2 (有陷阱哦!)
  glTranslatef( -0.4, 0, 0);// Step 1
  drawHand();
glPopMatrix();

2. 我們開始用木頭人的圖, 進行示範
2.1. 上網找出一張木頭人, 開始裁出 n 張圖

3. 寫出程式的內容 (可以剪貼哦!)
3.1. 安裝 glut 及 opencv 的 DevPak 讓 Dev C++ 可以寫有貼圖的程式
3.2. 在 blog 裡面找一下程式來剪貼啦 (ex. tag: 000葉正聖老師, 然後找裡面的 texture 及上週的程式碼)
3.3. 請注意, 要把排版 TAB 設定好
3.4. link error 時, 要把 Alt-P (Project-Option設定) 裡面的 Link 設定好, 加入咒語 -lcv -lcxcore -lhighgui
(要小心要用空格與後面的格開哦!)
3.5. 執行時出現 dll 檔的錯誤時, 請把 c:\dev-cpp\bin\opencv\ 目錄裡面所有的 .dll 檔案, 都放到 c:\windows\system32 裡面

但有些電腦不能接受你把一堆 dll 檔死命地往 c:\windows\system32 丟, 所以你可能要改放在 "同一個目錄中", 像在你桌面的那個專案目錄裡面!

#include <GL/glut.h>
#include <opencv/highgui.h>
#include <opencv/cv.h>
#include <stdio.h>
//IplImage *img1, *img2, *img3, *img4;
//GLuint id1, id2, id3, id4;
IplImage * img[40];//技巧1: 可以把重覆的東西, 用陣列來簡化
GLuint id[40];//技巧1: 可以把重覆的東西, 用陣列來簡化
float angleX=0;
void myPrepareTexture(int i)//用參數來配, 找對應正確的變數
{//技巧3: 可以把重覆的東西, 用函式來簡化
cvCvtColor(img[i], img[i], CV_BGR2RGB);
glEnable(GL_TEXTURE_2D);
glGenTextures(1, &id[i]);
glBindTexture(GL_TEXTURE_2D, id[i]);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_LINEAR);
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, img[i]->width, img[i]->height, 0, GL_RGB, GL_UNSIGNED_BYTE, img[i]->imageData);
}
void myTexture()
{
img[0]=cvLoadImage("imgbody.png");
img[1]=cvLoadImage("imgHand1.png");
img[2]=cvLoadImage("imgLeg1.png");
for(int i=0;i<3;i++){//技巧2: 可以把重覆的東西, 用迴圈來簡化
myPrepareTexture(i);
}
}
void myPolygon(int num){//技巧3: 可以把重覆的東西, 用函式來簡化
glPushMatrix();
glScalef(0.3, 0.8, 0.8);
glBindTexture(GL_TEXTURE_2D, id[num]);
glBegin(GL_POLYGON);
glTexCoord2f(0, 0);   glVertex3f( -0.5,  0.5, 0);
glTexCoord2f(1, 0);   glVertex3f(  0.5,  0.5, 0);
glTexCoord2f(1, 1);   glVertex3f(  0.5, -0.5, 0);
glTexCoord2f(0, 1);   glVertex3f( -0.5, -0.5, 0);
glEnd();
glPopMatrix();
}
void myBody(){
myPolygon(0);
}
void myLeg(){
myPolygon(1);
}
void myHand(){
myPolygon(2);
}
void display()
{
glEnable(GL_DEPTH_TEST);
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
glPushMatrix();
myBody();
glPushMatrix();
glTranslatef(0.2,0,0);//右手
glRotatef(angleX, 0,0,1);
glTranslatef(0, -0.4, 0);
myHand();
glPopMatrix();
glPushMatrix();
glTranslatef(-0.2,0,0);//左手
glRotatef(-angleX, 0,0,1);
glTranslatef(0, -0.4, 0);
myHand();
glPopMatrix();
glPushMatrix();
glTranslatef(-0.2,-0.3,0);//左腿
glRotatef(-angleX, 0,0,1);
glTranslatef(0, -0.4, 0);
myLeg();
glPopMatrix();
glPopMatrix();
glutSwapBuffers();
}
void keyboard(unsigned char key, int x, int y)
{
if(key=='a') angleX+=3;
if(key=='b') angleX-=3;
glutPostRedisplay();

}
int main()
{
glutInitDisplayMode(GLUT_DOUBLE |GLUT_DEPTH);
glutCreateWindow("week12");
glutDisplayFunc(display);
glutKeyboardFunc(keyboard);
myTexture();//不要忘了加哦!
glutMainLoop();
}

八卦: http://www.ptt.cc/bbs/GameDesign/M.1398537892.A.2FE.html

Week 11 葉正聖老師示範

#include <GL/glut.h>
float angleX=0;
void display()
{
glEnable(GL_DEPTH_TEST);
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
glPushMatrix();
glRotatef(angleX, 0,1,0);
glutSolidTeapot(0.3);
glPopMatrix();
glutSwapBuffers();
}
void keyboard(unsigned char key, int x, int y)
{
     if(key=='a') angleX+=3;
     if(key=='b') angleX-=3;
     glutPostRedisplay();
       
}
void myLight()
{
const GLfloat light_position[] = { 2.0f, 5.0f, -5.0f, 0.0f };
glEnable(GL_LIGHT0);
glEnable(GL_NORMALIZE);
glEnable(GL_COLOR_MATERIAL);
glEnable(GL_LIGHTING);
glLightfv(GL_LIGHT0, GL_POSITION, light_position);
}
int main()
{
glutInitDisplayMode(GLUT_DOUBLE |GLUT_DEPTH);
glutCreateWindow("week11");
glutDisplayFunc(display);
glutKeyboardFunc(keyboard);
myLight();
glutMainLoop();
}

任務: 放兩顆圓球, 一個在左邊, 一個在右邊, 會轉

任務: 左右各畫個長方塊,像手臂一樣

任務: 讓手可以像玩具一樣轉動

week 10 葉正聖老師示範

對任意軸旋轉

Week 08 葉正聖老師示範

1. 今天考期中考

2. 先把兩週前的進度回憶完成 (放個假, 大家應該忘光光了)

2.0. http://2014graphics.blogspot.tw/2014/03/week06.html

2.1. 畫出一個有彩色貼圖的 Teapot (請自己把地球的圖檔準備好)

2. 復習上週進度時, 要注意幾個重要事項:
2.1. 要裝好 兩個 glut_3.7.6_.DevPak 及 opencv-10.DevPak 這兩個紙箱
2.2. 要記得新增 glut 專案時, 在桌面上新增目錄 (同時把你的 earth.jpg 也放在那個目錄中)
2.3. 要記得把 C:\Dev-CPP\bin\opencv\ 裡面所有的 .dll 檔案, 都 copy 到你的專案目錄中
2.4. 記得加入咒語 Dev C++  Tool-Compiler 編譯器設定, 加入 Link 參數咒語 -lcv -lcxcore -lhighgui

3. 以後其實可以把貼圖相關的程式碼直接備份起來, 以後直接用!
//NEW
GLuint id;
IplImage * img = cvLoadImage("earth.jpg");
cvCvtColor(img, img, CV_BGR2RGB);
glEnable(GL_TEXTURE_2D);
glGenTextures(1, &id);
glBindTexture(GL_TEXTURE_2D, id);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_LINEAR);
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, img->width, img->height, 0, GL_RGB, GL_UNSIGNED_BYTE, img->imageData);

4.

5. 利用考試教的 glRotatef(angle, x,y,z) 及 glPushMatrix() glPopMatrix() 做出會轉動的地球, 其中一直在改angle值的, 是 idle()函式, 有用 glutIdleFunc(idle) 註冊了!

6. 使用 Kinect 掃描出來的 3D 模型檔, 與原來的地球共存

7. 再畫一個圓錐當身體, 請注意裡面的 glPushMatrix() 與 glPopMatrix() 的保護範圍

Week06 葉正聖老師示範

接下來我們要做 貼圖 (趕時間可先看去年的 blog:
http://2013graphics.blogspot.tw/2013/04/week08.html

1. Step 1: 下載 glut 及 opencv 的 DevPak紙箱, 並安裝
https://drive.google.com/file/d/0ByYbu0zjxrp1THkybHVJbGFaTGs/edit?usp=sharing
2. Step 2: Dev C++ 新增 GLUT 專案, 放在桌面上的一個新的目錄
3. Step 3: 將 C:\Dev-CPP\bin\opencv\ 目錄中的 .dll 檔案, 都 Copy 到你的專案目錄中
4. Step 4. 設定 Tool-Compiler 設定, 加入咒語 -lcv -lcxcore -lhighgui
5. Step 5. 寫好你的五行程式碼用 OpenCV 1.0 秀圖