Apprendre le codage créatif avec Vanilla JavaScript

1. Aperçu de l'introduction et du projet: départ général, l'artiste crée un processus qui est ensuite mis en mouvement avec un certain degré d'autonomie, aboutissant à une œuvre d'art achevée. J'aime y penser comme une collaboration homme-machine. Aujourd'hui, nous sommes les artistes et HTML, CSS et JavaScript sont la machine. Créez votre œuvre d' art unique avec moi et pratiquez vos compétences en développement Web frontal dans le processus. Dans cette classe, nous passerons de tracer une seule ligne à ceci et ceci, et ceci. Je ne veux pas que vous copiiez simplement mon code. Je veux que vous compreniez vraiment ce qui se passe. Donc aujourd'hui, nous allons tout écrire à partir de zéro, ligne par ligne en utilisant juste des frameworks connus JavaScript vanille et pas de bibliothèques. J'expliquerai chaque ligne de code en détail au fur et à mesure. Ce cours n'est pas destiné aux débutants complets, mais si vous connaissez au moins les bases du HTML, du CSS et du JavaScript, venez me rejoindre et laissez-moi vous montrer comment faire en sorte que la machine nous aide à créer quelque chose d'unique et de beau. Amusez-vous bien. 2. Configuration du projet: Tout ce dont nous avons besoin aujourd'hui pour commencer à travailler, c'est d'un éditeur de code et d'un navigateur Internet. L'ensemble de notre projet sera ces trois fichiers, index HTML style, CSS et script.js. Je crée une page Web de base. Je donne un titre à mon projet et je lie le fichier CSS de style dans la tête de document. Dans le corps de ma page Web, je crée un élément de toile avec une carte d'identité de cannabis. Le cannabis. Il existe un élément HTML spécial qui nous permet de dessiner dessus avec de l'or. Nous pouvons l'utiliser pour dessiner et animer des formes, des images. Nous pouvons créer n'importe quoi , des animations Web simples à très complexes dans l'élément de canevas HTML est bien pris en charge dans tous les navigateurs modernes et l'apprentissage des bases débloquera tant de possibilités. avec des visuels et des animations. À mon avis, chaque développeur Web frontal devrait connaître au moins les bases de Canvas. Permettez-moi de vous montrer à quel point il est facile de dessiner quelque chose dessus avant de commencer à dessiner nos formes interactives où le JavaScript, nous devons lier le fichier script.js ici dans le style CSS. Je prends mon élément de masse en utilisant son ID comme sélecteur, et je lui donne un fond bleu juste pour voir où il se trouve. Vous pouvez voir quelques marges ici, même si je n'en ai pas déclaré aucune. C'est parce que chaque navigateur a des marges et des rembourrages par défaut qui sont automatiquement appliqués à chaque élément pour s'assurer que notre projet ressemble à tous les navigateurs, j'utilise le sélecteur d'astérisque pour ciblez tous les éléments de ma page. Et j'ai dit la marge sur tout à 0, le remplissage à 0 aussi. C'est ce qu'on appelle la réinitialisation globale. Nous pouvons également utiliser la propriété CSS plus récente appelée box-sizing et la définir sur border-box. Cela rendra les éléments bordure et bourgeonnement inclus dans sa largeur et sa hauteur totales. C'est l'un de mes paramètres préférés car il facilite beaucoup les mises en page et les mises en page. Je suppose, une sorte de position absolue. Et j'ai dit qu'il s'agit de la première position 250 % et qu'elle est également en position de gauche à 250 %. Ensuite, j'utilise Transform Translate moins 50% horizontalement et moins 50 % verticalement. C'est ainsi que vous pouvez centrer l'élément absolument positionné exactement au milieu de la page que je donne est en quelque sorte une bordure, cinq pixels, un bloc solide, et je supprime l'arrière-plan bleu. Dans mon fichier JavaScript. J'ai commencé par créer un écouteur d'événements pour l'événement de chargement. Cet événement est appelé sur un objet fenêtre intégré, qui représente la fenêtre du navigateur. événement Load est déclenché lorsque la page entière a été chargée avec tous ses éléments HTML, ainsi que toutes les autres ressources indépendantes telles que feuilles de style et les images à l'intérieur de l'écouteur d'événements. Une fois la page complètement chargée, j'ai configuré mon Canvas. C'est facile. Je crée une variable constante. J'appelle, par exemple US, et je l'ai défini comme point de document GetElementByID et je lui transmets l'ID, j'ai donné mon cannabis, cannabis un pour mettre cette variable vers l'élément correct. Vous pouvez également utiliser le document point QuerySelector ici. Gardez à l'esprit qu'ils obtiennent élément par ID est légèrement plus rapide et plus efficace car il suffit de chercher des idées. Il n'est pas nécessaire de vérifier tous les sélecteurs possibles sur la page pour trouver le bon élément comme QuerySelector doit faire. La différence ne sera pas perceptible si vous n'avez pas un projet massif. Je crée une variable personnalisée supplémentaire. J'appelle, par exemple, le raccourci CDX pour le contexte, et je le définit sur Canvas à partir de la ligne deux points GetContext. Context est une méthode intégrée spéciale qui ne peut être appelée sur une variable qui contient une référence au type d'élément Us. Nous pouvons le passer en 2D ou WebGL. Aujourd'hui, nous allons travailler avec des dessins 2D. Maintenant, si votre console consigne cette variable CTX, vous verrez qu'elle contient une instance d' une API Canvas 2D intégrée avec toutes ses propriétés et une méthode de dessin. Chaque fois que nous voulions dessiner quelque chose sur nous à partir de maintenant, nous pouvons utiliser ctx point et appeler n'importe laquelle de ces méthodes pour dessiner quelque chose ou modifier les valeurs des propriétés du Canada telles que la largeur de ligne, remplissage, la couleur, etc. sur. Je vais vous montrer, j'ai dit la largeur de la toile à 600 pixels et une sorte de hauteur jusqu'à 600 pixels aussi. 3. Cours de fractals et de JavaScript: Ce que nous allons dessiner aujourd'hui s'appelle une fractale. fractales sont des motifs infiniment complexes qui se ressemblent à différentes échelles. Ils sont créés en répétant un processus simple et maintes fois dans une boucle de rétroaction continue, disons que je trace une ligne, que je fais pivoter le cannabis, je l'abaisse et j'ai répété le processus de tracer une ligne. Je le fais encore et encore, en dessinant une ligne, en tournant, en redimensionnant et en dessinant à nouveau la même ligne. Ce serait un processus visant à créer une forme fractale très simple. Je peux écrire mon code de manière dite procédurale, ce qui signifie simplement que nous déclarons des variables et fonctions ligne par ligne lorsque nous créons notre projet C'est la façon la plus basique d'écrire du code. Aujourd'hui, j'utiliserai la programmation orientée objet pour rédiger la citation. Cela signifie que je vais frotter des variables et des fonctions dans des objets. Je vais créer un cours. Les classes sont des modèles de création d'objets. La classe Javascript contient un ensemble d'instructions sous forme de valeurs et méthodes qui serviront de Blueprint. Et chaque fois que j'appelle cette classe à l'aide du nouveau mot-clé, elle créera une nouvelle instance d' objet fractal en fonction du Blueprint que nous avons défini, j'aurai également besoin d'une classe de particules personnalisée et d'une autre classe I Appelez, par exemple, la pluie. Aujourd'hui, je voulais créer cet effet de pluie fractale. Si vous avez déjà dessiné l'une de ces formes plus complexes auparavant, vous saurez que si vous souhaitez vos fractales soient détaillées, le rendu peut parfois prendre quelques millisecondes avec Canvas, nous animons généralement les choses en les dessinant d'abord, puis nous avons mis à jour leurs coordonnées pour les déplacer. Nous supprimons l'ancien dessin et nous dessinons la même chose, mais avec des coordonnées mises à jour. Nous le faisons très vite encore et encore, ce qui nous donne une illusion de mouvement. Pour que ce mouvement soit fluide, nous devions courir à environ 60 images par seconde. Puisque l'effet jours sera composé de formes complexes, nous ne pouvons pas simplement supprimer, recalculer et redessiner ces fractales 60 fois par seconde. Je ne pense pas que même les ordinateurs les plus puissants puissent le faire, mais nous obtiendrons une animation plus fluide car nous le ferons différemment. Nous utiliserons la classe fractale pour rendre une forme mathématique complexe pour nous. Ensuite, nous allons prendre cette forme et utiliser JavaScript pour le convertir en pixels. Ensuite, nous utiliserons une classe particulière pour attribuer ces pixels en tant que forme de particule, votre classe particulière, nous traiterons également du mouvement. Nous pouvons faire des particules flottantes, pleuves ou filantes si nous le voulons. classe particulière contiendra un plan pour définir les propriétés et les comportements des particules individuelles. Et la classe de pluie va gérer l'ensemble de l'effet. Il définira des choses comme le nombre de particules et ainsi de suite. 4. Dessiner des formes basiques: Parce que nous avons choisi d'utiliser la programmation orientée objet, nous divisons notre code en classes comme celle-ci car cela rend le code plus modulaire et plus facile à naviguer. Et c'est un bon exemple de l' un des quatre principes de la programmation orientée objet appelé encapsulation. L'encapsulation signifie que nous regroupons des données et des méthodes qui fonctionnent sur ces données dans des objets. Aujourd'hui, nous allons encapsuler nos données en trois classes fractale, particule et pluie. Constructor est un type spécial de méthode sur le constructeur de classe JavaScript contient un Blueprint, et lorsque nous appelons la classe à l'aide du nouveau constructeur de mots clés, nous créerons un nouvel objet JavaScript vide, et il attribuera à un objet vide des valeurs et des propriétés basées sur le Blueprint à l'intérieur. Les données du constructeur peuvent être générées à l'intérieur de la méthode elle-même, et elles peuvent également provenir de l'extérieur. Il peut être transmis au constructeur comme argument lorsque nous l'appelons en utilisant le nouveau mot-clé, je vous montrerai dans une minute. constructeur de classe fractale s'attend à ce que deux arguments soient transmis de l'extérieur, l' un pour nous avec et l'autre pour la hauteur à l'intérieur du constructeur. Je convertit ces arguments en propriétés de classe. De cette façon, ils font partie du plan directeur. Fractile aura besoin d'avoir accès à nous avec une certaine hauteur pour qu'il sache où se trouvent les limites de nous. Nous pouvons l'utiliser pour nous assurer que la fractale est centrée et qu'elle ne se ramifie pas à l' extérieur de la zone de la toile. Tout objet créé par une classe fractale aura également accès au dégoût dans une méthode que j'appelle, par exemple, la fonction de dessin qui se trouve sur un objet est appelée méthode. Le travail de cette méthode de dessin sera de prendre certaines valeurs du constructeur et de dessiner une forme fractale basée sur ces valeurs, elle s'attendra à un argument que j' appelle, par exemple, des contextes. Cet argument lui sera transmis plus tard lorsque nous l'appelons. Et il précisera sur quel élément nous voulions puiser. Nous pouvons dessiner n'importe quelle forme sur nous. Nous voulons tracer une ligne, c'est facile. Nous avons déjà dit que la variable CTX en ligne ou trois contient une instance d'API 2D intégrée. Donc, si je voulais appeler l'une de ces méthodes de dessin intégrées, je les appelle à partir de là, cette variable de contexte. Nous représenterons le CTX. Quand j'appellerai la méthode du tiroir un peu plus tard, je vais vous montrer que nous avons commencé à dessiner une forme ou par la méthode de chemin de début intégré deux-points. Pensez-y comme si nous mettions un stylo sur du papier. Nous disons à JavaScript que nous voulions commencer à dessiner une nouvelle forme. Le chemin de début fermera également toutes les formes précédentes. S'il y en a, alors nous appelons la méthode move to intégrée pour définir les coordonnées x et y de départ pour cette ligne, je la passe simplement à 0 pour la coordonnée horizontale. Et 0 pour une verticale. 0-zéro sur nous est en haut à gauche ici. coordonnées sur une sorte de demande très simple. Nous avons l'axe X horizontal qui passe de 0 ici sur le côté gauche et augmente au fur et à mesure que nous voyageons vers la droite. La coordonnée Y verticale commence à la position 0 ici en haut, et elle augmente au fur et à mesure que nous descendons. Ainsi, par exemple, des coordonnées d' ajout de points , cent, deux cents seront quelque part ici, 100 pixels du bord gauche sur l'axe X horizontal et 200 pixels du haut sur l'axe Y vertical. méthode Déplacer vers définit les coordonnées x et y de départ des lignes, ligne à méthode se terminent par les coordonnées x et y. Si je le passe, il y a une largeur de la ligne quatre comme x et la hauteur de la ligne cinq comme y. Ce seront les coordonnées six cent six cents. Donc, ce coin, nous pouvons appeler méthode de contour intégrée pour dessiner cette ligne. Cette ligne doit aller des coordonnées 00 ici, deux coordonnées, six cent six cents ici. Appelons notre dessine mon pied et tracons la ligne pour voir si cela fonctionne. Nous avons donc déclaré la classe fractale. Il a une méthode constructeur. Lorsque nous créons une instance de cette classe, constructeur crée automatiquement un nouvel objet avec cette classe est un Blueprint. Je le fais en créant une variable que j'appelle, par exemple frac ball one. Je l'ai réglé sur la nouvelle fractale. Le nouveau mot-clé est une commande spéciale en JavaScript. Il va faire chercher JavaScript une classe avec ce nom, et cela déclenchera son constructeur sur une ligne huit, je peux voir que ma classe fractale nous attend avec et un peu aussi hauteur que les arguments. Donc je passe ça comme nous avec du fer pour nous cacher de la ligne cinq. Nous avons créé Fractal One. Depuis qu'il a été créé à l'aide de cette classe, il a accès à sa méthode de tiroir public. Je l'appelle simplement en disant Fractal one dot Draw en ligne 12. Je vois que la méthode de dessin s'attend à ce que le contexte un argument pour spécifier type d'entre nous sur lequel nous voulions puiser. Jusqu'à présent, nous n'avons qu'un seul type d'entre nous, moi et n. Donc pas grand-chose à choisir parmi Abbasid, CTX de la ligne trois en réseau. Comme vous pouvez le constater, nous avons une ligne provenant coordonnées zéros 0 telles que définies à la ligne 14. Et cela va jusqu'à coordonner six cent six cent six cents comme défini en ligne, 15 5. Modification des formes: L'objet Ctx online three contient une référence à toutes les propriétés et méthodes. Ces propriétés sont essentiellement une sorte d' état ou vous pouvez l'appeler un peu de paramètres. Une fois que vous les avez modifiés, ils restent ainsi jusqu'à ce que nous les réinitialisons ou jusqu'à ce que nous les changions à nouveau. Si je peux parler CTX, on peut voir les propriétés ici. Il s'agit de l'état par défaut actuel du canevas. Vous pouvez voir, par exemple, que FillStyle est défini par défaut sur noir. La largeur de la ligne est définie sur un pixel en bas. Nous avons également toutes sortes d'entre nous pour les méthodes de dessin telles que la méthode d' arc pour dessiner un cercle, commencer la méthode de bain, que nous avons déjà utilisée en ligne 15 et bien d'autres. Et si je voulais rendre ma ligne plus épaisse ? Je dois prendre cette propriété de largeur de ligne et je dois la mettre à jour avec une valeur différente. Je le fais en disant que la largeur de la ligne de points ctx est égale à cinq pixels ou 20 pixels. Je peux également déplacer la ligne en modifiant ses coordonnées de départ ou sa fin en coordonnées. Faisons la ligne de 50 pixels de large. Il y a aussi une propriété appelée la coupe de ligne. Et regardez ce qui se passe quand je l'ai dit, le rond, nous arrivons aux bords arrondis. Lorsque vous comprenez comment fonctionnent ces coordonnées, vous pouvez tracer une ligne entre deux points sur nous, à droite. Maintenant, la ligne commence à 150 pixels à partir de la gauche et à 150 grosses sources par le haut. Et il se termine à 200 pixels à partir de la gauche et à 300 pixels par le haut. Je pourrais également accéder aux valeurs moins, ou je peux aligner la ligne sur le bord supérieur, faisant un objectif à partir des coordonnées 002, coordonnées 5000. Maintenant, cette valeur unique de 500 détermine la longueur de ma ligne. Mettons-le dans une variable. Je crée une propriété de classe appelée cette taille de point. Maintenant, je peux modifier la longueur de ma ligne en modifiant cette propriété de taille de point comme celle-ci. Je peux également faire la taille de la ligne par rapport à la taille de Canvas. Si je voulais modifier la couleur de ma ligne, j'accède à la propriété de style de trait et je la remplace de la couleur noire par défaut au vert, par exemple. 6. Transformer les formes: Cette autre méthode intégrée permet de dessiner des formes, par exemple, méthode de rectangle de remplissage qui prend quatre arguments, x et y, position, largeur et hauteur. Je veux que mon rectangle soit aux coordonnées 5050, et je voulais avoir 200 pixels de large et 200 pixels de haut. Je peux changer la largeur et la hauteur comme ça. Je peux aussi faire recouvrir ce rectangle tout le genre demandé en le faisant partir du coin supérieur gauche. Donc les coordonnées 00, je fais en sorte que sa largeur soit la même que la largeur américaine et la hauteur sera la hauteur. Je peux changer sa couleur en accédant propriété FillStyle sur un objet, et je le change du noir par défaut au bleu, nous allons maintenant tourner. Donc je veux que vous voyiez exactement ce qui se passe dans le style CSS, je donne mon élément canevas fond rouge. Si je pousse le rectangle de 50 pixels vers la droite, nous pouvons voir que nous avons un élément de toile rouge à l'arrière. Nous avons un rectangle bleu dessiné sur Canvas en ligne 20, et nous avons une ligne verte dessinée haut venant des lignes 21 à 24, je mets l'écorce du rectangle bleu, donc maintenant elle commence à partir des coordonnées 00. Gardez cela à l'esprit. C'est important pour avoir le contrôle total de nos dessins. Il est important de comprendre comment transformer l'état de Canvas à l'aide de méthodes intégrées de traduction, de mise à l' échelle et de rotation. C'est facile lorsqu'il est expliqué correctement, mais ce n'est pas très intuitif. Permettez-moi de vous montrer exactement comment cela fonctionne. Nous pouvons transformer notre état à l'aide de la méthode de rotation intégrée. Cette méthode prend un argument, un angle par lequel nous voulions faire pivoter tout le genre d'entre nous et tous les dessins qui s'y trouvent. Il prend cette valeur d'angle en radians et non en degrés. Si je le fais pivoter de 0,8 radians, c'est environ 45 degrés. Vous pouvez voir que je tourne en angles positifs et négatifs, le point central de rotation est le coin supérieur gauche du Canada a les coordonnées 00, tous les dessins sur nous qui viennent après cet objectif de rotation. Ainsi, le rectangle et la ligne tournent autour des coordonnées 00. La méthode Translate prend deux paramètres. Le premier est x, la distance que nous voulions parcourir en direction horizontale. Les valeurs positives sont à droite. Aux valeurs négatives, allez à gauche. Le deuxième paramètre, y, définit la distance à parcourir dans la direction verticale. Valeur positive du score à la baisse, les valeurs négatives augmentent. Si je le passe 5050, nous déplaçons toutes sortes de dessins, 50 pixels vers la droite et 50 pixels vers le bas. Cela affectera tout ce qui vient après. Si je dessine une autre forme ou avant cela, elle ne sera ni traduite ni pivotée. Ici, nous traduisons et après cela, nous tournons. Regardez ce qui se passe si je lui transmets une valeur d'angle différente. Nous sommes tous des données et nous pouvons voir que la méthode traduite sur terre 20 a non seulement poussé tous les dessins vers la droite et vers le bas, mais aussi changé le centre de rotation 0,2 coordonnées 5050 La méthode Rotate va en fait toujours pivoter autour des coordonnées zéros 0. C'est la partie qui n' est pas très intuitive. Ce qui s'est réellement passé, c'est que la méthode de translation a déplacé ce qui est considéré comme les coordonnées 00 de sa position par défaut dans le coin supérieur gauche sur nous deux coordonnées, 5050. Vous pouvez voir qu'en ligne 20, nous dessinons le rectangle bleu à partir des coordonnées 00, mais il est en fait tiré à partir des coordonnées 5050 poussées par la méthode de traduction. C'est parce que la méthode Translate change l'état de nous et qu'elle a changé de position qui est considérée comme coordonnée 00. Si vous ne comprenez toujours pas parfaitement cela, ne vous inquiétez pas, cela deviendra plus clair au fur et à mesure que nous continuerons à renforcer notre effet. Ainsi, tout ce que fait la méthode de traduction, elle déplace ce qui est considéré comme des coordonnées zéros 0 sur nous pour faire des coordonnées où nous lui passons. Par conséquent, cela décalera toutes sortes de dessins par ces valeurs de pixels. Et il déplace également le centre de rotation vers cette position. Vous avez vu les fractales que nous allons construire aujourd'hui. Résolvez pour notre effet. Je voulais que le centre de rotation soit exactement au milieu du cannabis. Pour ce faire, je lui transmets une sorte de largeur et je le divise par deux en paramètre x et en hauteur et le divise par deux en tant que paramètre Y, comme ceci. Maintenant, lorsque nous effectuons une rotation selon des valeurs d'angle différentes, nous pouvons voir que le centre de rotation se trouve exactement au milieu de la page. Parfait. Comme nous l'avons dit, la méthode pourrie prend un angle d'argument par lequel nous voulions faire pivoter. Et cela prend cette valeur en radians. Si je voulais faire pivoter exactement en demi-cercle, donc à 180 degrés, cette valeur se convertit en 3,14 radians. C'est exactement la valeur de pi. Donc, si je tourne par math.pi, il a tourné d'un demi-cercle. Si je fais pivoter quelque chose par math.pi fois deux fois, j'ai pivoté exactement de 360 degrés. Nous avons tous fait tout autour du cercle et ça s'est retrouvé dans sa position de départ. Une chose à retenir, la rotation par un livre de maths fait tourner d'un demi-cercle. outil Rotation par math.pi times permet faire pivoter vos dessins en cercle complet. Je l'ai dit en position de départ à 0 radians. Une dernière méthode qui transforme notre état que nous couvrirons aujourd'hui est l'échelle. Il faut deux paramètres. Nous pouvons les appeler x et y. X est le facteur de mise à l'échelle dans la direction horizontale. Pourquoi le facteur de mise à l'échelle est-il dans la direction verticale ? Les valeurs de base ne sont qu'une. Si nous le dimensionnons d'un, il restera à la même taille. La valeur est plus lente que cela va baisser. Les valeurs supérieures à cela augmenteront si je le transmets à 0,5 comme x et que c'est 0,5 c'est pourquoi nous avons redimensionné le rectangle bleu et la ligne verte de 50 % à la moitié de leur taille d'origine. faut savoir ici, c'est qu'il va diminuer vers les coordonnées zéros 0. Puisque la traduction a déplacé ces coordonnées vers le milieu de nous, le point central de mise à l'échelle est également là. La méthode Translate modifie donc à la fois la rotation et l'échelle en points centraux. Gardez cela à l'esprit. Ce comportement est parfait pour l'effet que nous allons construire aujourd'hui. 7. Motifs géométriques: Parfois, vous ne voulez pas qu'il soit traduit, mis à l'échelle et tourne vers l'ensemble des dessins demandés et anciens qui s'y trouvent. Parfois, nous voulions seulement faire pivoter quelque chose, puis nous voulions rétablir l'état à ce qu'il était auparavant. Pour cela, nous avons deux méthodes intégrées spéciales appelées save and restore. La méthode Save créera un instantané de l'état actuel, toutes ses propriétés actuelles que vous pouvez voir lorsque vous consoles log ctx, donc traduisez, faites pivoter l'échelle, mais aussi des choses telles que FillStyle, largeur de ligne, essentiellement le tout l'état d' un objet tel qu'il est à ce stade de notre code, alors nous pouvons modifier tout ce que nous voulons. Nous pouvons traduire, mettre à l'échelle, faire pivoter, redessiner les formes que nous voulons qu'elles soient affectées par cette traduction et cette rotation. Ensuite, nous appelons des méthodes de restauration intégrées que nous rechercherons l'objectif de sécurité associé. Et cela remettra notre état à ce qu' il était au moment où on appelait «  Safe ». Dans ce cas, il fera pivoter, redimensionner et traduire. Toutes les formes que nous dessinons après la restauration ne seront pas affectées par une rotation ou une mise à l'échelle. Comme je l'ai dit, enregistrez et restaurez recherche, non seulement la transformation, mais aussi toutes sortes de paramètres, y compris le FillStyle, le style de trait, etc. Cela peut être utile dans certains effets que nous construisons. Ici, vous pouvez voir que j'ai enregistré l'état, je traduis, tourne et redimensionne. Je dessine mon rectangle bleu et je restaure le petit rectangle qui est traduit et redimensionné parce qu'à l'origine, il était censé couvrir l'ensemble des États-Unis des coordonnées 00 à une hauteur assez rapide. Puisque nous dessinons la ligne verte après la restauration d'un état, elle n'est pas du tout affectée par la traduction et l'échelle. Pour le rectangle bleu, les coordonnées 00 se trouvent au milieu de nous comme défini par la méthode de traduction pour les coordonnées 00 de la ligne verte, la position par défaut dans le coin supérieur gauche du Canada. J'ai dit l'échelle jusqu'à 11 pour la largeur d'origine fois une fois, et la hauteur d'origine fois une fois. Si je l'ai écrit maintenant, vous pouvez voir que je tourne le rectangle bleu, mais la ligne verte n'est pas du tout affectée. Échangeons ça. J'ai mis une ligne verte à l'intérieur de cette zone sûre et restaurée et capable de rectangle bleu après le stockage. Maintenant, le rectangle bleu est au-dessus de tout, donc nous ne pouvons pas vraiment voir la ligne. formes de la cinématique sont dessinées de haut en bas lorsque JavaScript lit le fichier. Je vais donc prendre ce code rectangle et je le mettrai avant la sécurité. Maintenant que je la fais pivoter, la ligne verte est affectée, mais le rectangle n' est pas du tout transformé. Je peux pousser un peu l'angle direct pour voir que nous avons un rectangle rouge et bleu et la ligne verte est la seule chose qui tourne. Si vous comprenez les choses que nous venons de couvrir, vous pouvez faire des choses vraiment cool avec du cannabis. Maintenant, laissez-moi vous en montrer quelques-uns. J'ai supprimé le rectangle bleu et je rends le fond de cannabis transparent. Je retourne à l'intérieur de ma classe fractale et je crée une méthode de classe privée appelée dessiner une ligne. Ce que je viens de faire ici s' appelle une méthode privée. Il s'agit d'une nouvelle fonctionnalité de JavaScript qui a été introduite il y a quelques années. Les méthodes privées sont déclarées avec des noms sévères, bref de l' identificateur est fixé par un symbole de hachage. Les méthodes privées ne sont accessibles qu' à partir de la classe. Ils sont déclarés en. Nous ne pouvons pas les appeler de l'extérieur. J'utiliserai cette méthode privée pour gérer certaines fonctionnalités internes de notre classe. fonctionnalité interne de Haydn de l'extérieur est un bon exemple du deuxième principe de programmation orientée objet appelé obstruction. L'obstruction signifie que nous cachons de l'extérieur les détails inutiles du fonctionnement intérieur de nos objets. Et seulement exposer l'utilisateur Essentials n'a pas besoin de savoir comment exactement notre utilisateur construit fractal a juste besoin de savoir qu'il existe une méthode de tirage public qu'il peut appeler qui construira le forme fractale entière. Bien sûr, c'est le jour où nous sommes ceux qui construisent cet effet. Nous allons donc tout comprendre. Ce que j'essaie de réaliser ici, c'est que je voulais avoir une méthode d'aide privée dans ma classe qui gère le dessin d' une seule ligne ou d'une branche fractale partie de la fractale. Et je voulais avoir une méthode de dessin public qui peut être appelée de l'extérieur qui dessinera la forme fractale complète. Mettons ça ensemble. Draw Line s'attend à ce que le contexte soit un argument pour spécifier l'élément sur lequel nous voulions dessiner. À l'intérieur, j'ai mis tout ce code qui trace une ligne. Commencez donc le chemin pour commencer à dessiner, déplacer vers, définir la ligne de coordonnées x et y de départ sur, définir et en coordonnées x et y et contour pour dessiner réellement la ligne que nous avons définie. Ensuite, à l'intérieur de la méthode de tiroir public, j'appelle cette méthode DrawLine privée en utilisant ce mot-clé, je vois que DrawLine attend le contexte comme argument. Je passe les contextes qui seront transmis comme argument à la méthode du tiroir public ici je vous montrerai plus tard. Vous pouvez voir que lorsque je fais pivoter, cela fonctionne toujours. Nous venons de restructurer le code qu'il soit un peu plus modulaire et il pour qu'il soit un peu plus modulaire et il sera plus facile de suivre ce que nous allons faire. Prochaine. Regardez ce qui se passe si je copie ces deux lignes et la deuxième Rotation du charbon a une valeur d'angle différente. Je les copie encore et encore et encore. Et si je traduis également comme par 5050 chaque fois que nous effectuons une rotation, vous pouvez voir ici que les types de transformations sont additives, traductions cumulées et les tournent s'adaptent unes aux autres jusqu' à ce qu'elles soient réinitialisées par restauration, nous avons ici des répétitions appelées répétitions. Lorsque vous voyez que dans votre code JavaScript est généralement une bonne idée d'utiliser une boucle. Je supprime tous ces objectifs répétés et je crée une boucle for-loop pour l'indice de plomb commence à 0, tant que j'ai moins de cinq ans, je l' augmente d'un. Chaque fois que la boucle est exécutée, nous appellerons la méthode DrawLine à partir de la ligne 31 pour dessiner un nouveau segment de ligne. Et nous allons tourner, quelque sorte demandé par 0,5 radians supplémentaires. La première ligne sera donc tournée de 0,52, ligne par 1, troisième ligne par 1,5, etc. rotations sont additives, sauf si nous les restaurons entre les deux. Au fur et à mesure que la boucle pour s'exécute, des lignes sont dessinées et les rotations s'additionnent. Je peux créer d'autres lignes comme celle-ci. J'ai supprimé cet appel de traduction. Que se passe-t-il si je voulais que les lignes soient divisées uniformément dans une zone circulaire ? Laissez-moi vous montrer ce que je veux dire. Je dois faire correspondre d'une manière ou d'une autre le nombre de fois que cette boucle est exécutée et combien elle tourne à chaque fois. Actuellement, nous exécutons cette boucle pour trois fois créée en trois lignes. Nous savons que math.pi se convertit en 180 degrés ou 3,14 radians. Donc, demi-cercle. Si je divise un demi-cercle, math.pi divisé par trois, nous obtenons cette forme. Si je prends tout le cercle, si maîtrisé par deux fois et que je divise par le nombre de fois que cette boucle pour court, nous obtenons trois branches divisées uniformément dans une zone circulaire. On peut voir ici que le nombre de boucles doit être identique au nombre. Nous divisons l'ensemble du cercle pour que nos branches soient réparties uniformément sur une zone circulaire. Mettons cela dans une variable. Je l'appellerai ce point parce qu'il déterminera le nombre de côtés symétriques que notre forme fractale finale aura. Je l'ai fixé à cinq, par exemple, et je le remplace ici et ici. Maintenant, lorsque je change cette valeur, nous changeons la forme de notre bientôt fractale. Nous avons cette méthode de tiroir public à la ligne 20 et la méthode privée DrawLine à la ligne 31. Comme nous l'avons dit, des méthodes privées peuvent être appelées de l'extérieur. Si j'essaie de l'appeler, j'obtiendrai une erreur indiquant que le champ privé à tracer ligne doit être déclaré dans une classe enfermée. Nous pouvons voir qu'il s'agit d'une fonctionnalité intégrée et que l' encapsulation privée de ces entités de classe commençant un symbole de hachage est appliquée par JavaScript lui-même. D'autre part, dessiner est une méthode publique et on peut l'appeler de l'extérieur comme ceci. 8. Comment dessiner des fractaires: Nous dessinons ici n'est pas encore fructueux. C'est juste la ligne qui a été traduite et tournée autour pour créer une fractale mathématique en forme d'étoile sont des motifs infiniment complexes qui sont auto-similaires sur différentes échelles. Il s'agit d'un motif répété de formes similaires que vous pouvez zoomer plus en plus près pour obtenir de plus en plus de détails. Dans le codage créatif, nos fractales peuvent être infiniment complexes car il faudra alors temps infini en JavaScript pour les dessiner. Nous pouvons leur donner des couches de complexité jusqu'à ce que nous une certaine petite valeur au-delà de laquelle nous ne pouvons pas vraiment voir de différence à l'œil nu, car les lignes individuelles sont si petites, la fractale la forme dessinera aujourd'hui sera faite de lignes. Et ce que je veux, c'est quelque chose s'inspire de la fractale de trois ans, où vous avez trois lignes qui forment la forme de lettre h de base qui se ramifie en quatre petites formes de lettre h à chaque extrémité dans et à chaque extrémité de ces plus petits, il y en a encore plus petits. Dans la fractale mathématique, nous pouvons continuer à zoomer de plus en plus près et voir de plus en plus de détails alors que ce motif se répète sur des échelles infiniment plus petites et plus petites. Pour ce faire, nous allons définir une certaine profondeur. Supposons que nous voulions que chaque ligne soit divisée en lignes plus petites cinq fois, et que notre forme fractale soit terminée. Et je vous montre ce que je veux dire. Nous allons dessiner notre fractale, faisant appeler cette méthode privée DrawLine encore et encore. En programmation, c'est ce qu'on appelle la récursion. récursion est un processus dans lequel une fonction s' appelle directement ou indirectement. Chaque fois que la ligne s'appelle elle-même, elle tracera une ligne. Il va transformer, faire pivoter et mettre à l'échelle un genre de nous. Et il s'appellera à tracer la même ligne, mais cette fois transformée, mise à l'échelle et tournée, puis elle se rappellera à nouveau. Nous ajouterons une condition pour définir combien de fois ce processus va se répéter, en fonction de la quantité de détails, profondeur que nous voulons dans notre forme fractale finale. Je vais vous montrer exactement comment cela fonctionne et à quoi cela ressemble. Maintenant, je commence par isoler tous les changements que j'apporte à un état. Je vais donc envelopper mon code dans des méthodes de sauvegarde et de restauration à l'intérieur de notre type de rotation demandé par un radian. Et je vais faire appeler DrawLine. Je dois faire passer l'argument contextes. Attention, si vous exécutez ce code, il créera une boucle infinie. La plupart des navigateurs modernes pourraient s'en occuper ces jours-ci et ils ne planteront pas. Nous devons créer une condition qui mettra fin à la récursion à un moment donné qui empêchera un DrawLine de se trouver deux points. Et si plus loin, quand une certaine limite est atteinte, je le fais en lui transmettant un deuxième argument appelé niveau. Je crée une instruction if et je vérifie si cette variable de niveau qui sera transmise en tant qu'argument est supérieure à ce niveau maximum de points. Si c'est le cas, utilisez une instruction de retour comme celle-ci. Lorsqu'une instruction de retour est utilisée dans un corps de fonction, l'exécution de la fonction est arrêtée. Je dois créer une propriété de niveau maximum ici. Disons que je veux tracer une ligne pour s'appeler deux fois. Notre fractale aura une profondeur de deux niveaux. Quand DrawLine s'appelle lui-même, je vois ici qu'il attend deux arguments, contextes et le nivellement chaque fois que DrawLine s'appelle lui-même, j'augmente cet argument de niveau de plus un. Je lance le code et nous avons toujours une boucle infinie. C'est parce que cette variable de niveau n'est pas définie. Je dois lui donner une valeur initiale. Lorsque j'appelle DrawLine pour la toute première fois, j'ai dit que le niveau initial à 0, nous appelons la méthode privée DrawLine et nous passons contextes pour spécifier le type d'entre nous sur lequel nous voulions puiser. Et nous passons le niveau 0 initial, ce qui a appelé Ron's pour tracer une ligne. Et puis, par le biais d'un programme en principe appelé récursion, la fonction s'appelle en passant le long même variable de contexte et de la même variable de contexte et augmente la variable de niveau de plus un. Donc, à ce stade, niveau est un et le niveau maximum est deux, comme nous l'avons défini en ligne 19, cette vérification sera fausse et elle fera pivoter les États-Unis et dessiner une autre ligne, augmentant de niveau d'une. Cette boucle sera répétée en elle-même, dessinant de plus en plus de lignes jusqu'à ce que le niveau atteigne le niveau maximum. Chaque fois que nous tracons une autre ligne, nous pouvons également réduire l'échelle. Je le redimensionne à 0,9 horizontalement et verticalement. Et maintenant, chaque ligne a 90 % de la taille précédente. Si je voulais créer une forme de branche, je voulais également déplacer le point à partir duquel la nouvelle ligne se développe à partir de sa ligne parente. Je vais le faire en traduisant dans notre état. Comme nous l'avons expliqué précédemment, cela poussera les coordonnées 00 par une valeur de données, et elle déplacera également la rotation et l'échelle en point central avec un effet secondaire, par exemple, regardez ce qui se passe si entre chaque ligne que j'ai traduite de 50 pixels horizontalement et 0 verticalement, je peux pousser dans une nouvelle ligne le long de sa ligne parente en utilisant translation. Et si je veux que la nouvelle ligne se développe à partir de la fin de sa ligne parente, je peux le faire en traduisant horizontalement toute la longueur de cette ligne. J'ai donc utilisé cette propriété de taille de lot de la ligne 17. J'ai créé une forme de crochet. Je peux le réduire un peu. Je peux modifier la taille des segments individuels ici à la ligne 17. Maintenant, si j'augmente le niveau MCS, je permets à DrawLine de s'appeler plus de fois augmenter le nombre de lignes qui constituent notre forme fractale finale. Vous pouvez voir que ces paramètres, nous atteignons rapidement un point où les nouvelles lignes sont réduites à un point où elles deviennent à peine visibles. Avec les fractales mathématiques, cela sera infini et nous pourrons zoomer de plus en plus près et voir plus de lignes dans le codage créatif, nous ne nous soucions que de la partie que nous pouvons voir aussi ne disposent pas d'une puissance de calcul illimitée pour créer de telles formes infinies. Donc, à tout moment de ce tutoriel, si les formes deviennent trop complexes et temps de rendu prend trop de temps sur votre ordinateur, le moyen le plus simple de les rendre plus rapides est de venir ici pour propriété max level et définissez-la sur une diminution de valeur inférieure dans les profondeurs de notre fractale. Je vais le fixer à cinq et j'ai fixé l'échelle à 0,7. Si je modifie cette valeur d'angle en radians, je passe la méthode Rotate. J'ai changé l'angle entre la nouvelle branche et son emprunt la branche qui va créer des formes et un mouvement vraiment cool que j'ai montrés dans l'introduction. C'est notre forme fractale très simple. Nous avons fait un crochet fractal. Je peux maintenant utiliser le code que nous avons écrit ici tous et 26 pour en faire une forme avec la symétrie radiale. Cette boucle pour dessine une branche fractale, chaque dommage court et répartit ces branches uniformément dans une zone circulaire. Le nombre de branches dépend cette variable de taille de point à partir de la ligne 18, augmentons à 23456. J'espère que vous verrez que nous nous rapprochons de quelque chose d'intéressant. Je reviens à une branche pour l'instant afin que nous puissions clairement voir ce que nous faisons. Je vais également définir le niveau maximum à un pour l'instant. 9. Facal des flots de neige: La façon dont notre code fonctionne actuellement, il dessine une ligne, tourne dans une direction positive, tend à dessiner une autre ligne à nouveau. De cette façon, nous dessinons cette courbe, les crochets. Que faire si je veux plus de symétrie ? Disons que je veux qu' une branche grandisse vers la gauche et l' autre vers la droite. Je veux créer une fourchette qui peut leur donner formes intéressantes de branches d'arbres ou de cristaux. Laissez-moi vous montrer. Nous aurons deux branches issues de la branche mère principale. L'un sera divisé à gauche, l' autre à droite. Ces deux branches auront la même échelle. Je déplace donc, traduit et évolue en dehors de cet objectif sûr ici. Et j'enroule tout ce bloc dans une autre paire de sauvegarde et de restauration pour m'assurer que nos échelles de traduction et de rotation ne débordent pas en dehors de cette boucle de DrawLine. J'espère que vous ne trouvez pas déroutant que nous ayons plusieurs appels sécurisés et restaurés ici. Je pense à la sécurité et à la restauration de Paris. Ils sont en quelque sorte imbriqués les uns dans les autres. Ainsi, chaque restauration sait lequel est le point de sécurité associé. Il sait donc à quel état de Canvas restaurer. Cette restauration fonctionnera avec cette sauvegarde. Cette restauration est associée à ce coffre-fort. J'espère que c'est logique. Save pousse l' état actuel au-dessus de la pile, restaure Bob le dernier état ajouté du haut de la pile. Il deviendra plus intuitif si vous l'avez utilisé pendant un certain temps. Je copie encore une fois ce bloc de code. Et le seul changement sera que nous passons méthode de rotation et l'angle négatif. J'ai mis quelques espaces ici pour plus de clarté. Lorsque nous appelons une ligne de tirage, nous tracons une ligne. Nous traduisons la position zéros 0 le long de la branche. C'est donc de l'autre côté. Nous faisons pivoter une sorte de demande par une valeur d'angle positive et appelons ligne de tracer pour dessiner cette branche. Et ici, nous le faisons pivoter d' une valeur négative pour dessiner celle-ci. Maintenant, je codage dur à l'échelle 0,7. Faisons de cela une propriété de classe. Je dis que cette échelle de points est 0,7 et je la remplace ici et ici. Je peux maintenant modifier l'échelle de nos niveaux fractaux ici sur la ligne 20. Il fera la même chose pour la valeur d'angle. Nous passons à la méthode de rotation. Cela affectera la répartition de la forme fractale finale. Je l'appellerai donc cette épandée de points. Vous pouvez également l'appeler angle ou quelque chose comme ça si vous le souhaitez. Au départ, je l' ai réglé sur un radian, soit autour de 57 degrés. Je remplace la valeur d' angle codée en dur ici à la ligne 46 et au montant 51, j'utiliserai la même valeur mais négative pour m'assurer que ces deux branches plus petites se divisent dans les deux sens, loin du parent. succursale. Si je modifie la sous-valeur ici, vous pouvez voir exactement comment elle affecte la relation entre la branche enfant et la branche parent. J'ajoute d'autres côtés. Je peux modifier n'importe quelle valeur ici pour modifier à quoi ressemble la forme finale. Ici, à la ligne 35, nous avons limité le nombre d'appels de méthode DrawLine lui-même. Dans ce cas, chaque fois qu'il s'exécute, il s'appelle deux fois pour créer deux versions plus petites de la même ligne à partir des pointes. Regardez ce qui se passe si j' augmente le niveau maximum d'un, nous ajouterons un niveau de récursion supplémentaire et chaque branche plus petite devra encore plus petites branches en sortir. Si j'en ajoute une de plus, les plus petites branches devront être encore plus petites. J'espère que vous pourrez voir ce qui se passe. Je vais modifier la valeur de l' angle et il deviendra plus évident que nous avons notre forme de niveau de base et trois autres niveaux fractaux se ramifient. Nous avons une branche qui se divise en deux petites branches. Et chaque fois que nous ajoutons le niveau maximum, ce processus se répète à plus petite échelle. Principe de base des fractales. Je réduit la forme entière en réglant la taille initiale du segment sur 20 % de la largeur de la toile. J'ai dit que la largeur de la ligne est de 30 pixels. Allons-y un peu plus loin. Disons que c'est la branche principale et qu'il y a deux petites branches qui en sortent ici et ici. Que faire si je voulais avoir d'autres branches ? Par exemple, je veux qu' une autre paire vienne de quelque part ici et ici. Passons à un certain nombre de branches en propriété de classe. Au départ, je l'ai réglé sur un. Je vais dans notre méthode privée DrawLine. Et après avoir dessiné la ligne initiale principale que j'ai créée pour la boucle, j'ai 0, tant que je suis inférieur à ce que les branches augmenteraient d'un. Maintenant, je prends tout ce code et je l'ai mis à l'intérieur de la boucle. Ce code traduit les coordonnées 00 le long la branche mère jusqu'à son extrémité et réduit légèrement le cannabis. Ensuite, il dessine cette ligne ici et cette ligne ici. Je dois déplacer ce coffre-fort en dehors de la boucle for-car sa restauration associée est également en dehors de la boucle for-ici. Je veux un ensemble de branches quelque part ici, et de l'autre côté ici, le code qui détermine d'où se développent les prochaines branches est cela traduit. Au lieu de traduire jusqu' à la fin de la barre et de la branche, je traduirai par cette taille de point divisée par des branches et tout cela entre parenthèses fois I. De cette façon, si nous l'avons fait, Disons que deux ensembles de branches, le premier sera divisé par deux fois un 0 ici, et la deuxième paire sera divisée par deux fois une. Donc ici, nous n'avons qu' un seul ensemble maintenant parce que ces branches de points sont définies sur une seule. Si je voulais le déplacer de l'autre côté de la branche principale, j'ai défini cette valeur sur cette taille de point moins comme celle-ci. J'apprécie que ce code de la ligne 44 puisse être un peu difficile à comprendre au début. Cela deviendra plus clair au fur et à mesure que nous jouons avec le code et verrons comment la forme fractale finale réagit. J'ai dit des branches à deux et je vois que cela a fait quelque chose que je ne m'attendais pas. Voyons à quoi cela ressemble dans une forme plus complexe en ajoutant d'autres sites. J'aime vraiment ça. La raison pour laquelle les branches ne sont pas étalées le long de la branche principale mais sont poussées en quelque sorte à l' extérieur, c'est parce que j' appelle cela sauvegarder et restaurer uniquement celles en dehors de la boucle for-loop. En fait, je voulais sauvegarder et restaurer chaque fois que nous dessinons une paire de branches afin que cette traduction en ligne 44 puisse grimper correctement le long de la branche parent. Je bouge, sauvegarde et restaure à l'intérieur de la boucle for-loop. Et maintenant, il fait ce que je voulais. Si je l'abaisse, vous pouvez voir que nous avons deux ensembles de branches. un côté qui grandit à partir de ce point et d'un autre ensemble grandissant à partir de ce point, j'ajuste certaines de ces valeurs pour obtenir une meilleure taille. Maintenant, nous fabriquons de très beaux flocs de neige fractaux. 10. Créer une large gamme ou des formes aléatoires: Je crée une propriété de classe appelée cette couleur foncée. Au lieu de la déclaration de couleur RVB, j'utiliserai le modèle de couleur HSL, la teinte, la saturation, la légèreté. Le modèle couleur Hsl a été conçu dans les années 1970 pour mieux s'aligner sur la façon dont la vision humaine perçoit les savants. Il est vraiment utile pour codage créatif, car vous pouvez parcourir l'ensemble du spectre de couleurs en modifiant uniquement la première valeur. Cette première valeur est synonyme de teinte. Et cela représente un degré sur la roue chromatique de 0 à 360 degrés, j'ai obtenu un style de trait et je l'ai basé à l'intérieur de la méthode de dessin ici. Le style de contextes de trait de point est égal à cette couleur de point de la ligne 220 degrés est droite. Un 120 degrés est vert, 240 est bleu. Vous pouvez même passer à des valeurs supérieures à 360, et il tournera à nouveau autour de la roue. Ainsi, 360 est à nouveau rouge, 408 est vert, et ainsi de suite. La saturation est une valeur en pourcentage, 0 signifie une nuance de gris, 100 % est pleine couleur. légèreté est également un pourcentage. 0 est noir, 100 % est blanc, 50 % est couleur, pas du tout affecté par la lumière ou l'obscurité. Je peux remplacer la partie vue par une valeur randomisée comme celle-ci. Disons que sur la première page que j'ai écrite, je roule un nombre aléatoire entre 0360. Maintenant, notre fractale peut être de couleur aléatoire. Je pourrais aussi lui donner de l'ombre. Je prends la variable CTX de la ligne trois et j'ai dit que nous avons une sorte de propriété de couleur d'ombre au noir, décalage de l'ombre y. Donc, l'ombre verticale sera de dix pixels plus bas. Décalage de l'ombre X. L'ombre horizontale sera cinq pixels à droite de sa forme parente. flou des ombres sera, par exemple, dix. Nous faisons en sorte que cela paraisse vraiment bien. Vous pouvez voir comment la valeur de répartition, sorte que la méthode de l'angle que nous passons pour la rotation modifie la forme finale de la fractale. J'ai commencé à partir de 0,1 radians et j'irai jusqu' à 2,9 pour obtenir la gamme complète que je veux. Oui, je pense que ces valeurs sont bonnes. Je vais faire de l'écart une valeur aléatoire entre 0.12.9 comme ceci. Maintenant, chaque fois que je rafraîchis la page, je reçois une couleur aléatoire et angle aléatoire entre les niveaux de branche. Nous obtenons donc une belle gamme de formes aléatoires. Je n'ai pas assis la largeur de la ligne à dix pixels pour pouvoir voir plus de détails. Si j'ai dit le niveau maximum à un, nous obtenons simplement la branche principale de chaque côté qui se divise en quatre branches plus petites. Si je le mets à deux, chacune des petites branches en aura quatre plus petites. Si j'augmente le niveau maximum deux pour chacune de ces petites branches, il y aura quatre branches encore plus petites. À ce stade, nous demandons à JavaScript de faire pivoter, de mettre à l'échelle et de traduire le cannabis et plusieurs fois afin de dessiner cette forme. Ainsi, à mesure que nous augmentons encore le niveau maximum, le temps de rendu sera augmenté indépendamment de la puissance de notre ordinateur. Ce n'est pas forcément une mauvaise chose. Supposons que nous voulions utiliser cela pour rendre une forme fractale complexe. Et nous voulons l'enregistrer en tant qu'image. n'y a aucun problème si nous obtenons quelques secondes de temps de rendu. Cela dépend de la raison pour laquelle vous souhaitez utiliser ce code. Si, à un moment ou à un autre aujourd'hui, vous souhaitez avoir la forme fractale que vous avez. Si vous utilisez un navigateur moderne, vous devriez pouvoir cliquer avec le bouton droit de et sélectionner Enregistrer l'image sous. Cela devrait vous donner votre forme fractale sous forme d'image PNG avec un arrière-plan transparent. Si votre temps de rendu prend trop de temps. Vous demandez à JavaScript de dessiner trop de détails dans votre fractale. Vous pouvez le corriger en allant à la ligne 22 ici et définir la propriété de niveau maximum une valeur inférieure si vous jouez avec votre forme fractale et qu'à un moment donné elle passe au-dessus des bords de Canvas. Vous pouvez le réduire en modifiant cette propriété de taille de point en ligne 20. C'est notre classe fractale. Nous l'avons utilisé pour rendre ou randomiser une forme fractale sur Canvas. Je vous montrerai plus tard des formes de taches de rousseur dans la section expériences. Mais maintenant, prenons cette fractale et la transformons en système de particules. Avec les systèmes de particules, nous avons nombreux objets particulaires individuels qui, ensemble, créent différents effets, tels que la fumée, un effet d' écoulement ou de pluie, par exemple. Aujourd'hui, chacune de nos particules sera l'une de ces fractales complexes et je les ferai régner sur Canvas. Comme les exemples que je vous ai montrés au début de ce cours. Sur Canvas, nous animons généralement quelque chose en dessinant une forme statique, en supprimant, en mettant à jour sa position et en la dessinant à cette position mise à jour. Nous le faisons très rapidement, généralement 60 fois par seconde. Et à mesure que les particules sont dessinées, supprimées, mises à jour et dessinées à nouveau, nous obtenons une illusion de mouvement avec des formes simples comme des cercles ou des rectangles. C'est facile, mais avec une forme fractale complexe comme celle-ci, nous avons un problème. Que se passe-t-il si je voulais que les formes mon système de particules soient complexes ? Par exemple, je vais dessiner une fractale qui prend 1 seconde pour le rendu. Il est impossible que je puisse dessiner plusieurs de ces fractales sur Canvas, les supprimer, les mettre à jour et les redessiner plus de 60 fois par seconde avec une forme qui prend 1 seconde pour le rendu. Il est tout simplement impossible de dessiner et d'animer plusieurs 60 fois par seconde. Mais si vous avez vu les exemples au début de la vidéo, vous pouvez voir que je l'ai fait. J'ai rendu de nombreuses formes fractales randomisées complexes et je les ai faites régner sur Canvas à 60 images par seconde. Comment ai-je fait ça ? C'est ce que nous sommes sur le point d'apprendre maintenant. 11. Systèmes de particules et animation: Notre classe de particules personnalisée permet de dessiner une particule individuelle et de définir son comportement et son mouvement. Et nous aurons cette classe de pluie qui va gérer l'ensemble de l'effet, toutes les particules en même temps. Écrivons et expliquons cela ligne par ligne pour que nous sachions exactement ce qui se passe. Ce verre aura besoin d'un constructeur. Il s'attend à des arguments pour la largeur et la hauteur de Canvas, principalement parce que l'une de ces classes sera de répartir nos particules fractales sur la zone de canevas disponible. Je convertis ces arguments en propriétés de classe comme d'habitude, propriété Canada Swift sur cet objet pluie que nous sommes en train de créer est égale à la variable de sueur Canada qui a été transmise comme argument à la constructeur de classe. La propriété Canvas height de cette instance de la classe pluie est égale à la variable de hauteur du canevas transmise en argument. Ce nombre de particules déterminera nombre maximal de particules actives à l'écran. Il y a ces particules qui seront un tableau et elles contiendront tous les objets particulaires actuellement actifs créés à l'aide de notre classe particulière. Je crée une méthode d'assistance privée appelée initialize. La tâche de cette méthode privée consistera à remplir le tableau de particules de la ligne 79 avec 20 objets particulaires. Donc pour la boucle, elle commence à 0, tant que je suis inférieur au nombre de particules de la ligne sept à huit, je plus, plus. Chaque fois que cette boucle de for-loop est exécutée, dans notre cas, elle fonctionnera 20 fois. Il prendra ce tableau de particules LDL de la ligne 70, et il utilisera la méthode de poussée de tableau intégrée. Dans la méthode push de tableau JavaScript comme un ou plusieurs éléments, nous lui transmettons, à la fin du tableau sur lequel il est appelé. Il renvoie également la nouvelle longueur du tableau, ce qui peut être utile parfois je lui transmets une nouvelle particule. Ainsi, une instance de notre classe de particules personnalisée de land 70, le nouveau mot-clé recherchera une classe appelée particule et créera un nouvel objet JavaScript vide. Il exécutera ensuite du code à l'intérieur du constructeur de cette classe de particules pour lui attribuer des valeurs et des propriétés basées sur le Blueprint à l'intérieur. Écrivons notre classe particulière et définissons ce plan. Chaque objet créé par cette classe devra également être conscient de la largeur et de la hauteur disponibles car je souhaite ces objets soient réinitialisés lorsqu'ils tombent hors de l'écran. coordonnée horizontale initiale de départ de la position X sera un nombre aléatoire compris entre 0 et un rapide. coordonnée Y verticale sera une valeur aléatoire comprise entre 0 et le canevas. Hauteur. La largeur de chaque particule sera, par exemple, 50 pixels et la hauteur sera de 50 pixels. Chaque objet particule créé par cette classe aura accès à la méthode de mise à jour. Dans la méthode de mise à jour, nous allons définir le comportement et le mouvement. Une méthode bit sera appelée plus de 60 fois par seconde. Et chaque fois qu'il s'exécute, nous le pousserons d'un pixel sur axe X horizontal vers la droite et d'un pixel sur l'axe Y vertical. Ainsi, vers le bas, ces deux actions combinées entraîneront un mouvement en bas à droite. Chaque particule aura également sa méthode de dessin associée dans laquelle nous définissons un code qui va dessiner cette particule est 60 fois par seconde. Après chaque mise à jour de position, nous aurons besoin d'un argument pour spécifier le type de demande sur lequel nous voulions puiser. Cet effet utilisera pour les types d'éléments. Je vais l'expliquer au fur et à mesure. Commençons simplement par la méthode de rectangle de remplissage intégrée des deux-points . Cette méthode prend x, y, largeur et hauteur, et elle dessinera un rectangle à cette position de cette taille. Parfait, donc nous avons un Blueprint qui peut être utilisé pour créer 20 objets particulaires en ligne 71, je peux voir que ma classe particulière a besoin arguments pour l'onde S et une sorte de hauteur. Je devais me rappeler que lorsque je déclenche ce constructeur de classe en utilisant le nouveau mot-clé en ligne 97, passez haut la largeur du canevas de bureau à partir de la ligne 90. Cette hauteur de toile à pois de la ligne 91. Initialize est une méthode privée. Il peut être appelé depuis l'extérieur de cette classe. Il ne peut être appelé qu'à partir de quelque part au sein de cette classe. constructeur de classe en JavaScript a un objectif principal. Il crée un nouvel objet vide et lui attribue des valeurs et propriétés qu'il contient pour créer une instance de cette classe. Ce faisant, il exécute également tout le code qu'il contient. Nous pouvons donc en profiter et exécuter notre méthode initialisée depuis l'intérieur du constructeur. Je le fais en appelant ce hachage de nœud initialisé comme cette structure dans notre code comme cela entraînera l'exécution automatique du code à l'intérieur de la méthode initialisée lorsque le constructeur est déclenché. Lorsque nous créons une instance de cette classe de pluie à l'aide du nouveau mot-clé, nous allons la tester dans une minute. cours de pluie mènera également une méthode publique qui fonctionnera 60 fois par seconde. Il passe en revue tous les objets particulaires actuellement actifs à partir de 993 et il appellera leur méthode de mise à jour associée à partir de la ligne 79 et la méthode de dessin à partir de la ligne 83 sur chacune de ces 20 particules. un par un. Et il le fera 60 fois par seconde. Toutes nos particules actives seront donc constamment mises à jour et redessinées aux nouvelles positions, créant ainsi une illusion de mouvement. Je le fais en prenant ce tableau de particules de médicament de la ligne 93, qui contiendra 20 objets particulaires grâce à la méthode initialisée que nous venons d'écrire et j'ai appelé intégré pour chaque méthode de tableau dessus. Pour chaque méthode exécutée sont fournies une fonction une fois pour chaque élément de tableau, j'attribue à chaque élément un nom de variable temporaire. Juste pour les fins intérieures de cette boucle for-loop, j'appelle chacun, par exemple, particule, et fourni une fonction qui sera exécutée pour chacun des 20 éléments. Nous allons simplement prendre cette particule et appeler sa méthode de dessin à partir de la ligne 83. Je peux voir que cette méthode s'attend à ce que l' argument pour le contexte spécifie quel type de méthode demandée à dessiner sur Run est public. Il va donc prendre cet argument contextuel de l'extérieur. Je vous montrerai dans une minute quand je l'appellerai, et il transmettra ce contexte pour dessiner la méthode sur chaque particule. Pour chaque méthode de tableau, nous appellerons également la méthode de mise à jour à partir de la ligne 79 sur chaque objet particule. heure en classe est prête. Essayons donc d'exécuter le code pour voir ce que nous obtenons. Je crée une variable personnalisée que j' appelle par exemple effet pluie, et j'en fais une instance de classe de pluie de la ligne 88 à l'aide du nouveau mot-clé. Comme nous l'avons dit, le nouveau mot-clé recherchera une classe portant ce nom et il exécutera son constructeur en ligne 89. Je vois que la classe de pluie s'attend largeur de la toile et à la hauteur du canevas comme arguments. Je passe donc la largeur de la toile à partir de la ligne quatre et en quelque sorte comme hauteur de la ligne cinq. Parce que nous appelons ce point initialize online 94 depuis l'intérieur du constructeur de classe. Ce code devrait être automatiquement déclenché simplement en créant une instance de la classe de pluie en ligne 97, nous pouvons voir que ce code aurait dû remplir ce tableau de particules de points de la ligne 93 avec 20 objets particuliers. Vérifions si cela fonctionne par console. Encore une fois, effet pluie de la ligne 108. J'ai ouvert ma console et je vois que nous avons une instance de classe de pluie avec des propriétés telles que Canvas, avec la hauteur de la toile et le nombre de particules exactement comme nous l'avons défini dans le plan. Et nous pouvons également constater que les particules sont un tableau avec 20 objets créés à l'aide d'une classe particulière. a l'air vraiment bien. Essayons si la méthode d'exécution fonctionne. Comme il s'agit d'une méthode publique, je peux l'appeler de l'extérieur depuis l'instance de cette classe. Donc, effet pluie dot run. En fait, je veux que cette méthode fonctionne plus de 60 fois par seconde, mettant à jour et en dessinant les 20 particules à l'intérieur du réseau de particules. Pour ce faire, je vais devoir le mettre dans une boucle d'animation. Je crée une fonction personnalisée. J'appelle, par exemple, animer à l'intérieur. Je l'appelle en effet à partir de ligne 188 point courir la méthode que nous avons définie en ligne 101. Ensuite, j'appelle le cadre et la méthode d'animation de demande. Cette méthode intégrée indique au navigateur que nous voulions effectuer une animation. Et il demandera au navigateur d'appeler une fonction spécifique pour mettre à jour l'animation entre les trois peintures suivantes, cette fonction à impliquer avant que nous peignons ne soit transmise en argument. Et je le transmettrai pour animer le nom de sa fonction parent. Je vais créer une boucle infinie. Animate va démarrer, il appellera la méthode autour de la ligne 101, puis demandera une image d'animation nous appellerons à nouveau animate. Cela va se répéter sans fin. Lorsque nous appelons une image d'animation de demande comme celle-ci, elle essaie généralement de s' ajuster à la fréquence de rafraîchissement de l'écran. Dans la plupart des cas, il sera exécuté à 60 images par seconde pour une animation fluide, ici nous avons déclaré animate. Je dois également l'appeler pour la première fois pour démarrer la boucle d'animation. Cela ne fonctionne pas encore parce qu'ici à la ligne 101, je vois que la méthode run attend le contexte comme argument. Sans cela, JavaScript ne sait pas quel type d'élément Us nous essayons de tirer parti de l'opacité de CTX à partir de la ligne trois. Et nous animons si c'est votre premier type d'animation, je tiens à vous féliciter, avec la connaissance, récupérer aujourd'hui vous pouvez faire des milliers d'effets différents. Finissons et polissons celui-ci. 12. Dessiner sur plusieurs éléments de toile: Tout d'abord, je ne veux pas que ma pluie de particules se limite à la petite zone de karmas au milieu de la page. Je voulais couvrir toute la fenêtre du navigateur. Pour ce faire, je retourne à l'index HTML et je crée un autre élément de canevas. Nous pouvons avoir autant d'éléments de canevas que nous le voulons dans notre projet. Et nous pouvons spécifier quelles formes nous voulons dessiner sur quel genre d'entre nous. Aujourd'hui, je voulais rendre une grosse forme fractale sur le petit cygne au milieu de la page. Je vais en quelque sorte le convertir en particules et ces particules pour tomber sur une sorte d'OS2, qui couvrira toute la fenêtre du navigateur. heure actuelle, ces particules sont simplement représentées par des rectangles bleus, mais nous allons corriger cela dans une minute. Nous avons créé un autre type d'élément avec un identifiant de cannabis pour coiffer CSS. Je lui donne un fond rouge, position, top 0 absolu et 0 gauche dans script.js ici entre les lignes 35, nous avons un code que nous avons écrit ce qui adopte un. Faisons quelque chose de semblable à la variable constante appelée Canada. Ps2 est un document point get élément par ID canevas pour voir dx2 est gentil de pointer GetContext 2D. La largeur de deux points correspond à la fenêtre dans la largeur. Ainsi, la largeur totale de la fenêtre du navigateur, hauteur du canevas correspond à la fenêtre de votre hauteur. Joli. Il indexe le HTML. J'ai positionné un tabouret derrière Canvas comme celui-ci. Maintenant, nous savons que ce genre de couverture couvre toute la fenêtre du navigateur afin que je puisse supprimer le type réticulaire de nous est configuré. Et si je voulais dessiner quelque chose dessus, je peux utiliser ces variables c2x2 ligne 17 à l'intérieur de la boucle d'animation. Je le transmets comme argument pour exécuter une méthode comme celle-ci. Maintenant, les rectangles sont dessinés sur ce genre de nôtre. Comme vous pouvez le voir, ils sont passés du bleu au noir. C'est parce que le FillStyle bleu a été configuré sur CTX un, sur les autres types d'entre nous, le dx2 est toujours réglé sur sa couleur de remplissage noire par défaut. Je dois passer la largeur et la hauteur de l'effet de pluie de Canada C2, afin qu'il puisse s'étendre correctement aux particules dans la zone nouvellement disponible. J'essaie de dessiner des rectangles noirs, mais ils laissent de longues pistes. C'est parce que nous pouvons voir des cadres anciens, de la vieille peinture. Je peux utiliser la méthode de rectangle clair intégrée qui supprimera une zone rectangulaire sur Canvas que nous avons définie et la rendra transparente. Dans ce cas, je voulais supprimer l'intégralité du Canvas 60 fois par seconde entre chaque image d'animation. Je voulais effacer toute la peinture sur le type de coordonnées frontales OS2, zéros 0 pour demander à la largeur, à la hauteur. C'est ainsi que vous animez le mouvement sur des demandes de tout supprimer, mettre à jour et de redessiner tous les éléments, et de les faire boucler. Il s'agit donc de supprimer, de mettre à jour et de redessiner et encore et encore, nous avons un canevas plus petit, où nous dessinons notre forme fractale détaillée et nous avons Canvas à positionner derrière elle qui s'anime dans particules en forme de carrés noirs. 13. Convertir des dessins en toile en pixels: L'effet que nous voulions construire aujourd'hui est une pluie fractale. Je voulais donc remplacer ces carrés noirs par des versions plus petites de la fractale principale que nous avons dessinée sur Canvas One. Comme nous l'avons déjà dit, il n'est pas vraiment possible de tirer 20 de ces facteurs sur nous. En même temps, continuez à les supprimer, à mettre à jour leurs positions et à les redessiner plus de 60 fois par seconde. Il faut beaucoup moins de performances pour faire cela avec rectangles noirs aux formes complexes comme le fructose, nous devons faire différemment. Dessiner des formes fractales randomisées complexes nécessite beaucoup de puissance de calcul. Dessiner des rectangles noirs simples est bon marché et rapide et a vu ses images de dessin Canvas est très bon pour dessiner des images très rapidement. Ce que je vais faire aujourd'hui, je prendrai la fractale complexe, nous la générerons, et j'utiliserai JavaScript pour l'enregistrer en tant qu'image. Nous remplacerons ensuite les rectangles noirs représentant nos particules par ces images. C'est vraiment très facile de le faire. Ici, à la ligne 72, nous créons une instance de classe fractale que nous avons écrite précédemment, et nous appelons sa méthode de dessin le rendre sur Canvas. Nous avons spécifié ici, je crée une nouvelle variable appelée par exemple image fractale. Je l'ai dit, la nouvelle image comme celle-ci. Il s'agit d'une classe JavaScript intégrée qui créera simplement un nouvel élément IMG vide, un élément image. C'est la même chose que si j'ai créé une balise IMG dans mon fichier HTML, mais cette image n'est encore incluse nulle part sur la page Web. À moins que nous ne le mettions là avec JavaScript, j'accèderai ensuite à sa propriété source et je la mettrai à fractale. Nous dessinons sur Canvas comme source d'image. Nous pouvons le faire en utilisant la méthode d'URL intégrée aux données. Attention, l'URL est orthographiée avec des majuscules. Si vous faites simplement U majuscule et r, l minuscule, vous obtiendrez une erreur sur la méthode d'URL de données convertit l'intégralité du contenu du canevas en une image au format de base 64. C'est un format que tous les navigateurs peuvent comprendre et c'est essentiellement une très longue chaîne de texte. Nous pouvons ensuite la traiter comme une image normale et nous pouvons tout faire avec elle. Nous pouvons utiliser des images en JavaScript, HTML et CSS. Il comporte des arguments facultatifs pour spécifier le format de fichier. Si nous ne le déclarons pas, il sera par défaut B et g, ce qui est idéal car je voulais préserver l'arrière-plan transparent. Je crée un nouvel objet JavaScript d'image vide. Et je prends essentiellement une capture d'écran du genre 4s1. Donc cette zone et l' enregistrer comme cette nouvelle variable d'image fractale. Si je pouvais regarder une image fractale, nous pouvons voir la longue chaîne de données en base 64 représentant toutes les valeurs de couleur et de position des pixels qui composent l'image. Puisque nous avons donné à notre élément image un attribut source, nous pouvons maintenant écouter un événement de chargement. J'ai eu tout ce code et je le colle ici en ligne un 111. J'ai supprimé le journal de la console. L'événement onload est déclenché lorsqu' un objet a été complètement chargé. Dans ce cas, lorsque l'image a été créée et la forme fractale que nous avons générée avec JavaScript ou convertie avec succès au format de base 64 et assignée comme source de cette image. J'ai mis tout ce code dans cette fonction de rappel car nous ne voulons l'exécuter qu'une fois l'image disponible. Je passe l'image elle-même comme le troisième argument au constructeur de la classe pluie ici en ligne 90, je m'assure que la classe de pluie attend réellement cette image et je la convertit en propriétés de classe. Cette image de points est donc égale à l'image. Je vais passer cette image longtemps au constructeur de classe de particules ici comme troisième argument. En ligne 73, je m' assure qu'il est attendu et je le convertis en propriété de classe sur la classe de particules. Maintenant, toutes nos particules ont accès à l'image de fractale que nous venons de générer. J'utiliserai la méthode intégrée de dessin d'image pour le dessiner sur Canvas. Nous devons passer au moins trois arguments. Image que nous voulions dessiner cette image à points à partir de la ligne 76 et des coordonnées x et y où la dessiner sur Canvas. Je le passe donc à ce point x point y. Nous pouvons également le passer en largeur et en hauteur pour réduire ou étirer cette image. Essayons 200 fois 200 pixels. J'ai enlevé le rectangle noir. Que se passe-t-il si je veux que chaque particule ait une taille aléatoire ? Je crée une propriété appelée ce modificateur de taille de point. Il s'agit d'un nombre aléatoire compris entre 0,10.3. La largeur sera définie sur la largeur réelle de l'image. Donc cette largeur de point de l'image de point, si vous contrôlez cette image de point de 76 ici, vous verrez qu'elle a des attributs de largeur et de hauteur. Je multiplie cette fois ce modificateur de taille de point, qui sera aléatoire et légèrement différent pour chaque particule. Je fais la même chose pour la hauteur. Bien, nous avons des particules randomisées. Je peux augmenter la gamme de tailles. Je crée une propriété appelée cette vitesse de point et je l'ai définie sur une. Je le remplace ici dans la méthode de mise à jour. Chaque fois, nous aurons une vitesse aléatoire comprise entre 0,21,2 pixel par image. Je voulais que les formes tombées hors de l'écran se réinitialisent l'autre côté afin qu'elles puissent s' animer à nouveau sur l'écran. Si ce point x est plus qu'un sucré plus le sien , ce qui signifie qu'il est complètement caché derrière le bord droit, il a dit qu'il s'agit d' une exposition juste derrière le bord gauche. Donc 0 moins cette largeur de point. Je peux aussi l'écrire comme ça. Oui, cela fonctionne. Ils sont réinitialisés horizontalement. S'ils tombent complètement de l'écran verticalement, réinitialisez leur coordonnée Y verticale juste au-dessus du bord supérieur de la toile. Nous avons maintenant un pool de 20 particules qui couleront sans cesse sur Canvas. Vous pouvez régler leurs tailles et leurs vitesses ici. 14. Expériences: Je peux augmenter le nombre de particules ici. Et si je veux qu'ils tournent au fur et à mesure qu'ils tombent ? Je crée une propriété appelée angle. L'angle de départ est de 0 radians. Je crée également la vitesse de l'angle VA pour chaque image, angle augmentera de 0,01 radians. Nous allons tourner et je ferai pivoter chaque particule selon sa propre valeur va. Je ne veux pas que les données de ligne circulent vers d'autres formes, alors je les enroule dans un coffre-fort et je les restaure comme nous l'avons fait auparavant. Maintenant, je traduis le centre de rotation sur la forme fractale. Donc ce point x point y, je voulais faire pivoter et je fais pivoter par cette propriété d'angle à partir de la ligne a, d3, puisque nous avons déplacé les coordonnées 00 du coin supérieur gauche sur la forme fractale, je dois changez ce point x et y ici, deux zéros, 0. Pour chaque image d'animation, nous augmentons l'angle de ce nœud VA à partir de la ligne 84. Lorsque nous dessinons des images sur Canvas, c'est essentiellement un rectangle. Et en traduisant ce point x, ce point y, j'ai amené le point central de rotation vers le coin supérieur gauche ou la zone rectangulaire qui contient chaque forme de floon de neige. Maintenant, toutes les formes tournent autour de ce coin supérieur gauche. Si je veux qu'ils tournent autour de leur propre centre, je dois les dessiner à partir d'une moitié moins de leur propre largeur et moins la moitié de leur propre hauteur comme celle-ci. Cette partie peut être un peu déroutante, mais lorsque vous utilisez traduire et pivoter pendant un certain temps, elle devient claire et intuitive. Ne vous inquiétez pas trop pour le moment. J'ai fait d'autres cours où je l'ai montré sur différents exemples. Ainsi, voir dans les visuels finit par rendre très clair comment fonctionne la rotation du canevas. Si je définit VA sur un nombre négatif, ils tournent dans la direction opposée. Et si je veux faire pivoter vers la gauche et certains vers la droite, je peux définir VA sur un nombre aléatoire compris entre moins 0,005 et plus 0,005, comme ça. Bien, ça a l'air plutôt organique. Nous pouvons augmenter la portée si vous voulez plus de filature. Nous avons donc une toile où la forme fractale régénère, nous avons capturé avec JavaScript et nous utilisons cette image comme particules dessinées sur le deuxième type d'acide plus grand derrière elle. Ces techniques peuvent être utilisées pour prérendre des ressources , demander et être hors écran. Il pourrait s'agir d' un Canvas invisible et je peux, par exemple, rendre 20 de ces fractales et faire en sorte que chaque particulier en choisisse une au hasard. Si vous voulez que je montre certaines de ces techniques plus avancées, faites-le moi savoir. Si je retire la bordure autour de Canvas. Et j'ai dit que l'arrière-plan sur Canvas devait bloquer. Chaque fois que je rafraîchis la page, nous avons une couleur différente et une forme différente. Je vais en savoir plus sur la façon de créer des formes fractales expérimentales dans une autre classe, toutes ces autres formes peuvent être utilisées dans cet effet. Permettez-moi d'essayer quelques expériences maintenant pour voir ce que nous avons imaginé. A a réduit le nombre de particules à dix. Pour apporter des modifications fondamentales à la forme fractale du noyau, nous devons modifier le code à l'intérieur la méthode DrawLine ici. heure actuelle, notre logique fractale de base est la suivante. Nous dessinons la ligne principale, nous baissons et nous tracons une ligne plus petite vers la gauche et une autre ligne plus petite et nous nous ramifions vers la droite. C'est une fourchette simple qui se répète encore et encore pour des détails plus fins et plus fins. Ce n'est pas forcément comme ça. Nous pouvons utiliser des cercles, les rectangles sont des courbes de Bézier ici, et les formes peuvent devenir vraiment sauvages. Nous pouvons également utiliser des images pour constituer notre fractale. Par exemple, regardez ce qui se passe si je déplace, enregistre et restaure en dehors de cette boucle for-loop. Je ne suis pas réinitialisé, traduit et mis à l'échelle entre chaque branche, mais ce n'est qu'une fois que tous les ensembles de branches ont été dessinés, nous obtenons immédiatement un ensemble de formes différentes. Essayez d'actualiser votre navigateur encore et encore pour avoir une idée de ce que nous avons ici. Maintenant. Si je change cela moins le plus, nous obtiendrons des espaces entre les lignes. Les lignes ne seront plus directement connectées. Je pense que cela semble également très intéressant. J'ai essayé d'actualiser votre navigateur plusieurs fois pour voir si vous obtenez des formes différentes de celles que je reçois. J'ai remis cette sauvegarde et la restauration à l'intérieur de la boucle for-loop. Maintenant, nous sommes partagés qui sont découpés parce que Canada S1 ne mesure que 600 fois 600 pixels. Si vous le souhaitez, vous pouvez l'agrandir. Cela fonctionnera toujours si vous le faites couvrir toute la fenêtre en hauteur, comme nous le faisons avec le Canada. Donc, j'ai enlevé la deuxième ligne de ramification. La base de notre fractale n' est plus une fourchette. C'est un petit crochet. Je peux monter ici et augmenter le niveau maximum à huit pour obtenir des détails plus fins. niveau cinq maximum est peut-être très bien. Je peux ajouter d'autres succursales en ligne, 30. Si ma forme est trop grande pour Canvas, je peux également réduire la taille de base ici, moins ici. Nous allons en faire une branche à nouveau connectée, pour que je puisse l'agrandir. Est-ce que quelqu'un d'autre aime grandes expériences de codage en direct comme celle-ci, ou est-ce juste moi ? J'ai dit que les deux branches. Et si je voulais ajouter quelques cercles dans le mélange pour dessiner un cercle sur Canvas, nous devons commencer par commencer le chemin. La méthode d'arc intégrée prend au moins cinq arguments, coordonnées x et y de départ du point central du cercle, du rayon, de l' angle de départ et de l'antifongique. Maintenant, j'appelle remplir le chemin de remplissage du cercle avec la couleur en ligne 35, j'ai dit FillStyle trop le style de trait. Je peux aussi faire des cercles fortement. À la place. J'ai augmenté la taille du Canada S1, donc nous avons plus d'espace disponible pour rendre nos formes. Je modifie la coordonnée X horizontale du point central du cercle. Je réduit la taille de la base. Essayons d'échouer. Que diriez-vous d'ajouter des rectangles. Le x de départ sera cette taille de point fois 1,5. Y sera égal à 0 à une hauteur de 5050, avec un 150. Ajustez la coordonnée X. caresser de dix à 150, avec 30. Je vais jouer avec ça depuis un moment. 15. Que faire ensuite ?: Maintenant que vous comprenez certaines bases, vous pouvez essayer d'utiliser des lignes courbes remplacer l'outil de ligne et de déplacer deux méthodes avec les méthodes de courbe de Bézier deux et de courbe quadratique deux méthodes. Vous pouvez également remplacer des lignes par des images. Cet effet peut être combiné avec nombreuses méthodes et propriétés de dessin Canvas pour obtenir une grande variété de formes expérimentées avec un code comme celui-ci est toujours ma partie préférée. Si vous souhaitez en savoir plus sur HTML Canvas, vous pouvez consulter ma chaîne YouTube. J'espère que vous avez trouvé de la valeur aujourd'hui. Je vous verrai plus tard.