2017計算機圖學: 40473029H

顯示具有 40473029H_容文瑩 標籤的文章。顯示所有文章

2018年1月12日星期五

Claire's Note #18

WEEK18

Topic:

期末作品展示

A. 期末專題

網址連結：https://youtu.be/NFeyK7gPm9A

Claire's Note #17

WEEK17

Topic:

期末作品Q&A

A. 期末專題

已具備基礎功能及部分附加功能：

主頁面：鍵盤控制旋轉、轉換視角

介面：計時、開新遊戲鍵、暫停鍵、警告視窗

目標：

1. 以滑鼠控制旋轉

2. 讀檔&存檔

3. 目錄

STEP 1: 滑鼠控制

同上週

若未完成，將下方方塊加上貼圖，標示鍵盤控制功能鍵

STEP 2: 讀檔&存檔

將目前魔術方塊每面的顏色及遊戲時間記錄存檔

開啟遊戲時，檢查是否有上次遊戲儲存進度。若有，則以MessageBox確認是否繼續

STEP 3: 目錄

含有開新遊戲、暫停遊戲、讀檔、存檔等功能

Claire's Note #16

WEEK16

Topic:

期末作品Q&A

A. 期末專題

已具備基礎功能及部分附加功能：

主頁面：鍵盤控制旋轉、轉換視角

介面：計時、開新遊戲鍵、暫停鍵

目標：

1. 警告視窗：遊戲進行中按下 [NEW GAME] 時，跳出確認視窗確定是否再開新的一局

2. 改以滑鼠控制旋轉

STEP 1: 多視窗

問題：關閉小視窗時，原本的主視窗也會被關閉

解決方法：改以MessageBox顯示

MessageBox(NULL, "是否開啟新局？", "", MB_YESNO);

回傳值：按鈕ID

是：IDYES，否：IDNO

參考資料

STEP 2: 滑鼠控制

問題：如何在滑鼠點擊頁面時，取得投影至該點的物件

參考範例程式碼：Selection()

Claire's Note #15

WEEK15

Topic:

期末作品Q&A

Antialias

A. Antialias

STEP 1: Antialias （平滑化、反鋸齒、邊緣柔化）

因電腦顯示器像素為方形，因此當圖片解析度不夠，或將圖片放大顯示時，會使圖片邊緣產生凹凸鋸齒（左圖）。平滑化技術在圖形邊緣交界處以灰階色彩補償，使圖片在視覺上變為平滑，消除顯示器輸出的畫面中圖物邊緣出現凹凸鋸齒。

B. 期末專題

＊更改題目：魔術方塊

Claire's Note #14

WEEK14

Topic:

期末作品Q&A

Rasterization 光柵化

A. Rasterization 光柵化

STEP 1: Rasterization 光柵化：

將向量圖形格式表示的圖像轉換成點陣圖，用於顯示器或者印表機輸出。

STEP 2: 三角形

STEP 3: 實心三角形

STEP 4: 空間三角形

Claire's Note #13

WEEK13

Topic:

VR體驗

期末專題點播

畫面等速變化：timer()計時函式

A. Google首頁小遊戲

STEP 1: 慶祝 Kids Coding 創立 50 週年

https://www.google.com/doodles/celebrating-50-years-of-kids-coding

B. 色彩系統

STEP 1: RGB模式

STEP 2: HSB模式

C. 多重貼圖

STEP 1: 執行roach

STEP 2: Result

2017年11月30日星期四

Claire's Note #12

WEEK12

Topic:

Scene 場景

Mocap, Skeleton, Model

期末專題分析&協助

A. 編譯程式

STEP 1:

STEP 2: Result

B. Processing Example - Collada

STEP 1: 下載、安裝Library：Collada、Picking

STEP 2: 開啟範例程式Viewer2D

＊更改程式中讀檔類型設定(false → true)

C. Processing Example - Picking

STEP 1: 開啟範例程式Simple

STEP 2: Result

D. Model

STEP 1: 至Moodle下載testBVH

STEP 2: Result

Claire's Note #10

WEEK10

Topic:

Processing Android

期末專題討論

A. Processing Android

STEP 1: 將模式改為Android

