´◔౪◔）Morning Star

 Week16 圖學筆記

主體：內插、動作內插

    alpha內插公式：alpha => 0.0-0.1

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

        alpha：0    =>舊

        alpha：0.5 =>半新半舊

        alpha：1    =>新

    Step0. 用上週的 week15_angles_TRT_again拿來改

    Step1. 複製完之後，去試試看，可不可以按S時，小黑存位置

               但是上週Code，按r跑動作時，會不連續，看起來怪怪的

               用內插法，讓他有連續感

    Step2. 新增以下黃色程式碼

        2-1. myInterpolate函式 = 內插公式

        2-2. 在myRead裡，增加新舊angle的程式碼

        2-3. 按下p時 = play

                先將t分成30個部分，當t%30==0時，新舊交換

                myInterpolation(t%30/30.0); 去計算alpha 0.0-1.0之間的angle

                t++ => 增加新的內插angle

    Step3. 全自動撥放內插

        3-1. 更改按下p 的程式

        3-2. timer函式讓他一直跑

主題：攝影機、運鏡

    Step0. 開新專案 week16_camera_pojection_gluLookAt

                參考 原main 177行的程式

                1. resize() 在拉視窗[aspect ratio 長寬比]時，可以保持物件比例不變

    Step1. 新增motion()可以用滑鼠轉動

~~~下課囉~~~

´◔౪◔）Morning Star

 Week15 電腦圖學

# 播放聲音 #

Step0. New Empty File => week15-1_PlaySound.cpp

