processing中文开发教程.doc

Processing基本教學 1小時快速入門 Processing 官方網站 下載及安裝Processing [下載] /download/ PS. Windows使用者請下載windows版本，若您知道什麼是JDK並且確定您 的電腦已安裝JDK，您可以下載windows [without Java]版本 [安裝] 解壓縮及完成安裝！ (綠色軟體) Sketch 我們把每個Processing project視為一個素描(sketch)，而我們 所使用的Processing程式語法則為我們的畫筆。因此，我們是 用程式在作畫！！ 每個sketch(也就是每個Processing project)在電腦中是以一個 [資料夾]存在，資料夾中存放sketch相關的程式碼(.pde檔)及影 音資料(另存放在[data]資料夾中) 看範例 (看sketch的資料夾結構) 開啟 File Examples Basics Image Sprite 查看該sketch的資料夾Sketch Show Sketch Folder 資料夾內有.pde檔及[data]資料夾 (內有sketch所需的圖片) Processing是一個連續的畫作 用程式作畫最特別的地方是：必須不斷地作畫!! 請以電視/電影/卡通來想像 連續播放的影格 → 連續播放的畫作 靜止的畫面：連續播放一模一樣的畫面(影格) 動態的畫面：連續播放不同的畫面(影格) 開始作畫 作畫前的準備動作 Void setup(){ //…準備動作 } 開始”不斷地”作畫 在程式一開始時執行, 只會執行一次 Void draw(){ //…開始作畫 } 緊接在setup()之後執行, 會不斷地一直執行至程式執行結束 何時停止作畫？ 暫停作畫 在程式中加入delay()敘述 使用noLoop(), 告訴Processing不要不斷地作畫, 只要作畫 一次即可 完全停止!! 使用者關閉執行/顯示視窗 在程式敘述中, 告訴程式本身自行關閉 void setup(){ Processing語法結構 //…準備動作 } void draw(){ //…開始不斷地作畫 } 一般型 void functionName(){ //…自訂函數 } void mousePressed(){ //…滑鼠事件控制 } void keyPressed(){ //…鍵盤事件控制 } class customeClass { //…自訂類別 } void setup() { size(200, 200); 請copy至PDE執行環境, 並按下Run按鈕來執行看看!! 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); } 請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); } Processing語法敘述 函數必須有左右小括號(…) 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執行環境, 然後試著去修改r,g,b,alpha的變數值, void setup() { 並按下Run按鈕來執行看看!! 看看是否畫面會隨著變數值改變而改變 size(200, 200); rectMode(CENTER); noStroke(); 使用整數型態(int)的變數 fill(r, g, b, alpha); } void draw() { background(25