OK.
Tak jak już wspomniałem mamy zamiar zrobić szybki ćwiczenia i to będzie bardzo rozczarowująca miarę gotowy produkt trafia, ale jest to dobry tylko trochę praktyki z Paperchase.
Więc rzeczywiście bardzo proste linie 4 ish kodu, które trzeba.
Wszystko czego chcę to siatka z okręgów i dokładne pomiary nie ma znaczenia, co mam o to koło zaczynając od zera zeru, a następnie co 100 pikseli.
Rysuję kolejny krąg.
Myślę, że promień jest 10 przez całą drogę aż do 1000.
Więc to jest 1000 1000 właśnie tutaj.
Więc to nie ma znaczenia, po prostu 100 okręgów ish na ekranie oczywiście nie robiąc go ręcznie po jednym na raz, że o to chodzi.
Tak, jak można to zrobić.
To zależy od Ciebie.
Musisz dowiedzieć się, jak wygenerować te współrzędne X i Y, które są coraz większe.
I czuć się swobodnie, aby je wszystkie fioletowe lub dowolny kolor.
To naprawdę nie o to chodzi i uczynić je innym kształcie.
Więc spróbować zrobić kwadrat lub prostokąt lub spróbować czegoś więcej zabawy, gdzie trzeba kolorów na gradient tak, że jak X dostaje większe kolor staje się bardziej czerwone.
Pamiętam dobrze, chyba nie bardzo pamiętam, że nie powiedziałem ci tego, ale że papier JSE można zrobić RGV kolory szesnastkowo.
Więc można wygenerować kolor dokąd zwiększając czerwoną komponent lub składnik, że zielona.
Ale w tym samym minimum Jestem po prostu patrząc na siatce kręgów co najmniej 100.
A jeśli chcesz.
Można też losowo je tak, że są one w każdym miejscu.
Chcę tylko, aby uzyskać wiele środowisk na stronie.
OK.
Więc poświęć chwilę wstrzymać wideo.
Spróbuj tego na własną rękę.
I zaleca, aby zgubić.
Docs są nieco.
Spróbuj kilka rzeczy.
Spójrz na przykładach, a następnie wrócić i pojedziemy nad rozwiązaniem.
W porządku.
Wspaniały.
Więc to, co miałem wcześniej, gdzie skończyłem i mam zamiar się pozbyć prawie wszystkie tego kodu.
Więc nie chcemy już tej linii.
Wszelkie tego.
Spójrzmy.
Rozwiązujemy że gigantyczne koło której nie jest potrzebny.
Będziemy chcieli, aby utrzymać ten kod tak, że wiemy, jak zrobić koło, ale nie chcemy gigantyczny jeden.
Więc to, co chcemy zrobić tutaj jest użyć pętli.
Dlatego chcemy, aby użyć pętli, aby krąg tutaj, a następnie okrąg o kręgu tutaj zasadniczo doda 10 lub 100 rzeczywiście współrzędna x więc możemy zacząć od robić.
Więc zrobimy pętlę i zaczniemy na zero pętli za daleko.
Jest równa zeru.
Itis mniej przyjemne, a to może być cokolwiek.
Zrobiłem to w 1000.
A właściwie to pozwala mi uzyskać X, więc jest to bardziej przejrzyste.
I za każdym razem przez.
Zamiast robić X plus plusa które moglibyśmy wykorzystać, aby krąg każdy piksel uczynią skoki na 100 i wtedy wszystko będzie zrobić, to skopiować ten kod i zrobić kółko ale musimy zmienić ją trochę gdybyśmy zostawili go.
To pozwoliłoby nam 10 okręgów dokładnie w tym samym punkcie tej samej rasy.
Więc nie to, co chcemy zróbmy X i Y przecinek być ustalona jako 0.
Więc to powinno nam linię kręgach wszystkie z współrzędna Y zera i promień uczynią 10.
A jeśli spojrzeć na to odświeżyć można zobaczyć tutaj mamy 10 okręgów dzieje w każdych 100 pikseli otrzymujemy nowy.
Więc to, co chcemy zrobić, to po prostu powtórzyć to jeszcze raz.
Mamy więc nasz pierwszy raz dzięki.
Musimy jeden z tych wierszy 10 razy idąc w dół.
A najlepszym sposobem na to jest za pomocą innego pętlę.
Dlatego chcemy, aby wziąć to, co mamy tu i po prostu powtórzyć to wszystko, dzięki czemu możemy dokonać innego pętlę.
I tym razem zrobimy to dla współrzędnych y.
Dlaczego więc powinny iść w górę i powiedzieć 1000 r Plus wynosi 100, jak również.
I będę Cię przez dokładnie, jak to działa.
Myślę zagnieżdżone pętle może być trochę mylące, jeśli tylko zmieni się 0 y Teraz to właściwie wszystko, co trzeba zrobić.
Warto więc odświeżyć widać jeśli mamy tę siatkę.
Więc nie jest to najbardziej ekscytująca rzecz, ale bardzo szybko dodaje kilka okręgów.
Warto więc przyjrzeć się tym zagnieżdżonych pętli.
Więc zwrócił trochę schemat po raz pierwszy przez firmę X zaczyna się od zera.
Więc zrobię to w ten sposób, gdzie mamy xi y.
OK.
Pozwól mi wykorzystać ją tak X zaczyna się od zera.
I wtedy, gdy X jest 0 robimy to słowo pętli Y rozpoczyna się od zera.
Właśnie tak.
A potem następnym razem przez ten y pętli X jest nadal zero.
Ale tym razem, dlaczego jest 100.
Ponieważ dodamy sto, a następnie x nadal jest zero i Y wynosi 200.
Następnie zmienna x jest równe zero.
Dlatego 300 i tak dalej.
Zrobię kropka kropka kropka i powiedz X wynosi zero.
Dlaczego 1000 są w rzeczywistości, ponieważ mamy mniej to będzie tylko dostać się do 900, a następnie X zmienia się być 100, a następnie Y zmienia się wrócić do zera.
Więc w zasadzie dla każdego x mamy generując 10 y jest.
Tak, że kończy się to nam 100 lub 100 iteracji.
Więc to jest trochę mylące, ale to pomaga, jeśli przejść przez ten X zaczyna się od zera y zaczyna się od zera, ale potem pozostaje na 0 X i Y idzie w górę do 100 niż 200.
A my rysując okrąg w każdym z tych intel.
Dlaczego więc resetuje a następnie X idzie i przyrosty.
OK.
Więc niby moim zdaniem mylące.
Ostatnią rzeczą jaką możemy zrobić, to niewielka zmiana.
My nie faktycznie trzeba zapisać to do zmiennej za każdym razem.
Możemy to zmienić w ten sposób i to jest nieco bardziej wydajny, gdzie nie jesteśmy realokacja zmienną nieustannie, ponieważ nigdy nie robią nic z tych kręgów ponownie.
My tylko czyniąc je jednocześnie.
Więc zamiast przepisywania i ponownie inicjalizacji zmiennej za każdym razem przez pętlę po prostu zrobić nowy krąg nadać mu kolor wypełnienia fioletowy lub zróbmy żółty zapisać odświeżania.
No to jedziemy.
OK.
Więc to było trochę z przekierowaniem tutaj, ale nadal bardzo ważne.
Znowu motywacja za sobą robić.
Mam nadzieję, że to zrobił.
Ale motywacja była dla ciebie po prostu praktyka łączenia umiejętności javascript pętle papierem tak i widząc, że wszystko, co musisz zrobić, to zadzwonić wiesz krótki wiersz kodu i byłoby uruchomić kilka kodu za kulisy, aby rzeczywiście zrobić tego kręgu OK w następnym filmie rzeczywiście dostać się na koncert i zacząć naprawdę działa na naszym ataku pad klonu.