Swift Coding Hackathon - Speaker Deck

Slide 1

Slide 1 text

彼得潘 Swift Coding Hackathon 使用 Swift Playgrounds 用形狀創作有趣的圖案

Slide 2

Slide 2 text

小飛俠彼得潘連結

Slide 3

Slide 3 text

• 連結比方人臉或動物參考 Apple 的 Build with Stacks and Shapes 用形狀創作有趣圖案

Slide 4

Slide 4 text

打開 Playgrounds，建立 App

Slide 5

Slide 5 text

建立 App

Slide 6

Slide 6 text

左邊寫程式，右邊觀看和操作 App 介面黑色或白色和 iPad 是否打開深色模式有關

Slide 7

Slide 7 text

練習: 建立一個 App

Slide 8

Slide 8 text

移除 VStack { } 裡的程式 • 可以用 iPad 的鍵盤，也可以外接鍵盤 • 點選選取成為文字

Slide 9

Slide 9 text

拖曳選取 VStack { } 裡的程式，然後點擊選取範圍，選擇刪除使用外接鍵盤的同學可以按住 shift 鍵，然後按方向鍵  選取 VStack { } 裡的程式，然後按 delete 鍵

Slide 10

Slide 10 text

• 先點選畫面讓游標出現 • 上一步: 三指左滑 • 下一步: 三指右滑上一步和下一步的小技巧

Slide 11

Slide 11 text

練習: 移除 VStack { } 裡的程式

Slide 12

Slide 12 text

顯示區資料庫有許多可以加到畫面的元件，比方文字、圖片、形狀點選顯示顯示區資料庫有哪些形狀 ?

Slide 13

Slide 13 text

• 查看顯示區資料庫有哪些元件 • 查看顯示區資料庫有哪些形狀練習: 點選，顯示顯示區資料庫

Slide 14

Slide 14 text

膠囊、圓形、橢圓形、路徑、矩形、圓角矩形 • 今天會用到膠囊、圓形、橢圓形、矩形、圓角矩形 • 路徑可以做出任何的形狀，不過比較複雜

Slide 15

Slide 15 text

游標停在 VStack { } 裡空白的一行

Slide 16

Slide 16 text

方法 1: 從顯示區資料庫點選加入圓形 Circle

Slide 17

Slide 17 text

方法 1: 從顯示區資料庫點選在搜尋框輸入 Ci 快速找到圓形

Slide 18

Slide 18 text

利用 Circle( ) 產生圓形 • 深色模式的背景是黑色，圓形是白色 • 淺色模式的背景是白色，圓形是黑色

Slide 19

Slide 19 text

方法 2: 打程式，輸入 ci，選擇 Circle( ) 按 enter 加入圓形 Circle 已經習慣打程式的小朋友可以用方法 2，還不習慣的可以用方法 1 從選單選

Slide 20

Slide 20 text

練習: 加入圓形

Slide 21

Slide 21 text

圓形預設的大小是佔滿畫面空間的大小拖曳調整畫面的大小全螢幕顯示

Slide 22

Slide 22 text

全螢幕顯示

Slide 23

Slide 23 text

點選三角形執行 App

Slide 24

Slide 24 text

點選上方的三個小圓點，再點選關閉停止 App

Slide 25

Slide 25 text

練習: 調整畫面的大小和執行 App

Slide 26

Slide 26 text

如何調整圓形的大小和顏色

Slide 27

Slide 27 text

游標停在 Circle( ) 的下一行

Slide 28

Slide 28 text

修飾符可以修改元件的樣式和功能，比方大小、顏色點選顯示修飾符資料庫

Slide 29

Slide 29 text

框架可以控制元件的大小點選修飾符資料庫的框架(frame) 在搜尋框輸入 Fr 可快速找到框架

Slide 30

Slide 30 text

圓形變成寬度(width) 100，高度(height) 100 .frame(width:100.0, height:100.0) • .frame 接在 Circle( ) 後，所以會作用在圓形上 • 按 tab 鍵可跳到下一個輸入框

Slide 31

Slide 31 text

將 width & height 調成 200

Slide 32

Slide 32 text

輸入 .fra ，然後按向右鍵展開手動從鍵盤輸入

Slide 33

Slide 33 text

選擇 frame(width:height:) 按 enter 手動從鍵盤輸入

Slide 34

Slide 34 text

練習: 利用 frame 設定圓形的大小

Slide 35

Slide 35 text

點選修飾符資料庫的前景樣式(foregroundStyle) • 游標先停在 .frame 的下一行 • 在搜尋框輸入 For 可快速找到前景樣式前景樣式可以控制元件的顏色

Slide 36

Slide 36 text

控制元件顏色的 foregroundStyle 在框框裡輸入顏色

Slide 37

Slide 37 text

