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!