7Hao-計算機圖學-Week18-期末作品

YouTube連結：https://www.youtube.com/watch?v=BJbzdZMDLOw

主題：小朋友下樓梯

作者：陳頎皓，張秉睿

使用工具：processing

操作方式/規則：

        方向鍵左右控制人物方向，平台會從最底端隨機出現，然後一直往上升，若沒有踩在平台上的話會一直往下掉，每碰到一次尖銳平台會扣一顆愛心，而碰到最上端尖銳物除了會扣愛心，還會從平台上掉下來，當十顆愛心都沒有了或是人物掉到最下面，則遊戲結束，可以從右上角的Time來看秒數，秒數越高者越佳。

特色：

1. 人物根據左右鍵變換造型

2. 遊戲時間越長，平台上升速度越快，遊戲困難度隨時間增加

3. 死亡音效

7Hao-計算機圖學-Week15

1.專題進度檢視, Q&A

2.主題:Antialias

7Hao-計算機圖學-Week14

主題: Rasterization

用P語言
1.
size(600,600,P3D);
background(255);
beginShape(TRIANGLE);
stroke(255,0,0); vertex(300,100);
stroke(255,255,0); vertex(500,500);
stroke(0,0,255); vertex(100,500);
endShape();


2.
size(600,600,P3D);
background(255);
beginShape(TRIANGLE);
fill(255,0,0); vertex(300,100);
fill(255,255,0); vertex(500,500);
fill(0,0,255); vertex(100,500);
endShape();


3.
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,100);
  fill(255,255,0); vertex(100,500,0);
  endShape();
}

4.

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,20);

  fill(255,255,0); vertex(100,500,0);

  endShape();

}

-----------------------------------------------------------

期末Q&A

1. 3D Mario

void setup(){

  size(600,400,P3D);

}

float marioX=300,marioY=300,marioZ=0;

float marioVX=0,marioVY=0,marioVZ=0;

int marioDir=0;

boolean jumping=false;