點選，從顏色資料庫選擇顏色先點選框框，再點選

Slide 38

Slide 38 text

選擇薄荷綠色 • Color.mint 會產生薄荷綠色 • .frame & .foregroundStyle 都是接在 Circle( ) 後，  所以會作用在圓形上

Slide 39

Slide 39 text

練習: 利用 foregroundStyle 設定圓形的顏色

Slide 40

Slide 40 text

找不到喜歡的顏色 ?

Slide 41

Slide 41 text

用紅(red)、綠(green)、藍(blue)設定顏色 • https://www.rapidtables.com/web/color/RGB_Color.html • 數字的範圍是 0 ~ 255

Slide 42

Slide 42 text

用紅、綠、藍設定顏色先點選 foregroundStyle ( ) 裡的框框或讓游標停在 foregroundStyle 的 ( ) 裡

Slide 43

Slide 43 text

從顯示區資料庫選擇顏色用紅、綠、藍設定顏色在搜尋框輸入 Colo 可快速找到顏色

Slide 44

Slide 44 text

程式裡 red、green、blue 的數字範圍是 0 ~ 1 用紅、綠、藍設定顏色 Color( ) 會產生顏色，就像 Circle( ) 產生圓形

Slide 45

Slide 45 text

程式裡 red、green、blue 的數字範圍是 0 ~ 1，用紅、綠、藍設定顏色網頁上顯示的 red、green、blue 數字範圍是 0 ~ 255，程式的 red、green、blue 數字範圍是 0 ~ 1，所以要除 255

Slide 46

Slide 46 text

練習: 用紅、綠、藍設定顏色 https://www.rapidtables.com/web/color/RGB_Color.html

Slide 47

Slide 47 text

加入矩形 Rectangle • 游標先停在 .foregroundStyle 的下一行，然後再加入矩形 • 在搜尋框輸入 Rec 可快速找到矩形

Slide 48

Slide 48 text

利用 Rectangle( ) 產生矩形 • Rectangle( ) 和之前的 Circle().frame(width: 200, height: 200).foregroundStyle(Color(red: 72/255, green: 209/255, blue: 204/255)) 是分開的，一個是圓形的程式，一個是矩形的程式 • 上下排列是因為 VStack

Slide 49

Slide 49 text

矩形也可以設定大小和顏色

Slide 50

Slide 50 text

ZStack { } 裡的元件會疊在一起，愈後面加入的元件會蓋住前面的元件，就像疊疊樂將 VStack 改成 ZStack ZStack { } 裡的元件會重疊置中顯示

Slide 51

Slide 51 text

練習: 加入 Rectangle 和設定 ZStack

Slide 52

Slide 52 text

膠囊形 Capsule

Slide 53

Slide 53 text

加入膠囊形 Capsule • 將 Circle 改成 Capsule • 在搜尋框輸入 Cap 可快速找到膠囊

Slide 54

Slide 54 text

加入膠囊形 Capsule 寬高一樣的膠囊形就是圓形

Slide 55

Slide 55 text

寬 200 高 300 的膠囊形

Slide 56

Slide 56 text

練習: 將圓形 Circle 改成膠囊形 Capsule

Slide 57

Slide 57 text

如何移動矩形想要膠囊形當臉，矩形當脖子

Slide 58

Slide 58 text

位移可以移動元件點選修飾符資料庫的位移(Offset) • 游標先停在 Rectangle 的 foregroundStyle 後 • 在搜尋框輸入 O ff 可快速找到位移

Slide 59

Slide 59 text

offset 會讓元件從原本的位置移動 • x > 0 會向右移動，x < 0 會向左移動 • y > 0 會向下移動，y < 0 會向上移動

Slide 60

Slide 60 text

x 設定 0，y 設定 200 只向下移動

Slide 61

Slide 61 text

練習: 用位移(offset)移動形狀

Slide 62

Slide 62 text

加入圓角矩形(RoundRectangle)當衣服在搜尋框輸入 Roun 可快速找到圓角矩形

Slide 63

Slide 63 text

從 cornerRadius 的數字設定圓角弧度 • 膠囊再寬一點，width 設定 250 • 讓臉和脖子的形狀同一個顏色

Slide 64

Slide 64 text

練習: 加入圓角矩形(RoundRectangle)當衣服

Slide 65

Slide 65 text

加上半圓形當帥氣的黃色頭髪 ? 加入圓形

Slide 66

Slide 66 text

剪裁可以裁切形狀，比方將圓形變成半圓形點選修飾符資料庫的剪裁(trim) • 游標先停在 Circle( ) 的下一行，trim 一定要輸入在形狀的後面 • 在搜尋框輸入 Tri 可快速找到剪裁

Slide 67

Slide 67 text

裁切形狀的 trim • 游標先停在 trim 的 ( ) 裡，在 ( ) 裡輸入裁切的範圍

