Leo 學習筆記 Week18

Leo 學習筆記 Week15

Anti-Aliasing
1. 因為取樣頻率過低會造成完全錯誤的結果

2. 可以用一些灰階補償的方法來讓視覺達到較佳的效果

資料來源:https://ni.i.lithium.com/t5/image/serverpage/image-id/23874i923C9AF031B29657?v=1.0

Leo 學習筆記 Week14

Rasterization

1. 安裝Processing

2. 畫出漸層三角形

size(600,600,P3D);

background(255);
//glBegin(GL_POLYGON);
beginShape(TRIANGLE);
  //glColor3f(r,g,b);glVerte3f(x,y,z);
  fill(255,0,0);vertex(300,100);//畫點加顏色
  fill(255,255,0);vertex(500,500);
  fill(0,0,255);vertex(100,500);
  //glEnd();
endShape();

3. 執行結果


4. 畫出重疊三角形

size(600,600,P3D);

background(255);
//glBegin(GL_POLYGON);
beginShape(TRIANGLE);
  //glColor3f(r,g,b);glVerte3f(x,y,z);
  fill(255,0,0);vertex(100,100,0);//加上z值(深度值)
  fill(255,255,0);vertex(100,500,100);
  fill(0,0,255);vertex(500,500,0);
  //glEnd();
endShape();
beginShape(TRIANGLE);
  //glColor3f(r,g,b);glVerte3f(x,y,z);
  fill(255,0,0);vertex(500,100,0);
  fill(0,255,0);vertex(500,500,10);//加上z值(深度值)
  fill(0,255,255);vertex(100,500,0);
  //glEnd();
endShape();

5. 執行結果


6. 說明
此方法使用內差的方式畫出中間漸層的顏色，在兩個三角形交界處會產生鋸齒，因為每一個像素只能畫一種顏色，因此交界處會看哪一個三角形的Z值較接近就選那個顏色畫

Leo 學習筆記 Week13

色彩系統

1. 安裝Processing

2. 輸入以下程式碼

size(255,255);

colorMode(RGB,255);//選擇色彩系統，包含RGB, HSB(色相、飽和度、亮度)

for(int x=0;x<255;x++){

  for(int y=0;y<255;y++){

    stroke(x,y,255);//筆刷顏色

    point(x,y);

  }

}

3. RGB結果

4. HSB結果

roach程式

1. 安裝好環境

2. 開啟專案檔

3. 程式碼重點

printf("Use mouse to roll the ball and to draw trace\n");

quad = gluNewQuadric();

idBall = myTexture("imgBall.png");///重點: 不可在display()讀圖檔

idCanvas=myTexture("imgCanvas.png");///重點: 只要在main()讀一次

idTeapot=myTexture("idTeapot.jpg");

myLighting();///此部分要在 glutMainLoop()之前, glutCreateWindow()之後

4. 編譯執行

Leo 學習筆記 Week12

編譯myGL_Frustrum221_MultiView_2012_1221程式

1. 從moodle下載程式碼

2. 建立glut專案

3. 將myGL_Frustrum_skeleton.cpp取代掉專案裡面的main.cpp

4. 修改原本的程式碼修改成以下的程式碼(螢光部分)

5. 將myGL_Frustrum.txt加入C:\Users\user\Desktop\freeglut\bin

6. 執行後結果

Processing讀模型

1. 在Sketch->Import Library->Add Library

2. 安裝Collada 和 Picking

3. 執行範例程式

4. 執行Viewer2D

執行動作捕捉程式

1. 下載檔案

2. 開啟並執行

Leo 學習筆記 Week11

播放聲音

1.建立glut專案

2.在main.cpp中加入
#include <mmsystem.h>


3.在main函式加入
PlaySoundA("bb.wav",NULL,SND_ASYNC);
//第一個參數為音源檔名，第二個為在哪裡，第三個為怎麼播(SND_ASYNC為邊播邊執行，SND_SYNC為播完再繼續執行)



4.將音源檔加入C:\Users\user\Desktop\freeglut\bin

5.執行即可播音樂


播放mp3

1.在main.cpp中加入#include "CMP3_MCI.h"來使用mp3播放功能(要在glut的專案下，因需要winmm)

2.加入CMP3_MCI mp3建立一個屬於mp3的資料結構

3.mp3.Load("file.mp3");///讀入 mp3檔

4.mp3.Play();///Play播放mp3檔


使用processing播音樂

1.安裝Minim library


2.加入以下程式碼

import ddf.minim.*;
Minim minim;
AudioPlayer player;
void setup(){
     minim=new Minim(this);
     player=minim.loadFile("file.mp3");
     player.play();
}
void draw(){

}

3.將mp3檔拉進專案

4.執行即可播音樂

Leo 學習筆記 Week09

觀察Bump Mapping範例

1.開起以下連結https://www.openprocessing.org/sketch/249457

執行processing語言程式

1.下載安裝processing環境(moodle)

2.將上面連結中程式碼貼入processing，並在random()中填入255

3.執行結果

用processing語言讀圖

1.下載圖片後拉近processing IDE中

2.加入以下程式碼

size(640,480);//set the window's size

PImage img=loadImage("dog.jpg");//load the image

image(img,0,0,640,480);//show the image

3.執行結果

產生無限多的圖檔

1.Ctrl+N建立新專案

2.加入以下程式碼

PImage img;

void setup(){

  size(800,800);

  img=loadImage("error.jpg");

}

void draw(){

  image(img,mouseX,mouseY);//mouseX, mouseY為滑鼠座標

}

3.執行結果

簡單mario遊戲

1.修改程式碼為以下程式碼

PImage imgMario, imgBrick;

void setup(){

  size(800,600);

  imgMario=loadImage("mario.png");

  imgBrick=loadImage("brick.png");

}

