1
00:00:00,290 --> 00:00:00,650
OK.

2
00:00:00,690 --> 00:00:11,030
Dus zoals ik al zei we gaan om een ​​snelle oefening te doen en het gaat om zo ver als het eindproduct gaat heel underwhelming, maar het is een goede gewoon om wat oefenen met Paperchase krijgen.

3
00:00:11,100 --> 00:00:14,920
Dus eigenlijk heel simpel 4 ish regels code die je nodig hebt.

4
00:00:15,150 --> 00:00:28,410
Het enige dat ik wil is een raster van cirkels en de exacte afmetingen niet uit wat ik hier heb is een cirkel te beginnen bij nul nul en elke 100 pixels.

5
00:00:28,620 --> 00:00:29,750
Ik ben een andere cirkel tekenen.

6
00:00:29,750 --> 00:00:33,720
Ik denk dat straal is 10 helemaal tot aan 1000.

7
00:00:33,720 --> 00:00:36,540
Dus dit is 1000 1000 hier.

8
00:00:37,260 --> 00:00:45,380
Dus het maakt eigenlijk niet uit gewoon 100 ish cirkels op het scherm uiteraard zonder dat deze handmatig degene die het doet op een tijdstip dat is het punt.

9
00:00:45,390 --> 00:00:46,830
Dus hoe kun je dat doen.

10
00:00:46,890 --> 00:00:48,240
Dat is aan jou.

11
00:00:48,270 --> 00:00:53,760
Je moet om erachter te komen hoe je die coördinaten x en y-coördinaten die worden steeds meer genereren.

12
00:00:53,760 --> 00:00:57,440
En voel je vrij om ze allemaal paars of elke kleur.

13
00:00:57,460 --> 00:01:00,250
Het is niet echt het punt of ze een andere vorm.

14
00:01:00,270 --> 00:01:10,810
Dus probeer het doen van een vierkant of een rechthoek of probeer iets meer plezier waar u de kleuren op een helling, zodat als X groter krijgt de kleur roder wordt.

15
00:01:10,970 --> 00:01:17,840
Ik herinner me nog goed denk ik niet echt herinneren Ik heb niet verteld u dit, maar dat papier JSE u kunt RGV kleuren doen hexadecimaal.

16
00:01:17,970 --> 00:01:23,610
Zo kunt u een kleur waar je het verhogen van de rode component of dat groene component te genereren.

17
00:01:23,820 --> 00:01:28,670
Maar op zijn minst Ik ben gewoon op zoek naar een raster van cirkels ten minste 100.

18
00:01:28,700 --> 00:01:29,260
En als je wilt.

19
00:01:29,270 --> 00:01:32,770
Je zou ook kunnen willekeurig hen, zodat ze all over the place.

20
00:01:32,850 --> 00:01:34,940
Ik wil gewoon dat je heel wat rondjes te krijgen op de pagina.

21
00:01:35,010 --> 00:01:35,530
OK.

22
00:01:35,610 --> 00:01:37,540
Dus neem een ​​moment pauzeren van een video.

23
00:01:37,680 --> 00:01:39,020
Probeer deze op uw eigen.

24
00:01:39,030 --> 00:01:40,380
Ik stel voor dat je de weg kwijt.

25
00:01:40,380 --> 00:01:41,400
De documenten zijn een beetje.

26
00:01:41,430 --> 00:01:42,370
Probeer wat dingen uit.

27
00:01:42,390 --> 00:01:51,110
Kijk naar de voorbeelden en kom dan terug en we zullen meer dan oplossing gaan.

28
00:01:51,120 --> 00:01:51,480
Okee.

29
00:01:51,480 --> 00:01:52,570
Grote.

30
00:01:52,590 --> 00:01:58,780
Dus dit is wat ik eerder had waar ik ben gebleven en ik ga om zich te ontdoen van bijna alle van deze code.

31
00:01:58,950 --> 00:02:00,940
Dus we niet meer willen die lijn.

32
00:02:01,230 --> 00:02:02,940
Elk van die.

