1、Processing基本教學1小時快速入門Processing 官方網站http:/processing.org下載及安裝Processing下載http:/processing.org/download/ PS. Windows使用者請下載windows版本，若您知道什麼是JDK並且確定您的電腦已安裝JDK，您可以下載windows without Java版本安裝解壓縮及完成安裝！ (綠色軟體)Sketch我們把每個Processing project視為一個素描(sketch)，而我們所使用的Processing程式語法則為我們的畫筆。因此，我們是用程式在作畫！每個sketch(也就是每
2、個Processing project)在電腦中是以一個資料夾存在，資料夾中存放sketch相關的程式碼(.pde檔)及影音資料(另存放在data資料夾中)看範例 (看sketch的資料夾結構)開啟 File Examples Basics Image Sprite查看該sketch的資料夾Sketch Show Sketch Folder資料夾內有.pde檔及data資料夾 (內有sketch所需的圖片)Processing是一個連續的畫作用程式作畫最特別的地方是：必須不斷地作畫!請以電視/電影/卡通來想像連續播放的影格 連續播放的畫作靜止的畫面：連續播放一模一樣的畫面(影格)動態的畫面：連
3、續播放不同的畫面(影格) 開始作畫作畫前的準備動作開始”不斷地”作畫Void setup()/準備動作Void draw()/開始作畫在程式一開始時執行, 只會執行一次緊接在setup()之後執行,會不斷地一直執行至程式執行結束 何時停止作畫？暫停作畫在程式中加入delay()敘述使用noLoop(), 告訴Processing不要不斷地作畫, 只要作畫一次即可 完全停止! 使用者關閉執行/顯示視窗 在程式敘述中, 告訴程式本身自行關閉 void setup()/準備動作void draw()/開始不斷地作畫void functionName()/自訂函數void mousePressed()
4、/滑鼠事件控制 void keyPressed()/鍵盤事件控制 class customeClass /自訂類別Processing語法結構一般型void setup() size(200, 200); noStroke(); background(255); fill(0, 102, 153, 204); smooth(); noLoop(); void draw() circles(40, 80); circles(90, 70); void circles(int x, int y) ellipse(x, y, 50, 50);ellipse(x+20, y+20, 60, 60);
5、請copy至PDE執行環境, 並按下Run按鈕來執行看看!void setup() size(200, 200); rectMode(CENTER); noStroke(); fill(0, 102, 153, 204); void draw() background(255); rect(width-mouseX, height-mouseY, 50, 50); rect(mouseX, mouseY, 50, 50); 請copy至PDE執行環境, 並按下Run按鈕來執行看看!Processing語法敘述void setup() size(200, 200); rectMode(CENTE
6、R); noStroke(); fill(0, 102, 153, 204); void draw() background(255); rect(width-mouseX, height-mouseY, 50, 50); rect(mouseX, mouseY, 50, 50); 每行程式敘述必須以分號做結束!以左右大括號做為一個程式區塊函數必須有左右小括號()變數宣告void setup() size(200, 200); rectMode(CENTER); noStroke(); int r = 0;int g = 102;int b = 153;int alpha = 204;fill
7、(r, g, b, alpha); void draw() background(255); rect(width-mouseX, height-mouseY, 50, 50); rect(mouseX, mouseY, 50, 50); 使用整數型態(int)的變數請copy至PDE執行環境, 然後試著去修改r,g,b,alpha的變數值, 並按下Run按鈕來執行看看!看看是否畫面會隨著變數值改變而改變size(200, 200); rectMode(CENTER); noStroke(); int r = 0;int g = 102;int b = 153;int alpha = 204;
8、fill(r, g, b, alpha); background(255); rect(width-mouseX, height-mouseY, 50, 50); rect(mouseX, mouseY, 50, 50); 變數 Variable資料型態(data type)int 整數 例：3, 20, -5, 0 float 浮點數 例：1.2301, -0.02 String 字串 例：“互動程式設計“ boolean 布林值 例：True/False 變數宣告方式int a = 1;範例float discount = 0.85;String myName = “沈聖博“;boolea
9、n hasHomeWork = flase; 資料型態 變數名, 大小寫有別assign 給值符號變數值以分號做結尾變數 Variable在Processing中, 變數的資料型態必須被明確地指出 (這個特性將有助於程式初學者避免不必要的程式錯誤)善用變數, 你的程式就成功一半!避免無意義的變數名稱使你的程式難以閱讀 (例如：aaa, bbb)變數名稱的命名與它本身所代表的變數值相關是最好的! (例如：int xPosition = 5; 這個命名的想法是: 我想宣告一個變數, 用來存放圖片的x座標位置, 這個x座標一開始的值是5, 因此我將變數命名為xPosition, 然後開始進行變數的宣
10、告, 即如範例所述)變數 Variable變數命名規則1. 只可以使用英文字母, 阿拉伯數字, 以及_(底線) 2. 開頭第一個字元, 不能是數字 (錯: 183club, 5566 對: by2)3. 字母大小寫有別 (SHE, she, She分別代表不同變數)4. 中間不能有空格 (錯: S B D W, 對: SBDW)5. 不能使用. (點, dot) (錯: B.A.D) 變數的命名習慣開頭第一個字母為小寫 (例: xPosition, lollipop)駱駝峰式命名 (例: imageRedValue, howTallAreYou)善用變數, 讓程式更好 閱讀int red =
11、0; /填滿矩形顏色的ARGB值中的R值 int green = 102; /填滿矩形顏色的ARGB值中的G值 int blue = 153; /填滿矩形顏色的ARGB值中的B值 int alpha = 204; /填滿矩形顏色的ARGB值中的A值, 即透明度 int backgroundGray = 255; /背景灰階的顏色值 float x1 = 10.0; /第一個矩形左上角的x座標值 float y1 = 30.5; /第一個矩形左上角的y座標值 float x2 = 50; /第二個矩形左上角的x座標值 float y2 = 60.5; /第二個矩形左上角的y座標值 void se
12、tup() size(200, 200);rectMode(CENTER);noStroke();fill(red, green, blue, alpha);void draw() background(backgroundGray);rect(x1, y1, 50, 50);rect(x2, y2, 50, 50);是不是更好閱讀, 更好修改程式碼了呢? 直接從變數名稱就可以知道該變數的變數值是表示什麼意義了!/雙斜線後面的一整行是註解, 不會被視為程式碼, 因此不會被執行!變數的使用範圍(生命週期)變數從哪裡出生(被宣告), 便屬於那裡的區域, 以及那個區域往下所轄的範圍首先, 我們必須了
13、解何謂範圍：整個Processing程式本身為最大範圍 (全域 global scope)被大括號.括起來的區域為一個範圍 (區域 local scope)函數呼叫for迴圈/while迴圈的使用if/else或switch的判斷 範圍可以是巢狀包覆的變數在各個範圍中的使用順序：由最小的範圍, 向它的上一層範圍尋找, 找到的第一個相同名稱的變數 (由小範圍找到大範圍) 範例：File Examples Basics Data VaraibleScope休息一下, 我們來點實際的應用 畫幾何圖形了解從哪裡開始下筆作畫 - 座標座標在畫面上的每一個像素(點)都有其座標位置, 利用座標的表示法, 讓
14、你知道要從何處下筆作畫例如：畫直線 (任兩點(A,B)決定一條直線)畫三角形 (任意不共線的三點(A,B,C)決定一個三角形)畫圓形 (一個點(A)及一個半徑(r)可劃一個圓)數學座標在數學上, X軸是向右漸增, Y軸是向上漸增, Z軸是向外漸增+程式世界裡的座標系統在程式裡, X軸是向右漸增, Y軸是向下漸增, Z軸是向外漸增簡單幾何圖形曲線 橢圓形直線點四邊形矩形三角形在Processing中畫基本的幾何圖形, 非常地簡單, 只要下指令(函數呼叫)就可以了, 指令請參考http:/www.processing.org/reference/簡單幾何圖形範例void setup()size(4
15、00, 400);background(100);void draw()stroke(255); /設定邊線顏色為白色line(10, 10, 300, 350); /畫直線noFill(); /設定不填滿stroke(0, 255, 0); /設定邊線顏色為綠色ellipse(300, 300, 100, 30); /畫橢圓形fill(random(256), random(256), random(256); /設定填滿的顏色為隨機的noStroke(); /設定不使用邊線ellipse(80, 200, 50, 50); /畫圓形noFill(); /設定不填滿stroke(0, 0,
16、255); /設定邊線為藍色triangle(20, 10, 120, 80, 80, 350); /畫三角形fill(255, 0, 0, 128); /設定填滿顏色為紅色, 但透明度只有128 (即50%)stroke(0, 255, 0); /設定邊線顏色為綠色rect(100, 100, 150, 30); /畫矩形請copy至PDE執行環境, 並按下Run按鈕來執行看看!人生會遇到抉擇，程式也會！如果 . 我就 . 不然的話 .邏輯式的思考方式邏輯判斷的結果只有兩種：True 或 False1. 邏輯判斷來自於比較意義 | Processing語法小於 | 不等於 | != 大於或等
17、於 | = 小於或等於 | = 2. 邏輯判斷來自於邏輯運算 意義 | Processing語法AND | /設定畫布大小為400x400void draw()if(mouseX 100) /mouseX用來表示目前滑鼠的x座標值 background(255); /設定背景為白色else if(mouseX 300)background(128); /設定背景為灰色elsebackground(0); /設定背景為黑色stroke(255, 0, 0); /設定畫筆為紅色line(100, 0, 100, 400); /畫直線line(300, 0, 300, 400); /畫直線範例請copy至PDE執行環境, 並按下Run按鈕來執行看看!
