2017計算機圖學: 40447010S

顯示具有 40447010S_楊喻文 標籤的文章。顯示所有文章

2018年1月11日星期四

製作期末作品

製作作品中~~

這周我加上了泡泡的部分，讓作品可以隨意地增加泡泡與減少泡泡

製作期末作品

製作作品中~~

這周我製作了聲音的部分，包含波紋與顏色的變化

期末作品展示

我的作品：

網址：https://www.youtube.com/watch?v=QiN9e2Yddy8&feature=youtu.be

注意：
一開始使用的時候只有泡泡會動而已，其他甚麼都不會動，要自己操作

功能：
+ 產生小泡泡
- 減少泡泡
l 音樂重複撥放
r 音樂重播
播放/暫停
c 快轉5秒
z 後退5秒
s 儲存圖片
滑鼠點擊移動大泡泡/產生小泡泡

其他：
泡泡撞到的時候會變一下顏色

2017年12月26日星期二

楊喻文的學習手札 20171221

week15

Antialias

取樣的時候會無法完美呈現最細緻的細節，所以可以運用antialias、dithering的技術
Antialias：反鋸齒
Dithering：抖動，將墨點往四周移一些
「Antialias」的圖片搜尋結果

Antialias

Dithering

運用人類視覺，用灰階呈現，使圖形看起來很對
圖像裡可能有文字

明明是直線，卻因為視覺問題看起來是扭曲的

2017年12月17日星期日

楊喻文的學習手札 20171214

week14

Rasterization

張鈞法老師網站(計算機圖學)
http://cg.csie.ntnu.edu.tw/CG/

Rasterization (光柵化)

把一張3D的圖壓扁成2D
畫很多格子(pixel)，每個格子填上顏色
主要使用fragment shader

課程實作1：
<用processing語言>畫出三角形

//OPENGL寫法
size(600,600,P3D);
background(255);
//glBegin(GL_POLYGON);
beginShape(TRIANGLE);
//glColor3f(r,g,b);
//glVertexsf(x,y,z);
stroke(255,0,0);vertex(300,100);
stroke(255,255,0);vertex(500,500);
stroke(0,0,255);vertex(100,500);
//glEnd()
endShape();

把stroke改成fill就可以讓三角形裡面塗滿顏色

*為什麼要畫三角形？
因為任何多邊形都可以用三角形解決，所以硬體實作時只要專注在把三角形畫好就好，讓速度變快三角形畫好了，其他多邊形就不是問題了
但是繪畫出凸三多邊形還是凹多邊形會是一個問題，凹多邊形常常會看不出來，長的就跟平面依樣

(疑似凸多邊形)
畫人臉的時候常會用四邊形去畫，因為用三角形的畫人臉會太破，但是為了要求速度，很多遊戲還是會用三角形去處理

glutInitDisplayMode(GLUT_DOUBLE || GLUT_DEPTH)
有深度值才有Z值，有Z值才有3D

課程實作2：
<用processing語言>畫出重疊三角形

void setup(){
size(600, 600, P3D);
}
void draw(){
background(255);
//first 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();
//second triangle
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();
}

先看如果只有畫第一個三角形的或會長甚麼樣子

如果調整上面程式碼藍色的值(例如改成20)
可以看到三角形就會變得不一樣

不同深度(不同z值)，決定顏色要畫甚麼顏色
三角形中每一個頂點都有自己的Z值 (所有東西包含顏色、位置值、深度值都有內插)

兩個三角形中間的交界(鋸齒狀部分)，要怎麼知道歸甚麼顏色？
他會去計算Z值，內插的時候，比較接近使用者的就會被顯示出來

<期末作品示範1> 3D MARIO
與其全部想好還是不知道怎麼下手
不如邊寫邊想

但是我現在查到的資料都看不是很懂要怎麼辦QAQ

