Processing在布林運算的限制上相當嚴格
使用者必須自行定義幾何圖形的公式
才能夠取得偵測範圍與互動物件之間的關係
例如以下的範例<一>
僅是實作這樣的行為
1.偵測滑鼠位置
2.若滑鼠在矩形按鈕的範圍內 則按鈕會變為紅色
我們必須定義判斷式為此
//recW, recH各為矩形的長度及寬度
//recW, recH各為矩形的長度及寬度
If(
//滑鼠X座標在矩形的X向度範圍內
(mouseX>width/2-(rectW/2))&&(mouseX<width/2+(rectH/2))
//滑鼠Y座標在矩形的Y向度範圍內
(mouseY>width/2-(rectW/2))&&(mouseY<width/2+(rectH/2))
){
fill(255,0,0);
}else{
fill(0);
}
rect(width/2-rectW/2,height/2- rectH/2,rectW,rectH);
範例<一>
若是要如範例<二>實作橢圓形的按鈕
則我們將需要將判斷式依據橢圓公式進行修改
//ellipW, ellipH各為橢圓的長度及寬度
If(
//橢圓方程式 (x*x)/(a*a)+(y*y)/(b*b)=1
//注意ellipW及ellipH須宣告為float 否則判斷式之值會為整數
(((((mouseX-width/2)*(mouseX-width/2))/(ellipW/2*ellipW/2)) +
(((mouseY-height/2)*(mouseY-height/2))/(ellipH/2*ellipH/2)))<1){
fill(255,0,0);
}else{
fill(0);
}
ellipse(width/2- ellipW/2,height/2- ellipH/2, ellipW, ellipH);
範例<二>
然而若是如範例<三>的不規則形按鈕
或是我們要計算碰撞、交集、聯集等狀況時
自行定義布林範圍的公式將是一件相當困難而複雜的事情
範例<三>
這時若使用geomerative這個函式庫我們將可以省去許多公式設定的麻煩
將連結頁面中的函式檔geomerative-34.zip下載回來後解壓縮
並放到Processing中的libraries資料夾中後
我們即可以開始使用geomerative中的相關函式
geomerative這個函式庫主要是將RGeomElem當作主要的interface class
其中RGeomElem可以用.toPolygon()或.toShape()等method
被實作為RShape或是RPolygon物件
須注意只有RShape物件可以做即時碰撞(intersects)的method
而RPolygon物件則可以操作差集(diff, xor)或聯集(union)等圖形method
因此在實作上需要注意的只有
所有要被互動偵測的物件要轉換為RShape物件
而要顯示的圖形物件則是RPolygon物件即可
範例<四>是一個使用geomerative函式庫操作RPolygon和RShape的練習
是不是比使用公式簡單明瞭多了呢
import geomerative.*;
//兩個要顯示的按鈕
RPolygon rp1,rp2;
//要進行碰撞區域偵測的物件都必須為RGeomElem
RGeomElem rpu;
//要進行碰撞偵測的游標物件當然也必須是RGeomElem
RGeomElem mo;
void setup(){
//宣告要進行差集顯示的按鈕物件為Polygon
rp1 = RShape.createCircle(width/3, height/2, width/2).toPolygon();
rp2 = RShape.createCircle(width*2/3, height/2, width/2).toPolygon();
rpu = rp1.xor(rp2);
//讓圖形可以即時運算，如果要用geomerative函式庫一定要在setup加入這行
RG.init( this );
}
void draw(){
background(255);
fill(0,0,0,120);
rp1.draw();
rp2.draw();
//游標物件必須在draw()程式內才能被即時運算位置
//mo必須為RShape物件才能進行碰撞偵測
mo = RShape.createCircle(mouseX,mouseY,1);
mo.draw();
//偵測碰撞事件一樣必須在draw()程式內才能被即時運算是否有碰撞產生
//rpu與mo兩者必須都為RShape物件才能進行碰撞偵測
if(rpu .toShape().intersects(mo)){
fill(255,0,0);
rpu.draw();
}
}
最後操作出來的結果如下
範例<四>
更多相關的geomerative使用資訊
可以在這裡取得它們的API
All Source code by Ouranus's blog: M+A Media Lab
Built with Processing
留言列表
