2017計算機圖學: 40447015S

顯示具有 40447015S_周承翰 標籤的文章。顯示所有文章

2017年12月19日星期二

周承翰_計圖學習筆記_Week14

Week14

主題：Rasterization

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();

把上面的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,100);
fill(255,255,0); vertex(100,500,0);
endShape();
}

周承翰_計圖學習筆記_Week13

week13主題：VR體驗、圖學色彩系統

VR體驗

GoPro 運動攝影機

OMNI 六台GoPro 可拍攝360度視角

Ricoh theta 拍攝360度VR影像

Asus Zenfone AR Holo

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

其他資源：

Google project tango
Microsoft HoloLens

P語言色彩系統

1. RGB色彩系統(1)

stroke 為色像座標

2. RGB色彩系統(2)

colorMode 選擇 RGB

3. HSB色彩系統

多張貼圖的作品

【裝opecCV、glut】

防止重複讀圖當掉

在main讀圖檔(不要在display的時候)

在glutCreateWindow()之後、glutMainLoop()之前

只能讀一次

2017年12月9日星期六

周承翰_計圖學習筆記_Week12

myGL_Frustrum221編譯且執行

1. 至moodle 下載myGL_Frustrum221壓縮檔，並解壓縮

2. 開啟CodeBlocks的GLUT專案檔

解壓縮後資料夾裡的程式碼 - [複製貼上] 至專案檔中

3. 執行

問題 : freeglut ERROR: Function called without first calling 'glutInit'

解決方法 : (1) int main(int argc,char *argv[]) 補上

(2) glutInit( & argc, argv );這行指令加在main裡面)

Viewer2D

1. 開啟P程式語言 processing3.3.6.exe

2. 安裝 [速寫本] - [引用庫文件] - [添加庫文件] - [ collada ] (方法詳情請至week11)

3. 開啟 [文件] - [範本程序] - [viewer2D]

4. boolean modelsEnabled[] = new boolean[]{false,true,false,false,false,false,true};
這行bool array 隨意一個設為 true 然後執行

5. 選擇鍵盤 [ a , s , d , z , x , c , 1 , 2 , 3 , p , o ]決定模式，再用滑鼠控制

(電腦跑不出來...暫定略過)

2017年11月23日星期四

周承翰_計圖學習筆記_Week11

Sound 聲音匯入程式

(1) 音樂與音效

(2) 使用平台 : Windows / Java ... etc

(3) 期中(期末) Proposal 提案分析 ddf.Minim
(4) Mocap

1. C Language wav版本

先去下載 .wav檔 --> 建立OpenGL專案 --> .wav檔放到專案檔的[bin]-[Debug]中

include<mmsystem.h> //使用Multimedia System 多媒體系統
PlaySoundA("檔名.wav",NULL,SND_ASYNC) ;
//要讓他有聲音 --> 檔名 , 在哪裡 , 如何播(SND_SYNC or SND_ASYNC)

勇敢按下F9執行

2. C Language mp3版本

先至FB下載 CMP3_MCI.h --> 放入專案檔的[bin]-[Debug]
(或是對cbp右鍵打開notepad++ --> 搜尋[working] --> 可以看到執行路徑)

#include <CMP3_MCI.h> ///使用外掛,可在FB下載

CMP3_MCI mp3; ///int a 宣告變數
int main()
{
mp3.Load("檔案名.mp3"); ///讀入mp3檔
mp3.Play(); ///Play播放mp3檔
printf ("隨便輸入一個number來停止音樂播放\n");
int a;
scanf("%d",&a);
}

3. 以P語言processing匯入聲音

先打開processing3 --> [引用庫文件] - [添加庫文件]

搜尋 [Sound] - 選取第三個並下載

下載完後庫文件引入下載好的 - [Minim]

2017年11月17日星期五

周承翰_計圖學習筆記_Week09

Bump Mapping -- 凹凸貼圖
Environment Mapping -- 環境貼圖

1. Bump Mapping 資源連結：https://www.openprocessing.org/sketch/24945
(P語言的編輯環境，可線上編輯程式碼及執行)

2. moodle下載 processing-3.3.6-windows64.zip

3. 解壓縮並執行processing.exe

4. 將Bump Mapping 程式碼貼到 processing.exe中

5. 在random中加入255並執行 (執行檔截圖有點問題)