void setup(){
size(600, 400, P3D);
}
//set position of mario at center
float marioX=300, marioY=300, marioZ=0;
//mario direction
int marioDir=0; //0:nothing, 1:right, 2:left, 3:up, 4:down
void draw(){
background(#6DD5FA);//blue sky
//ground
beginShape(QUAD);//draw square
vertex(0,300,-30);
vertex(0,300,300);
vertex(600,300,300);
vertex(600,300,-300);
endShape();

//mario position
lights(); //lighting
pushMatrix();
translate(marioX, marioY, marioZ);
noStroke();
sphere(30); //if mario is a ball
popMatrix();

//mario move by direction
if(marioDir==1) marioX+=3;
if(marioDir==2) marioX-=3;
if(marioDir==3) marioZ-=3;
if(marioDir==4) marioZ+=3;
}

//move mario ny keyboard
void keyPressed(){
if(keyCode==RIGHT) marioDir=1;
if(keyCode==LEFT) marioDir=2;
if(keyCode==UP) marioDir=3;
if(keyCode==DOWN) marioDir=4;
}

void keyReleased(){
marioDir=0;
}

如果想要讓馬力歐可以跳的話可以再加空白鍵
然後呢讓馬力歐動得更滑順~

[第二版本]
void setup(){
size(600, 400, P3D);
}
//set position of mario at center
float marioX=300, marioY=300, marioZ=0, marioVX=0, marioVY=0, marioVZ=0;

void draw(){
background(#6DD5FA);//blue sky
//ground
beginShape(QUAD);//draw square
vertex(0,300,-300);
vertex(0,300,300);
vertex(600,300,300);
vertex(600,300,-300);
endShape();

//mario position
lights(); //lighting
pushMatrix();
translate(marioX, marioY, marioZ);
noStroke();
sphere(20); //if mario is a ball
popMatrix();

marioX+=marioVX;
marioZ+=marioVZ;
if(jumping){
marioY+=marioVY;
marioVY+=0.98;
if(marioY>300) {jumping=false; marioVY=0; marioY=300;}
}
}

//let mario jump
boolean jumping=false;

//move mario by keyboard
void keyPressed(){
if(keyCode==RIGHT) marioVX=3;
if(keyCode==LEFT) marioVX=-3;
if(keyCode==UP) marioVZ=-3;
if(keyCode==DOWN) marioVZ=3;
if(keyCode==' ' && jumping==false) {marioVY=-20; jumping=true;}
}
void keyReleased(){
if(keyCode==RIGHT || keyCode==LEFT) marioVX=0;
if(keyCode==UP || keyCode==DOWN) marioVZ=0;

}

(跳起來=D)

<期末作品示範2> Google 程式兔子
有用打光、變顏色
directionallight(r,g,b, x,y,z);//rgb為顏色 xyz為打光方向

其他部分覺得速度有點快
來不及打

2017年12月7日星期四

楊喻文的學習手札 20171207

week13

VR體驗

錄VR儀器

GoPro

可以錄外在的環境

OMNI

-> gopro的立方體，可以360度錄影，拍照畫質4K

中文版網頁

https://zh.shop.gopro.com/International/virtualreality

英文版網頁

https://shop.gopro.com/International/virtualreality

在youtube上可以利用拖拉來觀看360度內容

ricon theta

360度VR相機

分為$12000和$8000，差別在相機鏡頭

路前後180度魚眼鏡頭，再利用合成變成一個球體的護面

播放VR儀器

Microsoft HoloLens

https://www.microsoft.com/en-us/hololens

可以運用VR在空中玩耍

(但是沒有頭盔頭很容易動來動去，就暈了)

google project tango (google tango)

http://get.google.com/tango/

搭配AR使用的平板

準確定位，追蹤

耗電

台灣買不到，但是有授權給華碩(台)、聯想(中)

華碩ZenFone AR

搭配AR使用的手機

比上一個產品便宜

手機盒子上蓋可以組合成一個紙盒VR眼鏡

APP關鍵字：hologram

色彩

畫彩虹~

size(255,255);

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

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

stroke(x,y,255); //色階飽和度暗度

point(x,y);

}

size(255,255);

colorMode(HSB, 255);
//可以用RGB或HSB兩種

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

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

stroke(x,y,255);

point(x,y);

}

HSB是用彩度亮度飽和度去調，就可以看到彩虹

RGB是用紅綠藍去調，看到的效果和剛剛差不多

點播

如何用貼圖&蟑螂移動可以看到軌跡

*避免圖檔當掉，應該要把圖檔開在main()當中，而不是在display中

EX. roach.zip

如何等速移動結果

EX. roach_time.zip

但是好像沒有放到moodle上

KTV特效

processing minim資料庫

光劍暈開的感覺

色彩變化曲線 (色彩固定綠色，飽和度中間不飽和，兩側飽和)

2017年11月30日星期四

楊喻文的學習手札 20171130

week12

Scene 場景

Mocap、Skeleton、Model

1.

到moodle下載"myGL_..."開頭的檔案

跑執行檔體驗一下(會出現四個框框)

.cpp開啟試著自己編譯

但是其實要自己開一個openGL的專案，再把.cpp內容丟到main當中，再加一些工

加工

