2014-08-03

[OF]分解吧!長頸鹿!

既然都說自己最近偏好長頸鹿了
文章首發就要長頸鹿有關才合乎情理才是


================分隔線=============

最初的目標是想嘗試做一個將image分解炸裂的效果
中間經歷了好幾小時的Shader Bug後
得到了一個完全沒用到Shader的奇怪Demo...





環境簡介:
Windows 7 + Visual Studio 2012 + OF 0.8.1
Addons:
ofxAnimatable (純粹用來做飛出去)

其實整個概念很簡單, 就是將要分解的影像以貼圖的方式貼在數個Objects上, 再讓這些Objects去做位置改變
以一張圖來說明的話...

Box_是OF內建中的一種3D Object "ofBoxPrimitive"
w, h代表影像的寬與高
透過mapTexCoords就能設定每個Box貼圖時顯示的位置
只要位置都有設定正確, 就會看到跟原圖沒什麼差別的畫面, 但其實已經全部都是Box了!!!
在Box移動的部份, 我直接使用了另一變數來管理Box的Draw的位置
並使用ofxAnimatableFloat來去改變這個變數
接下來就只要用自己喜歡的方式去設計移動的方式就可以看到長頸鹿分解了!!
是不是很簡單啊?(其實我自己都不知道自己在寫啥)

設定mapTexCoords的程式碼
1:  float fTexWidth_ = 1.0/iXNum_;  
2:  float fTexHeight_ = 1.0/iYNum_;  
3:  for(int y = 0; y < iYNum_; y++)  
4:  {  
5:       for(int x = 0; x < iXNum_; x++)  
6:       {  
7:            ofBoxPrimitive     oNewBox_;  
8:            oNewBox_.set(fWidth_, fHeight_, 10.0);  
9:            float u1_, u2_, v1_, v2_;  
10:            if(x == 0)  
11:            {  
12:                 u1_ = 0.0;  
13:            }  
14:            else  
15:            {  
16:                 u1_ = fTexWidth_ * x;  
17:            }  
18:            if(y == 0)  
19:            {  
20:                 v1_ = 0.0;  
21:            }  
22:            else  
23:            {  
24:                 v1_ = fTexHeight_ * y;  
25:            }  
26:            u2_ = fTexWidth_ * (x+1);  
27:            v2_ = fTexHeight_ * (y+1);  
28:            oNewBox_.mapTexCoords(u1_, v1_, u2_, v2_);  
29:            _oBoxList.push_back(oNewBox_);  
30:            _oPos.push_back(ofPoint(fWidth_ * x + fWidth_/2, fHeight_ * y + fHeight_/2, 0));  
31:            _oDrawPos.push_back(ofPoint(fWidth_ * x + fWidth_/2, fHeight_ * y + fHeight_/2, 0));  
32:            ofxAnimatableFloat oNewFloat_;  
33:            oNewFloat_.setDuration(5.0);  
34:            oNewFloat_.setCurve(EASE_IN_EASE_OUT);  
35:            oNewFloat_.setRepeatType(LOOP_BACK_AND_FORTH_ONCE);  
36:            _oMoveAnimateY.push_back(oNewFloat_);  
37:       }  
38:  }  

這個部份就只有初始化每個Box與Draw的位置並加入container
因為動畫的部份其實只是草草了事就不介紹了
下次有機會再專門寫一個關於ofxAnimatable的介紹吧

沒有留言:

張貼留言