2017計算機圖學: 40147027S

顯示具有 40147027S_黃天裕 標籤的文章。顯示所有文章

2018年1月11日星期四

40147027S-Week18

40147027S-Week04

Translate(位移)：glTranslated( x, y, z)：朝( x, y, z)方向平移
Rotate(旋轉)：glRotated( degree, x, y, z)：以( x, y, z)為軸轉degree角度

PS：右手座標系統
Scale(縮放)：lScalef( x, y, z)：x,y,z為縮放率，x, y, z座標分別縮放為原本的 x, y, z倍

40147027S-Week09

Bump Mapping

https://www.openprocessing.org/sketch/249457　下載code
執行

Environment Mapping

PImage img;

void setup()

{

img=loadImage("banana.jpg");

size(600,600);

}

void draw()

{

image(img,mouseX,mouseY);

}

40147027S-Week10

以processing與手機互動

將 processing 右上角的 java改成app mode
下載 android模式

彈力球範例：

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;
}

40147027S-Week12

Processing

開啟速寫本，下載collada、picking
開啟範例程序
開啟Viewer2D，執行
將部分false改成true

OpenGL

下載myGL_Frustrum221_MultiView_2012_1221-20171130T060949Z-001.zip
加上：
int main(int argc, char**argv)
glutInit(&argc, argv);
執行

40147027S-Week13

AR體驗：

gopro*8
環景照像機
AR眼鏡
微型電腦

Processing 色彩應用

RBG色彩條：
size(255,255);
colorMode(RGB,255);
for(int x=0;x<255;x++)
{
for(int y=0;y<255;y++)
{
stroke(x,y,255);
point(x,y);
}
}
HSB色彩條：
size(255,255);
colorMode(HSB,255);
for(int x=0;x<255;x++)
{
for(int y=0;y<255;y++)
{
stroke(x,y,255);
point(x,y);
}
}
多重貼圖範例：下載roach.zip

40147027S-Week14

Processing 畫三角形

邊緣上色：
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();
填滿上色：
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();
雙三角形重疊
void setup()
{size(600,600,P3D);
}
void draw()
{
background(255);
beginShape(TRIANGLE);
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();
}

40147027S-Week15

期末作品分析：

背景圖著作，不能切到主件，要改變深度測試：
glDisable(GL_DEPTH_TEST);
之後做主件描繪時再開啟：
glEnable(GL_DEPTH_TEST);
投籃機範例製作 (Processing)
踩地雷範例製作 (Processing)

課堂進度：

Sampling Theorem：放大縮小取樣不同
Antialias(反鋸齒)：
Dither(抖動)：經過抖動處理過的影像，會更加地柔順

40147027S-Week16

期末作品製作：

selection 使用 (openGL)
message box (openGL)
聲道控制 (Processing)
遊戲軌道製作 (Processing)
水波紋分享　http://madebyevan.com/webgl-water/
PS:與我的主題操作相似

2017年11月23日星期四

40147027S-Week11

讀wave檔：

在codeblocks 新增一個GLUT project專案
將.wave檔放入C:\Users\user\Desktop\freeglut\bin
呼叫mmsystem.h
並輸入以下程式碼

讀mp3檔：一般的讀音檔函式只能呼叫.wave檔

加入"CMP3_MCI.h"檔入專案
將.mp3檔放入C:\Users\user\Desktop\freeglut\bin
在檔案輸入以下程式碼：

使用Processing 程式讀音檔

將音檔拉入檔案中
在檔案輸入以下程式碼

2017年11月2日星期四

40147027S-Week08

