給中學生用的Processing講義

1. 邏輯思考與第三語言
中學生版

2. 課前準備
課前準備與預習資料

3. 給家長
 在下一代，電腦（或以手機的形式）已然成為生活中難以割捨的，成為人類的另一層衣服
 不論願不願意，未來您的小孩不論求學或就業，都必然與電腦相關
 藝術家學習電腦語言，作為工具幫助自己創作，創造出科技藝術的新形式；數據學者學習電腦語言，
作為整理工具，創造出各種更易懂的視覺化數據；餐飲業者運用電腦工具，協助店面在管理流程上
取得最大優勢
 就算您的小孩未來不是以電腦為主要技能的職業，他合作或是共事的夥伴卻可能是
 熟悉電腦的思考方式，熟悉運用電腦的思維，知道如何與電腦對話，讓他們除了把電腦當做遊戲機
玩之外，能夠發揮更大價值；既然擺脫不掉，何不學著如何妥善運用
 但在成為工具前，要先讓它成為玩具
 請讓我們一起玩耍吧，透過電腦語言

4. 給學員
 電腦的出現來自於人類理性的那一面，我們稱為「邏輯」，或者就是所謂的「道理」
 而邏輯的內容，主要是「因果」與「判斷」，不是亂猜，不是隨便來的
 我們的生活充滿著各種理性思考邏輯，例如
 「ㄟ為什麼他今天有黑眼圈？」『應該是昨天沒睡覺吧』- 沒睡覺是因，黑眼圈是果，結論是你的判斷
 因為我餓了，所以我去覓食 - 餓是因，覓食是果
 如果今天下雨，我就帶雨傘出門 - 下雨是因，帶雨傘是果，如果就是你的判斷
 當然也有很多「非理性」思考邏輯
 「今天想吃什麼？」『排骨飯！』 - 單純因為「想吃」，沒有理由
 而更多的是混合著理性與感性，混合了主觀與客觀的行為，這就是人
 但我們與電腦相處，沒辦法情緒化，因為它們是純理性的機器，我們只能跟它們「講道理」

5. 練習講道理
 以下題目，試著思考一下
1. 桌上有三支筆，分別是紅色、綠色、藍色，我們要拿起紅色筆寫出「I LOVE YOU」，需要多少動
作？請試著用20個動作描述整個過程（不多不少20個）
2. 如果有個外地人跟你問從這裡到火車站的路，你會怎麼報路？試著描述下來
 當我們去掉情緒，用最理性的態度思考，那我們其實就已經知道電腦的想法了
 如果未來，我們可以把理性思考的部份交給電腦，人類專注在感性與創意上的話，世界或許會有更
美好的變化
 建築師可以專注於建築物美感，把會不會倒蓋不蓋得起來交給電腦去判斷；產品設計者專注於設計
人們感覺最好用的產品，把物理或結構交給電腦去處理；餐廳中廚師專心於料理，服務生專注於客
人的感受，結帳之類的交給電腦去計算

6. 課程大綱

7. 課程大綱
 邏輯思維之一：步步為營
 命令與步驟
 輸入與回應
 邏輯思維之二：明辨判斷
 如果怎樣那就怎樣
 不確定的輸入與針鋒相對的回應
 邏輯思維之三：變數XYZ
 不會消逝的記憶
 說些中文吧
 邏輯思維之四：有限輪迴
 重複的工作與流程圖
 影像與真相

8. 關於Processing
 免費軟體，自由下載
 http://processing.org/download/
 Processing的優點
 國外小學生就在學
 台灣很多藝術家（數學很爛）都學得會
 Processing的缺點
 英文

9. 基礎知識一
 程式，其實就像是我們命令另一個大腦去工作（尤其做那些我們不想做的枯燥工作）
 程式的運作，就跟一般人類的思考沒什麼兩樣，只是比較組織化而且制式（電腦沒那麼聰明，打錯