(補)

6. 同一行多加一個f

7. 下載一張圖片並匯入processing 3中

PImage img=loadImage("an.jpg");
size(500,500);
image(img,0,0,500,500);

8. 照片跟隨著滑鼠拖曳

PImage img;

void setup()
{
img=loadImage("an.jpg");
size(500,500);
}

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

9. Mario的Processing 3程式

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,1,1,2,2,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_Block.png");

imgBrick2=loadImage("5da98730977895279f05af2eb7bd7516.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(imgMario,marioX,marioY,100,100);

marioY+=marioVY; marioX+=marioVX;

marioVY+=0.98;

if(marioY>=400){marioY=400;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;

}

2017年11月2日星期四

周承翰_計圖學習筆記_Week08

Week08

上課主軸 :

(1) Texture 貼圖

(2) OpenCV 安裝、讀圖

(3) OpenGL 貼圖設定

(4) 範例 : 轉動地球

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

軟體安裝 :

網址 : jsyeh.org/3dcg10

(1) data.zip --->桌面\windows\data\*.sgi

(2) windows.zip --->桌面\windows\Texture.exe (glTexCoord2f(tx,ty))

(3) glut32.dll --->桌面\windows\glut32.dll

(4) source.zip

網址 : NTNU moodle2.8

(1) opencv-2.1.0-win32-vs2008.exe 安裝
小提醒 : PATH 要勾 2、3

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

啟動程式 OpenCV :

(1) 開啟 CodeBlocks --> File --> New --> Project

(2) 選擇 Console App

(3) 複製以下程式碼進main.cpp

#include <opencv/highgui.h>

int main()

{

IplImage * img = cvLoadImage("earth.jpg");

cvNamedWindow("Hello opencv");

cvShowImage("Hello opencv", img);

cvWaitKey(0);

}

(4) 到 google 找一張 earth map 的圖

改名為earth.jpg，並放進week08資料夾

(5) 在Codeblocks中對 week08.cbp 按右鍵 --> Build Option --> Search directories

Compiler --> Add --> 輸入 : 【c:\\opencv2.1\include】

Linker --> Add --> 輸入 : 【c:\\opencv2.1\lib】

點選 Linker setting --> Link Libraries

Add --> 輸入 --> 【cv210】

Add --> 輸入 --> 【cxcore210】

Add --> 輸入 --> 【highgui210】

點選OK

(6) 按下F9執行看看 Go !

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

啟動程式 OpenGL :

(1) 開啟 CodeBlocks --> File --> New --> Project

(2) 選擇 GLUT project 專案檔，取名 week08-2
(3) 重複上述 OpenCV 第 (5) 點
(4) 將上述 OpenCV 第 (3) 點的程式碼複製到 GLUT 專案檔的 int main中

(5) 此時按下 F9 應該會掛點 ! 原因：earth.jpg沒放進GLUT專案檔
(6) 將 earth.jpg 複製到桌面\freeglut\bin

(7) 此時回到CodeBlocks按下F9、按下一個空白建
能成功開啟OpenCV與OpenGL檔

~~幹 ! 超感動的拉 !~~

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

啟動程式 OpenGL (設定貼圖) :

複製以下程式碼到 main.cpp

#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("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();

}

~~小葉老師背不起來，大家上moodle複製main.cpp~~

按下F9執行

會轉的地球誕生了

2017年10月26日星期四

周承翰_計圖學習筆記_Week07

Week07 光源

主題(1) : Mouse Model 打光 --> Mouse調整光源

使用函式 :

光隨 mouse motion

GLFloat light_position[]={.......}

void motion(int x , int y)

{

light_position[0]=(x-150)/150*2;

light_position[1]=(y-150)/150*2;

glLightfv(GL_LIGHT0,GL_LIGHT_POSITION,light_position);

glutPostRedisplay();

}

用滑鼠拖曳便可改變光源

主題(2) : Lighting打光 Shading 光源

2017年10月19日星期四

周承翰_計圖學習筆記_Week06

Week06 打光lighting

一. 複習上週week05進度

step01 :

至小葉老師網站：http://www.cmlab.csie.ntu.edu.tw/~jsyeh/3dcg10/

下載以下三項

1. data.zip
2. win32
3. glut32.dll

step02 :