STEP 2: Result:按下滑鼠後變為紅色

B. Ball

STEP 1: 程式碼

STEP 2: Result

Claire's Note #11

WEEK11

Topic:

聲音──音效、音樂

A. C/C++/GLUT

STEP 1: 匯入多媒體函式庫 mmsystem.h

PlaySoundA(檔名,在哪裡,播放方式);

＊只能播放wav檔

STEP 2: 匯入MP3函式庫 CMP3_MCI.h

mp3.Load(檔名);

mp3.Play();

B. Processing

STEP 1: 匯入函式庫Minim

STEP 2:

AudioPlayer player = minim.loadFile(檔名);

player.loop();//循環播放

player.play();//播放

2017年11月11日星期六

Claire's Note #9

WEEK09

Topic:

上週Texture貼圖、詳解

多重貼圖

Bump Mapping

A. Bump Mapping（凹圖貼圖）

STEP 1: 開啟範例網頁

https://www.openprocessing.org/sketch/249457

STEP 2: 至Moodle下載Processing3.3.6，並執行

STEP 3: 將STEP 1的程式碼複製至Processing

STEP 4: 執行

＊random()中填入0~255的數

B. Processing (1)

STEP 1: 開啟一張圖片

STEP 2: 隨滑鼠印出圖片

C. Processing (2) - Mario

2017年11月2日星期四

Claire's Note #8

WEEK08

Topic:

Texture貼圖

OpenCV安裝、讀圖

OpenGL貼圖設定

範例：轉動地球

A. Texture貼圖

STEP 1: 下載data.zip、windows.zip、glut32.dll、source.zip

至http://www.cmlab.csie.ntu.edu.tw/~jsyeh/3dcg10/

STEP 2: 下載並安裝OpenCV2.1

至課程moodle下載安裝檔

安裝程式

＊Path選擇第2或3個選項

STEP 3: 設定

project右鍵build options

Search drection - Complier：Add：C:\OpenCV2.1\include

Search drection - Linker：Add：C:\OpenCV2.1\lib

Linker settings：Add：

C:\OpenCV2.1\lib\cv210.lb

C:\OpenCV2.1\lib\cxcore210.lib

C:\OpenCV2.1\lib\highgui210.lib

STEP 4: 執行

STEP 5: Result

B. OpenGL貼圖設定

STEP 1: 設定(同上)

project右鍵build options

Search drection - Complier：Add：C:\OpenCV2.1\include

Search drection - Linker：Add：C:\OpenCV2.1\lib

Linker settings：Add：

C:\OpenCV2.1\lib\cv210.lb

C:\OpenCV2.1\lib\cxcore210.lib

C:\OpenCV2.1\lib\highgui210.lib

STEP 2: 將A.的程式碼放入main.cpp中

＊更改earth.jpg的路徑

STEP 3: Result

關閉第一張圖後跳出第二張

＊同時顯示兩張圖：將 cvWaitKey(0); 註解

C. 轉動地球

STEP 1: 程式碼

#include <opencv/highgui.h> ///for cvLoadImage()

#include <opencv/cv.h> ///for cvCvtColor()

#include <GL/glut.h> ///3D glut

#include <stdio.h>

GLUquadric * quad;

GLuint id;

float angle=0;

void display()

{

glEnable(GL_DEPTH_TEST); ///要啟動 Detph Test 深度值的測試,3D顯示才正確

glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

glPushMatrix();///自動轉很帥

glRotatef(90, 1,0,0);

glRotatef(angle, 0,0,1);///自動轉很帥

gluQuadricTexture(quad, 1);

gluSphere(quad, 1, 30, 30);///glutSolidTeapot(0.3);

glPopMatrix();///自動轉很帥

glFlush();

}

void timer(int t)

{

glutTimerFunc(20, timer, 0);/// 1000 msec 50fps:20msec

angle+=1;///自動轉很帥

glutPostRedisplay();

}

int myTexture(char *filename)