一個字母他就看不懂了，即使只是改大小寫）
 因為程式是人類設計出來的，複製了我們的思考流程
 所以，用一些日常生活的事情去借代，就會比較容易理解
 還有，因為電腦很笨，寫給他的東西一定要很精準，所以要是不小心打錯字或是順序錯了，程式執
行起來就會出問題（這就叫做bug，因為60年代電腦出錯多半是因為有蟲跑進去造成電線短路）

10. 基礎知識二
 一個Processing的檔案，可以視為一項工程，一個工程裡頭會分為許多工作
 最主要的工作有兩種
1. 前置作業
2. 不斷重複的作業
 Processing裡，前置作業被稱為setup，不斷重複的作業被稱為draw
 前置作業在整個執行的期間只做一次，不斷重複就是…不斷重複:D
 通常我們剛打開任何軟體的時候，都會等比較久，就是電腦在跑前置作業
 每項工作，都會需要回報工作狀況，遇到不需要回報狀況的，就會用 void （「無、空的」的意思）
來代表
 通常都是直接用void，很少要求回報

11. 基礎知識二
 有時候，工作會需要帶參考資料進去，我們會用( )兩個小括號把參考資料夾帶起來，沒有參考資料
就留空白
 而因為電腦很笨，所以我們要註明這個工作的開始跟結束，所以會用{ }兩個大括號把所有這項工作
要做的事情夾起來，{ (往左大括號) 表示開始，} (往右大括號) 表示結束
 所以Processing程式最基本的語法，就是
 接下來，可以來寫第一支程式了！
回報 工作 ( 參考資料 )
{
工作的指令#1
工作的指令#2
}

12. 第一支程式
 第一支程式，數字請隨意填
 切記！每一個指令後面都一定一定一定要打上;分號，電腦才知道你指令打完了（很笨吧）
 其實有點像無線電對講機，講完要說over，不然對方也不知道你講完了（意思是我們好像也沒多聰明）
void setup( )
{
size(400, 300);
}
void draw( )
{
}

13. 基礎知識三
 視窗就是一塊畫布，想像成一張尺寸可以自己決定的方格紙
 畫布（以 400 x 300 為例）
 座標記法：先水平，再垂直
 左上角座標：(0, 0)
 右上角座標：(400, 0)
 左下角座標：(0, 300)
 右下角座標：(400, 300)
 色彩：用（R,G,B）來表達
 紅色、綠色、藍色是光學三原色
 每一個原色的數字從 0 ～ 255 來表示強度
 白色（255,255,255）、黑色（0,0,0）、黃色（255,255,0）、紫色（255,0,255）、鵝黃色（192,192,0）
橘色（192,88,0）

14. 第一支程式加長版
 其實也才多一行…
 切記！每一個指令後面都一定一定一定要打上;分號
void setup( )
{
size(400, 300);
background(128, 0, 0);
}
void draw( )
{
}

15. 指令
 只能畫個顏色當然不過癮
 size、background都是「指令」，一個指令電腦就做一個動作
 來學一些簡單英文吧！
size
background
stroke
line
fill
ellipse
 特殊關鍵字：我們想知道滑鼠的位置
mouseX
mouseY

16. 指令 (Instruction)


 or (R , G , B , A)

 or (R , G , B , A)






17. 邏輯：如果 (If)

 如果下雨, 我就要拿傘
 如果下雨, 我就要拿傘
 (條件只有兩種可能, 真假/對錯/是否)
 我就要拿傘：工作指令
 語法
 關鍵字：mouseButton
如果 ( 條件 )
{
工作指令#1
工作指令#2
}
if ( 條件 )
{
工作指令#1;
工作指令#2;
}

18. 邏輯：如果 (If)
 ：只能用「比較」的
 大於：>
 ：<
 ：>=
 小於等於：<=
 等於：== (特別注意!)
 不等於：!= (特別注意!)
 A 比較 B
 A > B, A < B… (正確)
 A do something to B (錯誤)
 關鍵字：mouseButton
 RIGHT / LEFT / CENTER
 pmouseX / pmouseY

