2017計算機圖學: 40447027S

顯示具有 40447027S_詹智鈞 標籤的文章。顯示所有文章

2018年1月18日星期四

Part1.Antialias

1.Alias(鋸齒)
2.Antialias(反鋸齒)
3.Dither(抖動)

(https://i.stack.imgur.com/pA7uy.png)

光柵化

Part1.繪製三角形

mode1.描邊
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();

mode2.填滿
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();

mode3.重疊
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();
}

James的圖學筆記Week13

Part1.AR
Part2.Processing 色彩模式

1.RGB

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

2.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);
}
}

part3.多重貼圖

下載roach.zip

2017年11月30日星期四

James的圖學筆記week12

Part1.myGL_Frustrum221編譯且執行

步驟1.下載並解壓縮，網址:
https://moodle2.ntnu.edu.tw/pluginfile.php/218519/mod_folder/content/0/myGL_Frustrum221_MultiView_2012_1221-20171130T060949Z-001.zip?forcedownload=1
步驟2.codeblocks建立GLUT專案
將解壓縮後的程式碼全部複製貼上到main.cpp
步驟3.執行(這裡我遇到了一個問題"freeglut ERROR: Function called without first calling 'glutInit'."，於是我參考了https://stackoverflow.com/questions/26685010/qt-using-freeglut-error-with-glutinit的做法，將int main(int argc,char *argv[])補上，再將glutInit( & argc, argv );這行指令加在main裡面)

part2.viewer2D

步驟1.開啟processing並添加庫文件"collada"
步驟2.從文件->範本程序->viewer2D
步驟3.將boolean modelsEnabled[] = new boolean[]{false,true,false,false,false,false,true};這行布林陣列隨意一個設為true然後執行

步驟4.按a,s,d,z,x,c,1,2,3,p,o決定模式，再用滑鼠去控制

2017年11月23日星期四

James的圖學筆記week11

Part1.音效播放

#include<mmsystem.h> 使用多媒體系統
PlaySoundA("檔名.wav", NULL, SND_SYNC);
SND_ASYNC//無等待同步
SND_SYNC//等待同步

Part2.mp3播放

#include "CMP3_MCI.h"
CMP3_MCI mp3;
mp3.Load("檔名.mp3");
mp3.Play(); 播放直到程式結束

Part3.minim函式庫

Processing 3.3.6 Minim

import ddf.minim.*;//#include
Minim minim;
AudioPlayer player;

void setup()
{
minim = new Minim(this);
player = minim.loadFile("檔名.mp3");
player.loop();
player.play();
}

2017年11月9日星期四

James的圖學筆記week9

Part1. bump mapping :凹凸貼圖

步驟1. 去 http://www.openprocessing.org/sketch/249457 觀摩別人的程式碼
步驟2. moodle下載processing 3壓縮檔，執行processing.exe

步驟3. 貼上程式碼

PImage img=loadImage("dororo-147.jpg");//請先將圖片拖進exe檔

size(2560,1600);

image(img,0,0,551,551);

//fill(#51C3FA);//填色

//rect(0,0,300,300)//參數分別為起始X,起始Y,圖形長,圖形寬

步驟4.加入滑鼠控制

PImage img;

void setup()

{

img=loadImage("dororo-147.jpg");

size(2560,1600);

}

void draw()

{

image(img,mouseX,mouseY,551,551);

}

進階(小遊戲)

PImage imgdororo, imgground, imgbackground;

void setup()

{

imgdororo=loadImage("dororo-003.png");

imgground=loadImage("ground.jpg");

imgbackground=loadImage("IMG_7805-3.jpg");

size(1280, 800);

}

int w=197, h=267;

float imgX=0, imgY=0, GV=0;

int v=30, jump=300, doublejump=0;

void draw()

{

image(imgbackground, 0, 0);

for (int i=0; i<20; i++)image(imgground, i*100, 700, 100, 100);

if (imgY+h>=700)

{

imgY=700-h;

doublejump=0;

GV=0;

}

if (imgY<700-h)imgY+=GV;

GV+=0.98;

image(imgdororo, imgX, imgY, w, h);

}

void keyPressed()

{

if (keyCode==UP||key==' ')

{

if (doublejump<2)

{

imgY-=jump;

doublejump+=1;

GV=0;

}

if (keyCode==RIGHT)imgX+=v;

if (keyCode==LEFT)imgX-=v;

}

2017年11月2日星期四

James的圖學筆記week08

Part1.opencv texture

步驟1.下載OpenCV 2.1.0
步驟2.安裝至C槽
步驟3.codeblocks開啟console app專案
步驟4.cbp按右鍵build option->research directories->compiler:add opencv/include
build option->research directories->compiler:add opencv/lib
build option->linker setting:add opencv/lib/cv210.lib
opencv/lib/cxcore210.lib
opencv/lib/highgui210.lib

步驟5.main加入以下程式
#include <opencv/highgui.h>
int main()
{
IplImage * img=cvLoadImage("earth.jpg");
cvNamedWindow("hello opencv");
cvShowImage("hello opencv", img);
cvWaitKey(0);
return 0;
}
#注意:earth.jpg是自訂的檔案，請放一張圖片在cbp同一層目錄

Part2.opencv+freeglut

步驟1.建立GLUT專案
步驟2.參考Part1的方式把build option的設定都準備好

步驟3.將earth.jpg複製到freeglut資料夾的bin資料夾

Part3.轉動地球

步驟1.將Part2的專案程式碼改寫(外掛，moodle上的week08earth.zip->main)

步驟2.改成以下程式碼

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

}

轉起來啦

James的圖學筆記week07

設置光源參數：
void glLightfv ( GLenum light, GLenum pname, const GLfloat * params);
void glLightiv ( GLenum light, GLenum pname, const GLint * params);
params：指定光源光的參數pname將被設置為的值或值的指標

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

2017年10月19日星期四

James的圖學筆記week6

Part1.編譯 Transformation

步驟1.下載week05.zip
步驟2.將data資料夾放入解壓縮後的week05資料夾
步驟3.用notepad++編輯專案檔(.cbp)的路徑
1.<Option working_dir="." />
2.<Add directory="C:/Users/使用者名稱/路徑/freeglut/include" />

步驟4.從transformation.cpp複製以下程式碼貼在glutDisplayFunc(display);這行的下面
glEnable(GL_DEPTH_TEST);
glEnable(GL_LIGHTING);
glEnable(GL_LIGHT0);

glLightfv(GL_LIGHT0, GL_POSITION, pos);

再將GLfloat pos[] = { 0.0, 0.0, -1.0, 0.0 };放在main函式的外面

步驟5.執行

完成拉~~

part2.加入鍵盤與滑鼠控制

步驟1.加入幾個函式

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

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

{

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

switch(key)

{

case '1':

{

rotateX++;

break;

}

case '2':

{

rotateY++;

break;

}

case '3':

{

rotateZ++;

break;

}

glutPostRedisplay();

}

int tmpx=0,tmpy=0;

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

{

printf("(%d %d %d %d sasasas)\n",botton,state,x,y);

printf("<%d %d% d>\n",rotateX,rotateY,rotateZ);

printf("<%d %d>\n",tmpx,tmpy);

if(state==GLUT_DOWN)

{

tmpx=x;

tmpy=y;

}

void motion(int x,int y)

{

rotateY+=-(x-tmpx);

rotateX+=-(y-tmpy);

tmpx=x;

tmpy=y;

glutPostRedisplay();

}

步驟2.在display函式加入以下程式碼

glPushMatrix();

glRotatef(rotateX,1,0,0);

glRotatef(rotateY,0,1,0);

glRotatef(rotateZ,0,0,1);

drawmodel();

glPopMatrix();

步驟3.在main的glutDisplayFunc(display);下面加入以下程式碼

glutMotionFunc(motion);

glutMouseFunc(mouse);

glutKeyboardFunc(keyboard);

2017年10月12日星期四

James的圖學筆記week5

part1.3D CG

步驟1.到jsyeh.org/3dcg10下載(data,win32,glut32.dll)三個檔案

步驟2.把data和win32解壓縮後，把glut跟data資料夾丟進解壓縮完成的windows資料夾

步驟3.執行Transformation.exe

步驟4.在綠色的參數上滑動就可以調整數字

part2.透視

步驟1.開啟windows裡的projection.exe

步驟2.調整參數(fovy(視野),aspect(y/x比例),nNear,nFar)

步驟3.垂直投影(按O)

步驟4.調整參數(left, right,botton,top,near,far)(按R重設參數)

2017年10月5日星期四

James的圖學筆記week4

Part1.圖形旋轉
步驟1.開啟glut專案
步驟2.修改display函式裡面的程式碼
步驟3.改成glutSolidTeapot(1);||glutSolidCube(1);||glutWireIcosahedron();

步驟4.參數調整
glTranslated(-2.4,1.2,-6);可以移動
glRotated(60, 1, 0, 0);可以改變旋轉//60是角度， 1, 0, 0是三個軸向
glScalef(0.5, 0.5, 0.5)可以調整縮放大小(三個軸向個別的倍率)

2017年9月28日星期四

James的圖學筆記week3

part1.

學姊的超強程式

步驟1.下載學姊的程式碼和txt檔

步驟2.建立glut專案(參見https://2017cg.blogspot.com/2017/09/jamesopengl.html

步驟3.將學姊的程式貼在main.cpp

步驟4.將txt檔放在glut/bin資料夾

步驟5.執行

超厲害的對吧

part2.

3D圖形
步驟1.下載3D exploration
步驟2.下載3D模型
步驟3.用3D exploration開啟模型
步驟4.另存模型為.cpp(sample app)
步驟5.用codeblocks新增openGL專案
步驟6.將剛才匯出的cpp加入專案並執行(有問題的部分就註解掉)
成功執行拉~~~~~