1
00:00:00,290 --> 00:00:00,650
D'ACCORD.

2
00:00:00,690 --> 00:00:11,030
Donc, comme je l'ai mentionné, nous allons faire un exercice rapide et il va être très décevant en ce qui concerne le produit fini va mais c'est une bonne juste pour obtenir une certaine pratique avec paperchase.

3
00:00:11,100 --> 00:00:14,920
Donc, vraiment très simple 4 lignes ish de code que vous avez besoin.

4
00:00:15,150 --> 00:00:28,410
Tout ce que je veux est une grille de cercles et les mesures exactes peu importe ce que j'ai ici est un cercle commençant à zéro zéro et tous les 100 pixels.

5
00:00:28,620 --> 00:00:29,750
Je dessine un autre cercle.

6
00:00:29,750 --> 00:00:33,720
Je pense que le rayon est 10 tout le chemin jusqu'à 1000.

7
00:00:33,720 --> 00:00:36,540
Donc c'est 1000 1000 ici.

8
00:00:37,260 --> 00:00:45,380
Donc, ce n'est pas vraiment important d'obtenir 100 cercles ish à l'écran, évidemment, sans le faire manuellement un à la fois qui est le point.

9
00:00:45,390 --> 00:00:46,830
Alors, comment pouvez-vous faire cela.

10
00:00:46,890 --> 00:00:48,240
C'est à toi de voir.

11
00:00:48,270 --> 00:00:53,760
Vous aurez besoin de trouver comment générer les coordonnées x et y coordonnées qui sont en augmentation.

12
00:00:53,760 --> 00:00:57,440
Et n'hésitez pas à les faire tous pourpre ou n'importe quelle couleur.

13
00:00:57,460 --> 00:01:00,250
Ce n'est pas vraiment le point ou de leur faire une autre forme.

14
00:01:00,270 --> 00:01:10,810
Alors essayez de faire un carré ou un rectangle ou essayer quelque chose de plus amusant où vous avez les couleurs sur un dégradé de sorte que, comme X devient plus la couleur devient plus rouge.

15
00:01:10,970 --> 00:01:17,840
Je me souviens bien, je suppose que je ne me souviens pas vraiment que je ne vous ai pas dit, mais ce papier JSE vous pouvez faire RGV couleurs hexadécimales.

16
00:01:17,970 --> 00:01:23,610
Vous pouvez donc générer une couleur dans laquelle vous incrémenterez la composante rouge ou la composante verte.

17
00:01:23,820 --> 00:01:28,670
Mais au minimum, je cherche juste une grille de cercles au moins 100.

18
00:01:28,700 --> 00:01:29,260
Et si vous voulez.

19
00:01:29,270 --> 00:01:32,770
Vous pouvez également les randomiser afin qu'ils soient partout.

20
00:01:32,850 --> 00:01:34,940
Je veux juste que vous obteniez beaucoup de cercles sur la page.

21
00:01:35,010 --> 00:01:35,530
D'ACCORD.

22
00:01:35,610 --> 00:01:37,540
Alors prenez un moment pause une vidéo.

23
00:01:37,680 --> 00:01:39,020
Essayez ceci vous-même.

24
00:01:39,030 --> 00:01:40,380
Je vous recommande de vous perdre.

25
00:01:40,380 --> 00:01:41,400
Les documents sont un peu.

26
00:01:41,430 --> 00:01:42,370
Essayez certaines choses.

27
00:01:42,390 --> 00:01:51,110
Regardez les exemples et puis revenez et nous allons aller sur la solution.

28
00:01:51,120 --> 00:01:51,480
D'accord.

29
00:01:51,480 --> 00:01:52,570
Génial.

30
00:01:52,590 --> 00:01:58,780
Donc, c'est ce que j'avais avant où je l'ai laissé et je vais me débarrasser de presque tout ce code.

31
00:01:58,950 --> 00:02:00,940
Nous ne voulons plus de cette ligne.

32
00:02:01,230 --> 00:02:02,940
Tout ça.

33
00:02:02,940 --> 00:02:03,930
Nous allons jeter un coup d'oeil.