Slide 68

Slide 68 text

輸入 f，然後按向右鍵展開

Slide 69

Slide 69 text

選擇 (from:to:)

Slide 70

Slide 70 text

選擇 (from:to:) from 和 to 的數字控制裁切的範圍，數字的範圍是 0 ~ 1

Slide 71

Slide 71 text

數字的範圍是 0 ~ 1 0 / 1 0.25 0.5 0.75

Slide 72

Slide 72 text

from 設為 0，to 設為 0.25

Slide 73

Slide 73 text

from 設為 0，to 設為 0.5

Slide 74

Slide 74 text

from 設為 0.75，to 設為 1

Slide 75

Slide 75 text

from 設為 0.5，to 設為 1

Slide 76

Slide 76 text

練習: 使用 trim 加上半圓形當帥氣的頭髪

Slide 77

Slide 77 text

範例: 長髮女孩示範用 GPT 寫出圖片裡的程式

Slide 78

Slide 78 text

• 5 種形狀 • Circle(圓形) • Rectangle(矩形) • RoundRectangle(圓角矩形) • Capsule(膠囊形) • Ellipse(橢圓形) • 4 種修飾符 • frame(框架)，設定大小 • foregroundStyle(前景樣式)，設定顏色 • o ff set(位移)，移動元件 • trim(剪裁)，裁切形狀 • 堆疊元件的 ZStack 複習

Slide 79

Slide 79 text

• 建立一個新的 App • 比方加入眼睛、嘴巴、帽子 • 範例連結練習: 自由創作

Slide 80

Slide 80 text

加入內建的圖片點選，顯示符號資料庫

Slide 81

Slide 81 text

加入兩個星星當眼睛利用 Image( ) 生成圖片

Slide 82

Slide 82 text

練習: 加入內建的圖片

Slide 83

Slide 83 text

加入背景圖片

Slide 84

Slide 84 text

• MUSE AI (要登入) • 可以打中文 • Ideogram(要登入) • 可以打中文 • Stable Di ff usion XL (免登入) • ChatGPT: 將畫圖指令翻成英文 AI 畫圖

Slide 85

Slide 85 text

以 Ideogram 為例，選擇圖片的風格 photo: 照片 illustration: 插畫 3d render: 3D渲染 typography: 排版 cinematic: 電影 poster: 海報 painting: 繪畫 fashion: 時尚 product: 產品 anime: 動漫 architecture: 建築 dark fantasy: 黑暗奇幻 vibrant: 鮮明 gra ffi ti: 塗鴉 portrait photography: 人像攝影 wildlife photography: 野生動物攝影 conceptual art: 概念藝術 ukiyo-e: 浮世繪連結

Slide 86

Slide 86 text

長按圖片，點選儲存到照片下載生成的圖片海底世界的背景圖，有許多可愛的魚

Slide 87

Slide 87 text

練習: 用 AI 生成背景圖片，然後存到相簿

Slide 88

Slide 88 text

點選將相簿的圖片加入 App 打開左邊的側邊欄

Slide 89

Slide 89 text

點選下圖黃色框框的按鈕，然後點選照片

Slide 90

Slide 90 text

選擇照片

Slide 91

Slide 91 text

No content

Slide 92

Slide 92 text

修改照片的名字長按可點選重新命名

Slide 93

Slide 93 text

練習: 將相簿的圖片加入 App

Slide 94

Slide 94 text

選擇影像游標先停在 ZStack { } 裡的開頭，因為背景圖片要顯示在最下面，  被其它東西蓋著

Slide 95

Slide 95 text

在 Image( ) 裡輸入圖片名字，記得輸入雙引號

Slide 96

Slide 96 text

外接鍵盤輸入雙引號的方法按住 shift 鍵和雙引號按鍵

Slide 97

Slide 97 text

iPad 螢幕鍵盤輸入雙引號的方法

Slide 98

Slide 98 text

iPad 螢幕鍵盤輸入雙引號的方法

Slide 99

Slide 99 text

在 Image( ) 裡輸入圖片名字，記得輸入雙引號如果右邊沒看到 App 畫面，記得點選黃色框框的按鈕

Slide 100

Slide 100 text

練習: 加入背景圖片

Slide 101

Slide 101 text

加入文字點選顯示區資料庫的文字游標停在 ZStack { } 裡的最後一行，讓文字在最上層，蓋住其它東西

Slide 102

Slide 102 text

利用 Text( ) 產生文字 Text( ) 裡傳入顯示的文字，記得要加雙引號

Slide 103

Slide 103 text

調整文字的顏色和位置

Slide 104

Slide 104 text

點選修飾符資料庫的字體(font) 游標停在 Text ( ) 的下一行，font 要接在 Text ( ) 後面