Mengting期末作品Week18

SnowWhite Go!

成員: 40447026S王詠俞 / 40447043S蔡孟庭

【影片連結】https://youtu.be/Dl2Ws8MC2f4

       我們的作品靈感來自於【奔跑吧! 臺北】，它是以北市府柯文哲團隊的政績為背景所製作出的一款遊戲。當時我們正在查找原先預想的專題主題如何起步，剛好看到這款遊戲釋出，操作簡單且容易上手，忍不住就想也來嘗試看看。

       作品以白雪公主作為故事主角，操作方向鍵(上/下)來變換跑道，過程中吃到蘋果可以增加元氣(分數)，而同時也必須閃避巫婆，以免造成血量的損失。蘋果有一定的數量，當主角白雪公主在血量損失完畢之前吃完了蘋果，就可獲得勝利; 倘若還未到終點就因撞到太多次巫婆而血量歸零，便失去生命，遊戲結束。

        這個遊戲雖然操作簡便，但製作過程也包含了不少細節。像是一開始尋找素材、尋找能夠搭配主題的圖片、背景音樂、操作靈敏度，甚至是贏了之後加速跑走這類的遊戲情節，都是在開發遊戲的過程當中意外的學習及獲得。

Mengting計圖筆記Week13-VR體驗

VR、AR器材體驗

GoPro運動攝影機
OMNI
Ricoh Theta
ASUS Zenfone AR holo

Processeing色彩系統-RGB、HSB

size(255,255);
colorMode(HSB); //S:飽和度
for(int x=0; x<255; x++)
{
    for(int y=0; y<255; y++)
   {
        stroke(x,255,y);//可嘗試調換參數順序
        point(x,y);
   }
}

RGB色彩系統: stroke(R, G, B)





HSV色彩系統: stroke(hue, saturation, brightness)

多重貼圖-Roach蟑螂跑步機

切勿在display()讀圖檔，記憶體會被耗盡，應該要選擇在main()讀就只會讀一次。
時機點在glutMainLoop()之前，glutCreate()之後。

Roach蟑螂跑步機
從moodle下載roach.zip，練習多重貼圖

Mengting計圖筆記Week14

主題:

1. 期末作品Q & A

2. Rasterization光柵化(OpenGL、WebGL)

張鈞法老師上課投影片

Rasterization光柵化

將向量圖格式表示的圖像轉換成點陣圖，最基礎的柵格化算法將多邊形表示的三維場景渲染到二維表面。(參考wiki)

繪製三角形

繪製實心三角形

將stroke改成fill

繪製重疊三角形

void setup(){
 size(600,600,P3D);
}
void draw(){
 background(255);
 beginShape(TRIANGLE);
   fill(255,0,0); vertex(100,100,0);
   fill(255,0,255); vertex(100,500,100);
   fill(255,255,0); vertex(500,500,0);
 endShape();
 beginShape(TRIANGLE);
   fill(0,255,0); vertex(500,100,0);
   fill(0,255,255); vertex(500,500,10);
   fill(255,255,0); vertex(100,500,0);
 endShape();
}

3D Mario 程式解說

Mengting計圖筆記Week15-Antialias

主題:(1) Antialias(2)期末作品Q&A

Anti-aliasing(平滑化、反鋸齒化): 有些地方加上灰階值呈現，透過人類視覺產生補償效果，是一種改進電腦顯示品質的方法。



Dither(抖動):在數位訊號處理中用以降低量化誤差的技術。
(圖片來源: wiki)

Mengting計圖筆記Week12

主題：場景Scene

Mocap、Skeleton、Model

執行老師的OpenGL程式碼-myGL_Frustrum_skeleton

1. 從moodle下載該檔案並解壓縮。
2. 開啟一CodeBlocks的GLUT project。
3. 將步驟1解壓縮得到的檔案，除.exe檔以外，均複製到步驟2的GLUT資料夾中。
4. 將GLUT專案檔中原本的main.cpp移除(避免重複entry point)，並在左側欄project圖示上方按右鍵->Add files，將下載的檔案加入。
5. 此時嘗試編譯，應會出現Error，逐條處理。


Error
(1) 'M_PI' was not declared in this scope
解法: Setting -> Compiler 取消 C++11 ISO的勾選
(2) 這個是舊的OpenGL，需要在int main()的括弧中補上int argc,char *argv[]，並在main()中加上這一行程式碼glutInit( & argc, argv ); 。

6. 編譯成功!


 

Processing(待補)

Mengting計圖筆記Week11 - 聲音、音效、音樂

主題：聲音、音效、音樂

平臺：windows, Java, Processing, etc.

期中proposal提案分析

Mocap

在程式中播放wav檔