19. 記憶（Memory）
 電腦除了運算，另一個最強大的功能就是
 記憶：幾乎不會忘記、理論上空間無限
 存放記憶的地方稱為記憶體
 事實上存放電腦裡面的記憶只有兩種：0 跟 1
 原因是燈泡
 電腦的記憶空間就像是一格一格的房間，有編號的
 記憶體位址：memory address
 藍色死亡畫面裡面有線索

21. 變數（Variable）
 電腦除了運算，另一個最強大的功能就是
 記憶：幾乎不會忘記、理論上空間無限
 存放記憶的地方稱為記憶體
 事實上存放電腦裡面的記憶只有兩種：0 跟 1
 電腦的記憶空間就像是一格一格的房間，有編號的
 但是為了讓人類可以理解，所以用了變數名稱來做控制（以前都是要記號碼的）
 每個變數都對應到電腦裡的專屬記憶空間
 我們可以說，變數就是我們用來跟電腦記憶體對話的管道

22. 變數（Variable）
 基本的操作過程
1. 跟電腦說要設定一個變數，電腦會在記憶體裡面切出一塊空間用來存放
2. 然後指定內容給這個變數，電腦就會把資料放進去那塊空間
3. 我們之後就可以隨時取用這個變數
 來看一個例子
PImage kk;
void setup()
{
kk = loadImage(“test.png”);
}
void draw()
{
image(kk, mouseX, mouseY);
}

23. 圖片的繪製
 可用的圖片格式
 png / jpg / bmp
1. 先設定PImage變數，一個變數管一張圖
 必須寫在 setup 的上面
 這牽扯到一個scope（變數的可視範圍）的問題
2. 載入圖檔：loadImage (“檔案名稱”);
 盡量寫在 setup 的大括號裡面（不然硬碟很操）
3. 畫出圖檔：image(變數名稱, 位置X, 位置Y);
 image(變數名稱, 位置X, 位置Y, 寬度, 高度);

24. 變數的應用：隨機垂直水平
 畫線
line (x1, y1, x2, y2);
 畫垂直線
 X座標一樣
 所以 x1 跟 x2 一樣
 畫水平線
 Y座標一樣
 所以 y1 跟 y2 一樣
 那如何畫出隨機的垂直或水平線？

25. 變數（Variable）
 設定時必須指定變數的「型態」，電腦才知道要分配多大的空間
 變數的「形態」有好幾種，常用的幾種
 整數：沒有小數點的數字
 小數：有小數點的數字 （亂數屬於小數）
 圖片：圖片內容
 設定寫法：
 int 變數名稱;
 float 變數名稱;
 PImage 變數名稱;
型態 變數名稱;

26. 變數（Variable）
 設定  指定  取用
 命名變數  變數等於  呼叫變數
 變數：可以改變，用來控制與記錄
 今年年齡
 身高
 表格填空
 mouseX：滑鼠的X座標（電腦會去做指定）
 mouseY：滑鼠的Ｙ座標（電腦會去做指定）
 mouseButton：滑鼠被按下的按鍵（按下滑鼠時，電腦會作指定的動作）

27. 變數（Variable）
 同「形態」可以一次寫好幾個
 PImage 變數名稱1, 變數名稱2;
上面的寫法等同於
PImage 變數名稱1;
PImage 變數名稱2;
 PImage 變數1, 變數2, 變數3, 變數4;
上面的寫法等同於
PImage 變數1;
PImage 變數2;
PImage 變數3;
PImage 變數4;

