搜索
Processing基本教學1小時快速入門Processing官方網站[下載]使用者請下載windows版本，若您知道什麼是JDK並且確定您的電腦已安裝JDK，您可以下載windows[withoutJava]版本[安裝]解壓縮及完成安裝！(綠色軟體)Sketch我們把每個Processingproject視為一個素描(sketch)，而我們所使用的Processing程式語法則為我們的畫筆。因此，我們是用程式在作畫！！每個sketch(也就是每個Processingproject)在電腦中是以一個[資料夾]存在，資料夾中存放sketch相關的程式碼(.pde檔)及影音資料(另存放在[data]資料夾中)看範例(看sketch的資料夾結構)開啟FileExamplesBasicsImageSprite查看該sketch的資料夾SketchShowSketchFolder資料夾內有.pde檔及[data]資料夾(內有sketch所需的圖片)Processing是一個連續的畫作用程式作畫最特別的地方是：必須不斷地作畫!!請以電視/電影/卡通來想像連續播放的影格→連續播放的畫作靜止的畫面：連續播放一模一樣的畫面(影格)動態的畫面：連續播放不同的畫面(影格)開始作畫作畫前的準備動作開始”不斷地”作畫Voidsetup(){//…準備動作}Voiddraw(){//…開始作畫}在程式一開始時執行,只會執行一次緊接在setup()之後執行,會不斷地一直執行至程式執行結束何時停止作畫？暫停作畫在程式中加入delay()敘述使用noLoop(),告訴Processing不要不斷地作畫,只要作畫一次即可完全停止!! 使用者關閉執行/顯示視窗 在程式敘述中,告訴程式本身自行關閉voidsetup(){//…準備動作}voiddraw(){//…開始不斷地作畫}voidfunctionName(){//…自訂函數}voidmousePressed(){//…滑鼠事件控制}voidkeyPressed(){//…鍵盤事件控制}classcustomeClass{//…自訂類別}Processing語法結構一般型voidsetup(){size(200,200);noStroke();background(255);fill(0,102,153,204);smooth();noLoop();}voiddraw(){circles(40,80);circles(90,70);}voidcircles(intx,inty){ellipse(x,y,50,50);ellipse(x+20,y+20,60,60);}請copy至PDE執行環境,並按下Run按鈕來執行看看!!voidsetup(){size(200,200);rectMode(CENTER);noStroke();fill(0,102,153,204);}voiddraw(){background(255);rect(width-mouseX,height-mouseY,50,50);rect(mouseX,mouseY,50,50);}請copy至PDE執行環境,並按下Run按鈕來執行看看!!Processing語法敘述voidsetup(){size(200,200);rectMode(CENTER);noStroke();fill(0,102,153,204);}voiddraw(){background(255);rect(width-mouseX,height-mouseY,50,50);rect(mouseX,mouseY,50,50);}每行程式敘述必須以分號做結束!!以左右大括號{…}做為一個程式區塊函數必須有左右小括號(…)變數宣告voidsetup(){size(200,200);rectMode(CENTER);noStroke();intr=0;intg=102;intb=153;intalpha=204;fill(r,g,b,alpha);}voiddraw(){background(255);rect(width-mouseX,height-mouseY,50,50);rect(mouseX,mouseY,50,50);}使用整數型態(int)的變數請copy至PDE執行環境,然後試著去修改r,g,b,alpha的變數值,並按下Run按鈕來執行看看!!看看是否畫面會隨著變數值改變而改變voidsetup(){size(200,200);rectMode(CENTER);noStroke();intr=0;intg=102;intb=153;intalpha=204;fill(r,g,b,alpha);}voiddraw(){background(255);rect(width-mouseX,height-mouseY,50,50);rect(mouseX,mouseY,50,50);}使用整數型態(int)的變數請copy至PDE執行環境,然後試著去修改r,g,b,alpha的變數值,並按下Run按鈕來執行看看!!看看是否畫面會隨著變數值改變而改變變數Variable資料型態(datatype)int整數例：3,20,-5,0 float浮點數例：1.2301,-0.02 String字串例：互動程式設計 boolean布林值例：True/False變數宣告方式inta=1; 範例floatdiscount=0.85;StringmyName=沈聖博;booleanhasHomeWork=flase;資料型態變數名,大小寫有別assign給值符號變數值以分號做結尾變數Variable在Processing中,變數的資料型態必須被明確地指出(這個特性將有助於程式初學者避免不必要的程式錯誤)善用變數,你的程式就成功一半!!避免無意義的變數名稱使你的程式難以閱讀(例如：aaa,bbb)變數名稱的命名與它本身所代表的變數值相關是最好的!(例如：intxPosition=5; 這個命名的想法是:我想宣告一個變數,用來存放圖片的x座標位置,這個x座標一開始的值是5,因此我將變數命名為xPosition,然後開始進行變數的宣告,即如範例所述)變數Variable變數命名規則1.只可以使用英文字母,阿拉伯數字,以及_(底線)2.開頭第一個字元,不能是數字(錯:183club,5566 對:by2)3.字母大小寫有別(SHE,she,She分別代表不同變數)4.中間不能有空格(錯:SBDW,對:SBDW)5.不能使用.(點,dot)(錯:B.A.D)變數的命名習慣開頭第一個字母為小寫(例:xPosition,lollipop)駱駝峰式命名(例:imageRedValue,howTallAreYou)善用變數,讓程式更好閱讀intred=0;//填滿矩形顏色的ARGB值中的R值intgreen=102;//填滿矩形顏色的ARGB值中的G值intblue=153;//填滿矩形顏色的ARGB值中的B值intalpha=204;//填滿矩形顏色的ARGB值中的A值,即透明度intbackgroundGray=255;//背景灰階的顏色值floatx1=10.0;//第一個矩形左上角的x座標值floaty1=30.5;//第一個矩形左上角的y座標值floatx2=50;//第二個矩形左上角的x座標值floaty2=60.5;//第二個矩形左上角的y座標值voidsetup(){size(200,200);rectMode(CENTER);noStroke();fill(red,green,blue,alpha);}voiddraw(){background(backgroundGray);rect(x1,y1,50,50);rect(x2,y2,50,50);}是不是更好閱讀,更好修改程式碼了呢?直接從變數名稱就可以知道該變數的變數值是表示什麼意義了!!//雙斜線後面的一整行是註解, 不會被視為程式碼,因此不會被執行!變數的使用範圍(生命週期)變數從哪裡出生(被宣告),便屬於那裡的區域,以及那個區域往下所轄的範圍首先,我們必須了解何謂範圍：整個Processing程式本身為最大範圍(全域globalscope)被大括號{...}括起來的區域為一個範圍(區域localscope)函數呼叫for迴圈/while迴圈的使用if/else或switch的判斷範圍可以是巢狀包覆的變數在各個範圍中的使用順序：由最小的範圍,向它的上一層範圍尋找,找到的第一個相同名稱的變數 (由小範圍找到大範圍)範例：File→Examples→Basics→Data→VaraibleScope休息一下,我們來點實際的應用→畫幾何圖形了解從哪裡開始下筆作畫--座標座標在畫面上的每一個像素(點)都有其座標位置,利用座標的表示法,讓你知道要從何處下筆作畫例如：畫直線(任兩點(A,B)決定一條直線)畫三角形(任意不共線的三點(A,B,C)決定一個三角形)畫圓形(一個點(A)及一個半徑(r)可劃一個圓)了解從哪裡開始下筆作畫--座標座標在畫面上的每一個像素(點)都有其座標位置,利用座標的表示法,讓你知道要從何處下筆作畫例如：畫直線(任兩點(A,B)決定一條直線)畫三角形(任意不共線的三點(A,B,C)決定一個三角形)畫圓形(一個點(A)及一個半徑(r)可劃一個圓)數學座標在數學上,X軸是向右漸增,Y軸是向上漸增,Z軸是向外漸增+++程式世界裡的座標系統在程式裡,X軸是向右漸增,Y軸是向下漸增,Z軸是向外漸增簡單幾何圖形曲線橢圓形直線點四邊形矩形三角形簡單幾何圖形在Processing中畫基本的幾何圖形,非常地簡單, 只要下指令(函數呼叫)就可以了,指令請參考曲線橢圓形直線點四邊形矩形三角形簡單幾何圖形範例voidsetup(){size(400,400);background(100);}voiddraw(){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,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語法小於 | 等於 | ==大於 | 不等於 | !=大於或等於 | =小於或等於 | =2.邏輯判斷來自於邏輯運算意義|Processing語法AND|&&OR|||NOT|!邏輯式的思考方式邏輯判斷的結果只有兩種：True或False1.邏輯判斷來自於比較意義|Processing語法小於 | 等於 | ==大於 | 不等於