Resizing shapes with variable expressions

Chúng ta sẽ trở lại với Winston.

Giờ ta có cả biến 'x' và 'y' dành cho

vị trí của Winston.

Vì vậy, ta có thể di chuyển anh ta sang hai bên,

lên và xuống, woo!

Đẹp quá.

Bây giờ, hãy thiết lập lại giá trị các biến

thành 200 và 200

và xem lại cách chương trình hoạt động.

Vì vậy, từ chỗ này, ta đã có biến 'eyeSize'.

Nó dùng để điều chỉnh kích thước mắt,

bởi vì đôi mắt có chiều rộng 40 pixel

và cao 40 pixel.

Và rồi ta có các biến 'x' và 'y',

và đó là vị trí của tâm điểm khuôn mặt.

Và ta có thể thấy chúng được dùng

trong lệnh ellipse

để vẽ một vòng tròn lớn màu vàng.

Và sau đó ở dưới đây,

dành cho đôi mắt,

'x' và 'y' lại được dùng.

Và đây nữa,

đôi mắt được đặt ở vị trí

tương quan với tâm điểm của khuôn mặt.

Vì vậy, có lẽ nó lệch

50 pixel

về phía bên trái của tâm điểm

và cái này lệch 100 pixel

về phía bên phải của tâm điểm.

OK. Khá ổn.

và đó là lý do tại sao ta có thể

di chuyển Winston lên xuống.

Bây giờ, tôi còn muốn điều chỉnh

nhiều hơn cho khuôn mặt của Winston

với các biến.

Nhưng tôi vẫn muốn xem

còn thứ gì khác, trong một chương trình,

mà ta có thể dùng biến để lưu trữ nữa.

Để làm được điều đó

tôi sẽ xem

từng dòng code

và tìm kiếm thứ gọi là

các giá trị hard-code (code cứng).

Đó là những con số,

chỉ riêng số mà thôi,

không phải biến hay phụ thuộc vào biến.

Hãy bắt đầu từ đây,

trong lần gọi lệnh ellipse đầu tiên,

ta có 300 và 300

ứng với chiều rộng và chiều cao.

Đó chỉ là những con số

nên hãy tạo một biến

để thay thế cho những giá trị đó

với tên là faceSize.

Và nó lưu giá trị là 300.

Giờ ta sẽ viết faceSize,

faceSize.

OK. Ta tiếp tục.

và bỏ qua phần màu sắc.

Giờ câu lệnh ellipse cũng vậy.

Chúng đều là biến hoặc

phụ thuộc vào biến

vì vậy tạm thời

ta sẽ để chúng như vậy.

Và sau đó là lệnh mouth

cũng phụ thuộc vào 'x' và 'y'

nhưng những gì ở đây

lại chỉ là những con số độc lập

150 và 150.

Như vậy ta sẽ có

mouthSize, một cái tên hay đấy,

bằng 150.

Ta sẽ thay thế chỗ này bằng mouthSize

và mouthSize.

Được rồi.

Ta lưu kích thước của các hình vẽ

trong các biến ở trên cùng

để ta có thể thực sự dễ dàng

thay đổi kích thước

như thế này, như thế này...

Wooo Winston đang đói

và sau đó kiểu như, bạn biết đấy,

Winston đói và

rồi anh ta ăn rất nhiều bánh rán

và sau đó trở nên siêu bự.

Ổn rồi.

nhưng có điều gì đó

tôi không thích ở chương trình vào lúc này.

Nếu tôi để kích thước khuôn mặt rất nhỏ

thì nó bắt đầu trông buồn cười

vì mắt và miệng

đang nhô ra khỏi mặt

và tại một số điểm nhất định, nó thậm chí

trông chả liên quan gì

tới khuôn mặt,

hay nó không còn là một khuôn mặt nữa, phải không?

Vì vậy, ta thực muốn nó xảy ra

là khi thay đổi khuôn mặt

ta muốn mắt và miệng -

kích thước của chúng thay đổi theo.

Vì vậy, nếu tôi đặt FaceSize là một nửa kích thước.

Ta muốn miệng cũng bằng một nửa kích thước.

Như vậy, nghĩa là,

ta muốn tính toán mouthSize và eyeSize

bằng vài phần của faceSize.

Được rồi, hãy thiết lập lại các biến này

và tôi sẽ cho bạn thấy tôi có ý gì.

