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!