1
00:00:00,290 --> 00:00:00,650
OK.

2
00:00:00,690 --> 00:00:11,030
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.

3
00:00:11,100 --> 00:00:14,920
Więc rzeczywiście bardzo proste linie 4 ish kodu, które trzeba.

4
00:00:15,150 --> 00:00:28,410
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.

5
00:00:28,620 --> 00:00:29,750
Rysuję kolejny krąg.

6
00:00:29,750 --> 00:00:33,720
Myślę, że promień jest 10 przez całą drogę aż do 1000.

7
00:00:33,720 --> 00:00:36,540
Więc to jest 1000 1000 właśnie tutaj.

8
00:00:37,260 --> 00:00:45,380
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.

9
00:00:45,390 --> 00:00:46,830
Tak, jak można to zrobić.

10
00:00:46,890 --> 00:00:48,240
To zależy od Ciebie.

11
00:00:48,270 --> 00:00:53,760
Musisz dowiedzieć się, jak wygenerować te współrzędne X i Y, które są coraz większe.

12
00:00:53,760 --> 00:00:57,440
I czuć się swobodnie, aby je wszystkie fioletowe lub dowolny kolor.

13
00:00:57,460 --> 00:01:00,250
To naprawdę nie o to chodzi i uczynić je innym kształcie.

14
00:01:00,270 --> 00:01:10,810
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.

15
00:01:10,970 --> 00:01:17,840
Pamiętam dobrze, chyba nie bardzo pamiętam, że nie powiedziałem ci tego, ale że papier JSE można zrobić RGV kolory szesnastkowo.

16
00:01:17,970 --> 00:01:23,610
Więc można wygenerować kolor dokąd zwiększając czerwoną komponent lub składnik, że zielona.

17
00:01:23,820 --> 00:01:28,670
Ale w tym samym minimum Jestem po prostu patrząc na siatce kręgów co najmniej 100.

18
00:01:28,700 --> 00:01:29,260
A jeśli chcesz.

19
00:01:29,270 --> 00:01:32,770
Można też losowo je tak, że są one w każdym miejscu.

20
00:01:32,850 --> 00:01:34,940
Chcę tylko, aby uzyskać wiele środowisk na stronie.

21
00:01:35,010 --> 00:01:35,530
OK.

22
00:01:35,610 --> 00:01:37,540
Więc poświęć chwilę wstrzymać wideo.

23
00:01:37,680 --> 00:01:39,020
Spróbuj tego na własną rękę.

24
00:01:39,030 --> 00:01:40,380
I zaleca, aby zgubić.

25
00:01:40,380 --> 00:01:41,400
Docs są nieco.

26
00:01:41,430 --> 00:01:42,370
Spróbuj kilka rzeczy.

27
00:01:42,390 --> 00:01:51,110
Spójrz na przykładach, a następnie wrócić i pojedziemy nad rozwiązaniem.

28
00:01:51,120 --> 00:01:51,480
W porządku.

29
00:01:51,480 --> 00:01:52,570
Wspaniały.

30
00:01:52,590 --> 00:01:58,780
Więc to, co miałem wcześniej, gdzie skończyłem i mam zamiar się pozbyć prawie wszystkie tego kodu.

31
00:01:58,950 --> 00:02:00,940
Więc nie chcemy już tej linii.

32
00:02:01,230 --> 00:02:02,940
Wszelkie tego.

33
00:02:02,940 --> 00:02:03,930
Spójrzmy.

34
00:02:03,930 --> 00:02:07,330
Rozwiązujemy że gigantyczne koło której nie jest potrzebny.

35
00:02:07,470 --> 00:02:12,780
Będziemy chcieli, aby utrzymać ten kod tak, że wiemy, jak zrobić koło, ale nie chcemy gigantyczny jeden.

36
00:02:12,960 --> 00:02:15,500
Więc to, co chcemy zrobić tutaj jest użyć pętli.

37
00:02:15,930 --> 00:02:28,610
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ć.

38
00:02:28,800 --> 00:02:34,080
Więc zrobimy pętlę i zaczniemy na zero pętli za daleko.

39
00:02:34,110 --> 00:02:35,360
Jest równa zeru.

40
00:02:35,650 --> 00:02:38,110
Itis mniej przyjemne, a to może być cokolwiek.

41
00:02:38,130 --> 00:02:40,080
Zrobiłem to w 1000.

42
00:02:40,140 --> 00:02:43,980
A właściwie to pozwala mi uzyskać X, więc jest to bardziej przejrzyste.

43
00:02:45,300 --> 00:02:46,780
I za każdym razem przez.

44
00:02:46,800 --> 00:03:05,890
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.

45
00:03:05,930 --> 00:03:09,960
To pozwoliłoby nam 10 okręgów dokładnie w tym samym punkcie tej samej rasy.

46
00:03:09,960 --> 00:03:19,050
Więc nie to, co chcemy zróbmy X i Y przecinek być ustalona jako 0.