Hãy bắt đầu với mouthSize.

Hiện giờ

faceSize có kích thước là 300 và mouthSize là 150.

Vì vậy, nếu ta nghĩ về

sự tương quan của chúng,

ta sẽ nói rằng faceSize lớn gấp đôi

mouthSize

hoặc mouthSize lớn bằng một nửa

của faceSize.

Và ta có thể viết code như sau

1/2 faceSize.

OK. Dòng code này nói

rằng ta lấy giá trị của faceSize

nhân nó với 1/2

và lưu vào biến mouthSize

để nếu ta thay đổi cái này ở đây

nó sẽ biết một nửa giá trị đó là gì

và đó chính là mouthSize.

Hoàn hảo! Đó là những gì ta muốn

Như vậy, bây giờ đến lượt eyeSize,

faceSize có giá trị là 300

và eyeSize là 40.

Như vậy ta cần nó nhận giá trị

40/300 của faceSize.

tức là, xem nào

4/30, ta có thể

tối giản thàn 2/15.

Như vậy ta có

2/15 lần faceSize.

Nhân đây,

nếu bạn chưa quen với phân số

và phần tính toán số học trên làm khó bạn,

hãy tìm hiểu thêm về phân số

trên Khan Academy

và quay lại đây khi bạn

cảm thấy sẵn sàng.

Ở đây này, bạn chỉ cần truy cập vào đó.

OK.

Như vậy, hãy thử thay đổi kích thước khuôn mặt một lần nữa.

Haha! Kiểm tra nó

miệng và mắt thay đổi kích thước

cân xứng với khuôn mặt.

Nhưng ta nhận thấy

có gì đó không đúng ở đây.

Mắt và miệng

vẫn còn nhô ra khỏi khuôn mặt

dù cho chúng có

kích thước hợp lý hơn nhiều.

Đó là bởi vì ta vẫn còn

một số phần hard-code

trong các lệnh ellipse của mình.

Những con sô đó thực sự cần phải

được thay thế bằng tỷ lệ với các biến.

Ở đây, tôi sẽ chỉ cho bạn.

Như vậy, đối với hình elip vẽ mắt ta có

x - 50 để ra vị trí 'x'

Điều này có nghĩa là nó luôn luôn bằng 'x - 50'.

Ngay cả khi ta đặt faceSize

nhỏ hơn 50 pixel.

Và nó chắc chắn không có ý nghĩa

bởi vì điều đó có nghĩa là

mắt trái sẽ

Vì vậy nó phải là x trừ đi 1 phần

kích thước khuôn mặt

và ta có thể tìm ra phân số

theo cùng một cách.

50 so với 300 ban đầu.

50/300, 5/30, 1/6.

Như vậy, 1/6 của faceSize.

Và ta thấy con số 50 khác ở đây

vì vậy ta có thể làm điều tương tự

cùng một biểu thức.

Ở đây ta có 100/300

tức là

1/3 faceSize,

cái này là 60.

Như vậy cuối cùng sẽ

là 1/5 lần faceSize

Và đây là 50

vậy là 1/6 nữa.

Và sau đó 40.

Đó là những gì ta đã tìm ra ở đây,

2/15.

Như vậy, 2/15 lần faceSize.

Được rồi, hãy thử lại xem.

Ồ, nhìn kìa!

Hãy nhìn xem. Đẹp quá!

Tuyệt rồi!

OK, hãy cùng xem lại nhé.

Ta đã tạo ra biến này

để lưu kích thước của khuôn mặt

và nó lưu giữ một giá trị

rồi ta có các biến mouthSize

và eyeSize

và ta tính toán chúng dựa trên tỷ lệ

với faceSize

để chắc chắn rằng

giá trị của chúng luôn thay đổi

theo giá trị khởi điểm (faceSize)

vì tất cả các giá trị còn lại được tính toán

cũng dựa trên faceSize

để đảm bảo rằng vị trí

các bộ phận trên khuôn mặt thay đổi

khi faceSize thay đổi

Whoo! Ổn rồi.

Như vậy, giờ ta đã thực sự hiểu

cách làm cho các biến

phụ thuộc vào giá trị của biến khác.

Ta còn có thể làm nhiều hơn nữa với những chương trình mình.

Hãy ăn mừng bằng cách làm Winston

trở nên khổng lồ! Yeah, đi nào Winston!