建立一個新的glut專案檔
試圖將source.zip中的glm.c/glm.h/transformation.c複製到glut專案檔中
也把data.zip準備好

step03 :

到moodle下載week05.zip
對week05.cbp按右鍵用notepad編輯
更改freeglut路徑
並回到cbp 按下F9執行

二. 開始本周week06進度--打光

step01 :

source.zip 有 transformation.c 範例 (or直接用week05的程式碼)

新增螢光筆部分 (Lighting) 程式碼到cpp中

GLfloat pos[]={0.0,0.0,-1.0,0.0}; //偷來的打光(3)

.......

glEnable(GL_LIGHTING); //偷來的3D深度測試，打開Enable
glEnable(GL_LIGHT0); //偷來的打光(2) ，打開Enable
glEnable(GL_DEPTH_TEST); //偷來的打光(1) ，打開Enable
glLightfv(GL_LIGHT0,GL_POSITION,pos);

按下F9執行後結果

Step02 : 加入Mouse & Keyboard 函式

int rotateX=0,rotateY=0,rotateZ=0;

int oldx=0,oldy=0;

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

{

printf("now : %c ( %d %d)\n ",key , x , y);
if(key=='x')rotateX++;
if(key=='y')rotateY++;
if(key=='z')rotateZ++;

glutPostRedisplay(); //貼出公告，請電腦有空時，重新展示畫面

}

void mouse ( int button , int state , int x , int y)

{
printf("button : %d state: %d ( %d %d )\n ",button,state,x,y);
//mouse drag (1) down (2) drag (3) up
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();

}

.............

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

void display()
{
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
glPushMatrix();
glRotatef(rotateX,1,0,0);
glRotatef(rotateY,0,1,0);
glRotatef(rotateZ,0,0,1);

drawmodel();
glPopMatrix();
glutSwapBuffers();
}

Summarize :

以下紅色部分為本周打光重點藍色部分為回家作業

=====================程式碼部分===========================

#include <GL/glut.h>

#include "glm.h"
#include<stdio.h>

GLMmodel* pmodel = NULL;

void

drawmodel(void)

{

if (!pmodel) {

pmodel = glmReadOBJ("data/al.obj");

if (!pmodel) exit(0);

glmUnitize(pmodel);

glmFacetNormals(pmodel);

glmVertexNormals(pmodel, 90.0);

}

glmDraw(pmodel, GLM_SMOOTH | GLM_MATERIAL);

}

int rotateX=0,rotateY=0,rotateZ=0;
int oldx=0,oldy=0;

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

{

printf("now : %c ( %d %d)\n " ,key , x , y );
if(key=='x')rotateX++;
if(key=='y')rotateY++;
if(key=='z')rotateZ++;
glutPostRedisplay(); //貼出公告，請電腦有空時，重新展示畫面

}

void mouse ( int button , int state , int x , int y)

void display()

{

glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

//3D深度測試，清 depth buffer，才能繪圖

glPushMatrix();
glRotatef(rotateX,1,0,0);
glRotatef(rotateY,0,1,0);
glRotatef(rotateZ,0,0,1);

drawmodel();
glPopMatrix();

glutSwapBuffers();

}

GLfloat pos[]={0.0,0.0,-1.0,0.0}; //偷來的打光(3)

int main(int argc, char**argv)

{

glutInit(&argc, argv);

glutInitDisplayMode(GLUT_DOUBLE | GLUT_DEPTH);

//3D深度測試，有準備好的depth buffer，才能繪圖

glutCreateWindow("week05");

glutDisplayFunc(display);

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

glEnable(GL_LIGHTING); //偷來的3D深度測試，打開Enable

glEnable(GL_LIGHT0); //偷來的打光(2) ，打開Enable

glEnable(GL_DEPTH_TEST); //偷來的打光(1) ，打開Enable

glLightfv(GL_LIGHT0,GL_POSITION,pos);

glutMainLoop();

}
========================程式碼結束========================

keyboard 執行結果

mouse&motion 執行結果

2017年10月12日星期四

周承翰_計圖學習筆記_Week05

Week05 投影角度 Viewing

至小葉老師網站：http://www.cmlab.csie.ntu.edu.tw/~jsyeh/3dcg10/

一. 下載三樣東西來完成此次作業

1. data.zip
2. win32
3. glut32.dll

二. 執行Transformation

