Wracamy do Winstona.
Mamy już zmienne "x" i "y" określające jego pozycję.
Możemy przesuwać go na boki,
w górę i w dół... Świetnie!
Zmodyfikujmy wartości zmiennych. Dajmy 200 i 200.
Zobaczmy jeszcze raz, jak ten program działa.
Zaczynamy tutaj.
Jest zmienna "eyeSize" określająca wielkość oczu.
Mają 40 pikseli szerokości i 40 pikseli wysokości.
Są też zmienne "x" i "y".
Określają środek twarzy.
Widzimy je w poleceniu "ellipse", które rysuje duże żółte koło.
Zmienne "x" i "y" przydają się też przy oczach.
Tutaj oczy są rozmieszczone
względem środka twarzy,
to znajduje się 50 pikseli w lewo od środka,
a to - 100 pikseli w prawo.
No dobrze.
Dzięki temu możemy przesuwać Winstona w górę i w dół.
Chcę kontrolować więcej elementów jego twarzy, z użyciem zmiennych.
Zastanawiam się, co jeszcze możemy przechowywać jako zmienne.
Przyjrzę się każdej linii kodu
i poszukam ręcznie wpisanych liczb.
To po prostu liczby,
a nie zmienne. Nie zależą od zmiennych.
Zacznijmy od pierwszego przywołania elipsy.
Mamy 300 i 300 dla szerokości i wysokości.
To po prostu liczby.
Zróbmy z nich zmienną o nazwie "faceSize"
i niech przechowuje 300.
Wpiszę "faceSize"...
"faceSize". Dobrze.
I dalej. Kolory opuścimy.
Teraz polecenia dotyczące elipsy
są zmiennymi lub zależą od zmiennych. Na razie tak je zostawię.
W poleceniu dotyczącym ust te wartości zależą od "x" i "y"
a te - to po prostu liczby.
150 i 150.
Napiszemy więc "mouthSize"...
Wartość: 150.
Zastąpimy to "mouthSize".
I... "mouthSize". W porządku.
Mamy wielkości figur przechowane jako zmienne u góry.
Dzięki temu będzie łatwo je zmieniać.
O, tak. Winston jest głodny!
A teraz...
Zgłodniał, najadł się pączków
i jest teraz olbrzymi!
Ale nie podoba mi się coś w programie.
Jeśli zmienię "faceSize"
tak, żeby twarz była malutka,
uzyskam coś dziwnego. Usta i oczy wystają.
Wydaje się, że nie są nawet z nią połączone. To już nie twarz!
Chcę, żeby przy zmianie wielkości twarzy
usta i oczy także się zmieniały.
Jeśli zmniejszę twarz o połowę,
to niech usta zmaleją proporcjonalnie.
To oznacza, że...
chcę przedstawić wielkość oczu i ust
jako ułamek wielkości twarzy.
Dobrze.
Określmy zmienne i pokażę, o co chodzi.
Zacznijmy od "mouthSize".
Teraz "faceSize" wynosi 300,
a "mouthSize" to 150.
Zestawiając te wartości,
powiemy, że "faceSize" jest 2 razy większe od "faceSize".
Albo że "mouthSize" jest połową "faceSize".
Napiszemy to tak.
Jedna druga razy "faceSize".
Dobrze. Ta linia mówi, że bierzemy wartość "faceSize",
mnożymy ją przez 0,5 i przechowujemy w "mouthSize".
Jeśli więc zmienimy to,
program wyliczy połowę i zrobi mniejsze usta.
Doskonale. O to chodziło.
Teraz wielkość oczu.
"FaceSize" wynosi 300, a "eyeSize" 40.
Zatem interesuje nas 40/300 wartości "faceSize".
Czyli... zobaczmy... 4 przez 30...
i skrócimy do 2/15.
Mamy więc 2/15 "faceSize".
Jeśli to sprawia wam trudność,
bo nie znacie jeszcze ułamków, obejrzyjcie filmy w Khan Academy
i wróćcie tutaj, gdy będziecie gotowi.
No dobrze. Spróbujmy jeszcze raz zmienić wielkość twarzy.
Ha! Patrzcie! Usta i oczy zmieniają się proporcjonalnie!
Ale widzicie, że coś jest nie tak.
Oczy i usta nadal wystają poza twarz,
choć mają już odpowiednią wielkość.
To dlatego, że zostały jeszcze liczby w "ellipse".
A powinny być ułamkami zmiennych.
Pokażę.
Zatem elipsa-oko
ma pozycję "x - 50".
I zawsze tyle, nawet jeśli twarz jest mniejsza niż 50 pikseli.
To bez sensu, bo lewe oko nie zmieści się w twarzy.
Powinno być "x" minus ułamek wielkości twarzy.
Ułamek wyliczymy tak samo.
50 podzielić przez 300.
A 50 przez 300...
to 5/30 czyli 1/6.
1/6 razy "faceSize".
Tutaj też jest jeszcze 50,
więc mamy to samo wyrażenie.
Tu jest 100 przez 300.
Czyli 1/3 razy "faceSize".
Tutaj mamy 60,
więc będzie 1/5 razy "faceSize",
a tu znowu 50, więc 1/6.
I jeszcze 40. To obliczyliśmy tutaj.
2/15.
2/15 razy "faceSize".
Dobrze. Spróbujmy jeszcze raz.
Patrzcie tylko! Pięknie!
Bardzo dobrze. Powtórzmy.
Stworzyliśmy zmienną przechowującą wielkość twarzy.
Przechowuje ją jako liczbę.
Mamy też zmienne "mouthSize" i "eyeSize",
które przedstawiamy w postaci ułamków "faceSize",
by ich wartości zmieniały się
zależnie od wartości początkowej.
Całą resztę także obliczamy na podstawie "faceSize",
by zmieniała się pozycja elementów w twarzy.
Już umiemy robić zmienne zależne od innych zmiennych.
Mamy mnóstwo nowych możliwości.
Uczcijmy to, sprawiając, że Winston będzie wielki!
Tak, Winston!