float marioX=200, marioY=100, marioVY=0,marioVX=0;

boolean marioOnFloor=false;//是否在地面上

void draw(){

  background(255); 

  for(int x=0;x<18;x++)image(imgBrick, x*50,500,50,50);//產生磚塊

  image(imgMario, marioX,marioY,100,100);//畫馬力歐

  marioY+=marioVY;//Y方向加速度

  marioX+=marioVX;//X方向加速度

  marioVY+=0.98;//Y方向重力加速度

  if(marioY>=500-100){marioY=500-100;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; //放開按鍵時加速度為0

}

2.執行結果

Leo 學習筆記 Week08

Texture相關函式範例

1.下載好相關的檔案(data.zip, windows.zip, glut32.dll, source.zip)解壓縮到正確的位置。


2.調整texture.exe中的參數並觀察結果
glTexCoord2f為貼圖的座標，左下座標為0, 0
glVertex3f為圖形的座標，左下座標為-1, -1
glColor4f為改變貼圖的色調1, 1, 1, 1為白色

安裝openCV

1.下載OpenCV-2.1.0-win32-vs2008.exe
2.安裝時要勾選Add openCV to the system path

第一個openCV程式

1.新增一個console project


2.在main貼上以下程式碼
#include <opencv/highgui.h>

int main()
{
    IplImage * img=cvLoadImage("earth.jpg");
    cvNamedWindow("hello");
    cvShowImage("hello", img);
    cvWaitKey(0);
    return 0;
}

3. 設定專案的build option

search directories>>>linker


linker setting


search directories>>>compiler

4.執行後結果

結合openCV和glut

1.新增一個glut專案

2.將build option的參數調整成和上面一樣

轉動地球範例

此範例的重點為貼圖，以下為貼圖程式碼

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;

}

Leo 學習筆記 Week07

建立滑鼠拖曳光源的功能

1.建立glut專案


2.在main中加入glutMouseFunc(motion)這個函式來註冊滑鼠功能


3.定義motion函式
void motion(int x, int y)
{
    light_position[0]=(x-150)/150*2;//將光緣位置的X座標調整成0~1之間
    light_position[1]=-(y-150)/150*2;//將光緣位置的Y座標調整成0~1之間
    glLightfv(GL_LIGHT0,GL_POSITION,light_position);
    glutPostRedisplay();

}

4.執行後結果

Leo 學習筆記 Week06

複習上周進度

編譯source資料夾裡面的原始碼

1.下載moodle裡面的week05資料夾並解壓縮

2.用notepad++打開week05.cbp並修改include的路徑為電腦桌面freeglut資料夾的路徑

3.到codeblocks的setting>compiler將第二個選項取消勾選

4.執行後結果

打光

1.加入打光功能函式:

glEnable(GL_LIGHTING);

開啟全部的打光功能

glEnable(GL_LIGHT0);

開啟第0號燈

glLightfv(GL_LIGHT0,GL_POSITION,pos);

設定0號燈光的位置，pos為燈光位置的陣列

glEnable(GL_DEPTH_TEST);

開啟深度測試

2.執行後結果

鍵盤功能

 

1.在main中增加glutKeyboardFunc(keyboard)函式，並定義keyboard函式:

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

{

    printf("now: %c (%d %d)\n",key,x,y);

}

key為輸入的按鍵，x,y為滑鼠所在位置的座標

2.執行後結果，在鍵盤上按按鍵時會輸出現在按的按鍵和箭頭所在的座標

使用按鍵旋轉模型

1.在keyboard中加入以下函式

if(key=='1')rotateX++;

if(key=='2')rotateY++;

if(key=='3')rotateZ++;

glutPostRedisplay();

rotateX, rotateY, rotateZ為三軸分別的旋轉角度

2.執行後結果，按1,2,3及可分別對x,y,z軸旋轉

使用滑鼠旋轉模型

1.在mouse函式中加入

if(state==GLUT_DOWN){

        oldX=x,oldY=y;

}

此為當滑鼠按下時將舊的位置改為新的位置

2.定義motion函式

void motion(int x,int y)

{

    rotateY+= -(x-oldX);

    rotateX+= -(y-oldY);

    oldX=x,oldY=y;

    glutPostRedisplay();

}

3.執行後即可使用滑鼠旋轉

Leo 學習筆記 Week05

複習上禮拜內容

1.從jsyeh.org/3dcg10下載data.zip,windows.zip,glut32.dll三個檔案放置於桌面


2.將windows.zip資料夾解壓縮，再將data.zip解壓縮後和glut32.dll一起放進windows資料夾中


3.執行windows資料夾中的Transformation.exe並調整每個函式的參數


投影

1.執行windows資料夾中的Projection.exe並調整gluPerspective函式(透視投影)的參數，
fovy: 調整Y方向的視野
aspect: 調整X、Y的比例
zNear: 調整Z方向上較靠近的面
zFar: 調整Z方向上較遠的面


2.在Projection.exe中切換成glOrtho函式(垂直投影)，並調整其參數
left: 調整投影空間的左邊界
right: 調整投影空間的右邊界
bottom: 調整投影空間的下邊界
top: 調整投影空間的上邊界
near: 調整投影空間的前邊界
far: 調整投影空間的後邊界


3.調整gluLookAt函式的參數，gluLookAt為調整視點的函式。
前三個參數: 調整視點位置(以物體中心)的x,y,z值，
中間三個參數: 調整物體位置
後三個參數: 調整視點旋轉角


編譯範例原始碼(transformation.c)

1.建立glut專案，建置完成後刪除裡面的main.cpp，將需要用到的程式碼加入專案中(glm.c,glm.h,transformation.c)，將data資料夾放到freeglut/bin中。


2.執行後結果