1. 開啟GLUT專案
2. google搜尋PlaySoundA找到此網址，這是我們會用到的函式
3. 將.wav檔存到freeglut-bin資料夾(可google搜尋“wav聲音下載”)
4. 在main函式中加入這段程式碼
#include<stdio.h>
#include<mmsystem.h>///使用Multimedia System多媒體系統
int main(int argc, char *argv[])
{
    ///讓它有聲音, PlaySoundA(檔名,在哪裡,如何播(SND_SYNC SND_ASYNC))
    PlaySoundA("file.wav",NULL,SND_ASYNC);
    printf("等到救護車走了，才跑下一行glut畫圖\n");

    ///Ascii的檔名(正常的英文)
......(後面維持原程式)

在程式中播放mp3檔 

1. 開啟GLUT專案，把main.cpp的程式碼清空重打
2. 將.mp3檔存到freeglut-bin資料夾

3. 打入以下程式碼

#include <stdio.h>

#include "CMP3_MCI.h" ///使用外掛.h，可在FB社團下載CMP3_MCI mp3;///宣告變數
int main()
{
  ///音樂一般用.mp3，音效一般用.wav(未經壓縮)  mp3.Load("file.mp3");///讀入 mp3檔
  mp3.Play();///Play播放mp3檔
  ///PlaySoundA("file.wav", NULL, SND_SYNC);
  printf("現在等待輸入a\n");
  int a;
  scanf("%d", &a);///當輸入某一數字，程式(音樂)立即結束
}

使用Processing播放mp3檔

1. 至moodle下載Processing
2. 速寫本 - 引用庫文件 - 添加庫文件 - 安裝Minim
3. (也可試用文件-範例程序)
4. 下載一.mp3檔，命名為file.mp3，並將檔案拖曳至coding視窗(上傳)
4. 打入以下程式碼
import ddf.minim.*; //use ddf's minim music library
Minim minim; //the whole system
AudioPlayer player;//corresponding to one mp3 file
AudioPlayer player2;
void setup(){
  minim = new Minim(this);//constructor of Minim Object
  player = minim.loadFile("file.mp3");//minim load to player
  player.play();
} 
void draw(){

}
5. 按Play~~~就有音樂了<3

Mengting計圖筆記Week10 - 專題發想、app製作

一、介紹SIGGRAPG ASIA，並展示一些圖學相關的專案

推薦一coursera課程交互式計算機圖形學

二、手機app程式教學(以processing實作)

1. 按下會有顏色變化的app

void setup(){
        fullScreen();
}
void draw(){
        if(mousePressed) background(255, 0, 255);
        else background(0, 255, 0);
}

2.  小畫家app
void setup(){
        size(1080,1920);
}
void draw(){
}
void mouseDragged(){
        stroke(255, 0, 0);
        line(mouseX, mouseY, pmouseX, pmouseY);
}

3. 碰撞偵測(展示了數支程式)
ballsize//球的半徑(當兩球之間距離小於半徑即發生碰撞)
return//程式直接停止

Mengting計圖筆記Week09 - Texture、多重貼圖、Bump Mapping

主題: 
(1)上週Texture貼圖、詳解
(2)多重貼圖
(3)Bump Mapping

//體驗Bump Mapping凹凸貼圖

Processing多種應用

補充：維基百科
偏微分算出法向量

1. 下載processing3(Java-base程式)，貼上上方網址的程式碼，並把random參數改成255，試著執行看看


2.把tex.pixels[i] = color(0xff - random(255)); 改成 tex.pixels[i] = color(0xffff - random(255));，磚塊變的平滑。


3.畫出色塊
開新檔案，試以下程式碼。
   從工具->顏色選擇器選擇色碼複製，跑出相對應顏色的方格。


4.呈現圖片
開新檔案，試以下程式碼。
   下載一張圖檔，拖曳至視窗中即上傳。在loadImage()參數打入檔名並執行。



PImage img=loadImage("terry.png");//Process image and load it
size(200,200);
image(img, 0, 0, 200, 200);//show the image

5.圖片隨滑鼠移動出現殘影
開新檔案，試以下程式碼。
   下載一張圖檔，拖曳至視窗中即上傳。在loadImage()參數打入檔名並執行。
PImage img;
void setup(){
  size(600,600);
  img=loadImage("girl2.png");
}

void draw(){
  //rect(mouseX, mouseY, 50, 50);
  image(img, mouseX, mouseY);
}

\霹哩啪拉靜香團出巡/

若要移除殘影，在draw()中加入background(255);加上背景。

------以下未完成------------ 6.Mario待補充

int [][]map={{0,0,0,0,0,0,0,0,0,0,0,0,0,0},
             {0,0,0,0,0,0,0,0,0,0,0,0,0,0},
             {0,0,0,0,0,0,0,0,0,0,0,0,0,0},
             {0,0,0,0,0,0,0,0,0,0,0,0,0,0},
             {0,0,0,0,0,0,0,0,0,0,0,0,0,0},
             {0,0,0,0,0,0,0,0,0,0,0,0,0,0},
             {0,0,1,1,1,1,1,0,0,0,0,0,0,0},
             {0,0,0,0,0,0,0,0,0,0,0,0,0,0},
             {0,0,0,0,0,0,0,0,0,0,0,0,0,0},
             {0,0,0,0,0,0,0,0,0,0,0,0,0,0},
             {1,1,1,1,1,1,1,1,1,1,1,1,1,1};
}
PImage imgMario, imgBrick;
void setup(){
  size(800,600);
  imgMario=loadImage("mario.png");
  imgBrick=loadImage("brick.png");
}
float marioX=200, marioY=100, marioVX=0, marioVY=0;
boolean marioOnFloor=false;
void draw(){
  background(255);
  //for(int x=0; x<18; x++)
  for(int x=0; x<14; x++)
  {
    for(y=0;y<11;y++)
    image(imgBrick, x*50, 500, 50, 50);
  }
  image(imgMario, marioX, marioY, 100, 100);
  marioY += marioVY;
  marioX += marioVX;
  marioVY += 0.98;
  if(marioY >= 500-80)
  {
    mario=500-80; 
    marioVY=0;
  }
}
void keyPressed()
{
  if(keyCode==UP) marioVY=-15;
  if(keyCode==RIGHT) marioVX=5;
}
void keyPressed()
{
  if(keyCode==RIGHT) marioVX=0;

}

可以直接匯出成安卓app




---------------------------
//3D  void setup(){
     size(800,600,P3D);
     img=loadImage("earth.jpg");
}

