2010年4月17日 星期六

Panda_in_ChineseOpera (Processing_Tutorial_if_else)


video inside



利用 if_else 條件式 使得

滑鼠移動至座標四向度位置
將產生貓熊黑眼圈
"黑"顏色變化

If_else 是程式語言中簡單邏輯的開始
照字面來說就是如果....其餘....

如果今天出太陽 我就去海邊
如果陰天 我就去打球
如果下毛毛雨 我就去逛街
其餘的狀況 我就去圖書館

依照PROCESSING的語法







將之前的例子套用進來(口語化一點):






else因為就是除了上述所有條件之外的狀況
所以不需要再給他條件
依照這個邏輯
如果滑鼠X方向移動到大於視窗的1/2 則畫圓
如果滑鼠X方向移動到小於視窗的1/2 則畫方

這樣的PROCESSING程式 就會變成
if (滑鼠X方向移動到大於視窗的1/2) {畫圓}
if (滑鼠X方向移動到小於視窗的1/2) {畫方}

程式如下:
void setup(){

  size(600,600);//視窗大小
  background(0,255,0);//背景填色綠色
  smooth();//所畫的圖要圓滑
}

void draw(){
  if(mouseX>width/2){//滑鼠X方向移動到大於視窗的1/2
  background(0,255,0);
  //這行必須要有 把之前的圖蓋掉 否則會殘留之前的圖
  fill(255,0,0);//之後的圖形填色紅色
  ellipse(width/2,height/2,width/2,height/2);
  //以視窗中心畫圓,半徑為視窗一半
}

else{
  //其餘狀況就是滑鼠X方向移動到小於視窗的1/2
  //所以不需特別說明

  background(0,255,0);
  //這行必須要有 把之前的圖蓋掉 否則會殘留之前的圖
  fill(0,0,255);//之後的圖形填色藍色
  rectMode(CENTER);//畫方模式改成中心畫方
  rect(width/2,height/2,width/2,height/2);
  //以視窗中心畫方,長寬為視窗一半
  }

}









注意到在此寫程式時
前方若有 // 雙斜線 則會忽略該行
通常我們會用這種方式寫註解
關於畫圓畫方及滑鼠的操控
可看前篇 space_eye

再來就來看看上面影片
熊貓怎麼畫的
看過影片就知道
滑鼠移到座標四個向度
使得熊貓黑眼圈顏色做改變

所以邏輯就會是
if (滑鼠在左上角){黑眼圈黑色}
if (滑鼠在右上角){黑眼圈藍色}
if (滑鼠在左下角){黑眼圈綠色}
if (滑鼠在右下角){黑眼圈紅色}
用程式來說的話就是:





&&在這邊就是"和"的意思
表示聯集 表示兩邊同時要成立的狀況
才可以執行後面{}內的程式

在熊貓程式中
有運用幾個新的功能
在此說明一下
translate(x,y)
移動原點(0,0)到(x,y)點
有時候可以利用這個功能
方便畫圖形
可參考translate()
所以
translate(x,y)//移動原點(0,0)到(x,y)點
translate(-x,-y)再將原點從(x,y)移回(0,0)

另外還有使用
for loop畫黑眼圈
之後會另闢一篇說明
for loop是重要的邏輯觀念之一
想看也可先參考

附上熊貓此程式的下載
如有問題可以寫信給我
我可以再提供您程式
下載來玩玩看吧


2 則留言:

  1. http://www.youshare.com/ckw482/091c7c90892db421.pde.html

    回覆刪除
  2. Can you re-upload the program again? The link is not working anymore.
    http://www.youshare.com/ckw482/091c7c90892db421.pde.html
    I really want it as I am struggling with my own product and I want to know what did I go wrong. thanks a lot!

    回覆刪除