{

IplImage * img = cvLoadImage(filename); ///OpenCV讀圖

cvCvtColor(img,img, CV_BGR2RGB); ///OpenCV轉色彩 (需要cv.h)

glEnable(GL_TEXTURE_2D); ///1. 開啟貼圖功能

GLuint id; ///準備一個 unsigned int 整數, 叫貼圖ID

glGenTextures(1, &id); /// 產生Generate 貼圖ID

glBindTexture(GL_TEXTURE_2D, id); ///綁定bind 貼圖ID

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT); /// 貼圖參數, 超過包裝的範圖T, 就重覆貼圖

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT); /// 貼圖參數, 超過包裝的範圖S, 就重覆貼圖

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST); /// 貼圖參數, 放大時的內插, 用最近點

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST); /// 貼圖參數, 縮小時的內插, 用最近點

glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, img->width, img->height, 0, GL_RGB, GL_UNSIGNED_BYTE, img->imageData);

return id;

}

void myInit()

{

quad = gluNewQuadric();

id = myTexture("C:/Users/Violet/Documents/Program/Week08_3/earth.jpg");

}

int main(int argc, char**argv)

{

glutInit(&argc, argv);

glutCreateWindow("3D");

glutDisplayFunc(display); ///顯示

glutTimerFunc(0, timer, 0);

myInit(); ///我的 init 初始化把貼圖準備好前面OpenCV 2行, 後面 OpenGL 9行

glutMainLoop();

}

2018年1月12日 星期五

WEEK18

Topic:

期末作品展示

A. 期末專題

WEEK17

Topic:

期末作品Q&A

A. 期末專題

STEP 1: 滑鼠控制

STEP 2: 讀檔&存檔

STEP 3: 目錄

WEEK16

Topic:

期末作品Q&A

A. 期末專題

STEP 1: 多視窗

STEP 2: 滑鼠控制

WEEK15

Topic:

期末作品Q&A Antialias

A. Antialias

STEP 1: Antialias （平滑化、反鋸齒、邊緣柔化）

B. 期末專題

WEEK14

Topic:

期末作品Q&A Rasterization 光柵化

A. Rasterization 光柵化

STEP 1: Rasterization 光柵化：

STEP 2: 三角形

STEP 3: 實心三角形

STEP 4: 空間三角形

WEEK13

Topic:

VR體驗 期末專題點播 畫面等速變化：timer()計時函式

A. Google首頁小遊戲

STEP 1: 慶祝 Kids Coding 創立 50 週年

B. 色彩系統

STEP 1: RGB模式

STEP 2: HSB模式

C. 多重貼圖

STEP 1: 執行roach

STEP 2: Result

2017年11月30日 星期四

WEEK12

Topic:

Scene 場景 Mocap, Skeleton, Model 期末專題分析&協助

A. 編譯程式

STEP 1:

STEP 2: Result

B. Processing Example - Collada

STEP 1: 下載、安裝Library：Collada、Picking

STEP 2: 開啟範例程式Viewer2D

C. Processing Example - Picking

STEP 1: 開啟範例程式Simple

STEP 2: Result

D. Model

STEP 1: 至Moodle下載testBVH

STEP 2: Result

WEEK10

Topic:

Processing Android 期末專題討論

A. Processing Android

STEP 1: 將模式改為Android

STEP 2: Result:按下滑鼠後變為紅色

B. Ball

STEP 1: 程式碼

STEP 2: Result

WEEK11

Topic:

聲音──音效、音樂

A. C/C++/GLUT

STEP 1: 匯入多媒體函式庫 mmsystem.h

STEP 2: 匯入MP3函式庫 CMP3_MCI.h

B. Processing

STEP 1: 匯入函式庫Minim

STEP 2:

2017年11月11日 星期六

WEEK09

Topic:

2018年1月12日星期五

期末作品Q&A

Antialias

期末作品Q&A

Rasterization 光柵化

VR體驗

期末專題點播

畫面等速變化：timer()計時函式

2017年11月30日星期四

Scene 場景

Mocap, Skeleton, Model

期末專題分析&協助

Processing Android

期末專題討論

2017年11月11日星期六

上週Texture貼圖、詳解

多重貼圖

Bump Mapping

2017年11月2日星期四

Texture貼圖

OpenCV安裝、讀圖

OpenGL貼圖設定

範例：轉動地球