33
00:02:02,940 --> 00:02:03,930
Laten we kijken.

34
00:02:03,930 --> 00:02:07,330
Wij lossen dat gigantische cirkel, die we niet echt nodig hebben.

35
00:02:07,470 --> 00:02:12,780
We willen dat de code te houden, zodat we weten hoe we een kring te maken, maar we willen niet een gigantische één.

36
00:02:12,960 --> 00:02:15,500
Dus wat we hier willen doen is gebruik maken van een lus.

37
00:02:15,930 --> 00:02:28,610
Dus we willen een lus te gebruiken om hier en dan een cirkel een cirkel hier cirkel hier te maken zal in principe 10 of 100 toe te voegen daadwerkelijk aan de x-coördinaat, zodat we kunnen beginnen met dat te doen.

38
00:02:28,800 --> 00:02:34,080
Dus we een lus maken en we beginnen bij nul lussen te ver.

39
00:02:34,110 --> 00:02:35,360
Gelijk is aan nul.

40
00:02:35,650 --> 00:02:38,110
Itis minder leuk en dit kan van alles zijn.

41
00:02:38,130 --> 00:02:40,080
Ik deed het als 1000.

42
00:02:40,140 --> 00:02:43,980
En eigenlijk is het laat me X, dus het is duidelijker.

43
00:02:45,300 --> 00:02:46,780
En elke keer door.

44
00:02:46,800 --> 00:03:05,890
In plaats van het doen van X plus plus die we konden gebruiken om een ​​cirkel elke pixel zal sprongen van 100 te maken en dan is alles wat zal doen, is deze code te kopiëren en maak een cirkel, maar we zullen het veranderen een beetje als we vertrokken.

45
00:03:05,930 --> 00:03:09,960
Dit zou ons 10 rondjes op precies hetzelfde punt hetzelfde ras.

46
00:03:09,960 --> 00:03:19,050
Dus het is niet wat we willen laten we het doen X komma en y zal worden vastgesteld als 0.

47
00:03:19,860 --> 00:03:27,260
Dus dat moet ons een lijn van cirkels allemaal met een y-coördinaat van het nulpunt en radius zal 10 te maken.

48
00:03:27,330 --> 00:03:38,640
En als we een kijkje nemen op die vernieuwen je hier kunt zien nemen krijgen we 10 cirkels gaan over elke 100 pixels krijgen we een nieuwe.

49
00:03:38,670 --> 00:03:42,790
Dus wat we willen doen is in principe dat nog eens te herhalen.

50
00:03:42,930 --> 00:03:45,670
Dus hebben we onze eerste keer door.

51
00:03:45,900 --> 00:03:49,700
We moeten één van deze rijen 10 keer naar beneden gaat.

52
00:03:49,980 --> 00:03:52,790
En de beste manier om dat te doen is met een andere lus.

53
00:03:53,070 --> 00:03:58,820
Dus we willen nemen wat we hier hebben en herhaal dit alles, zodat we nog een lus te maken.

54
00:03:59,340 --> 00:04:02,990
En deze keer zullen we het doen voor de y-coördinaat.

55
00:04:03,060 --> 00:04:09,240
Dus waarom zouden opgaan en vertellen 1000 y plus gelijk is aan 100 ook.

56
00:04:09,540 --> 00:04:12,130
En ik zal u door precies hoe dit werkt.

57
00:04:12,150 --> 00:04:21,560
Ik denk dat geneste lussen kan een beetje verwarrend zijn als we verander gewoon 0 zijn y Nu dat is eigenlijk alles wat we moeten doen.

58
00:04:21,990 --> 00:04:24,940
Dus laten we vernieuwen je zien als we dat net.

59
00:04:25,080 --> 00:04:29,880
Dus niet de meest spannende ding, maar we heel snel een bos van cirkels toegevoegd.

60
00:04:29,910 --> 00:04:32,430
Dus laten we een kijkje nemen op dit sub-lus.

61
00:04:32,460 --> 00:04:37,210
Dus trok ik een beetje diagram de eerste keer door X begint bij nul.