34
00:02:03,930 --> 00:02:07,330
Nous résolvons ce cercle géant dont nous n'avons pas vraiment besoin.

35
00:02:07,470 --> 00:02:12,780
Nous voulons garder ce code pour que nous sachions comment faire un cercle, mais nous ne voulons pas un géant.

36
00:02:12,960 --> 00:02:15,500
Donc ce que nous voulons faire ici est d'utiliser une boucle.

37
00:02:15,930 --> 00:02:28,610
Donc, nous voulons utiliser une boucle pour faire un cercle ici et puis un cercle ici cercle ici fondamentalement ajouter 10 ou 100 effectivement à la coordonnée x afin que nous puissions commencer par faire cela.

38
00:02:28,800 --> 00:02:34,080
Donc, nous allons faire une boucle et nous allons commencer à zéro boucles pour loin.

39
00:02:34,110 --> 00:02:35,360
Égal à zéro.

40
00:02:35,650 --> 00:02:38,110
C'est moins amusant et ça peut être n'importe quoi.

41
00:02:38,130 --> 00:02:40,080
Je l'ai fait comme 1000.

42
00:02:40,140 --> 00:02:43,980
Et en fait, il me permet d'obtenir X, il est plus clair.

43
00:02:45,300 --> 00:02:46,780
Et chaque fois.

44
00:02:46,800 --> 00:03:05,890
Plutôt que de faire X plus plus que nous pourrions utiliser pour faire un cercle chaque pixel fera des sauts de 100 et puis tout ce qui va faire est de copier ce code et faire un cercle, mais nous allons le modifier un peu si nous l'avons laissé.

45
00:03:05,930 --> 00:03:09,960
Cela nous ferait 10 cercles exactement au même point la même race.

46
00:03:09,960 --> 00:03:19,050
Donc, pas ce que nous voulons faire X coma et y sera fixé à 0.

47
00:03:19,860 --> 00:03:27,260
Donc, cela devrait nous faire une ligne de cercles avec coordonnée y de zéro et le rayon fera 10.

48
00:03:27,330 --> 00:03:38,640
Et si nous prenons un coup d'oeil à ce rafraîchissement, vous pouvez voir ici, nous obtenons 10 cercles passant par tous les 100 pixels, nous obtenons un nouveau.

49
00:03:38,670 --> 00:03:42,790
Donc, ce que nous voulons faire, c'est essentiellement répéter cela à nouveau.

50
00:03:42,930 --> 00:03:45,670
Donc, nous avons notre première fois.

51
00:03:45,900 --> 00:03:49,700
Nous avons besoin d'une de ces lignes 10 fois en baisse.

52
00:03:49,980 --> 00:03:52,790
Et la meilleure façon de le faire est d'utiliser une autre boucle.

53
00:03:53,070 --> 00:03:58,820
Donc, nous voulons prendre ce que nous avons ici et tout simplement répéter tout cela afin que nous puissions faire une autre boucle.

54
00:03:59,340 --> 00:04:02,990
Et cette fois nous allons le faire pour la coordonnée y.

55
00:04:03,060 --> 00:04:09,240
Donc, pourquoi devrait monter et dire 1000 y plus égale à 100 ainsi.

56
00:04:09,540 --> 00:04:12,130
Et je vais vous expliquer exactement comment cela fonctionne.

57
00:04:12,150 --> 00:04:21,560
Je pense que les boucles imbriquées peuvent être un peu déroutantes si nous changeons simplement 0 pour être y Maintenant c'est en fait tout ce que nous devons faire.

58
00:04:21,990 --> 00:04:24,940
Alors, nous allons rafraîchir vous voir si nous obtenons cette grille.

59
00:04:25,080 --> 00:04:29,880
Donc pas la chose la plus excitante mais nous avons très rapidement ajouté un groupe de cercles.

60
00:04:29,910 --> 00:04:32,430
Jetons donc un coup d'oeil à cette boucle imbriquée.

61
00:04:32,460 --> 00:04:37,210
J'ai donc dessiné un petit diagramme la première fois par X commence à zéro.