void draw(){

  background(#6DD5FA);

  beginShape(QUAD);

    vertex(0,300,-300);

    vertex(0,300,300);

    vertex(600,300,300);

    vertex(600,300,-300);

  endShape();

  lights();

  pushMatrix();

    translate(marioX,marioY,marioZ);

    noStroke(); sphere(20);

  popMatrix();

    marioX+=marioVX;

    marioZ+=marioVZ;

    if(jumping){

      marioY+=marioVY;

      marioVY+=0.98;

      if(marioY>300){

        jumping=false; 

        marioVY=0;

        marioY=300;

      }

    }

}

void keyPressed(){

  if(keyCode==RIGHT) marioVX=3;

  if(keyCode==LEFT) marioVX=-3;

  if(keyCode==UP) marioVZ=-3;

  if(keyCode==DOWN) marioVZ=3;

  if(key==' ' && jumping==false){marioVY=-20; jumping=true;}

}

void keyReleased(){

  if(keyCode==RIGHT || keyCode==LEFT) marioVX=0;

  if(keyCode==UP || keyCode==DOWN ) marioVZ=0;

}

7Hao-計算機圖學-Week13

(1) 主題VR體驗
(2)色彩系統
用P語言:
colorMode(RGB,255); ///RGB或HSB
size(255,255);
for(int i=0;i<255;i++){
  for(int j=0;j<255;j++){
    stroke(i,j,255);
    point(i,j);
  }
}

----------------------------
colorMode(HSB,255);
size(255,255);
for(int i=0;i<255;i++){
  for(int j=0;j<255;j++){
    stroke(i,j,255);
    point(i,j);
  }
}

7Hao-計算機圖學-Week12

(1) 主題: Scene場景、Mocap、Skeleton、Model

TODO1:
到moodle下載:myGL_Frustrum221_MultiView_2012_1221-20171130T060949Z-001.zip
1.先開執行檔(exe.)

2.試著編譯:
修改程式碼: 
定義全域變數:float M_PI=3.1415926;
新增黃色部分
int main(int argc,char **argv){
    glutInit(&argc,argv);
    ....
    ....
}
執行:


TODO2:
下載P語言
安裝Collada

打開Vector2D


執行


可以調整true或false
boolean modelsEnabled[] = new boolean[]{false,true,false,false,false,false,true};

-----------------------
moodle下載 testBVH.zip
執行

7Hao-計算機圖學-Week11

(1)主題: 聲音-音效、音樂
(2)平台: Window,Java,etc

一、用GLUT專案 播放音樂
1.直接播放wav音檔
#include <mmsystem.h> ///使用 MultMedia System多媒體系統,聲音
int main(){
    PlaySoundA("file.wav", NULL, SND_ASYNC);  ///(一行發聲) 檔名,在哪裡,如何播
    ///SND_SYNC 等同步 (聲音播完才跑下一行)
    ///SND_ASYNC 不等 下一行繼續
}

2.播放mp3音檔
#include <stdlib.h>
#include "CMP3_MCI.h" ///使用外掛
CMP3_MCI mp3;
int main(){
    mp3.Load("file.mp3"); ///讀入mp3檔
    mp3.Play(); ///播放mp3檔
    system("pause");
}

二、用Processing 播放音樂

1.安裝Minim

2.把file.mp3 丟到Processing 資料夾裡面

3.程式碼:

import ddf.minim.*; //use ddf's minim music library

Minim minim; //int a; the whole system 

AudioPlayer player; //corresponding to one mp3 file

void setup(){

  minim = new Minim(this); //constructor of Minim object

  player = minim.loadFile("file.mp3"); //minim load player

  player.loop();

  player.play();

}

void draw(){

  

}

7Hao-計算機圖學-Week10

1.moodle 下載processing
2.程式碼
void setup(){
  fullScreen();
}
void draw(){
  if(mousePressed) background(255,0,0);
  else background(0,255,0);
}
3.
(右上角)Java 改成 Add mode *Android Mode
自動安裝Android SDK NDK
4.執行

---------------------------------------------------------------
程式碼: 球可以彈來彈去
void setup() {
size(500, 500);
}
float ballX=250, ballY=450, ballVX=1.3, ballVY=-10;
float ball2X=250, ball2Y=50;
void draw() {
if ( dist(ballX, ballY, ball2X, ball2Y)<100 ) {
float cx=(ballX+ball2X)/2, cy=(ballY+ball2Y)/2;
float nx=ballX-ball2X, ny=ballY-ball2Y;
line(ballX,ballY, ball2X,ball2Y);
PVector N=new PVector(nx, ny);
N.normalize();
PVector v0=new PVector(ballVX, ballVY);
float len= -N.dot(v0);
v0.add(N.mult(len*2));
line(cx,cy, cx+10*ballVX, cy+10*ballVY);
line(cx,cy, cx+20*v0.x, cy+20*v0.y);
ellipse(cx, cy, 10, 10);
stroke(0);
line(ballX, ballY, ball2X, ball2Y);
stroke(255, 128, 0);
line(cx, cy, cx+5*ballVX, cy+5*ballVY);
stroke(255, 128, 0);
line(cx, cy, cx+5*v0.x, cy+5*v0.y);
stroke(255, 0, 0);
line(cx, cy, cx+N.x, cy+N.y);
//return;
ballVX=v0.x;
ballVY=v0.y;
}
background(255);
ballX+=ballVX;
ballY+=ballVY;
if(ballX<50 || ballX>500-50) ballVX = -ballVX;
if(ballY<50 || ballY>500-50) ballVY = -ballVY;
ellipse(ballX, ballY, 100, 100);
ellipse(ball2X, ball2Y, 100, 100);
}
void mouseDragged(){
ball2X=mouseX; ball2Y=mouseY;
}


-----------------------------
期末作品說明示範
繳交期末作品題目

7Hao-計算機圖學-Week09

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

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

到moodle下載processing-3.3.6-windows64.zip
解壓縮後執行, 再把上面網站的程式碼貼上並執行


畫四邊形
工具->顏色選擇器->用fill()填充顏色


讀圖檔 把圖檔直接拉進去


滑鼠移動畫圖形


Code:
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,2,2,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,imgBrick2;
void setup(){
size(800,600);
imgMario=loadImage("mario.png");
imgBrick=loadImage("brick.png");
imgBrick2=loadImage("brick2.png");
}
float marioX=200, marioY=100,marioVX=0,marioVY=0;
boolean marioOnFloor=false;
void draw(){
 background(255);
 for(int x=0;x<14;x++){
   for(int y=0;y<11;y++){
     if(map[y][x]==1)image(imgBrick,x*50,y*50,50,50);
     if(map[y][x]==2)image(imgBrick2,x*50,y*50,50,50);
   }
   image(imgBrick,x*50,500,50,50);
 }
 image(imgMario,marioX,marioY,100,100);
 marioY += marioVY;
 marioX += marioVX;
 marioVY += 0.98;
 if(marioY>=500-80){
   marioY=500-80;
   marioVY=0;
   marioOnFloor=true;
 }
}
void keyPressed(){
  if(keyCode==UP&&marioOnFloor)marioVY=-15;marioOnFloor=false;
  if(keyCode==RIGHT)marioVX=5;
  if(keyCode==LEFT)marioVX=-5;
}
void keyReleased(){
  if(keyCode==RIGHT || keyCode==LEFT)marioVX=0;
}

結果:

7Hao-計算機圖學-Week08

主題: Texture 貼圖
1. 搜尋3dcg10, 下載source, data, win32, glut32.dll, 把data, glut32.dll放到windows資料夾裡面
2. 打開Texture.exe



(1) OpenCV 安裝, 讀圖
到moodle安裝OpenCV-2.1.0-win32-vs2008
*path要勾第三個(或第二個)

安裝完後關掉CodeBlocks再重新開啟
開啟新專案Console application:

修改程式碼
#include <opencv/highgui.h>
int main()
{
    IplImage *img=cvLoadImage("earth.jpg");
    cvNamedWindow("hello");
    cvShowImage("hello", img);
    cvWaitKey(0);
}

專案Build options:

F9編譯+執行

換成開一個GLUT專案
同上對專案Build options設定一樣的東西
把earth.jpg放在freeglut的bin裡面
程式碼加上
#include <opencv/highgui.h>
    IplImage *img=cvLoadImage("earth.jpg");
    cvNamedWindow("hello");
    cvShowImage("hello", img);

執行

(2) OpenGL 貼圖設定

(3) 範例: 轉動地球
到moodle下載week08-3earth.zip檔案

7Hao-計算機圖學-Week07

1. 作業二展示、互評
2. 今日主題: Lighting打光、Shading光影  => 用mouse調光源

static void resize(int width, int height)  ///縮放視窗後圖形不會變形
{
    const float ar = (float) width / (float) height;

    glViewport(0, 0, width, height);
    glMatrixMode(GL_PROJECTION);
    glLoadIdentity();
    glFrustum(-ar, ar, -1.0, 1.0, 2.0, 100.0);

    glMatrixMode(GL_MODELVIEW);
    glLoadIdentity() ;
}


const GLfloat light_position[] = { 2.0f, 5.0f, 5.0f, 0.0f };
const 不能改變值 所以刪掉
GLfloat light_position[] = { 2.0f, 5.0f, 5.0f, 0.0f };  ///光源位置
void motion(int x, int y) ///用滑鼠控制光源
{
    light_position[0]=(x-150)/150.0 *2;
    light_position[1]=-(y-150)/150.0 *2;
    glLightfv(GL_LIGHT0, GL_POSITION, light_position);
    glutPostRedisplay();
}
int main()
{
    ....
    glutDisplayFunc(display);
    glutKeyboardFunc(key);
    glutIdleFunc(idle);
    glutMotionFunc(motion);
    ....
}

結果:

7Hao-計算機圖學-Week06

一、複習上週進度
1.下載Week05.rar, 編譯上週程式
strdup() 無法辨識的解決方法:CodeBlocks設定中, C++11的設定勾勾 取消





第六週主題: 打光Lighting
1.增加打光功能
GLfloat pos[] = { 0.0, 0.0, -1.0, 0.0 }; ///光位置
int main(int argc, char**argv)
{
    glutInit(&argc, argv);
    glutInitDisplayMode(GLUT_DOUBLE | GLUT_DEPTH);
    glutCreateWindow("week05");

    glutDisplayFunc(display);
    glEnable(GL_DEPTH_TEST);
    glEnable(GL_LIGHTING);///打開打光功能
    glEnable(GL_LIGHT0); ///第一盞燈
    glLightfv(GL_LIGHT0, GL_POSITION, pos);
    glutMainLoop();
    glDisable(GL_LIGHTING); ///關閉打光功能
}


2.增加鍵盤滑鼠功能

void keyboard(unsigned char key,int x,int y)
{
    printf("now:%c (%d %d)\n",key,x,y);  ///鍵盤敲擊可以顯示字元和座標
}
void mouse(int button, int state, int x, int y)
{
    printf("(%d %d %d %d)",button,state,x,y);  
    ///滑鼠點擊可以顯示x,y座標 , state=0是點擊, state=1 是放開滑鼠
    ///button=0滑鼠左鍵,=1滑鼠滾輪中鍵,=2滑鼠右鍵,=3滾輪往上,=4滾輪往下
}
int main(int argc, char**argv)
{
    glutInit(&argc, argv);
    glutInitDisplayMode(GLUT_DOUBLE | GLUT_DEPTH);
    glutCreateWindow("week05");


    glutDisplayFunc(display);
    glutKeyboardFunc(keyboard);
    glutMouseFunc(mouse);


    glEnable(GL_DEPTH_TEST);
    glEnable(GL_LIGHTING);
    glEnable(GL_LIGHT0);
    glLightfv(GL_LIGHT0, GL_POSITION, pos);
    glutMainLoop();
}


3.增加鍵盤控制旋轉功能
int rotateX=0,rotateY=0,rotateZ=0;
void display()
{
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    glPushMatrix();
    glRotated(rotateX,1,0,0);
    glRotated(rotateY,0,1,0);
    glRotated(rotateZ,0,0,1);
    drawmodel();
    glPopMatrix();
    glutSwapBuffers();
}
void keyboard(unsigned char key,int x,int y)
{
    printf("now:%c (%d %d)\n",key,x,y);
    if(key=='1')
        rotateX++;
    if(key=='2')
        rotateY++;
    if(key=='3')
        rotateZ++;
    glutPostRedisplay(); ///重新畫

}


4.增加滑鼠控制旋轉功能
int rotateX=0,rotateY=0,rotateZ=0;
int oldX=0,oldY=0;
void mouse(int button, int state, int x, int y)
{
    printf("(%d %d %d %d)\n",button,state,x,y);
    if(state==GLUT_DOWN)
        oldX=x,oldY=y;
}
void motion(int x,int y)
{
    rotateX+= -(y-oldY);
    rotateY+= -(x-oldX);
    oldX=x;
    oldY=y;
    glutPostRedisplay();
}
int main(int argc, char**argv)
{
    glutInit(&argc, argv);
    glutInitDisplayMode(GLUT_DOUBLE | GLUT_DEPTH);
    glutCreateWindow("week05");


    glutDisplayFunc(display);
    glutKeyboardFunc(keyboard);
    glutMouseFunc(mouse);
    glutMotionFunc(motion);


    glEnable(GL_DEPTH_TEST);
    glEnable(GL_LIGHTING);
    glEnable(GL_LIGHT0);
    glLightfv(GL_LIGHT0, GL_POSITION, pos);
    glutMainLoop();
}

7Hao-計算機圖學-Week05

主題:Viewing

一、複習上週主題

1.課程Zuvio即時回饋 : Week03、Week04複習

2.進入網址:http://www.cmlab.csie.ntu.edu.tw/~jsyeh/3dcg10/

    下載data.zip, windows.zip, glut32.dll

    解壓縮後,放到windows資料夾

    **執行Transformation.exe

    
    用滑鼠拖曳綠色數字，實作功能，按 'R' 可還原

二、課程內容

    投影

    **執行Projection.exe

    

    fovy: 視野

    aspect: x,y比例(y/x)

    點右鍵可以改成垂直投影glOrtho(左,右,下,上,近,遠)
    gluLookAt(eyeX, eyeY, eyeZ
                       centerX, centerY, centerZ
                       upX, upY, upZ)

7Hao-計算機圖學-Week04

一、課程目標
1.主題:移動、旋轉、縮放
2.實作:Translate,Rotate,Scale
3.觀念:Matrix,Push,Pop
4.作業:加入移動,旋轉等功能

二、課程內容
1.修改範例程式碼中的Display含式

2.移動、旋轉、縮放
要先glPushMatrix()，最後用glPopMatrix();
把要寫的圖形，寫在這兩行中間
Ex:
glPushMatrix();  ///備份矩陣
glTranslated(-2.4,1.2,-6);
glRotated(60,1,0,0);
glRotated(a,0,0,1);
glColor3f(128/255.0,255/255.0,0/255.0);
glutSolidSphere(1,slices,stacks);
glPopMatrix();   ///還原矩陣

移動:
glTranslated(double x, double y, double z) ///d:Double
旋轉:
const double t = glutGet(GLUT_ELAPSED_TIME) / 1000.0;   ///時間變數
const double a = t*90.0;   ///每秒轉90度

glRotated(double angle, double x, double y, double z)///角度,x旋轉軸,y旋轉軸,z旋轉軸((右手定理
註:旋轉軸=點(x,y,z)和點(0,0,0)相連的軸

Ex:glRotated(60,1,0,0); 表示對x軸,固定旋轉60度

glRotated(a,0,0,1); 表示對z軸,隨時間旋轉
縮放:
glScalef(x, y, z); ///x,y,z分量，代表放大或縮小，可以賦予不同值

7Hao-計算機圖學-Week03

1.互評同學作業
2.解釋學姐程式範例
3.課堂作業:編譯小小兵程式
***把minion.txt放到freeglut\bin裡面


4.安裝3D Exploration
利用3D Exploration 匯出cpp檔案的模型
到http://www.cmlab.csie.ntu.edu.tw/~jsyeh/3dcg10/  的data中下載模型
用3D Exploration開啟


另存新檔


開新OpenGL專案,貼上Code
刪掉有問題Code
執行

7Hao-計算機圖學-Week02

主題：點、線、面、色彩

程式碼:

#include <GL/glut.h>

void display()

{

    glClearColor(1,0,0,0); ///背景顏色R,G,B,A

    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

    glColor3f(1,0,1);  ///3種0.0~1.0的RGB參數 1,0,1表紫色

    glutSolidTeapot(0.3); 

    glutSwapBuffers();

}

int main(int argc, char *argv[])

{

    glutInit(&argc, argv);

    glutInitDisplayMode(GLUT_RGB | GLUT_DOUBLE | GLUT_DEPTH);

    glutCreateWindow("GLUT Shapes");

    glutDisplayFunc(display);

    glutMainLoop();

}

執行結果:

-

程式碼:

#include <GL/glut.h>
void display()
{
    glClearColor(1,0,0,0);
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    glColor3f(1,0,1);

    glBegin(GL_POLYGON); ///開始畫多邊形
    glVertex3f(1,1,0);  ///X,Y,Z座標
    glVertex3f(-1,1,0);
    glVertex3f(0,-1,0);
    glEnd(); ///結束畫

    glutSwapBuffers();
}
int main(int argc, char *argv[])
{
    glutInit(&argc, argv);
    glutInitDisplayMode(GLUT_RGB | GLUT_DOUBLE | GLUT_DEPTH);
    glutCreateWindow("GLUT Shapes");
    glutDisplayFunc(display);
    glutMainLoop();
}

執行結果: