模組化程式

本章概念

模組化程式

—幾何藝術家

2

2-1 正多邊形小畫家 P.24

觀察幾何圖形的規律與特徵、

使用重複結構

2-2 有趣的幾何圖形 P.30

使用雙層重複結構、

使用「函式積木」功能

22

p22-43_ch2.indd 22

p22-43_ch2.indd 22 2020/6/3 上午 11:31:512020/6/3 上午 11:31:51

形…）不算困難，但想畫出正三、五、十五邊形之外的正奇數邊形，幾乎是 不可能的任務。一直到兩千多年後，才由當時僅19歲的德國天才數學家高

斯（Johann Carl Friedrich Gauss, 西元1777～1855年）畫出正十七邊形。

23

p22-43_ch2.indd 23

p22-43_ch2.indd 23 2020/6/3 上午 11:31:552020/6/3 上午 11:31:55

正多邊形小畫家

2-1 2-1

現在，我們要利用 Scratch 來繪製正多邊形。請播放範例影片 正多邊形小畫 家 .mp4 ，觀察程式的執行情形，一起用 Scratch 來完成程式吧！

【程式摘要】

1. 按下綠旗後，程式詢問「要畫出正幾邊形？」並等待使用者輸入。

2. 以鉛筆為角色，依照輸入的邊數繪製正多邊形。

搭配【逐步解析】說明

題目解析流程

任務說明

檔案

2-1

繪製邊線 旋轉畫筆 重複　　次

結束 繪製正多邊形

1 2

互動輸入：

選擇正多邊形

24

p22-43_ch2.indd 24

p22-43_ch2.indd 24 2020/6/3 上午 11:31:562020/6/3 上午 11:31:56

學習目標 1. 觀察幾何圖形的規

律與特徵。

2. 使用重複結構。

在這一節中，我們將利用 控制類 的「重複結構」搭配 畫筆功能來繪製正多邊形，並利用互動功能，讓使用者可 以自行決定要畫出幾邊形。

請撰寫一個可以畫出正 四邊形的程式，條件為：

1. 以鉛筆為角色繪圖。

2. 起始坐標為（0, 0）。

3. 各邊長均為 100 點。

繪製正多邊形：以正四邊形為例 新建專案

逐步解析 1 1

1

設定 鉛筆畫線

2

畫出 正四邊形

1

設定 鉛筆畫線

(1) 新增角色：鉛筆。

(2) 畫線：角色移動 + 畫筆類 功能。

(3) 筆跡從筆尖畫出：調整角色的造型中心位置。

2

畫出 正四邊形

畫出正四邊形的方式：

1

→

2

→

3

→

4

1

3

4 2

起點 90°

問題思考

解題分析

造型中心

小叮嚀

Scratch 的坐標系統以 舞臺中央為原點（0, 0），

X 軸介於－ 240 ～ 240，

Y 軸介於－ 180 ～ 180。

180

－180 240

－240 Y

X

模 組 化 程 式 2 — 幾何藝術家

第 章

2-1 2-2

2-1　正多邊形小畫家

25

p22-43_ch2.indd 25

p22-43_ch2.indd 25 2020/6/3 上午 11:31:562020/6/3 上午 11:31:56

1. 試試看，若想將程式修改成畫出正三角形，上圖程式要修改哪些地方？

2. 請觀察下圖，試推測：

(1) 畫完一個正多邊形，角色總共會轉動幾度？

(2) 要畫出正五邊形，每畫完一個邊之後，角色應該轉動幾度？

90° 90°

90° 90°

90°

90°

90°

90°

？°

？° ？°

？°

？°

60° 60°

120°

120°

120°

60°

120°

120°120° 90°90°

90°90°

？°？°

？°？°

？°

3. 想一想，若想畫出正 n 邊形，每畫完一個邊之後，角色應該轉動幾度？

手腦並用

【參考程式】

2 1

01 02 03 04 05 06 07 08

09

初始狀態設定

在撰寫程式時，養成「初始狀態設定」的習慣（例 如程式中的第02 ～ 04 行），可以減少程式發生意外錯 誤的機會，並確保每次執行的結果是相同的。

其中第 03 行設定角色的起始方向 。 雖然Scratch 角色本來就是預設面向 90°，但在撰寫程 式與測試過程中，程式可能不正常中止，當下次再重新 執行時，角色就會以最後終止的方向作為起始方向，造 成執行結果改變。因此撰寫程式時，利用程式來進行初 始方向的設定，是較好的作法。

26

p22-43_ch2.indd 26

p22-43_ch2.indd 26 2020/6/3 上午 11:31:572020/6/3 上午 11:31:57

1

設定詢問

2

依輸入畫 正多邊形

1

設定詢問

設定詢問： 偵測類 的 。

2

依輸入畫 正多邊形

(1) 轉動次數：

鉛筆旋轉的次數＝邊數＝輸入的數字 (2) 移動點數：100 點

(3) 旋轉角度：畫完一個邊，鉛筆要旋轉　　　　度。

問題思考

解題分析

接續【逐步解析 1】改寫程式，讓使用 者可以自行決定要畫出幾邊形：

1. 程式開始時，詢問「要畫出正幾邊形？」

2. 以輸入的數字為邊數，畫出正多邊形。

互動輸入：選擇正多邊形

逐步解析 2 2

要畫出正幾邊形？

模 組 化 程 式 2 — 幾何藝術家

第 章

2-1 2-2

2-1　正多邊形小畫家

27

p22-43_ch2.indd 27

p22-43_ch2.indd 27 2020/6/3 上午 11:31:572020/6/3 上午 11:31:57

【參考程式】

_*

1

2

02 03 04 05

*

*

*

*

10

1. 利用上圖的程式畫出不同邊數的正多邊形，當邊數 大於8 時，正多邊形會太大，因為超出舞臺而變 形。想想看，我們可以如何修正程式，讓多邊形的 邊長可以隨著邊數而變化，避免繪圖變形的問題？

2. 請利用完成的程式畫出不同邊數的正多邊形，並觀察圖形，當邊數越多時，圖案的外形有 何變化？

3 4 5 6 7 8 9 10 11 12

手腦並用

？

28

p22-43_ch2.indd 28

p22-43_ch2.indd 28 2020/6/3 上午 11:31:572020/6/3 上午 11:31:57

2-1 小試身手 

檔案 2-1 小試身手 下載方式請見 P.3

四邊形螺旋圖

機器人在空地上行走，往前走 5 點就 右轉 90°，之後的每一次都比上一次多走 5 點再右轉，試試看，記錄機器人走 40 次的移動軌跡！

請以檔案 2-1 小試身手. sb 3 來進行程 式撰寫。

1. 畫筆設定：筆跡寬度設定為 2。

2. 從舞臺坐標（0, 0）起始向右：

① 移動 5 點 右轉 90 度 ② 移動 10 點 右轉 90 度 ③ 移動 15 點 右轉 90 度 ④ 移動 20 點 右轉 90 度

……依此類推，畫出機器人移動 40 次的軌跡。

①

5

②

10

③

15

④

20

模 組 化 程 式 2 — 幾何藝術家

第 章

2-1 2-2

2-1　正多邊形小畫家

29

p22-43_ch2.indd 29

p22-43_ch2.indd 29 2020/6/3 上午 11:31:572020/6/3 上午 11:31:57

有趣的幾何圖形

2-2 2-2

試試看，利用多個正多邊形組合出「萬花筒」的效果。請播放範例影片 有趣的幾何圖形 .mp4 ，觀察程式的執行情形，一起用 Scratch 來完成程式吧！

【程式摘要】

1. 程式執行後，依序詢問「要畫出正幾邊形？」、「要畫幾個圖形？」

2. 程式依照輸入的「正多邊形種類」與「數量」繪製：

(1) 以舞臺的中心點（0, 0）為起點繪製正多邊形。

(2) 多個圖形要圍繞舞臺的中心點平均分布。

搭配【逐步解析】說明

題目解析流程

任務說明

檔案

2-2

開始

結束 繪製正多邊形 互動輸入：選擇正多邊形

互動輸入：選擇圖形數量

1 2

30

p22-43_ch2.indd 30

p22-43_ch2.indd 30 2020/6/3 上午 11:31:582020/6/3 上午 11:31:58

學習目標 1. 使用雙層重複結構。

2. 使用「函式積木」功能。

在這一節中，我們要學習使用雙層重複結構來畫出 幾何圖形，並學習利用 函式積木 的「模組化程式設計」

技巧，讓程式更為簡潔易懂（表 1-2-1）。

表1-2-1　首次使用的積木

積木類型 外觀 功能

函式積木類

自行定義一個新的函式積木。

定義函式積木的內容。 （名稱以「畫筆設定」為例）

執行自訂的函式積木。 （名稱以「畫筆設定」為例）

延續 2-1 節【逐步解析 2】的程式，請修改程 式以畫出右圖1 的圖形。已知其流程圖如右圖 2 所示，想一想，你會如何修改程式？程式可以怎 麼簡化呢？

手腦並用

▲圖1

❶

❷

❸

結束 畫正三角形

右轉120 度 畫正三角形

右轉120 度 畫正三角形

右轉120 度

❶

❷

❸

▲圖2

模 組 化 程 式 2 — 幾何藝術家

第 章

2-1 2-2

2-2　有趣的幾何圖形

31

p22-43_ch2.indd 31

p22-43_ch2.indd 31 2020/6/3 上午 11:31:582020/6/3 上午 11:31:58

函式積木

●模組化

在程式設計中，我們常將一個大程式拆解成幾個功能獨立且可以重複使用的小程式，這些小 程式就稱為「模組」；每個模組分別開發，最後再合併成一個大程式，這樣的模式即為「模組化 程式設計」，其優點為：

1. 將大程式拆解成多個模組，由多人同時進行開發，可提高程式設計效率，是實務上常見的開 發方式。

2. 將相同功能的程式區塊模組化，可以重複讀取、使用，節省開發時間與記憶體空間。

3. 經模組化的程式具有較高的可讀性，有助於程式的理解。

4. 因各模組具有功能獨立的特性，在除錯及維護上較為容易。

「模組化」在不同的程式語言中會有不同的實踐方式，而在 Scratch 中，「函式」就是一種 模組化的方法，本冊後方說明也將以「函式」為例。

●函式

在 Scratch 中，我們可以將具有特定功能或重複出現的程式區塊定義成「函式」，並賦予一 個有意義的名稱，只要經由簡單的「呼叫」，就能完成一連串的程式功能。

以畫正四邊形的程式為例（如下圖），我們可以將「畫筆設定」設為函式，讓程式看起來更 簡潔，日後若需調整畫筆的顏色、粗細等設定，也可以直接在函式中修改。

使用函式

▲ 將 5 個步驟定義成「畫筆設定」

函式。

（呼叫函式）

原程式

畫筆設定

32

p22-43_ch2.indd 32

p22-43_ch2.indd 32 2020/6/3 上午 11:31:582020/6/3 上午 11:31:58

●使用「函式積木」功能 以左頁的函式設定為例：

1. 建立函式：① 點擊 函式積木 。

② 點擊 建立一個積木 。

2

1

2. 設定名稱：① 輸入名稱。

② 點擊 確定 。

2 1

3. 定義積木： 在程式編輯區中，將相關積木 移動到 定義 積木下方。

4. 呼叫函式： 將定義好的積木，拖曳到要執 行函式功能的地方即可。

模 組 化 程 式 2 — 幾何藝術家

第 章

2-1 2-2

2-2　有趣的幾何圖形

33

p22-43_ch2.indd 33

p22-43_ch2.indd 33 2020/6/3 上午 11:31:592020/6/3 上午 11:31:59

函式的參數

以前頁的函式 畫筆設定 為例，若想畫出不同 顏色、粗細的正四邊形時，每次都必須進到函式 中，一一修改畫筆的顏色、寬度，頗為不便。

●使用參數

我們可以透過「參數」的設定，將特定資料傳入函式中執行，以獲得不同的執行結果。以 上方程式為例，將畫筆的「顏色」、「寬度」設定為參數，只要在呼叫函式時，修改要傳入函 式中的參數值，就可以畫出不同顏色、粗細的正四邊形。

修改處

34

p22-43_ch2.indd 34

p22-43_ch2.indd 34 2020/6/3 上午 11:31:592020/6/3 上午 11:31:59

●設定參數的方法

以左頁的函式設定為例：