float rotX=0,rotY=0;
void draw(){
background(255);
//image(img,0,0,width,height);

 lights();
 translae;(width/2, height/2);
//scale(s);//移動
rotateX(radians(rotX));
rotateY(radians(rotY));
sphere(80);
texture(img);

beginShape(POLYGON);
vertex(0,0,0,0);
vertex(0,600,0,512);

}

void mouseDragged(){
rotY += mouseX-pmouseX;
rotX -=  mouseY-pmouseY;

}
--------------------------




   

Mengting計圖筆記Week08 - Texture貼圖

主題: Texture 貼圖
OpenCV安裝、讀圖
OpenGL貼圖設定
範例：轉動的地球

學習設定openCV專案

1. 到網站下載以下壓縮檔：data、windows、glut32、source，並解壓縮。
2. 把data資料夾及glut32.dll放入windows資料夾，以成功執行檔案。
3. google keyword "opencv 2.1"，下載OpenCV-2.1.0-win32-vs2008.exe
(可在moodle找到)，看連結安裝說明並安裝。
4. 選擇第3個選項


    路徑不用改變


5. 安裝完openCV後，codeblocks開新專案。
file -> new -> project -> console application

6. 貼上以下程式碼

7. 下載earth.jpg圖片，並存在專案資料夾。


8. 在codeblocks左方專案名稱上方按右鍵->Build options->Search directories做設定。
Search directories->Compiler->Add directory : c:\opencv2.1\include
Search directories->Linker->Add directory : c:\opencv2.1\lib
Linker setting->Add library : cv210 
Linker setting->Add library : cxcore210 
Linker setting->Add library : highgui210

9. 此時執行檔案，便可成功展示圖片。



1. 開新GLUT專案，重複上述步驟8做設定，即可成功於此撰寫openCV程式。
2. 把earth.jpg也存到freeglut->bin當中。

老師的程式碼：

3. (參考moodle上老師的專案)

Mengting計圖筆記Week07 - Mouse、Model、打光

主題: 用Mouse打光(lighting打光、shading光影)


1. 開啟GLUT專案
2. 增加一些函式，見程式碼。
3. 以下將針對部分程式碼補充介紹。

程式碼補充介紹

void key(unsigned char key, int x, int y)

透過鍵盤+和-改變圖形形狀及密度。
slice切幾刀、stack疊起來

static void resize(int width, int height)

使圖形大小不會受視窗縮放所影響。

static void display(void)

t隨時間改變角度。

void motion(int x, int y)

改變光線位置。

glutMotionFunc(motion)

偵測滑鼠移動時的座標。

Demo

1. slice/stack


2. 滑鼠調整光影

Mengting計圖筆記Week06 - Lighting

編譯上週Transformation程式(注意Compiler-Setting v.s. strdup())作業二: Keyboard, Mouse, 轉動, 移動

編譯上週Transformation程式(注意Compiler-Setting v.s. strdup())

1. 至課程網址下載以下檔案: source、data、win32、glut32.dll。

2. 將win32解壓縮，並把glut32.dll檔案及data資料夾(內含obj檔)放至該資料夾中。

3. exe檔可成功執行!