這算是新版本，因為當初覺得不用傳參數，但是好像又應該傳參數才對，所以有兩種版本

執行結果會和上面的.exe執行結果相同

2.

開啟processing

到速寫本下載兩個東西

I. collada

II.picking

都下載好之後，到檔案->範例程序

A.

找到collada資料夾，打開Viewer2D

直接執行之後，可以看到灰灰的畫面

如果想要看圖片，找到框紅線這行，把其中一個false改成true

就可以看到圖片(每個false都是一個模型)

現在我把第三個false改成true，可以看到一張模型出現了

按照上面指示，按不同鍵的時候，會有不同效果出現

(我按了很多不同鍵+滑鼠之後的結果)

讀模型三部曲

1.宣告模型

2.讀入模型

3.做模型

1.宣告模型

2.讀入模型

model=.....

3.做模型

do......

B.

開啟picking的simple

直接執行可以看到兩個小立方體在轉轉轉

本來畫面應該是一個橘色和一個黃色框框在轉，沒殘影

然後滑鼠移動到橘框框上時，外面黑框框會變成橘色，黃色也是

但是因為本人筆電顯卡有問題，所以顯示不出來>"<

3.

展示一些其他作品

2017年11月23日星期四

楊喻文的學習手札 20171123

week11

聲音 - 音效、音樂

平台：Windows, Java(mac用), etc

*processing語言是用java作為base

事前提要：

*要注意電腦上的codeblocks上面是有裝圖學要用的MinGW編譯環境，並且將相關設定都設好

今天要選擇的是glut專案!

目標：一行程式碼讓他產生聲音

PlaySound：

PlaySoundw() U字元，兩個byte以上

PlaySoundA() Ascii檔名我們要用的

#include <mmsystem.h> //使用multimedia system多媒體系統

在main當中加上這行

PlaySoundA("file.wav",NULL,SND_ASYNC);

//要讓他有聲音，檔名，在哪裡，如何播

//(SYNC不等待同步 ASYC等待同步[等聲音結束才開始跑下一行程式])

去google搜尋"wav 聲音"就可以找到很多wav的聲音

之後放到freeglut/bin中

都成功之後按F9就會有聲音瞜~~

如果把全部原本的程式碼全砍掉，只剩下播音樂的程式碼的話

要注意的是因為程式很快就結束了，所以要馬就用等待同步(SYNC)

要馬就用一個等待輸入的東西，讓聲音可以播放不受干擾

*要注意的是這行程式只能播wav檔

要用ma3要換成別的方式：

先到fb社團中下載CMP3_MCI.h

直接丟到跟cbp一樣的位置

之後include到自己的專案中

音樂檔案放在freeglut/bin中

基本上以上做完這樣就可以了，但是依樣會有音樂還沒放到程式就結束的問題，

所以要注意

#include <CMP3_MCI.h>

CMP3_MCI mp3;

int main()

{

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

mp3.Play();//Play3檔

}

通常音效檔用wav就好，音樂檔再用mp3，因為撥mp3會有delay

在P語言中撥音樂

到processing中的速寫本->引用函式庫->添加庫文件

搜尋sound之後會看到這樣的頁面，用打勾勾的哪一個都可以，但是因為有新舊問題，有些電腦會不能跑，要自己注意

程式碼如下：

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

Minim minim;//the word system

AudioPlayer player;//corresponding to one mp3 file

AudioPlayer player2;

void setup(){

minim = new Minim(this);//constructure of Minim Object

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

player.play();//play music

}

void draw(){}//卡著不要讓音樂太快結束

音樂放進去後

按下執行之後就可以放音樂瞜

OTHER：

FBX SDK Autodesk

2017年11月16日星期四

楊喻文的學習手札 20171116

week10

期末作品說明

SIGGRAPH 一堆對電腦圖學有興趣的專家所組成的團隊
聲音也可以算計算機圖學，聲音畫在眼睛上變視覺，畫在耳朵上就變聽覺

使用上週processing
新增Android模式

等安裝好之後就可以自己寫Android APP了
(過程中發生的問題應該都可以自己解決)
寫完之後連接到自己的手機，手機要開開發者模式！

雖然上傳很久，但是最後還是成功了>"<

小畫家的寫法：
//this is like a painter on phone
void setup(){
size(1080,1920);
}

void draw(){}

void mouseDragged(){
strokeWeight(4);//change weight
stroke(255,0,0); //change color RGB
line(mouseX, mouseY, pmouseX, pmouseY);

}

這是偷偷抄到別堂課的blog可以參考一下下=D
http://2016interaction.blogspot.tw/