1. 編輯函式：① 在函式 畫筆設定 上點擊滑 鼠右鍵。

② 點擊 編輯 。

1 2

（按右鍵）

2. 設定名稱：① 點擊 添加輸入方塊 。

② 輸入方塊名稱。

③ 點擊 確定 。

1

2

3

3. 定義函式： 拖曳參數到要傳送數值的地方。 4. 呼叫函式： 在呼叫函式時，輸入要設定的 參數值即可。

×2

模 組 化 程 式 2 — 幾何藝術家

第 章

2-1 2-2

2-2　有趣的幾何圖形

35

p22-43_ch2.indd 35

p22-43_ch2.indd 35 2020/6/3 上午 11:31:592020/6/3 上午 11:31:59

1

自定函式

2

呼叫函式

1

自定函式

(1) 建立函式積木：

①輸入函式名稱：正多邊形。

② 點擊 添加輸入方塊 。

③ 將「輸入方塊」命名：邊數。

④點擊 確定 。

1

2

3

4

問題思考

解題分析

註 由於這段程式必須輸入「多邊形的邊數（詢問 的答案）」才能正確執行，故必須進行此設定。

接續 2-1 節的程式，將「繪製正多邊形」的功能定義成函式，並將繪製的邊數 設定為參數，方便呼叫使用。

繪製正多邊形：使用函式積木

逐步解析 1 1

01 02 03

註 在P.28 的手腦並用中，為了避免正多邊形因為超 出舞臺而變形，我們可用

的方式，讓邊長隨著正多邊形的邊數進行動態調 整，其中，數值「300」可自行替換。

36

p22-43_ch2.indd 36

p22-43_ch2.indd 36 2020/6/3 上午 11:32:002020/6/3 上午 11:32:00

(2) 定義函式：

①將相關指令拖曳到 定義 積木下方。

②利用 定義 積木旁的 邊數 取代原本的 詢問的答案 。

2

呼叫函式

(1) 呼叫函式：將 函式積木類 中的 拖曳到程式中的正確位置。

(2) 設定參數：在輸入方塊中放入 。

*

1

*

*

*

*

1

【參考程式】^（

_*

01

*

*

2

2

模 組 化 程 式 2 — 幾何藝術家

第 章

2-1 2-2

2-2　有趣的幾何圖形

37

p22-43_ch2.indd 37

p22-43_ch2.indd 37 2020/6/3 上午 11:32:002020/6/3 上午 11:32:00

1

設定詢問

2

依輸入畫 正多邊形

1

設定詢問

(1) 設定詢問： 偵測類 的 。 (2) 共有 2 個提問，須分別儲存輸入的答案。

(3) 新增變數 邊數 、 個數 來儲存答案。

2

依輸入畫 正多邊形

(1) 繪製的圖形必須以（0, 0）為中心平均分布：（以正三角形為例）

個數＝2

❶

❷

180°

個數＝3

❸ ❶

❷

120°

個數＝4

❹

❶

❷

❸

(2) 若要畫的圖形數量為 個數 ，則每畫完一個圖形，鉛筆要旋轉　　　　度。

問題思考

解題分析

請改寫【逐步解析 1】的程式，讓使用者可以自行決定要畫出幾個正多邊形：

1. 程式執行後，分別詢問「要畫出正幾邊形？」、「要畫幾個圖形？」

2. 依照輸入繪製圖形，並讓各圖形圍繞起始點（0, 0）平均分布。

互動輸入：選擇正多邊形、圖形數量

逐步解析 2 2

▲8 個 8 邊形 ▲60 個 4 邊形 ▲60 個 30 邊形

38

p22-43_ch2.indd 38

p22-43_ch2.indd 38 2020/6/3 上午 11:32:012020/6/3 上午 11:32:01

若不使用函式，本程式的呈現如下 圖。比較看看，哪個程式比較容易閱 讀與理解？

【參考程式】^（

_*

01 02 03 04 01 02 03 04

*

*

將變數初始化 01

02 03 04

*

*

*

*

*

*

11

1

2

模 組 化 程 式 2 — 幾何藝術家

第 章

2-1 2-2

2-2　有趣的幾何圖形

39

p22-43_ch2.indd 39

p22-43_ch2.indd 39 2020/6/3 上午 11:32:012020/6/3 上午 11:32:01