62
00:04:37,800 --> 00:04:43,610
Donc, je vais le faire comme ça, où nous avons x et y.

63
00:04:44,220 --> 00:04:44,910
D'ACCORD.

64
00:04:44,910 --> 00:04:48,970
Permettez-moi de le capitaliser afin que X commence à zéro.

65
00:04:50,460 --> 00:04:55,840
Et alors alors que X est 0 nous faisons ce mot de boucle Y commence à zéro.

66
00:04:56,280 --> 00:04:58,540
Juste comme ça.

67
00:04:59,400 --> 00:05:03,460
Et puis la prochaine fois à travers cette boucle Y X est toujours zéro.

68
00:05:03,660 --> 00:05:06,210
Mais cette fois pourquoi est 100.

69
00:05:06,210 --> 00:05:13,610
Parce que nous ajoutons cent, alors x est toujours zéro et Y est 200.

70
00:05:14,130 --> 00:05:15,350
Alors X est égal à zéro.

71
00:05:15,390 --> 00:05:18,090
Pourquoi 300 et ainsi de suite.

72
00:05:18,280 --> 00:05:21,260
Je vais faire un dot dot dot et dire X est zéro.

73
00:05:21,660 --> 00:05:37,590
Pourquoi est 1000 sont en fait parce que nous avons moins alors il ne recevra à 900 et puis X changements plus de 100 et puis Y changements plus de revenir à zéro.

74
00:05:38,460 --> 00:05:44,690
Donc, pour chaque x, nous générons 10 y's.

75
00:05:44,970 --> 00:05:49,500
Donc, cela finit par nous avoir 100 ou 100 itérations.

76
00:05:49,530 --> 00:06:00,210
Donc, c'est un peu déroutant, mais il aide si vous passez par ce X commence à zéro y commence à zéro, mais alors X reste à 0 et y passe à 100 à 200.

77
00:06:00,210 --> 00:06:03,370
Et nous dessinons un cercle à chacun de ces intel.

78
00:06:03,420 --> 00:06:07,590
Pourquoi alors réinitialise puis X va et incrémente.

79
00:06:07,890 --> 00:06:08,250
D'ACCORD.

80
00:06:08,250 --> 00:06:12,060
Donc, à mon avis, la confusion.

81
00:06:12,060 --> 00:06:15,000
La dernière chose que nous pouvons faire est un petit changement.

82
00:06:15,000 --> 00:06:18,430
Nous n'avons pas besoin d'enregistrer cette variable à chaque fois.

83
00:06:19,230 --> 00:06:29,740
Nous pouvons simplement changer cela comme ceci et il est légèrement plus efficace où nous ne sommes pas réaffecter une variable en permanence parce que nous ne faisons jamais rien avec ces cercles à nouveau.

84
00:06:30,120 --> 00:06:31,290
Nous les faisons une fois.

85
00:06:31,410 --> 00:06:45,730
Donc, plutôt que de réécrire et de réinitialiser une variable à chaque fois à travers la boucle, nous venons de faire un nouveau cercle lui donner une couleur de remplissage de violet ou de faire jaune sauvegarder rafraîchir.

86
00:06:45,900 --> 00:06:46,560
Voilà.

87
00:06:46,800 --> 00:06:47,220
D'ACCORD.

88
00:06:47,370 --> 00:06:52,560
Donc, c'était un peu un peu de diversion ici mais encore assez important.

89
00:06:52,560 --> 00:06:54,680
Encore une fois la motivation derrière vous faire cela.

90
00:06:54,690 --> 00:06:55,380
J'espère que vous l'avez fait.

91
00:06:55,400 --> 00:07:16,810
Mais la motivation était pour vous d'obtenir juste la pratique combinant les boucles de compétences javascript avec le papier oui et voir que tout ce que vous avez à faire est de vous appeler savoir une courte ligne de code et il exécuterait un tas de code dans les coulisses pour faire réellement ce cercle OK dans la prochaine vidéo va réellement se mettre en branle avec le spectacle et commencer à vraiment travailler sur notre clone d'attaque pad.