Step1. PlaySound("檔名.wav", NULL, SND_SYNC) 

           async=不等待/不同步  sync=等待/同步

    Q1. 打完code之後跑不出來？？？ undifined reference to `PlaySoundA@12'

    A1. Setting - Compiler Setting, Linker 加入 winmm

注意呦!!! PlaySound只能用 wav檔

Step3. 了解更多PlaySound() 參數

    3-0. New File => week15-2_SND_SYMC SND_ASYNC.cpp    

    3-1.  不等待就是可以更快執行到下一行

    !!! 想要播放 mp3檔 !!!

        1. Moodle 下載 CMP3_MCI.h

        2. 程式碼 #include <CMP3_MCI.h>

        3. 宣告 CMP3_MCI.mp3

        4. mp3.Load("檔名.mp3")

        5. mp3.play()

# 接續上週3D進度 #

Step0. Open   GLUT專案 => week15_angle_TRT_again

Step1. Copy 上週code

            因為要一次一次調，一次只能調一個關節

            要讓他可以多個關節一起所以要做

Step2. keyboard() motion() 加 myWrite()

    !!! motion()裡的myWrite()要註解掉 !!!

# 擺動作 #

1. 需要 3D Model 被切塊過的(才可以動動喔)

2. 需要TRT 才能轉動

3. keyboard() 切換關節

4. mouse motion() 轉關節

Step0. 開新專案

Step1. 工作執行目錄 working_dir 改成上週教的更改 (用notepa++開cbp)

Step2. 把freeglut.dall複製到檔案同目錄中

Step3. 要把 glm.h glm.cpp 及 gundom放進去檔案裡跟目錄

Step4. 在codeblocks裡的左邊工作列，按右鍵add glm.cpp

Step5. 開始寫code

# Homewook 4 可擺 Pose的機器人 #

´◔౪◔）Morning Star

 Week14 寫檔、讀檔

一個影片看完之後，在按play可以再播一次

寫檔(File Output)、讀檔

    1. fopen() 開啟檔案

    2. printf() => fprintf() File Output

    3. fclose() 關閉檔案

Step 0. 開啟empty file 、 save as week14-1.cpp (這樣才會變彩色的程式碼)

Step 1. 輸入程式碼

讀檔 File Input

Step0. 開啟empty file、save as week14-2.cpp

Step1. 把剛剛的 week14-1 拿來用

Step2. 另外一組 `FILE * fin = fopen()`

Step3. scanf() => fscanf(指標, 型別[int、float...], &變數) File 

Step4. fclose(指標)

Homework3 

Step0. 上周的week13_rect_many_TRT 拿來參考參考

Step1. New GLUT專案 => week14_angle_fprintf

Step2. 將寫檔、讀檔，合進去(黃色部分)

Step3. 動手臂的時候，小黑會一直有訊息(但可讀性好差啊)

Step4. 新增跳行 

做動畫~~~~~~~~~~~~~~~~~~~~~~~~~~~

Step0. New GLUT => week14_angles_fprintf_fscanf

Step1. copy week14_angles_fprintf 的程式碼來修改

Step2. 寫 void myRead()

Step3. keyboard()裡, 按下'r' 呼叫 myRead()

要先錄一段資料之後，再去一直按r就會撥放了喔!

請一定要記得在mai裡加 glutKeyboardFunc(keyboard)

我們產生的檔案被放到freeglut/bin去了

Why? 歷史餘毒 GLUT專案 需要 freeglut.dll 

How? 

    1. 用 working_dir設定 工作執行的目錄

    2. 用Notepad++ 的.cbp 的working_dir=".........." 改working_dir="."一個小數點

    3. save, codeblock reload, 成功

    4. 小心歷史餘毒

    5. 所以要把freeglut/bin/freeglut.dll 複製到 該檔案的資料夾裡

TimeFunc

0. 看電腦按R的速度

1. 寫code

#動畫30秒，程式呼叫程式

播放聲音 PlaySound()

0. 準備好聲音檔

1. 繼續改 week14_timer

2. #incloude <Mmsystem.h>

3. playsound("檔名")

~~~~下課啦~~~~

´◔౪◔）Morning Star

 Week12 筆記

Step 1. 用另一個程式來理解

    1-1. 120.125.80.50/GL有程式、期中考題、小考題 (會有不安全提示，沒關係，繼續點)
    1-2. 解釋功能：
        1. To Draw: 點他才能畫畫
        2. 按RELOAD(F5)可清空
        3. 可以改程式碼的順序
        4. 可以按Angle+空白鍵，圖案會旋轉阿

Step 2. 轉動手臂

    2-1. 讓手臂揮手，身體不動。

    2-2. 將手臂軸心放在世界中心

    2-3. rotate 旋轉 translate 移動

Step 3. 開新專案

    1. 老動作。打開GLUT專案，week12-TRT

    2. 把10行程式碼貼上去

    3. 把T-R-T的6行放上去

    4. 放display

Step 4. 做出茶壺超人

    

下課啦~

´◔౪◔）Morning Star

 Week11 電腦圖學

主題：持續製作 glm 模型相關練習 - 把茶壺貼上 GUNDAM 貼圖 

0. open cv 的咒語們要做完

1. 開新 GLUT 專案 week11_gundam

2. 複製 week09_的範例，拿來用

3. 先把 myTeature 的程式貼上

4. 再輸入10行程式

5. 把模型整個讀進來

    5-1. 在 jsyeh.org/3dcg10 下載 source.zip (裡面的 glm.h glm.c,transformation.c 舊三件要拿來用喔)

    5-2. 把 glm.c 改成 glm.cpp，把 glm.h glm.cpp放到 week11_gundam 專案目錄中。

   

     5-3. 在 week11_gundam 專案中，在左邊的列裡，在week11_gundam上，按右鍵add files-加入 glm.cpp

     5-4. 加入以下程式碼(參考transformation.c裡的 glm相關)

     5-5. 在main.cpp 前面incloud 2 行

     5-6. 在display()裡加入好多行

    5-7. gundam看起來怪怪的，把圖顛倒一下

    5-8. 模型被壓扁了!!!! 小葉說是因為3D還沒開，所以要新增以下前面黃黃的東東

主題：利用Maya切割模型 (期末作業需要)

1. 先從Maya匯出模型檔 (小葉在yt有影片"keyword: maya obj 檔案")

https://www.youtube.com/watch?v=D4a7cNFF9kQ

2. 有模型時，要在Maya裡，切割模型

3. 切割完，在匯出obj檔

4. 最後在程式中拼在一起

5. 如果要轉動，一定是要東西拚好，才能轉動

下課了

´◔౪◔）Morning Star

 Week 10圖學筆記

今日主題：貼圖

#先將上周的project 的cv 10行程式碼複製到新project

#重新做OpenCV設定

    0-1. seting-compiler-serch directories-compiler-add inclode

    0-2. seting-compiler-serch directories-linker-add lib

    0-3. seting-compiler-linker setttings-add咒語 (cv210/cxcore210/highgui210)

    0-4. 再把圖檔放進工作目錄中 (in c:\Users...\freeglut\bin)

#做成背景貼圖，黏在四個點上 (從左下，逆時針繞圈圈)

    完成了

#把上週貼圖貼到圓球上

    1. 開新GLUT專案 (week10_texture_earth)

    2. 貼上前面的程式並加上以下程式碼

        main() : sphere=gluNewQuadric();///準備好二次曲面

        GLUquadric *sphere =  NULL;

        display() : gluQuadricTexture(sphere,1);///設好貼圖、 gluSphere(sphere,1,30,30);///畫圓球

    3. 畫圓球

        3-0. 圓球的座標要用 cos()、sin() 算出來

        3-1. 會用到以下函式

                a. OpenGL (GL) 的函式

                b. OpenGL Utilities (GLU) 的函式 ex: gluSphere(一個指標, r指標, slices經線(直), stacks緯

                    線)

                c. OpenGL User Toolkit (GLUT) 的函式 ex: gluSolidTeapot()

#把地球旋轉

    1. 新增旋轉程式碼在 dispaly() 裡

    2. 在 main() 新增 glutIdleFunc(display); 才能動喔

    3. 再新增一次rotatef在display()裡，把他轉正

    4. 一定要在main()裡，新增glEnable(GL_DEPTH_TEST);///開3D深度測試，才會有3D的效果

#主題三 貼3D模型

    1. 下載 jsyeh.org/3dcg10 的 window、data、source(glm.h、glm.cpp) 放在專案目錄

    2. 開新專案 (week10_texture_model)

    3. 工作目錄裡要放 Gundam 模型

~~~下課了~~~

´◔౪◔）Morning Star

 Week09 圖學筆記

日常動作-jsyeh.org/3dcg10/

主題：貼圖

實作：OpenCV 讀圖、秀圖

1. 下載OpenCV 2.1.0 win32 vs2008 (最小、最快安裝、簡單、跨平台)

2. 寫讀圖、秀圖的 OpenCV

    2-0. CodeBlocks 要重開 (PATH 安裝完之後，便會修改 PATH 的設定)

3. File-New-Empty file, 存成 week09_opencv.cpp

    3-1. 點開 OpenCV #include <opencv/highgui.h> //使用 opencv的外掛

4. 設定很困難 (include, lib, 咒語)

    4-1. seting-compiler-serch directories-compiler-add inclode

    4-2. seting-compiler-serch directories-linker-add lib

    4-3. seting-compiler-linker setttings-add咒語 (cv210/cxcore210/highgui210)

5. 將圖檔跟程式碼放一起(兩個檔案放在同一個地方) => 成功

實作：貼圖設定

0. 瘋狂複製時間到~~~~~~~~~~~

1. File-GLUT 專案

    1-0. 把10行GLUT範例 + 3-5行OpenCV專案

    1-1. 將圖檔放在 工作目錄裡 (in c:\Users...\freeglut\bin)

    1-2. run file => 成功~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

2. 點開老師送的網址：OpenCV 最簡單的貼圖程式片斷, 利用 OpenCV 2.1 及 OpenGL 即可完成貼圖的設定 · GitHub

3. 複製老師給的程式碼 >_<

完成~~~~

´◔౪◔）Morning Star

 Week07 

1. Light Material打光

    0. 日常下載

        0-1. 到 jsyeh.org/3dcg10 下載 windows/data/source.zip
        0-2. 執行 Light Material.

    1. 複習上週，去熟悉 Light Material

    2. 實作看看3D模型!!!

        2-0. 到 moodle下載 freeglut
        2-1. File-New-Project, 開新的GLUT專案。偷它的程式(全偷~)，放在Notepad++

    3. 了解 GLUT專案，在做些什麼

        3-1. GLUT callback? 回呼函式。會被 GLUT  呼叫的函式，
                ex:display()/keyboard()/mouse()/motion()
        3-2. 打光的程式碼: GL_LIGHTO
                a. 打光的陣列
                b. 打光的函式

    4. 從 git hub 拿出上周的程式 week06_light的main函式複製到week07_model

        4-0. Open Git Bash
        4-1. cd desktop/git clone 網址
        4-2. copy paste 到 week07_model的main函式中

    5. 把 souce.zip 裡的檔案拿來"學習" 理解理解 >_< 就可以讀入模型了

        5-1. glm.h 要 include 它
        5-2. glm.c 改檔名為 glm.cpp
        5-3. lightmaterial.cpp 用 Notepad++ ''學習''((偷程式碼~又來了

    6. 畫我們的3D模型

        6-1. 使用 drawmodel() 程式碼 glutSolidTeapot()
        6-2. 把下載的data資料夾放在工作目錄 (C:\Users\...\Desktop\freeglut\bin\) 裡 
        6-3. 把glm.h&glm.cpp放到week07_model目錄裡
        6-4. 在codeBlock頁面裡的week0按右鍵 Add Flie-glm.cppglm.cpp 

push上雲端吧

´◔౪◔）Morning Star

 Week 06-打光

日常步驟：

    1. 到jsyeh.org/3dcg10 下載 data, win32

    2. windows.zip => 解壓縮檔案，將data放進去

    <今日主角: Light Material.exe>

Light Material 講解：

    GLfloat light_pos[] = { -2.00,2.00 ,2.00 ,1.00 }; (可以調整設定光的位置)

    這行的程式碼為

    glLightfv(GL_LIGHT0, GL_POSITION, light_pos);

    fv => float vector(陣列)

實作時間：

    <light>

    0. 打開glut專案  ***這次先不刪程式碼*** 要借用程式碼

    1. 要複製兩個地方的程式碼，產生出light

    2. 複製 const GLfloat light 8行 跟 glEnable以下16行

    <light mouse motion rotate>

    瘋狂複製上周的程式，要記得上下聯動喔!

    [製作rotate]

    新增rotate相關變數及程式碼

    1. float angle=0.0;

    2. glRotatef(angle,0,1,0);

    3. angle+=(mouseX-oldX);

    

    <light keyboard mouse motion>

    讓鍵盤按鈕跟功能(移動、轉動、縮放)合在一起

    1. 新增now變數，選擇功能

    2. 新增keyboard函數

    3. 修改motion的函數

THE END

´◔౪◔）Morning Star

 Week 05

電腦圖學之父-Ivan Sutherland

1963年，在麻省理工學院取得計算機工程博士學位。他在博士論文中提出的Sketchpad程式，被認為是計算機圖形學的一大突破。

據說當時沒有人要接受ivan的論文，ivan自己帶著資料去參加，當天有一個人，沒有到場，所以ivan就自告奮勇。然後他就一舉成名了。

鍵盤函式 glutKeyboardFunc()

當按英文輸入法時，會在小黑顯示，按下的鍵盤值跟滑鼠的座標。

char 字母 -128~127

unsigned chra 0~255 只有正的

signed 正負號

unsigned 沒有正負號

模仿Maya

Step01. mix mouse、motion、keyboard

Step02. 增加一些程式碼

Step03. 增加mouse程式

glClearColor() 設定背景顏色

 

Step04. 縮放

if(mouseX-oldX >0) scale *= 1.01;

if(mouseX-oldX <0) scale *= 0.99;

這兩行為縮放主角

What gist github?

可以在blogger上，放git hub程式碼

´◔౪◔）Morning Star

Week 04

旋轉 Rotate

0. 下載範例 jsyeh.org/3dcg10

旋轉原理：安培右手定則

    右手比個讚，大姆哥代表旋轉軸，四指代表旋轉方向。

    正向轉動時，往指尖方向轉

    glRotatef (旋轉角度 , x , y , z)

    ex:旋轉軸為z軸，方向朝前，像烤香腸一樣轉

實作 glRotate(Angle, x, y, z)

0. 輸入精簡10行。新增程式碼，改變角度

Mouse Motion動 滑鼠拉動角度

1. 變動程式碼

   1-1. 初始化angle => [float angle=0]

   1-2. 角度變成可變動的

           void display() => 更改 glRotaetf (angle,0,0,0)

   1-3. 新增 void motion()

   1-4. mouse motion的重點程式 => glutMotionFunc (motion);

          放在 int main() 裡

Mouse Motion 2.0

因為mouse motion 初版在使用時，無法順著原本的地方繼續旋轉，所以來做一個可以變動的轉轉。

1. 更改程式碼

    1-1. 增加一個舊位置 => float oldX=0

    1-2. 將angle改成可變動，並且隨時更新oldX

            =>  angle += (x-oldX);    oldX=x;

    1-3. 增加 void mouse()

    1-4. 在 int main() 新增 glutMouseFunc();

~~~大功告成~~~

可以跟著滑鼠動了，不會卡卡的

´◔౪◔）Morning Star

 Week03

下載範例

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

2. Run [Transformation.exe] 看範例

移動Translate

0. 開新 GLOT Projet

0-1.輸入上周的程式碼

1. 輸入移動的程式碼

    增加3行程式碼

             [glPushMatrix();]

             [glTranslatef(0.5, 0.3,0.2);]

             [glPopMatrix();]

2. 複製很多個茶壺

    2-1. 增加一個 void MyTeapot()

    2-2. 修改 void display()

    2-3. Run

滑鼠事件：Translate

1. 開新專案

2. 修改程式碼

    2-1. 新加 [float mouseX=0, mouseY=0;]

    2-2. 在 void display() 新增 [MyTeapot((mouseX-150)/150.0, -(mouseY-150)/150.0);]

    

    2-3. 新增 [void mouse()]

    2-4. 在 int mian() 裡，新增 [glutMouseFunc(mouse);]

    2-5. Run 可以跟著滑鼠移動的茶壺

座標換算

0. 開新GLUT專案

1. 複製mouse的程式碼去做修改

    1-1. 新增 [#include <stdio.h>]

    1-2. 在 [void mouse()] 新增 [printf("%d %d %d %d\n", button, state, x, y);]

            印出滑鼠移動的座標

2. Run