2-2 小星星 小試身手 

　　小花想利用程式繪製出各種星形圖騰的排列組合，請觀察星形的圖形特徵，

撰寫「繪製星形」的函式，並利用重複結構撰寫程式，分別完成下列三圖：

1. 請 新建專案 撰寫程式。

2. 參考數據：

(1) 起點坐標（－ 200, 140）。

(2) 星星邊長 40 點。

(3) 左右星星的起點坐標距離 65 點。

(4) 上下星星的起點坐標距離 50 點。

（－200, 140）

65

50

40

p22-43_ch2.indd 40

p22-43_ch2.indd 40 2020/6/3 上午 11:32:012020/6/3 上午 11:32:01

2-1 正多邊形小畫家 任務要求

1. 新建專案。按下綠旗後，程式詢問「要畫出正幾邊形？」。

2. 以 鉛筆 為角色，依照輸入的邊數繪製正多邊形。

問題思考

Q 1. 如何設定詢問讓使用者輸入邊數？

Q 2. 如何依輸入的邊數畫出正多邊形？

解題分析

Q 1. 設定詢問： 偵測類 的

Q 2. (1) 控制筆跡：

(2) 轉動次數：鉛筆旋轉的次數＝邊數＝輸入的數字。

(3) 移動點數：邊長＝自訂數值 邊數 。

(4) 旋轉角度：畫完一個邊，鉛筆要旋轉 360 邊數 度。

2-2 有趣的幾何圖形 任務要求

1. 修改上一節的程式，程式依序詢問「要畫出正幾邊形？」、

「要畫幾個圖形？」

2. 利用函式依輸入的邊數繪製正多邊形。

3. 多個正多邊形以（0, 0）為中心平均分布。

問題思考

Q 1. 分別詢問了 2 個問題，要如何儲存輸入的正多邊形的「邊數」與「個數」？

Q 2. 如何設定函式來繪製正多邊形？

解題分析

Q 1. 設定變數：

Q 2. 自訂、呼叫函式：

第 2章 學習重點 模 組 化 程 式 2 — 幾何藝術家

第 章

第2章　模組化程式──幾何藝術家

41

p22-43_ch2.indd 41

p22-43_ch2.indd 41 2020/6/3 上午 11:32:022020/6/3 上午 11:32:02

科技廣角

用科技創造藝術

數 位 藝 術

數位科技提供了一個全新的藝術 創作環境，讓感性的人文藝術和理性的 數位科技進行跨領域的融合，使得藝術 作品的表現形式更趨多元，常見的數 位藝術創作包括數位攝影、電腦動畫、

數位設計、數位音樂、虛擬實境等。

在 資 訊 科 技 蓬 勃 發 展 的 影 響 下， 20 世紀末的藝術型態出現重大 改變，科技為藝術家提供了新的創 作題材和方向，這種利用數位科技 的媒材、技術或工具來呈現創作的 藝術型態，稱為「數位藝術」。

數位攝影 數位設計

數位音樂 虛擬實境

42

p22-43_ch2.indd 42

p22-43_ch2.indd 42 2020/6/3 上午 11:32:042020/6/3 上午 11:32:04

數位藝術的身影，例 如： 臺 北 數 位 藝 術 節、臺灣燈會等。民 國 107 年，臺北數位 藝術節邀請德國藝術 創作團隊「機器人實 驗室」，展出大型自 動機械繪畫裝置，利 用機器手臂進行藝術

創作，以美國國家航空暨太空總署（ NASA）從火星傳回的影像為依據，花費數個月 的時間，用連續線條繪製出巨大的超寫實火星景觀。

民國 108 年元宵節，在屏東縣舉辦的「臺灣燈會」，邀請了英特爾（I ntel ^）無人 機團隊，透過 300 臺無人機搭配 LED 燈，排列出「TAIWAN」、「屏東」等圖形，不 僅獲得空前迴響，更創下參觀人數突破 1339 萬人次的紀錄。

利用機器手臂繪製火星景觀。

臺灣燈會盛況

第2章　科技廣角

43

p22-43_ch2.indd 43

p22-43_ch2.indd 43 2020/6/3 上午 11:32:062020/6/3 上午 11:32:06