28. 變數（Variable）
 設定  指定  取用
 命名變數  變數等於  呼叫變數
 變數：可以改變，用來控制與記錄
 今年年齡
 身高
 表格填空
 mouseX：滑鼠的X座標（電腦會去做指定）
 mouseY：滑鼠的Ｙ座標（電腦會去做指定）
 mouseButton：滑鼠被按下的按鍵（按下滑鼠時，電腦會作指定的動作）
 亂數：一直在變，當下不知道會是啥
 抽籤是一種亂數
 可以用變數來記錄亂數

29. 鍵盤互動
 鍵盤輸入分為可讀與不可讀
 可讀：a, b, c, d….A, B, C…1, 2, 3…
 不可讀：shift, ctrl, esc….F1, F2…
 同一個按鍵，可能會有兩個key：a 或 A
 但是同一個按鍵，只會有一個keyCode：65
 可讀的用 key
 不可讀的用 keyCode
 if (mouseButton == RIGHT)
 可讀的：if (keyPressed == true)
 不可讀的：if (key == CODED)

30. 鍵盤互動
 keyCode跟鍵盤之間的關係（常用的）
 a: 65
 b: 66
 c: 67 … z: 90
 0: 48 … 1: 49 … 2: 50 … 9: 57
 左上右下: 37, 38, 39, 40
 Enter: 10 … space: 32 … shift: 16 … ctrl: 17 … alt: 18
 查得到嗎？
 ASCII表
 建議還是抄下來

31. 使用預設字型寫字
 使用預設字型寫字
 text(“要寫的文字”, 位置X, 位置Y);
text(數字, 位置X, 位置Y);
 只能寫英文或是數字
 中文的支援必須做一些修改

32. 使用預設字型寫字
 中文的使用
 推薦字型
 YaHei Consolas Hybrid
 File  Preference
 改字型(改成支援中文的字型)
 勾選 Enable complex text input (支援複雜文字輸入)
 可支援多數特殊輸入法語言
 中文、日文、韓文

33. 使用字型寫字
 還記得之前畫圖像的方法嗎？
1. PImage xxx;
2. xxx = loadImage();
3. image(xxx, 0, 0);
 寫字跟畫圖像的方式大同小異
1. 申請一塊空間，並幫空間命名
2. 載入內容(圖像或字型)到空間存放
3. 設定字型
4. 寫字

34. 使用字型寫字
1. 使用記憶體空間存放字型 (記憶體空間要取一個變數名稱)
2. 載入字型到記憶體 (步驟1取的變數名稱)
3. 設定使用字型 (變數名稱)
4. 寫字
1. 使用記憶體存放字型
 PFont myfont;
2. 載入字型到記憶體空間
 myfont = createFont(“字型名稱”, 預設大小);
3. 設定字型
 textFont(myfont);
 textSize(大小);
 fill(R, G, B, A);
4. 寫字
 text(“要寫的文字”, 位置X, 位置Y);

35. 寫字
 createFont(“字型檔案名稱”, 預設字型大小);
 textSize(字型大小);
 textFont(變數名稱);
 text(“要寫的文字”, 位置X, 位置Y);
text(數字, 位置X, 位置Y);
 文字的相加 “+”
 數字 + 數字 = 數字
 文字 + 文字 = 文字
 文字 + 數字 = 文字

36. 時間指令
 之前用的指令都需要帶參考資料
 fill(R, G, B);
 括號內的 R, G, B 就是參考資料
 時間指令不需要參考資料，直接使用電腦就會告訴你內容
 year( )
 month( )
 day( )
 hour( )
 minute( )
 second( )

37. 第一階段創作：動態名片
 同時運用越多種技巧，成績越好
 幾何繪圖
 圖像繪圖
 滑鼠移動互動 / 滑鼠按鍵互動
 鍵盤互動
 繪製字型
 題目：請創作個人或是團隊的名片（須有動態效果）
 至少須包括幾何繪圖、圖像繪圖、繪製字型等三項（三種都要有）
 至少須包括滑鼠互動、鼠鍵互動、鍵盤互動其中一項（至少一種）
 視窗大小 920 x 560
 提供截圖一張