62
00:04:37,800 --> 00:04:43,610
Dus doe ik het als dit waar we x en y.

63
00:04:44,220 --> 00:04:44,910
OK.

64
00:04:44,910 --> 00:04:48,970
Laat ik het zo profiteren X begint bij nul.

65
00:04:50,460 --> 00:04:55,840
En dan, terwijl X is 0 we doen dit loop woord Y begint bij nul.

66
00:04:56,280 --> 00:04:58,540
Gewoon zo.

67
00:04:59,400 --> 00:05:03,460
En dan de volgende keer via deze y lus X is nog steeds nul.

68
00:05:03,660 --> 00:05:06,210
Maar deze keer waarom is 100.

69
00:05:06,210 --> 00:05:13,610
Omdat we voegen honderd en dan x is nog steeds nul is en Y is 200.

70
00:05:14,130 --> 00:05:15,350
Dan is X nul.

71
00:05:15,390 --> 00:05:18,090
Daarom is 300 enzovoort.

72
00:05:18,280 --> 00:05:21,260
Ik zal een dot dot dot te doen en vertellen X is nul.

73
00:05:21,660 --> 00:05:37,590
Waarom is 1000 eigenlijk, omdat we minder dan zal alleen maar tot 900 en dan verandert X naar 100 en dan verandert Y op om terug te gaan naar nul.

74
00:05:38,460 --> 00:05:44,690
Dus eigenlijk voor elke x we ​​het genereren van 10 j's.

75
00:05:44,970 --> 00:05:49,500
Dus dat eindigt met ons te hebben van 100 of 100 iteraties.

76
00:05:49,530 --> 00:06:00,210
Dus het is een beetje verwarrend, maar het helpt als je door deze X begint bij nul y begint bij nul maar dan X blijft op 0 en y gaat tot 100 dan 200.

77
00:06:00,210 --> 00:06:03,370
En we tekenen van een cirkel aan elk van deze intel.

78
00:06:03,420 --> 00:06:07,590
Waarom zet en dan gaat stappen en X.

79
00:06:07,890 --> 00:06:08,250
OK.

80
00:06:08,250 --> 00:06:12,060
Dus soort in mijn mening verwarrend.

81
00:06:12,060 --> 00:06:15,000
Laatste ding dat we kunnen doen is een kleine verandering.

82
00:06:15,000 --> 00:06:18,430
We hebben niet echt nodig om deze op te slaan in een variabele elke keer.

83
00:06:19,230 --> 00:06:29,740
We kunnen dit alleen veranderen als deze en het is iets efficiënter, waar we een variabele niet constant zijn opnieuw toewijzen omdat we nooit meer iets doet met die kringen.

84
00:06:30,120 --> 00:06:31,290
We zijn net waardoor ze een keer.

85
00:06:31,410 --> 00:06:45,730
Dus in plaats van elke keer herschrijven en opnieuw initialiseren van een variabele door de lus maken we gewoon een nieuwe kring geef het een opvulkleur van paars of laten we het doen geel sparen refresh.

86
00:06:45,900 --> 00:06:46,560
Daar gaan we.

87
00:06:46,800 --> 00:06:47,220
OK.

88
00:06:47,370 --> 00:06:52,560
Dus dit was een beetje een afleiding hier, maar nog steeds erg belangrijk.

89
00:06:52,560 --> 00:06:54,680
Opnieuw is de motivatie achter je aan het doen dat.

90
00:06:54,690 --> 00:06:55,380
Hopelijk heb je het deed.

91
00:06:55,400 --> 00:07:16,810
Maar de motivatie was voor u om gewoon de praktijk combineren javascript vaardigheden loops met papier ja en te zien dat alles wat je hoeft te doen is bellen u weet dat een korte lijn van de code en het zou een bos van code uit te voeren achter de schermen om daadwerkelijk die kring OK in de volgende video ook daadwerkelijk te krijgen op met de show en gaan echt werken aan onze pad aanval kloon.
