Return to Video

Variable Expressions (Video Version)

  • 0:02 - 0:03
    我們回來看溫斯頓
  • 0:03 - 0:07
    現在我們有 x 和 y 兩個變數
  • 0:07 - 0:09
    標示出溫斯頓的位置
  • 0:09 - 0:11
    因此就能讓它上下移動
  • 0:11 - 0:14
    來場溫斯頓派對！哇嗚！
  • 0:14 - 0:16
    不錯喔！
  • 0:16 - 0:19
    我們先複習這個程式碼的內容
    再繼續下面的課程
  • 0:19 - 0:22
    上層有 x 和 y 的變數
  • 0:22 - 0:25
    儲存了溫斯頓的臉的中心位置
  • 0:25 - 0:29
    我們用這一行
    來製作臉的橢圓形
  • 0:30 - 0:32
    接著我們將它的眼睛和嘴巴定位
  • 0:32 - 0:34
    對照臉的中心位置
  • 0:34 - 0:39
    減少或增加 x 和 y，確保眼睛
  • 0:39 - 0:43
    在 50 像素與 100 像素的位置
  • 0:44 - 0:45
    例如，嘴巴
  • 0:45 - 0:49
    在臉中心向右 50 像素
  • 0:49 - 0:54
    向下 40 像素的位置
  • 0:56 - 1:00
    接著我們繼續
    還有什麼能存成變數
  • 1:00 - 1:03
    為了找出來，我要檢查每一行的程式碼
  • 1:03 - 1:07
    找出以固定值「寫死」的數值
  • 1:08 - 1:11
    那些數值是固定的
  • 1:11 - 1:14
    而非變數或依變數
  • 1:15 - 1:18
    讓我們看看，在第一次呼叫橢圓形的地方
  • 1:18 - 1:22
    數值 300 和 300，是指寬和高
  • 1:23 - 1:27
    我們可以將某些項目做成變數，像是 faceSize
  • 1:27 - 1:33
    那麼 faceSize = 300
    接著我們可以把 faceSize 傳遞進來
  • 1:33 - 1:36
    現在，它就會讓值變成 300
  • 1:37 - 1:41
    酷喔
    我們繼續做下去
  • 1:42 - 1:45
    這裡的每一步都運用 x、y 或 eyeSize
  • 1:45 - 1:49
    嘴巴這邊，我們同樣有 150 的寬
  • 1:49 - 1:51
    和150 的高
  • 1:51 - 1:56
    我們可以把 mouthSize 寫成變數
    例如 mouthSize = 150
  • 1:57 - 2:00
    然後我們在這邊傳遞 mouthSize 的大小
  • 2:00 - 2:02
    150 傳遞過來了
  • 2:02 - 2:04
    因為變數就是這麼大
  • 2:05 - 2:10
    我們已經做好了
    現在我們就能輕易改變 faceSize
  • 2:11 - 2:16
    也能輕易改變 mouthSize
    還能像那樣移動
  • 2:17 - 2:19
    我們可以再次改變 eyeSize
  • 2:19 - 2:21
    好了，真酷！
  • 2:21 - 2:24
    但還有一個部分我不太喜歡
  • 2:25 - 2:27
    那就是我改變 faceSize 的時候
  • 2:29 - 2:34
    其實希望所有東西依據
    faceSize來做改變
  • 2:34 - 2:37
    如果我把 faceSize 做得像這麼小
  • 2:38 - 2:41
    我想要它的眼睛和嘴巴也變的很小
  • 2:41 - 2:44
    如果我讓 faceSize 是原來的一半
  • 2:45 - 2:48
    眼睛和嘴巴也應該變成原本的一半
  • 2:48 - 2:50
    不然看起來會很怪
  • 2:50 - 2:53
    因為它的眼睛和嘴巴
    對它的臉來說都太大了
  • 2:53 - 2:55
    甚至看起來不像一體了
  • 2:56 - 2:59
    因此我們想改變這些變數
  • 3:00 - 3:02
    像是 mouthSize 和 eyeSize
  • 3:02 - 3:05
    取決於 faceSize 的變數
  • 3:06 - 3:09
    我們回來看那是什麼
  • 3:09 - 3:11
    我們能做的就是
  • 3:11 - 3:17
    讓這些值依據 faceSize 的值
  • 3:17 - 3:22
    我們可以寫 mouthSize = faceSize/2
  • 3:22 - 3:24
    在這裡用臉去做比例
  • 3:24 - 3:28
    做成臉的一半
  • 3:28 - 3:30
    如果你還不熟悉分數
  • 3:30 - 3:32
    這裡有很多可汗學院的影片
  • 3:32 - 3:36
    你可以複習要怎麼做分數
  • 3:36 - 3:41
    接下來是 eyeSize，大概是 faceSize/4
  • 3:41 - 3:44
    不是很完美，但看起來還不賴
  • 3:44 - 3:47
    7，還不錯
  • 3:47 - 3:49
    如果你一開始用錯分數
  • 3:49 - 3:51
    永遠都能改成更好的值
  • 3:51 - 3:54
    只要一直試，就能找出最適合的數字
  • 3:54 - 3:58
    好了，現在如果我們重新訂出臉的大小
  • 3:58 - 4:03
    看看眼睛和嘴巴實際上是不是有跟著變化
  • 4:03 - 4:04
    蠻酷的喔！
  • 4:04 - 4:07
    但是，還有個部分有問題
  • 4:07 - 4:10
    眼睛和嘴巴變小的時候
  • 4:10 - 4:12
    不在臉上
  • 4:12 - 4:16
    大小對了，問題是不在臉上
  • 4:18 - 4:21
    就是下面這裡
  • 4:21 - 4:24
    我們定位橢圓形的時候
  • 4:25 - 4:31
    有 x - 50 和 y - 50
    還有 x + 100 和 y - 60
  • 4:32 - 4:36
    即使我們的臉只有 50 像素
  • 4:36 - 4:41
    我們的眼睛還是在中央 -50 像素的位置
  • 4:41 - 4:44
    那就會偏離臉了
  • 4:44 - 4:48
    我們需要 50、100，還有這裡的這些數字
  • 4:48 - 4:52
    每個都用分數和 faceSize 做出比例
  • 4:52 - 4:54
    那麼當 faceSize 改變
  • 4:54 - 4:59
    讓眼睛和嘴巴偏移的數字
  • 4:59 - 5:01
    都應該跟著改變
  • 5:02 - 5:05
    從第一個眼睛開始示範
  • 5:05 - 5:08
    x - 50，所以 x - 50 像素
  • 5:08 - 5:12
    這表示那需要在臉中央偏左 50 像素的位置
  • 5:13 - 5:15
    現在我們希望運用分數
  • 5:15 - 5:20
    那就變成 faceSize/6
  • 5:20 - 5:22
    臉的 1/6 大
  • 5:23 - 5:29
    酷喔，那麼 50 也一樣會變成 faceSize/6
  • 5:30 - 5:31
    如果我們重新定義大小
  • 5:32 - 5:35
    注意眼睛怎麼變得正好在對的位置上
  • 5:36 - 5:38
    溫斯頓，很棒的眼睛！
  • 5:39 - 5:41
    另一個眼睛也需要同樣的協助
  • 5:41 - 5:48
    100 要變成 faceSize/3，也就是臉的1/3 大
  • 5:48 - 5:53
    60 是臉的 1/5 大，那就是 faceSize/5
  • 5:54 - 5:57
    太棒了
    我們來重新做大小，很好
  • 5:57 - 6:00
    我們的嘴巴也有點問題
  • 6:00 - 6:02
    我們下來看看嘴巴
  • 6:02 - 6:07
    或許也是 faceSize/6
  • 6:07 - 6:10
    這個大概是 faceSize/7
  • 6:11 - 6:16
    現在每個東西都按比例完成了
    來檢查看看
  • 6:16 - 6:19
    哇！現在我們可以讓溫斯頓變很小
  • 6:19 - 6:22
    他的眼睛和嘴巴也還是在臉裡面！
  • 6:23 - 6:27
    我相信溫斯頓也會很開心
  • 6:27 - 6:28
    好了！耶！
  • 6:28 - 6:30
    我們來複習剛剛做的事
  • 6:31 - 6:33
    上面有我們的變數
  • 6:33 - 6:37
    我們從變數開始，存成 200
  • 6:37 - 6:40
    接著，我們讓 mouthSize 和 eyeSize 的變數
  • 6:40 - 6:43
    依據那個數值，按比例變化
  • 6:43 - 6:46
    也就是現在如果 faceSize 是 200
  • 6:46 - 6:48
    mouthSize 就會變 100
  • 6:48 - 6:50
    如果我們讓 faceSize 變 300
  • 6:50 - 6:53
    mouthSize 就會馬上變成 150
  • 6:54 - 6:56
    永遠都按照比例變化
  • 6:57 - 7:00
    接下來，我們計算偏移量
  • 7:00 - 7:01
    同樣運用比例
  • 7:01 - 7:06
    因為我們希望偏移量也跟著改變
  • 7:06 - 7:09
    按照 faceSize 的比例
  • 7:09 - 7:10
    基本上我們希望成功
  • 7:10 - 7:15
    所以我們只要有這個變數，就能影響每一個部分
  • 7:15 - 7:18
    我們可以用變數和變數運算式來完成
  • 7:20 - 7:21
    現在我們了解
  • 7:21 - 7:24
    要如何讓變數依照其他變數的值而改變
  • 7:24 - 7:26
    我們可以多做課程的練習
  • 7:26 - 7:30
    來慶祝溫斯頓長大吧！
  • 7:30 - 7:33
    長大，溫斯頓，繼續長大！
  • 7:34 - 7:37
    別停！繼續長大！
Title:
Variable Expressions (Video Version)
Description:
more » « less
Video Language:
English
Duration:
07:42

Chinese, Traditional subtitles

Revisions

Our website uses cookies for analysis purposes.