47
00:03:19,860 --> 00:03:27,260
Więc to powinno nam linię kręgach wszystkie z współrzędna Y zera i promień uczynią 10.

48
00:03:27,330 --> 00:03:38,640
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.

49
00:03:38,670 --> 00:03:42,790
Więc to, co chcemy zrobić, to po prostu powtórzyć to jeszcze raz.

50
00:03:42,930 --> 00:03:45,670
Mamy więc nasz pierwszy raz dzięki.

51
00:03:45,900 --> 00:03:49,700
Musimy jeden z tych wierszy 10 razy idąc w dół.

52
00:03:49,980 --> 00:03:52,790
A najlepszym sposobem na to jest za pomocą innego pętlę.

53
00:03:53,070 --> 00:03:58,820
Dlatego chcemy, aby wziąć to, co mamy tu i po prostu powtórzyć to wszystko, dzięki czemu możemy dokonać innego pętlę.

54
00:03:59,340 --> 00:04:02,990
I tym razem zrobimy to dla współrzędnych y.

55
00:04:03,060 --> 00:04:09,240
Dlaczego więc powinny iść w górę i powiedzieć 1000 r Plus wynosi 100, jak również.

56
00:04:09,540 --> 00:04:12,130
I będę Cię przez dokładnie, jak to działa.

57
00:04:12,150 --> 00:04:21,560
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ć.

58
00:04:21,990 --> 00:04:24,940
Warto więc odświeżyć widać jeśli mamy tę siatkę.

59
00:04:25,080 --> 00:04:29,880
Więc nie jest to najbardziej ekscytująca rzecz, ale bardzo szybko dodaje kilka okręgów.

60
00:04:29,910 --> 00:04:32,430
Warto więc przyjrzeć się tym zagnieżdżonych pętli.

61
00:04:32,460 --> 00:04:37,210
Więc zwrócił trochę schemat po raz pierwszy przez firmę X zaczyna się od zera.

62
00:04:37,800 --> 00:04:43,610
Więc zrobię to w ten sposób, gdzie mamy xi y.

63
00:04:44,220 --> 00:04:44,910
OK.

64
00:04:44,910 --> 00:04:48,970
Pozwól mi wykorzystać ją tak X zaczyna się od zera.

65
00:04:50,460 --> 00:04:55,840
I wtedy, gdy X jest 0 robimy to słowo pętli Y rozpoczyna się od zera.

66
00:04:56,280 --> 00:04:58,540
Właśnie tak.

67
00:04:59,400 --> 00:05:03,460
A potem następnym razem przez ten y pętli X jest nadal zero.

68
00:05:03,660 --> 00:05:06,210
Ale tym razem, dlaczego jest 100.

69
00:05:06,210 --> 00:05:13,610
Ponieważ dodamy sto, a następnie x nadal jest zero i Y wynosi 200.

70
00:05:14,130 --> 00:05:15,350
Następnie zmienna x jest równe zero.

71
00:05:15,390 --> 00:05:18,090
Dlatego 300 i tak dalej.

72
00:05:18,280 --> 00:05:21,260
Zrobię kropka kropka kropka i powiedz X wynosi zero.

73
00:05:21,660 --> 00:05:37,590
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.

74
00:05:38,460 --> 00:05:44,690
Więc w zasadzie dla każdego x mamy generując 10 y jest.

75
00:05:44,970 --> 00:05:49,500
Tak, że kończy się to nam 100 lub 100 iteracji.

76
00:05:49,530 --> 00:06:00,210
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.

77
00:06:00,210 --> 00:06:03,370
A my rysując okrąg w każdym z tych intel.

78
00:06:03,420 --> 00:06:07,590
Dlaczego więc resetuje a następnie X idzie i przyrosty.

79
00:06:07,890 --> 00:06:08,250
OK.

80
00:06:08,250 --> 00:06:12,060
Więc niby moim zdaniem mylące.

81
00:06:12,060 --> 00:06:15,000
Ostatnią rzeczą jaką możemy zrobić, to niewielka zmiana.

82
00:06:15,000 --> 00:06:18,430
My nie faktycznie trzeba zapisać to do zmiennej za każdym razem.

83
00:06:19,230 --> 00:06:29,740
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.

84
00:06:30,120 --> 00:06:31,290
My tylko czyniąc je jednocześnie.

85
00:06:31,410 --> 00:06:45,730
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.

86
00:06:45,900 --> 00:06:46,560
No to jedziemy.

87
00:06:46,800 --> 00:06:47,220
OK.

88
00:06:47,370 --> 00:06:52,560
Więc to było trochę z przekierowaniem tutaj, ale nadal bardzo ważne.

89
00:06:52,560 --> 00:06:54,680
Znowu motywacja za sobą robić.

90
00:06:54,690 --> 00:06:55,380
Mam nadzieję, że to zrobił.

91
00:06:55,400 --> 00:07:16,810
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.