我們回來看溫斯頓
現在我們有 x 和 y 兩個變數
標示出溫斯頓的位置
因此就能讓它上下移動
來場溫斯頓派對!哇嗚!
不錯喔!
我們先複習這個程式碼的內容
再繼續下面的課程
上層有 x 和 y 的變數
儲存了溫斯頓的臉的中心位置
我們用這一行
來製作臉的橢圓形
接著我們將它的眼睛和嘴巴定位
對照臉的中心位置
減少或增加 x 和 y,確保眼睛
在 50 像素與 100 像素的位置
例如,嘴巴
在臉中心向右 50 像素
向下 40 像素的位置
接著我們繼續
還有什麼能存成變數
為了找出來,我要檢查每一行的程式碼
找出以固定值「寫死」的數值
那些數值是固定的
而非變數或依變數
讓我們看看,在第一次呼叫橢圓形的地方
數值 300 和 300,是指寬和高
我們可以將某些項目做成變數,像是 faceSize
那麼 faceSize = 300
接著我們可以把 faceSize 傳遞進來
現在,它就會讓值變成 300
酷喔
我們繼續做下去
這裡的每一步都運用 x、y 或 eyeSize
嘴巴這邊,我們同樣有 150 的寬
和150 的高
我們可以把 mouthSize 寫成變數
例如 mouthSize = 150
然後我們在這邊傳遞 mouthSize 的大小
150 傳遞過來了
因為變數就是這麼大
我們已經做好了
現在我們就能輕易改變 faceSize
也能輕易改變 mouthSize
還能像那樣移動
我們可以再次改變 eyeSize
好了,真酷!
但還有一個部分我不太喜歡
那就是我改變 faceSize 的時候
其實希望所有東西依據
faceSize來做改變
如果我把 faceSize 做得像這麼小
我想要它的眼睛和嘴巴也變的很小
如果我讓 faceSize 是原來的一半
眼睛和嘴巴也應該變成原本的一半
不然看起來會很怪
因為它的眼睛和嘴巴
對它的臉來說都太大了
甚至看起來不像一體了
因此我們想改變這些變數
像是 mouthSize 和 eyeSize
取決於 faceSize 的變數
我們回來看那是什麼
我們能做的就是
讓這些值依據 faceSize 的值
我們可以寫 mouthSize = faceSize/2
在這裡用臉去做比例
做成臉的一半
如果你還不熟悉分數
這裡有很多可汗學院的影片
你可以複習要怎麼做分數
接下來是 eyeSize,大概是 faceSize/4
不是很完美,但看起來還不賴
7,還不錯
如果你一開始用錯分數
永遠都能改成更好的值
只要一直試,就能找出最適合的數字
好了,現在如果我們重新訂出臉的大小
看看眼睛和嘴巴實際上是不是有跟著變化
蠻酷的喔!
但是,還有個部分有問題
眼睛和嘴巴變小的時候
不在臉上
大小對了,問題是不在臉上
就是下面這裡
我們定位橢圓形的時候
有 x - 50 和 y - 50
還有 x + 100 和 y - 60
即使我們的臉只有 50 像素
我們的眼睛還是在中央 -50 像素的位置
那就會偏離臉了
我們需要 50、100,還有這裡的這些數字
每個都用分數和 faceSize 做出比例
那麼當 faceSize 改變
讓眼睛和嘴巴偏移的數字
都應該跟著改變
從第一個眼睛開始示範
x - 50,所以 x - 50 像素
這表示那需要在臉中央偏左 50 像素的位置
現在我們希望運用分數
那就變成 faceSize/6
臉的 1/6 大
酷喔,那麼 50 也一樣會變成 faceSize/6
如果我們重新定義大小
注意眼睛怎麼變得正好在對的位置上
溫斯頓,很棒的眼睛!
另一個眼睛也需要同樣的協助
100 要變成 faceSize/3,也就是臉的1/3 大
60 是臉的 1/5 大,那就是 faceSize/5
太棒了
我們來重新做大小,很好
我們的嘴巴也有點問題
我們下來看看嘴巴
或許也是 faceSize/6
這個大概是 faceSize/7
現在每個東西都按比例完成了
來檢查看看
哇!現在我們可以讓溫斯頓變很小
他的眼睛和嘴巴也還是在臉裡面!
我相信溫斯頓也會很開心
好了!耶!
我們來複習剛剛做的事
上面有我們的變數
我們從變數開始,存成 200
接著,我們讓 mouthSize 和 eyeSize 的變數
依據那個數值,按比例變化
也就是現在如果 faceSize 是 200
mouthSize 就會變 100
如果我們讓 faceSize 變 300
mouthSize 就會馬上變成 150
永遠都按照比例變化
接下來,我們計算偏移量
同樣運用比例
因為我們希望偏移量也跟著改變
按照 faceSize 的比例
基本上我們希望成功
所以我們只要有這個變數,就能影響每一個部分
我們可以用變數和變數運算式來完成
現在我們了解
要如何讓變數依照其他變數的值而改變
我們可以多做課程的練習
來慶祝溫斯頓長大吧!
長大,溫斯頓,繼續長大!
別停!繼續長大!