1. 將windows解壓縮

2. 解壓縮 data ，並將資料都丟進windows資料夾

3. 將glut32.dll 丟進windows資料夾

4 . 執行

；

三 . 執行Projection.exe

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

2. glOrtho (左、右、下、上、近、遠)

glrustum(．．．．)

3. gluLookAt ( eyeX , eyeY , eyeZ , centerX , centerY , centerZ , upX , upY , upZ)

四 . 使用 Glut 偷天換日

1. 打開glut專案檔

2. 至 Moodle 下載並解壓縮小葉老師week05.zip

2017年10月5日星期四

周承翰_計圖學習筆記_Week04

Week 04
主題 : 移動、旋轉、縮放

2017/10/05

課程主題 :

將3D圖形分別做移動、旋轉、縮放

移動 (Translate) : glTranslated ( x , y , z ) /// x , y , z 為座標 (右手座標系統)

旋轉 (Rotate) : glRotated(* , x , y , z ) ; /// *為角度 , x , y , z 代表旋轉軸

縮放 (Scale) : glScaled(x, y, z); ///* x , y , z 為圖形縮放被綠

顏色 : glColor3d(x,y,z) ; /// x為紅色、y為綠色、 z為藍色

備註 : glTranslatedf(x,y,z) 浮點數座標、 glTranslated(x,y,z) double座標

課程內容 :

一. 圖形更改

實心圖形 ( Solid )

glutSolidSphere : 實心圓形

glutSolidCone : 實心錐形

glutSolidTorus : 實心甜甜圈

空心圖形 ( Wire )

glutWireSphere : 空心圓形

glutWireCone : 空心錐形

glutWireTorus : 空心甜甜圈

額外圖形
glutSolidTeapot(1); 實心茶壺

glutWireTeapot(1); 空心茶壺

step01 : 試著隱藏原程式碼的實心圓，並改為空心茶壺

step02 : 試著更改原程式碼的顏色為青藍色

二. 旋轉(Rotate)

glRotated(60,1,1,0) ; // 圖形旋轉的角度

glRotated(a,1,0,0) ; // 整個圖形隨時間的旋轉角度

三. 移動(Translate)

glTranslated( 2.4 , 1.2 ,-6); 更改為--> glTranslated( 3.5 , 2 , -6);

增加 x , y 值便是向 右上方 移動

四. 縮放(Scale)

新增 glScaled( x , y , z ) --> 更改為 glScaled(1.5, 0.5, 0.2)

增加(減少) x , y , z 值就是圖形放大(縮小)的倍率

訂閱：文章 (Atom)

2017年12月19日 星期二

week13主題 ：VR體驗 、圖學色彩系統

P語言色彩系統

多張貼圖的作品

2017年12月9日 星期六

myGL_Frustrum221編譯且執行

Viewer2D

2017年11月23日 星期四

Sound 聲音匯入程式

2017年11月17日 星期五

2017年11月2日 星期四

Week08

上課主軸 :

軟體安裝 :

啟動程式 OpenCV :

啟動程式 OpenGL :

啟動程式 OpenGL (設定貼圖) :

2017年10月26日 星期四

Week07 光源

主題(1) : Mouse Model 打光 --> Mouse調整光源

主題(2) : Lighting打光 Shading 光源

2017年10月19日 星期四

Week06 打光lighting

一. 複習上週week05進度

下載以下三項

二. 開始本周week06進度--打光

step01 :

Step02 : 加入Mouse & Keyboard 函式

Summarize :

2017年10月12日 星期四

Week05 投影角度 Viewing

一. 下載三樣東西來完成此次作業

二. 執行Transformation

三 . 執行Projection.exe

四 . 使用 Glut 偷天換日

2017年10月5日 星期四

Week 04 主題 : 移動、旋轉、縮放

2017/10/05

相關下載 :

課程主題 :

課程內容 :

一. 圖形更改

二. 旋轉(Rotate)

三. 移動(Translate)

四. 縮放(Scale)

2017年12月19日星期二

week13主題：VR體驗、圖學色彩系統

2017年12月9日星期六

2017年11月23日星期四

2017年11月17日星期五

2017年11月2日星期四

2017年10月26日星期四

2017年10月19日星期四

2017年10月12日星期四

2017年10月5日星期四

Week 04
主題 : 移動、旋轉、縮放