2010年4月17日 星期六

space_eyes(Processing_Titorial_mouseX & mouseY) 滑鼠操作畫圖

video inside


利用簡單的滑鼠移動可以製造一般畫圖軟體需要長時間繪製的效果
這邊介紹"mouseX""mouseY"

mouseX 和 mouseY 分別代表滑鼠在視窗上移動的 X Y值

1. 隨著滑鼠移動改變"圓"的大小
記得畫圓的功能寫法
ellipse(圓心X座標, 圓心Y座標, 圓形的X橫向寬度, 圓形的Y縱向長度)
程式如下:
void setup(){
size(400,400); //視窗大小
background(255); //背景顏色
smooth(); //所畫的圖要圓滑
}
void draw(){
ellipse(width/2, height/2 ,mouseX, mouseY);//畫圓
}

看到void setup(){} 還有 void draw(){}
不用擔心
void setup(){}把他想像成設定值
所有需要設定的 如視窗尺寸 背景顏色
都在此完成
void draw(){} 把他想像成畫圖
所有需要畫圖的動作都在這邊完成

另外
width 等於視窗寬度
height 等於視窗高度

在void setup(){}裡面給定值size(400,400)之後
只要在void draw(){}裡面的
width就是指size()中前面的400
height就是指size()中後面的400
這樣的好處是 一但改了視窗的SIZE
其他圖形設定也會跟著變
不用一個一個去重設數字

將程式貼到PROCESSING去執行
(建議自己用打的)
出來的結果應該是這樣
















那試試看如果畫方的可以嗎?
2. 隨著滑鼠移動改變"方"的大小

記得畫方的功能寫法
rect(左上角X座標, 左上角Y座標, 方形的X橫向寬度, 方形的Y縱向長度)
所以基本上跟上面程式碼一樣只是將畫圓的改成畫方的
程式如下:
void setup(){
size(600,600); //視窗大小
background(255); //背景顏色
smooth(); //所畫的圖要圓滑
}
void draw(){
fill(mouseX,mouseY,2*(mouseX+mouseY)/3);
rectMode(CENTER);
rect(width/2, height/2 ,mouseX, mouseY);
}


相信眼尖的有發現
rect這個指令好像有多一行東西
rectMODE()指的是畫方的方法
若無特別使用這行指令
則等同於 rectMode(CORNER)
小括號內記得都要大寫
rectMODE(CENTER)則是依中心畫方
所以此刻的
rectMode();
rect(width/2, height/2 ,mouseX, mouseY);
即是以中心畫方
rect(方形中心X座標, 方形中心Y座標, 方形橫向X寬度, 方形縱向Y長度)

最後除了大小以外
我們也可以依照滑鼠XY之值改變填色
程式如下:

void setup(){
size(600,600); //視窗大小
background(255); //背景顏色
smooth(); //所畫的圖要圓滑
}
void draw(){
fill(mouseX,mouseY,2*(mouseX+mouseY)/3);//利用滑鼠座標填色
noStroke();
ellipse(width/2, height/2 ,2*mouseX,2*mouseY);//畫圓
}
應該會得到這個結果

同樣的換成方的試看看

這樣就可很快畫出
原本需要花很多時間
所畫出來的複雜圖形

2 則留言:

  1. 謝謝你的教學分享
    我是最近才開始接觸Processing的初學者
    不好意思想請問ㄧ下
    要怎麼在Processing中輸入中文的註解
    就像你在教學中所打入的那樣 size(600,600); //視窗大小
    是得另外在記事本編輯輸入還是直接就可以在Processing輸入?
    我使用的作業系統是Mac
    不好意思麻煩您解惑了
    謝謝您
    謝謝

    回覆刪除
  2. 可以直接在城市中編輯
    只要在前面加上 // 雙斜線即可
    別這麼客氣

    回覆刪除