安裝CodeBlocks，再裝OpenCV 2.1.0，安裝OpenCV 2.1.0前先關掉CodeBlocks
開啟CodeBlocks，建立project - console application - c++
開啟https://www.youtube.com/watch?v=iu6RI4ns4n8
複製貼上程式碼：
#include "opencv/highgui.h" int main() { IplImage * img=cvLoadImage("a.jpg"); cvNamedWindow("hello"); cvShowImage("hello", img); cvWaitKey(0); return 0; }
下載earth map 圖片
https://www.google.com.tw/search?q=earth+map&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjo5tfIr5_XAhXLXbwKHe3hC-gQ_AUICigB&biw=1920&bih=974#imgrc=OXFdLHR6X9lO_M:
改變設定 - project - 右鍵 - Build Options
設定 Search directories - Compiler - Add - C:\OpenCV2.1\include
設定 Search directories - Linker - Add - C:\OpenCV2.1\lib
設定 Linker settings - Add - C:\OpenCV2.1\lib\cv210.lib、cxcore210.lib、highgui210.lib

2017年10月26日星期四

40147027S-Week07

改變光的投影：

const GLfloat light_position[] = { 2.0f, 5.0f, 5.0f, 0.0f };
//為光源位置，去掉const，因為等下會改參數
glutMotionFunc(montion);
//增設一行motion指令
void motion(int x, int y)
//設定motion函式
{
light_position[0] = (x-150)/150*2;
light_position[1] = -(y-150)/150*2;
glLightfv(GL_LIGHT0, GL_POSITION, light_position);
glutPostRedisplay();
}

2017年10月19日星期四

40147027S-Week06

加入打光：

下載檔案week05.zip、freeglut-MinGW-3.0.0-1.mp.zip (moodle)
開啟codeblocks、開啟compiler、取消勾選c++11
開啟week05檔案
加入燈光程式碼：
glEnable(GL_DEPTH_TEST);//01 深度測試
glEnable(GL_LIGHT0);//02 開啟某燈光
glEnable(GL_LIGHTING);//03 開啟某燈光
glLightfv(GL_LIGHT0, GL_POSITION, pos);//04設定燈光位置
GLfloat pos[] = { 0.0, 0.0, -1.0, 0.0 };//05設定位置
glDisable(GL_LIGHTING);//06 關掉燈光

加入mouse、keyboard

glutMouseFunc(mouse); //開啟mouse
glutKeyboardFunc(keyboard); //開啟keyboard

2017年10月12日星期四

40147027S-Week05

下載檔案 http://www.cmlab.csie.ntu.edu.tw/~jsyeh/3dcg10/
[data] [win32] glut32.dll
解壓縮至一個資料夾
開啟：Transformation.exe，變更旋轉放大參數
開啟：Projection.exe，變更運鏡參數
按右鍵可改變參數種類：
fovy為視角大小0~180度

40147027S-Week03

作品分析

在forloop讀檔寫入電腦，會造成程式速度降低
fscanf(f, "%f %f %f", &r, &g, &b);
將每一格pixel放大10倍，可避免放大時縮針，
glPointSize(10.0f);，讀圖時會一格一格寫入
介面重新上色時，也須加入深度
glClear(GL_COLOR_BUFFER_BIT);
->glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);

=============================================

將3D圖檔，變成cpp檔

下載3d exploration
http://www.freespacemods.net/e107_plugins/download/download.php?view.129
下載3D free圖檔(.obj/...)
另存新檔，選取cpp格式

2017年9月21日星期四

40147027S-Week02

Glut_Project02

將Glut_Project01的程式碼刪減後，
加入一行 glClearColor(1,0,0,0);，改變背景顏色
再加入一行 glutSolidTeapot(0.3);，設定茶壺座標
按下F9/Build and run，即跳出紅色背景茶壺
加入一行 glColor3f(1,1,0);，改變茶壺顏色
如果將glClearColor(1,0,0,0);，
移至glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);下方
則一開始背景呈黑色，移動式窗後，會重新更新成紅色
刪除glutSolidTeapot(0.3);，改由自行畫圖形
glBegin(GL_POLYGON);，開始畫多邊形
glVertex3f(1,0,0);，第一個點
glVertex3f(-1,0,0);，第二個點
glVertex3f(-1,0,0);，第三個點
glEnd();，結束繪畫