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

//注意ellipWellipH須宣告為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()程式內才能被即時運算是否有碰撞產生

        //rpumo兩者必須都為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


創作者介紹
創作者 OT 的頭像
OT

M+A Media Lab

OT 發表在 痞客邦 留言(0) 人氣()