下載week05範例程式會出現的問題

Q1. 可能編譯不成功，找不到glut檔?

A1. 使用notepad++開啟專案，並以檔案總管確認freeglut資料夾的路徑之相符。

Q2. strdup()的地方出現error?

A2. 至Setting-Compiler取消勾選。

打光

1. 一開始的week05程式，編譯成功後執行結果如下。

2. 將一開始下載的source code解壓縮，開啟transformation.c，並搜尋關鍵字"light"尋找打光相關程式碼。

(待編輯)

Mengting計圖筆記Week05 - Viewing

主題: VIewing

範例: jsyeh.org/3dcg10

實作: Viewing相關函式及介紹

作業: 利用滑鼠/鍵盤實作

透過zuvio複習前兩週內容

觀摩上週所教的函式作品: 

glTranslatef()、glRotatef()、glScalef()

1. 到  jsyeh.org/3dcg10 下載三個檔案: win32、data、glut32.dll。

2. 將windows解壓縮， 並把其餘兩檔案存至windows資料夾。

3. 試著執行windows資料夾當中的 Transformation.exe，並以滑鼠調整函式參數。

執行Projection.exe

1. 執行Projection.exe，並以滑鼠調整函式參數。

2. 在執行框點擊右鍵，有多個函式可供切換。

3. 過程中有以下函式需瞭解:

(1)

gluPerspective(fovy視野, aspect y/x比例, zNear, zFar);

(2)

glOrtho(左、右、上、下、近、遠);

(3)

glFrustum(左、右、上、下、近、遠);

(4)

gluLookAt(eyeX, eyeY, eyeZ,

                 centerX, centerY, centerZ,

                 upX, upY, upZ);

eye相機位置
center拍攝物品位置
up相機角度

建立專案，自行透過程式碼執行出結果

1. 到  jsyeh.org/3dcg10 下載 source檔案

2. 開啟codeblocks，建立GLUT project

3. 將GLUT project內原本的source code，按右鍵remove

4. 開啟剛剛下載的source資料夾，把當中的glm.c、glm.h、projection.c三個檔案，加到專案資料夾中，並加入專案中。(建議可將.c檔案格式改成.cpp)

5. 在專案資料夾中新增一data資料夾，把source資料夾中的模型al.mtl、al.obj放入data資料夾。

轉動/移動 程式碼順序上不同造成的改變

Mengting計圖筆記Week04 - 移動、旋轉、縮放

主題: 移動、旋轉、縮放實作: Translate、Rotate、Scale觀念: 矩陣Matrix、Push、Pop

複習如何開啟Glut專案

1. File -> New -> Project ->選擇Glut專案


2. 選擇桌面freeglut資料夾
 
 

3. F9編譯並執行

實作一、改變Glut程式碼中的display()

glTranslated(x方向移動, y方向移動, z方向移動);

字尾d表示double，若是f表示float。
此函示可以將物品放至相對應的座標位置。

例如:


範例圖檔的上排三個物件，就是由以下三行程式碼

glTranslated(-2.4,1.2,-6);
glTranslated(0,1.2,-6);
glTranslated(2.4,1.2,-6);

所定位出來的結果。



加上茶壺

1. 將內建的Glut函式中，實體圖形上加上茶壺程式碼，並套上不同顏色

glColor3d(1,0,0); 
glutSolidTeapot(1);



2. 執行結果

改變旋轉情形: 

glRotated(角度, 對x軸旋轉, 對y軸旋轉, 對z軸旋轉);

欲尋找xyz軸方向，可使用右手座標系統。
其中(x, y, z)為單位向量，若輸入的數字使其向量長度不為1，程式也會自動將向量正規化(normalize)處理。

const double t = glutGet(GLUT_ELAPSED_TIME) / 1000.0;
const double a = t*90.0;
glRotated(60,1,0,0);
glRotated(a,0,0,1); //依時間對z軸做旋轉


將所有旋轉的程式碼註解，保留其中一行 glRotated(a,0,0,1);
試著改變參數，嘗試各種旋轉情形
例如:
glRotated(a,1,1,0); //對xy平面旋轉


glRotated(a,-1,0,0); //對x軸反方向旋轉


改變比例大小:

glScaled(x方向放大倍率, y方向放大倍率, z方向放大倍率);

例如: 
1. glScaled(2, 2, 2); //x, y, z方向皆等比例放大兩倍

2. glScaled(4, 0.5, 0.5); //x方向放大4倍，y、z方向皆縮小2倍


完整程式碼

實作二、滑鼠拖曳移動物件

完整程式碼

旋轉矩陣補充

小知識: 電影<駭客任務>原文片名為The Matrix

新工具
螢幕錄影工具ScreenToGif，可錄製螢幕並存為Gif檔，感謝周欣億學姊提供~