Codage créatif plongée profonde pour les débutants

1. Introduction: grandes et belles choses liées au code peuvent être faciles si vous le faites étape par étape Tout a du sens si vous divisez en parties individuelles . Laissez-moi vous montrer comment utiliser les principes de base de la programmation, fonctions, les tableaux et les boucles pour créer une base de code animée complexe. Une fois que nous aurons bien compris les techniques, nous passerons au niveau suivant dans la section avancée. Aujourd'hui, nous allons découvrir les outils, cool, expérimenter avec du code, et nous utiliserons ces connaissances pour concevoir nos propres animations. Créons de l'art avec du code et apprenons à programmer en même temps. Amuse-toi bien. 2. Configuration du HTML et du CSS: Dans cette première section, je vais créer un projet distinct adapté aux débutants. Nous allons apprendre à animer des lignes et à les transformer en de multiples effets différents, tels que des éclairs, des spirales , des vagues, etc. Si vous le souhaitez, vous pouvez accéder directement à la section du champ de flux, qui commence à moins de 17. J'ai inclus le téléchargement du code source à des moments clés de chaque projet. Il vous est donc plus facile de passer d' projet à l'autre et d'expérimenter du code. Si c'est ce que vous voulez faire, je vous guiderai pas à pas tout au long du processus et j'expliquerai chaque ligne de code, mais certaines connaissances de base en HTML, CSS et JavaScript sont nécessaires pour obtenir la valeur maximale. Ici, je suis en train de configurer une page Web générique de base avec un élément de canevas HTML dessus. J'ai créé un lien vers les fichiers style.css et script.js. Ensuite, je déclare certains styles CSS pour le canevas et je crée des règles de réinitialisation globales pour m' assurer que les marges et les rembourrages apparaissent de la même manière sur les différents navigateurs. Je recommande d'utiliser un navigateur moderne pour ce cours, idéalement Google Chrome. Vous pouvez voir que j'utilise cette position absolue, ce centre et cette technique courants pour m' assurer que Canvas se trouve au milieu de la page Web, verticalement et horizontalement. 3. Configuration JavaScript: Configuration de base dans index.HTML et style CSS, nous passons à script.js. Toute notre logique sera écrite ici. J'ai configuré mon élément de toile HTML, notre planche à dessin avec les deux lignes de code habituelles. J'ai créé une variable personnalisée que j'appelle par exemple canvas, et j'ai pointé vers l'élément de toile que nous avons créé dans index.HTML en utilisant son identifiant. Je lui ai donné un identifiant Canvas One. Ensuite, je crée une variable de contexte, CTX. Je prends cette variable de canevas que je viens de créer et j'y appelle la méthode intégrée GetContext. Cette méthode crée ce que l' on appelle le dessin en contexte, qui est essentiellement un objet JavaScript avec toutes les méthodes et propriétés de dessin intégrées à Canvas. Nous lui transmettons un argument appelé type de contextes. Nous voulons travailler avec un contexte de rendu bidimensionnel. Aujourd'hui, l'élément de toile a deux tailles indépendantes. Taille de l'élément, taille réelle de l'élément HTML et taille de la surface de dessin. Nous voulions nous assurer que ces deux tailles étaient définies sur les mêmes valeurs. Pour ce faire, je ne définis pas la taille du canevas en CSS et juste certains attributs de largeur et de hauteur sur Canvas pour les valeurs. Je le veux comme ça. Si vous déclarez également la taille du canevas dans votre fichier CSS, assurez-vous qu'elle est définie sur les mêmes valeurs afin d'éviter des dessins étirés ou déformés. Si je console log c dx à partir de la deuxième ligne, nous pouvons voir cet objet contextuel de rendu du canevas dont j'ai parlé. À l'intérieur. Nous pouvons voir les paramètres par défaut du canevas, tels que la police de style de remplissage actuelle. Nous pouvons voir que le style de trait par défaut est défini sur noir ici. Par exemple, nous pouvons également voir toutes les méthodes de dessin intégrées à Canvas. Aujourd'hui, nous allons nous concentrer sur le dessin et les lignes animées. Nous allons donc apprendre tout ce que vous devez savoir sur méthode Begin Path qui vient d'ici. Nous avons également la méthode du chemin fermé ici, la ligne ici et la méthode du passage à la méthode ici. Utilisons ces méthodes afin de bien comprendre ce qu'elles font et comment elles fonctionnent. 4. Comment dessiner des rectangles: Nous pouvons dessiner de nombreuses formes différentes sur Canvas Les formes les plus basiques sont les cercles et les rectangles. Dessiner un rectangle est très simple. Nous pouvons prendre les contextes que nous avons définis à la deuxième ligne. Nous savons qu'il contient une référence à l'objet qui contient toutes les méthodes de dessin sur toile. À partir de là, nous appelons la méthode du rectangle de remplissage intégrée. Le rectangle de remplissage attend les coordonnées partir desquelles nous allons commencer à dessiner dans le rectangle, le coin supérieur gauche du rectangle. Coordonnée X, la distance entre le coin supérieur gauche du rectangle et le bord gauche de la toile sera de 100 pixels, coordonnée y, la distance par rapport au haut sera également de 100 pixels. La largeur du rectangle sera 50 pixels et la hauteur de 150. Je peux modifier la largeur à 200 pixels, coordonnée verticale y à 250 pixels. Je pense que vous avez compris l'idée par défaut, le remplissage des formes dessinées sur Canvas est réglé sur noir. Je peux utiliser la propriété FillStyle pour remplacer la valeur par défaut et la définir sur autre chose. Essayons le rouge. Nous pouvons également appeler la méthode de rectangle à traits intégrée, qui définira simplement la forme. Par défaut, il s'agira d'une ligne noire d'une largeur d'un pixel. Je peux changer cela en utilisant la propriété de largeur de ligne. Essayons dix pixels. Et je peux utiliser un style de trait pour changer la couleur de toutes les lignes dessinées sur Canvas, par exemple le bleu. 5. Comment dessiner des lignes: Ce sont donc les bases du dessin de formes sur Canvas. Aujourd'hui, nous allons nous concentrer sur le dessin de lignes. Ils fonctionnent un peu différemment des rectangles. Nous devons commencer par la méthode de chemin de début intégrée à deux points. Cette méthode créera un nouveau chemin et fermera également automatiquement tous les chemins existants s'il y en a. C'est important car de cette façon, vous pouvez dessiner chaque ligne dans une couleur différente et, sans tracé de début, toutes vos lignes se joindront automatiquement en une seule forme massive, qui n'est pas ce que nous voulons aujourd'hui. Hein ? Maintenant, nous voulons simplement tracer une ligne simple. Nous commençons par utiliser la méthode de transfert intégrée. Cette méthode créera un nouveau sous-chemin selon nos intentions et nos objectifs. Pensons au passage aux méthodes comme moyen de définir les coordonnées x et y de départ de notre droite. Ensuite, nous utiliserons des méthodes linéaires qui créeront une ligne droite à partir du sous-chemin, du point défini dans move à deux, les coordonnées que nous transmettrons à la ligne deux. Réfléchissons-y pour l'instant : les méthodes de la deuxième ligne représenteront les coordonnées x et y de fin de notre droite. Pour passer à la fin de la ligne, deux méthodes définissent simplement le chemin. Ils ne restituent rien directement pour nous tracer le chemin, nous devons utiliser la méthode de tracé intégrée. Maintenant, nous traçons une ligne à partir des coordonnées 300, 302, 350, 400. Nous pouvons modifier ces valeurs pour modifier le début et la fin de notre ligne. Je peux supprimer le rectangle. Maintenant, dans ce domaine, je voulais définir des paramètres globaux. La largeur de ligne sera de dix pixels ou 100. Je déplace les coordonnées. Nous avons de nombreuses autres propriétés que nous pouvons utiliser ici. Vous pouvez tous les voir si vous enregistrez le CTX sur console à partir de la deuxième ligne, comme nous le faisions auparavant, par exemple, regardez ce qui se passe lorsque je dis la propriété Line Cap à arrondir. J'ai réglé le style du trait sur magenta, la largeur du trait sur dix. Nous pouvons également enchaîner plusieurs méthodes de deux lignes comme celle-ci. chaque nouvelle ligne, selon deux méthodes, nous définirons un autre point de la forme qui sera connecté à notre sous-chemin. Et le dentiste a écrit que c'est le principal concept d' animation que nous utilisons aujourd'hui. Nous aurons une ligne qui commence quelque part. Ensuite, nous aurons de nombreux appels sur la deuxième ligne vers les points de recherche le long de cette trajectoire. Et comme dans le jeu classique de Snake, nous allons l'animer en ajoutant toujours un nouveau segment de ligne au début et en supprimant le dernier segment, donnant ainsi l'impression que la ligne rampe sur l'écran. J'ajoute une nouvelle ligne. J'en ajoute un de plus. Je supprime le segment le plus ancien, j'ajoute une nouvelle ligne. Nous allons automatiser cela et jouer avec les coordonnées que nous transmettons à ces lignes pour susciter de l'intérêt pour les modèles de mouvement. Une fois que vous aurez compris ce concept, nous l'utiliserons pour créer magnifiques champs de flux comme celui-ci dans un cours avancé. Il est peut-être plus facile que vous ne le pensez de faire circuler les lignes autour des images ou des lettres. 6. Programmation orientée objet: Maintenant que nous avons compris le concept, élargissons-le. Je voulais créer une classe JavaScript personnalisée qui dessinerait et animerait des lignes pour moi Je voulais animer plusieurs lignes en même temps. L'utilisation d'une classe est donc idéale ici. Le constructeur de classe est une méthode spéciale pour créer une instance d'une classe. Lorsque nous l'appellerons avec le nouveau mot-clé Later Class Constructor, nous créerons un nouvel objet JavaScript vide, et il définira ses propriétés et valeurs en fonction du plan qu'il contient. Définissons donc ce plan. Je veux que vous commenciez très simplement et nous optimiserons le code suite pour nous assurer que ce qui se passe est parfaitement clair. Chaque objet linéaire aura des coordonnées x et y de départ. Ainsi, une propriété personnalisée que j'appelle, par exemple start x, sera un point aléatoire compris entre zéro et une largeur horizontale. coordonnée verticale de départ de chaque ligne sera une valeur aléatoire comprise entre zéro et une sorte de hauteur verticale. Ainsi, lorsque nous combinons ces coordonnées x et y aléatoires, cela nous donne un point quelque part dans la zone du canevas. Je veux faire la même chose pour terminer les coordonnées x et y comme ceci. Ainsi, lorsqu'un nouvel objet linéaire est créé, départ et un point de fin lui sont attribués de manière aléatoire. Donnons-lui une méthode de dessin personnalisée pour tracer une ligne entre ces deux points. J'appelle Begin Path First. Passez à la méthode pour définir les coordonnées x et y de départ de la ligne. Méthode de la deuxième ligne pour définir les coordonnées x et y de fin de la ligne. Et nous appelons stroke pour réellement afficher ce chemin sur Canvas. Nous avons un cours, notre plan est prêt. Comment l'utilisons-nous réellement pour créer un objet linéaire ? Je crée une variable constante, j'appelle la première ligne. Je l'ai mis égal à une nouvelle ligne comme celle-ci. Le nouveau mot clé recherchera une classe portant ce nom et déclenchera son constructeur de classe. Constructeur de classe, nous allons créer un nouvel objet JavaScript vide, et il lui attribuera des valeurs et propriétés en fonction du plan contenu dans cet objet qui sera enregistré dans Disgust Them, ligne 1, variable. Comme cet objet a été créé à l'aide de la classe line, il a accès à cette méthode de dessin publique et je peux l'appeler comme suit : tirage au sort à un point, coordonnées de début et de fin aléatoires ont été calculées et une ligne a été parfaitement tracée. Sur la septième ligne, largeur de ligne incertaine à dix pixels. Mais peut-être que je veux que chaque ligne créée par la classe ait une largeur aléatoire dans une plage prédéfinie. J'ai créé cette propriété de largeur de ligne à points, et ce sera une valeur aléatoire, de 1 à 16 pixels. Je vais l'encapsuler dans Math.floor afin que nous n'obtenions pas de valeurs inférieures aux pixels. C'est une bonne habitude de le faire pour tout ce que nous dessinons sur Canvas chaque fois que possible. J'aurais pu le faire aussi pour les coordonnées x et y. Je prends le CTX d'une ligne à l'autre et je le règle sur cette valeur de largeur de ligne aléatoire. Maintenant, chaque fois que je rafraîchis la fenêtre de mon navigateur, aligne avec une position aléatoire et une largeur de ligne aléatoire sera dessinée. Nous faisons quelque chose qui est considéré comme une mauvaise pratique ici. J'ai défini la variable canvas sur la première ligne, et j'utilise cette même variable directement dans ma classe. Je fais de même avec la variable ctx. Le code fonctionnera, mais si vous écrivez du code orienté objet, l'objectif est de garder vos classes indépendantes de leur environnement lexical, indépendamment du code extérieur à la classe elle-même. Hein ? Désormais, cette classe ne fonctionnera que si variables Canvas et CTX sont définies ici. La bonne façon de procéder est de convertir ces variables externes en propriétés de classe. De cette façon, ils seront transmis au constructeur de classe ici lors de la création de la classe. Et ils peuvent provenir de n'importe quel endroit de notre base de code, ce qui rend notre classe plus autonome et réutilisable. Vous me demandez souvent pourquoi je fais cela dans les commentaires, alors j'espère que cela explique les choses. constructeur de classes de ligne s'attendra à du cannabis comme argument. À l'intérieur. Je convertis cet argument en propriété de classe. Je dis de prendre la variable Canvas qui a été transmise ici et de la convertir en propriété Canvas sur cette instance de classe de ligne que vous créez actuellement. Ensuite, nous pouvons utiliser ce point Canvas de la ligne 12 ici, au lieu de tirer directement la variable de la première ligne. Pour que tout cela fonctionne, je sais que le constructeur de classes de lignes nous attend comme argument. Je prends donc la variable canvas de la première ligne et je la passe en argument ici. Lorsque nous créons une instance de cette classe avec le nouveau mot clé perfect, nous extrayons également directement la variable CTX du terrain dans notre classe ici. Notre méthode de tirage public s'attend donc que le contexte soit un argument et il sera utilisé ici. Ensuite, nous prenons la variable CT x de la deuxième ligne et nous la transmettons à la méthode Draw ici. Lorsque nous l'appelons ainsi, CTX sera converti en contexte ici. C'est ainsi que vous pouvez rendre les cours plus autonomes et moins dépendants du froid ambiant en dehors de ces cours. 7. Couleurs dynamiques avec HSL: Nous définissons le style de trait sur la huitième ligne, mais je voudrais peut-être que la couleur des lignes soit également aléatoire. Dans ce cas, je dois définir le style de trait dans la méthode de dessin ici. J'ai dit que c'était pour l'écrire juste pour le tester. Si ça marche. Je voulais attribuer une couleur aléatoire chaque fois que nous créions une nouvelle ligne. Le moyen le plus simple de le faire est d'utiliser la déclaration de couleur HSL sur le Web Nous pouvons définir les couleurs de différentes manières. Vous disposez de déclarations de couleurs RGB et hexadécimales standard que tout le monde connaît. Nous pouvons également utiliser la déclaration de couleur HSL, la teinte, la saturation, la luminosité. Le premier argument ici, c' que vous allez représenter un degré sur la roue chromatique de 0 à 360. La saturation sera de 100 %. Nous voulons toutes les couleurs. La légèreté sera de 50 %. Nous voulons une couleur qui ne soit pas affectée par la lumière ou l'obscurité. Zéro degré sur la roue chromatique est correct, comme vous pouvez le voir, 120 correspond au vert, 240 au bleu, 360. Nous sommes revenus au rouge à vélo. Encore une fois. Au fur et à mesure que nous élargissons la vue, nous parcourons toutes les couleurs intermédiaires. Si nous dépassons 360, nous repartons du début à la couleur rouge. La déclaration de couleurs HSL est structurée de manière à faciliter la répartition aléatoire des couleurs ou modification dynamique du spectre de couleurs. Je crée une propriété de classe personnalisée. C'est ce que j'appelle la vue par points. Ce sera une valeur aléatoire de 0 à 360, et je ne veux que des entiers. Donc, Math.floor, nous allons rendre le style de trait dynamique en remplaçant la valeur de teinte codée en dur cette variable aléatoire comme celle-ci. Et c'est tout. Chaque fois que je rafraîchis la page, nous calculons une couleur différente au hasard. 8. Art en ligne aléatoire: Comme nous l'avons dit, la classe JavaScript est un modèle. Nous pouvons l'utiliser pour créer de nombreux objets similaires. Alors pourquoi créons-nous une seule ligne aléatoire ? Créons-en bien d'autres. À ce stade, c'est très simple. Je crée d'abord une variable appelée lions array. Il s'agira d'un ensemble destiné à contenir tous les objets aériens au même endroit. Maintenant, je peux créer une boucle en quatre. Cette boucle for s'exécutera, par exemple dix fois. Chaque fois qu'il s'exécute, je prends un tableau de lignes et j'appelle la méthode push intégrée du tableau. Méthode Push. Nous prendrons tout ce que nous lui transmettrons comme argument et cela le poussera à la fin du tableau. Je vais lui passer une nouvelle ligne. Et en ligne 11, je peux voir que le constructeur de classe de ligne attend Canvas comme argument. Je lui passe donc la variable canvas à partir de la première ligne. Je supprime ce code et je console le tableau des lignes de journal. Comme prévu, il contient dix objets linéaires créés à l'aide de notre classe de ligne personnalisée. J'en ouvre une et j'ai inspecté pour m'assurer que toutes les propriétés ont des valeurs. Je veux que vous vérifiiez que rien n'est indéfini, ce qui serait le signe d'un problème. Tout va bien ici. Je peux également créer un certain nombre de lignes, une variable, et je la fixe à 50. Je l'utilise ici dans la boucle. Dans la console, je peux voir que le tableau de lignes contient désormais 50 objets linéaires avec des positions, des largeurs de ligne et des couleurs aléatoires. Comment les dessiner ? Puisque nous conservons tous les objets d'alignement dans un tableau de lignes, nous pouvons simplement appeler un tableau intégré pour chaque méthode qu'il contient, chaque méthode appellera une fonction de rappel fournie une fois pour chaque élément du tableau. Donc, à l'intérieur, pour chaque objet linéaire du tableau, je veux appeler la méthode de dessin associée nous avons définie à la ligne 20. Si vous vous demandez d'où vient ce mot objet, c'est juste un mot aléatoire que j'ai choisi d'utiliser. Nous sommes essentiellement une connexion à chaque objet du tableau, un nom de variable qui sera utilisé pour faire référence à cet objet à l'intérieur de chaque méthode, ce nom de variable peut être n'importe quoi tant que nous continuons à y faire référence de cette façon partout dans cette méthode de rappel, je peux aussi l'appeler ligne, par exemple pour chaque objet de ligne à l'intérieur un tableau de lignes appelé méthode de dessin. À la ligne 20, je peux voir que la méthode draw attend le contexte comme argument. Je lui passe donc la variable CTX. Nous l'avons défini à la deuxième ligne. Nous dessinons 50 lignes sur Canvas. Chacune possède des coordonnées de début et de fin aléatoires, une largeur et une couleur aléatoires. Vous pouvez actualiser la page pour générer un nouvel ensemble de valeurs aléatoires et les dessiner sur Canvas. Félicitations, s'il s'agit de votre premier projet de codage créatif Il s'agit d'une forme très simple d' art généré de manière procédurale, appelée art génératif. L'art génératif est une collaboration entre un humain et une machine. Les règles et la portée de cette œuvre d'art sont décidées par nous, les humains. Mais certaines fonctionnalités, en l' occurrence les couleurs et les positions, sont décidées au hasard par un ordinateur. Il existe bien sûr des formes d'art génératif beaucoup plus avancées . Et j'ai créé de nombreux cours où nous explorons cela de différentes manières. Voyons où nous pouvons prendre celui-ci. Animons-le. 9. Dessiner des lignes multi-segmented: Pour plus de clarté, je vais revenir à une ligne afin que nous puissions mieux voir ce qui se passe. Comme nous l'avons dit au début, je voulais avoir une ligne composée de plusieurs segments. Nous ajouterons de nouveaux segments et supprimerons les anciens pour donner l'impression qu'il s'agit d'un qu'il s'agit jeu de serpent classique. Je dois apporter quelques modifications à la classe de lignes pour y parvenir, nous n'aurons besoin que d'un seul ensemble de coordonnées x et y, comme ceci. Ces coordonnées seront mises à jour à chaque clic de boucle d'animation et nous ajouterons et conserverons un certain nombre de positions dans un tableau historique que je définis ici. abord, il s'agira d'un objet simple dont les propriétés x et y sont égales à ce point x et à ce point y. Nous venons de le faire aléatoirement. L'historique de ce nœud est désormais un objet, mais ce sera un tableau où chaque élément de ce tableau est un objet comme celui-ci avec des coordonnées x et y. La méthode Move to définira les coordonnées x et y de départ de notre trajectoire. Et ce sera ce tableau historique à points, index zéro, qui sera un objet comme celui-ci. Et nous accédons à sa coordonnée x et également à sa coordonnée y. Disons que je vais conserver dix objets dans le tableau d'historique. Chacune a ses valeurs de position x et y. Ici, je veux parcourir le nombre de positions que nous occupons dans le tableau historique, et je veux les relier par une ligne. Je crée donc une boucle for qui s' exécutera autant de fois en fonction de la longueur de ce tableau d' historique de points à partir de la ligne 15. Et chaque fois qu'il s'exécute, il prend un objet, qui ressemblera à ceci à cet index du tableau, et transmet ses coordonnées x et y à la méthode de la deuxième ligne. Nous sommes donc passés à la méthode pour définir la position x et y de départ de la ligne. Ensuite, nous parcourons toutes les autres positions et nous les relions par une ligne. Ensuite, nous appelons stroke pour afficher ce chemin multi-segmenté sur Canvas. Nous n'avons pas encore de boucle d'animation, je vais donc créer une autre boucle for que nous allons simplement exécuter trois fois et créer trois positions x et y aléatoires. Je dois m'assurer que l'histoire de la pierre ici est bien détaillée. Au début, il ne contiendra qu'un seul élément avec un indice de zéro. Ce sera cet objet dont les propriétés x et y définies sur les coordonnées x et y du point. Ici, je fais une boucle quatre fois. Chaque fois qu'il s'exécute, je crée une nouvelle position x et y aléatoire. Je prends un tableau historique des distorsions et je place un autre objet avec ces nouvelles propriétés x et y en faisant attention aux crochets ici. Agréable. Chaque fois que je rafraîchis la fenêtre du navigateur, nous dessinons une nouvelle ligne à segments multiples commençant par les coordonnées x et y. Et pour une boucle qui s'exécute 123 fois à chaque fois en créant un segment de ligne, un sous-chemin. Je peux faire tourner les quatre boucles 30 fois si je le souhaite, ce qui créera une forme beaucoup plus complexe. J'espère que le fonctionnement du concept de tableau historique est maintenant clair . Maintenant, nous allons encore plus loin pour l'animer. 10. Animer les lignes: Je crée une fonction personnalisée que j'appelle par exemple animate. À l'intérieur, nous allons tracer une ligne. Nous allons le mettre à jour. Ensuite, nous appelons Request Animation Frame intégré, qui indique au navigateur que nous voulons réaliser une animation. Cela obligera le navigateur à appeler une fonction que nous spécifierons avant la prochaine mise à jour. En pratique, cela signifie que je lui transmets simplement le nom de sa fonction parent, que je l' anime, qu'il fait quelque chose, puis que je demande un cadre d'animation. Nous appellerons à nouveau animate, créant ainsi une boucle d'animation répétitive infinie. méthode Request Animation Frame s'adapte à l'objet de la fenêtre, mais elle peut être appelée directement comme ceci. Nous définissons donc ici animate. Je dois l'appeler. Pour démarrer la première boucle d'animation. J'ai mis un journal de console à l'intérieur qui indique l'animation, juste pour vérifier que la boucle fonctionne réellement. Oui, j'ai supprimé. Je veux mettre notre code de dessin dedans comme ça. Cela ne fait que créer une ligne de croissance infinie. Nous pouvons temporairement commenter les grandes lignes des sept. Si votre ordinateur a des difficultés avec ce problème, nous le réparerons dans une seconde. Je veux supprimer l'ancienne peinture entre chaque image d'animation. J'appelle donc la méthode du rectangle clair intégrée. Je souhaite effacer l'ensemble du canevas de la coordonnée zéro-zéro à la largeur et à la hauteur du canevas. OK, je fais un commentaire parce que nous ajoutons 30 segments de ligne encore et encore dans tableau historique ici, à la ligne 20 , pour créer un tableau qui s'agrandit à l' infini Je crée une méthode de mise à jour sur la classe de ligne pour chaque image d'animation, chaque fois que la méthode de mise à jour s'exécute, je veux ajouter un nouveau segment à notre ligne. Je vais supprimer tout cela. Je décommente la ligne 47. Et pour chaque animation, je veux que vous appeliez la méthode de dessin sur chaque objet du tableau de lignes. Actuellement, nous n'avons qu' un seul objet dedans. Je voulais également appeler la méthode de mise à jour que nous venons de définir. Nous pouvons maintenant voir que la ligne est tracée segment par segment. Cela n'a aucun sens de parcourir deux fois le même tableau ici. Donc, à la place, j'appelle draw et update dans la même fonction de rappel. Attention aux crochets ici. Est-ce pour faire une erreur et en obtenir une ? Agréable. Je ne veux pas qu'il trace un chemin avec un nombre de points sans cesse croissant. Je veux avoir une certaine longueur maximale. Et lorsque cela sera atteint, nous supprimerons le segment le plus ancien et nous en ajouterons un nouveau. Disons que je veux que le chemin soit long de dix segments. Méthode de mise à jour interne. Lorsque j'ajoute un nouveau segment, je vérifie si la longueur du tableau d' historique est supérieure à la longueur maximale. S'il est supérieur à dix, nous utiliserons la méthode intégrée de décalage de tableau. méthode de décalage du tableau supprime le premier élément du tableau car nous utilisons méthode push pour ajouter un nouveau segment. La méthode Push ajoute un nouvel élément à la fin du tableau. La méthode Shift supprimera pour nous le segment le plus ancien du début du tableau. Nous arrivons ici à la deuxième étape de notre art procédural. Qu'est-ce que tu en penses ? Cela évolue, mais avec des règles, nous pouvons ajouter autant de lignes que nous le souhaitons. Ils ont tous une largeur et une couleur aléatoires en raison de la logique que nous avons écrite au début nous sélectionnons simplement des points au hasard dans le cannabis. Et si nous voulions avoir l'impression d'un mouvement continu ? Nous voulons que la position mise à jour du segment suivant ait une certaine relation avec la position du segment précédent. Cela nous rapproche un peu plus d'un champ de flux réel. J'espère que tu en retires quelque chose. Explorons le mouvement et maintenant je vais considérer notre raie comme une particule. Son premier segment se déplace le long la toile à une certaine vitesse et dans une certaine direction. Les autres segments suivent. Je donne à chaque ligne une vitesse X, une vitesse horizontale et une vitesse. Pourquoi la vitesse verticale ? Nous partirons d' un point aléatoire quelque part dans la zone du canevas. Et chaque fois que nous appelons la méthode de mise à jour, nous augmentons l'exposition actuelle de la valeur de vitesse x et la position verticale y de la valeur de la vitesse. Pourquoi ? Boucle d'animation Insight Je vais décommenter, dessiner et mettre à jour pour voir ce que nous venons de faire. D'accord. Je crée 20 lignes. Oui. C'est ce qui se passe. 11. Effet d'orage de l'arc en ciel: Je vais chercher un effet éclaircissant. Je veux un orage arc-en-ciel. Chaque fois que nous mettons à jour la position horizontale par une vitesse x de dix pixels, nous ajouterons en plus une valeur aléatoire de 0 à 10 et 50. Qu'en est-il d'une valeur aléatoire comprise entre -25 et plus 25 horizontalement et des intérêts verticaux identiques. Ensuite, lorsque je rafraîchis ma page, j'obtiens une série d'éclairs très courts. Si je veux qu'ils aillent davantage du haut vers le bas, peut-être que la vitesse horizontale ne sera que plus u2 et la vitesse verticale 15 ou 46. J'aimerais que l'animation se lance, puis qu'elle soit réinitialisée. Je pourrais par exemple vérifier si tous les segments ont quitté la zone du canevas. Ou je peux attribuer un chronomètre à chaque ligne. Supposons que chaque ligne ait une durée de vie maximale de 18 fois dix, chaque ligne se déplacera pendant 100 images d'animation. Dans la méthode de mise à jour, j' augmenterai le chronomètre d'un pour chaque image d'animation. Comment puis-je m'y prendre ? Si la durée de vie de la minuterie est inférieure ? Nous avons animé la ligne. Je dois également définir ce compteur à points dans le constructeur de classe ici. Et je l'ai d'abord mis à zéro. Lorsque la durée de vie du chronomètre est supérieure à la durée de vie, nous continuons à tracer les limites, mais nous n'ajoutons ni ne retirons de segments Il semble donc qu'ils se sont figés dans l'espace. À ce stade, je souhaite commencer à supprimer les segments un par un jusqu'à ce que la ligne disparaisse. Sinon, et là encore, je vais appeler shift on the history array. Accordez-moi une seconde. Je dois comprendre la logique. Nous devons nous assurer qu'il y a toujours au moins un élément dans le tableau. Sinon, si la longueur de ce point de l'historique des points est inférieure ou égale à un, on parle de méthode de réinitialisation. Nous allons définir la méthode de réinitialisation. Maintenant, est-ce que ça va fonctionner ? Le chronomètre augmente tant que la durée de vie du chronomètre est inférieure à la durée Ajoutez et supprimez des positions, ce qui fait parcourir la ligne. Si la longueur est inférieure ou égale à un, réinitialisez-la. Sinon, cela signifie que le chronomètre est supérieur à la durée de vie, mais que la durée n'est pas encore inférieure ou égale à un. Continuez à supprimer un segment à la fois. Je pense que cela devrait fonctionner. Maintenant, je dois définir la méthode de réinitialisation selon laquelle nous allons simplement remettre la ligne à son état initial afin de pouvoir l'animer. Encore une fois. Nous devrons réinitialiser les positions x et y, et nous ajouterons cette position de départ dans le tableau d'historique. Nous remettrons également le chronomètre à zéro afin qu'il puisse à nouveau compter. Je reçois une erreur de console. Vous le remarquerez probablement avant que je n'aie besoin de lancer un shift pour supprimer le premier segment du tableau d'historique actuel. Comme ça. Oui, c'est ce que je voulais. Les lignes se déplacent autour de 400 images d'animation , puis elles sont réinitialisées. Ils sont tous réinitialisés en même temps car nous avons codé en dur la longueur maximale pour qu' elle ait la même valeur pour tous. Je l'ai réglé sur une valeur aléatoire, 10 à 160 segments. Maintenant, nous avons une véritable sensation de mouvement. Je peux également randomiser la vitesse x, disons une valeur aléatoire comprise entre -2,5 et plus 2,5 vitesse, y sera six. Vitesse. Pourquoi dix ? Peut-être qu'ici je devrais faire une valeur aléatoire comprise entre -0,5 et plus 0,5. Speed Y5 sept. Je peux également jouer avec la gamme aléatoire ici et ici. génération de nombres aléatoires comme celui-ci pour chaque image d'animation coûte très cher en termes de performances, juste pour votre information. Mais comme nous n'avons pas des milliers de lignes, plupart des ordinateurs ne remarqueront probablement même pas que la réduction du nombre de fois que votre base de code appelle une image d'animation à paires aléatoires maîtrisée augmentera considérablement les performances de vos effets. J'ai dit durée de vie maximale multipliée par trois. Vous pouvez voir que nous avons une ligne qui commence à partir d'un segment. Il grandit jusqu'à atteindre la longueur maximale, puis il fait appel à un maximum de trois termes. C'est maxlength. À ce stade, il ne grandit plus. Il se rétrécit du dernier segment à la fin, puis disparaît et se réinitialise. Ce type de mouvement linéaire est exactement ce dont vous avez besoin pour créer des champs de flux. Maintenant, une façon de l'implémenter. Je crée 100 lignes. Voici ma version d' orage arc-en-ciel généré de manière procédurale. Si vous êtes débutant et que vous avez suivi jusqu'au bout, vous êtes maintenant un corridor créatif connaît le canevas HTML. Félicitations, n'hésitez pas à ajouter ce projet, votre CV en ligne. 12. Gradients linéaires: Le canevas HTML propose de nombreux outils intégrés qui nous permettent de modifier nos animations. Nous venons de créer l'effet d' orage arc-en-ciel. Les lignes que nous dessinons sur Canvas ne sont que des formes. Permettez-moi de vous montrer quatre manières très différentes d' améliorer le fond et le contour de vos formes à l'aide dégradés, d'images et d'ombres. Le canevas HTML propose deux méthodes pour dessiner des dégradés. Nous pouvons utiliser la méthode de création d'un gradient linéaire. Son utilisation est très simple. Laisse-moi te montrer. Il crée un dégradé le long d'une ligne reliant deux ensembles de coordonnées donnés. Deux premiers arguments, nous lui transmettons nos coordonnées x et y du point de départ. Je veux que mon dégradé commence à la coordonnée zéro-zéro. Et je voulais que le point final soit aux coordonnées largeur et hauteur de la toile. Nous avons tracé une ligne invisible d'ici à ici. Le dégradé sera tracé le long de cette ligne. Pour travailler avec des dégradés, il est utile de les enregistrer dans une variable. Je l'appelle, par exemple, gradient 1. Ensuite, je prends cette variable et j'appelle méthode intégrée d'ajout de couleur. Nous définissons ici l'offset et la couleur. Donc, à l'offset zéro au début du dégradé, j'ai voulu partir du rose. Je copie cette ligne à quelques reprises. Commençons par le décalage 0,2. En fait, 0.3 sera lu. 0,4 est orange, 0,5 est jaune. 0,6 sera vert. 0,7, turquoise, 0,8, violet. Ça suffit. Je pense que je prendrais cette déclaration de style de trait et que je la mettrais ici après avoir défini le dégradé. Et je vais le régler sur la variable qui contient notre gradient linéaire nouvellement défini. Notez qu'il n'y a pas de guillemets, juste le nom de la variable comme celui-ci. Je dois également commenter la ligne 33 pour que notre dégradé soit appliqué. Comme vous pouvez le constater, nous dessinons un dégradé linéaire allant de coordonnée zéro à la largeur et à la hauteur de la toile. Je crée 200 lignes. C'est une version très différente de Rainbow Lightning Storm, n'est-ce pas ? 13. Gradients radiaux: Je copie cette ligne de code. Je vais l'appeler gradient de. Nous avons également créé une méthode de gradient radial. Celui-ci attend au moins six arguments, x et y, du point central du cercle de départ intérieur et de son rayon. Je veux que le point central du cercle soit au milieu de Canvas. Ainsi, la largeur du canevas est multipliée par 0,5, la hauteur du canevas multipliée par 0,5 et le rayon sera de 30 pixels. Le cercle final débutera également au milieu de la toile avec un rayon de 200. Je le donne à des arrêts de couleur juste pour vous montrer à quoi cela ressemble. Je pense que vous comprenez déjà ce concept de toute façon. Avec un décalage de 0,4, nous aurons du vert à partir de 0,6, ce sera du bleu. Ensuite, j'ai défini le style de trait sur l'outil Gradient. Ici. Je peux modifier la valeur du rayon. Je peux ajouter de la couleur, arrête ici. C'est ainsi que vous utilisez le dégradé linéaire et radial. 14. Comment remplir les formes avec un motif: Lorsque nous remplissons nos formes avec des dégradés, nous pouvons les remplir avec un motif. Ce motif peut être quelque chose que nous dessinons sur une toile hors écran, mais nous pouvons également utiliser une image. Dans index.HTML. Je crée un élément IMG. Je lui donne un identifiant de l'image du motif. En tant que source, j' utiliserais normalement un chemin vers ce fichier image, mais cela nous poserait des problèmes si nous exécutions notre code localement uniquement à partir d'un dossier sans utiliser de serveur pour éviter tout problème de partage de ressources entre origines Je transformerai l'image réelle en code base 64, et j' intégrerai ce code à notre fichier HTML d'index. Lorsque je le ferai, l' image sera considérée comme ayant la même origine dans tous les scénarios. Je n'ai donc rien à faire avec un site de serveur. Dans ce cours, je souhaite me concentrer sur le développement Web frontal. J'ai préparé une image que vous pouvez télécharger dans la section des ressources ci-dessous, je l'ai faite de la même taille que notre toile. Nous pouvons également utiliser votre propre image si vous le souhaitez. Je peux utiliser JavaScript pour transformer l'image en chaîne de données en base 64 en la dessinant sur Canvas et en utilisant méthode intégrée à deux URL de données. Mais par souci de simplicité, je vais utiliser un site Web pour le faire pour moi Il existe de nombreux sites Web qui peuvent transformer des images en code en quelques secondes pour nous Je vais simplement sur Google et j'ai cherché PNG en base 64 phrases. Je vais choisir ce lien en ligne PNG tools.com. Je fais glisser et déposez l' image que je veux convertir ici et cela génère une chaîne de données pour moi. Nous devons nous assurer que la chaîne commence par la base 64. Si ce n'est pas le cas, cochez cette case pour obtenir le format correct. Je copie l'intégralité de ce bloc de code. Cela demande beaucoup de code en fonction la taille de l'image que vous utilisez. Je le colle ici dans l'argument source, à l'intérieur en tant que RC. Dans Visual Studio Code, je peux accéder à View where drop pour placer cette très longue ligne de code sur une seule ligne, qui facilite la navigation dans ce fichier de code. Je passe au style CSS. En fait, j'ai enregistré les modifications dans index.HTML et vous pouvez voir que nous dessinons l'image sur la page Web sans avoir besoin du fichier image réel. Le code que nous venons de générer remplace complètement le fichier image et contient toutes les informations relatives aux pixels de cette image. Je cache l'image avec du CSS en utilisant son identifiant, n'en affiche aucun. OK, nous avons une image que nous pouvons utiliser. Dans cette zone, nous définissons donc les dégradés. Ici, nous allons créer un motif. C'est également très simple. J'aurai besoin d'une référence à cet élément IMG que nous venons de créer dans index.HTML. Je crée une variable que j' appelle image de modèle, et j'ai pointé JavaScript vers l'élément IMG en utilisant son identifiant. Une autre variable que j'appelle pattern 1 est égale à ctx point. Et ici, nous utilisons la méthode de création de motifs intégrée. Cette méthode fonctionne de manière très similaire aux deux méthodes que nous avons utilisées pour créer des dégradés. Il prend deux arguments, image et répétition, et nous pouvons ensuite l' utiliser comme style de remplissage ou de trait pour remplir nos formes avec cette image. Laisse-moi te montrer à quoi ça ressemble. L'image à dessiner sera l'image du motif que nous venons de créer. Et la règle de répétition sera de ne pas répéter. Maintenant, je définis simplement un style de trait sur le bouton 1. Et nous y voilà. Nous pouvons voir que nos lignes sont maintenant remplies d'une image. Cette technique peut être utilisée pour révéler une image. Par exemple, en fonction du type d'application ou d'effet que vous créez, nous pouvons également utiliser une mosaïque transparente comme image pour créer un motif répétitif, pour quoi cette méthode a probablement été conçue. Comme objectif principal, je peux utiliser des lignes plus larges pour voir une plus grande partie de l'image, par exemple 15. Améliorez vos effets avec les ombres: J'aime utiliser les ombres de Canvas pour donner à mes formes un effet 3D subtil. J'ai dit que l'ombre était décalée de deux pixels. Cela définira la distance entre ombre et la forme horizontalement. Décalage d'ombre y, la distance verticale sera également de deux pixels. Il peut s'agir de valeurs positives ou négatives, d'ailleurs, selon le côté, par rapport à la forme que vous souhaitez donner à l'ombre. La couleur de l'ombre sera blanche. Cela nous donnera ces fissures intéressantes affecteront ou réduiront le nombre de lignes. Bloc de couleur d'ombre. Je peux revenir au dégradé 1, le dégradé linéaire. Nous pouvons maintenant mieux voir ce que fait l'ombre et comment elle met en évidence les bords. Si vous rencontrez des problèmes de performances et des baisses d'images par seconde, le moyen le plus rapide de les résoudre est de réduire le nombre de lignes que vous animez. Et vous pouvez également désactiver ces ombres. Je fournis une largeur à une valeur inférieure. Notre orage arc-en-ciel peut prendre de nombreuses formes, et je pense que vous disposez maintenant de nombreux outils pour l'ajuster et vous l'approprier. Faisons quelque chose de complètement différent avec ça. Maintenant. Et si au lieu de la foudre, je voulais des spirales. Parlons de trigonométrie. Comme toujours, vous souhaiterez peut-être créer une copie de votre code pour enregistrer cet effet pour une référence ultérieure Nous apporterons des modifications radicales au code dès maintenant et nous le transformerons en une œuvre d' art générative complètement différente. 16. Trigonométrie: La trigonométrie est une question d'angles. Je veux que chaque objet linéaire ait sa propre propriété d'angle. Je le définis donc ici. Pour chaque image d'animation, j'augmenterai cette valeur d'angle de 0,1 à l'infini. Cette valeur représentera les radians. Donc, au lieu de faire cet effet d'éclairage ici, je vais augmenter x du signe Masdar et lui transmettre cette valeur d'angle toujours croissante. Cela créera un mouvement horizontal gauche et droit comme celui-ci. analyse et chaque augmentation de la valeur du méthoxyde ne feront que cartographier ces valeurs le long d'une onde sinusoïdale. Et si je voulais que les vagues aillent plus à gauche et à droite ? Je crée une propriété appelée courbe en pointillés et je la fixe à 30. Par défaut, la méthode sinus alterne entre moins un et plus un. Si je multiplie cette valeur par cette courbe en pointillés, nous augmentons cette plage. Et voici le résultat. Je veux des lignes lisses, donc je supprime cette partie de code ici. Essayez d'utiliser une valeur différente pour la courbe. Si vous avez besoin de plus de précisions sur la façon dont cette valeur affecte le mouvement de nos lignes. Et si je voulais courber pour commencer à une très petite valeur et augmenter progressivement, la courbe de départ serait de 0,1. Et Vc, la vitesse à laquelle il augmentera sera de 0,25. Dans la méthode de mise à jour pour chaque image d'animation, je voulais augmenter la courbe par VC comme ceci. Et quand les lignes recommencent, je veux que l'angle et la courbe reviennent à zéro. Effet intéressant. Nous pouvons faire tellement de choses différentes avec elle maintenant. 17. Effet de cribble du Chaos: Et si j'augmentais également la coordonnée verticale y par le sinus de l' angle multiplié par la courbe, nous obtenons cet étrange mouvement de va-et-vient. Mais si j'utilise le cosinus au lieu du sinus et du cosinus, nous travaillerons ensemble pour tracer une trajectoire le long du rayon d'un cercle. Et comme la courbe augmente au fur et à mesure que l'animation s'exécute, nous n'obtenons pas Circle. Nous avons en fait des spirales. J'ai dit VC, vitesse de la courbe à une valeur beaucoup plus faible. Maintenant, nous dessinons des spirales comme celle-ci. Je peux également en faire une valeur aléatoire comprise entre -0,2 et plus 0,2. Les valeurs négatives se déplaceront dans la direction opposée. Peut-être que je veux aussi aléatoirement la rapidité avec laquelle l'angle augmente. Va, la vitesse de l'angle sera une valeur aléatoire comprise entre -0,25 et plus 0,25. Ensuite, je l'utilise ici au lieu de la valeur codée en dur. La vitesse à laquelle l' angle augmente affectera la compacité de la courbe rapidité avec laquelle elle s'étale. C'est de la symétrie. Je voudrais maintenant ajouter un peu de chaos à ce projet artistique simple, ou imaginer que quelqu'un dessine ces magnifiques spirales symétriques. Mais à un moment donné, ils se mettent en colère et commencent à gribouiller au hasard et ils cassent la forme en spirale. Supposons que si le chronomètre est supérieur à la moitié de sa durée de vie, la seconde moitié du cycle de vie des lignes commence à multiplier va par moins un , et passe à la valeur opposée chaque fois qu' une nouvelle image d'animation prend, chaque fois qu'un nouveau segment est dessiné. Cela brisera la forme de spirale ainsi formée. Nous avons un chemin qui commence comme une spirale puis se transforme en ligne brisée. Je voulais que la ligne soit de plus en plus brisée. Nous avons besoin de plus de chaos à la fin. Changeons cela à 0,9. La plupart du temps, ce sera de la symétrie. Les 10 % restants seront chaotiques, car nous modifions la valeur va et nous ne ramenons pas à sa plage d'origine. Les lignes cessent de former des spirales comme elles le devraient. Au fur et à mesure que les lignes sont réinitialisées, nous devons également être réinitialisés et avoir une valeur va. Je copie la ligne 48 et je la colle ici dans la méthode de réinitialisation. Agréable. Nous avons commencé par la symétrie et nous avons fini dans le chaos. Exactement comme moi un samedi soir. Nous calculons constamment la durée de vie de 0,9, car ce calcul se produit si souvent pour faciliter exécution de ce code par JavaScript et améliorer légèrement les performances . Nous pouvons le précalculer une seule fois dans le constructeur de classe, et nous utiliserons ensuite cette valeur pré-calculée ici. Je vais l'appeler, par exemple ce point d'arrêt et ce sera la durée de vie multipliée par 0,85. Ensuite, je peux utiliser ce point d'arrêt ici. Et au lieu de le calculer 60 fois par seconde pour chaque objet linéaire, nous le calculons maintenant une fois pour chaque ligne au point où chaque objet linéaire est créé à l'aide du constructeur de classe. J'élargis les lignes. J'ai dit fond de toile noir. Oui, c'est l' effet que je recherchais. Je commente le style des traits à la ligne 54. Maintenant, le trait est noir , donc on ne voit rien. Je peux lui donner de la couleur blanche. Nous pouvons maintenant voir à nouveau comment les ombres lui confèrent un effet 3D très subtil. J'ai dit nombre de lignes, 250. Fais attention ici. C'est peut-être trop pour les ordinateurs plus anciens et vous pourriez obtenir moins d'images par seconde. J'en fais 100, je suis juste en train d'expérimenter maintenant. Je peux définir le style de trait sur un dégradé linéaire que nous avons défini à la ligne 15, juste pour voir à quoi cela ressemble. Et si j'utilisais un dégradé radial ? Pour celui-ci, je dois absolument choisir différentes couleurs pour le rendre joli. Je peux également réutiliser le modèle d'image ici. Intéressant. Avez-vous déjà vu cette excellente méthode de création de motifs être utilisée ou est-ce la première fois ? Vous disposez maintenant de tous les outils nécessaires pour créer de magnifiques champs de flux entièrement animés Consultez les liens contenus dans la description et rejoignez-moi dans un cours avancé où nous utilisons les techniques que nous avons apprises aujourd'hui pour créer des œuvres d'art plus génératives. 18. Qu'est-ce qu'un champ de flux: Voici une grille d'angles. Nous pouvons également l'appeler champ vectoriel si nous ajoutons un système de particules par-dessus et faisons circuler les particules sur la grille. Leur mouvement est influencé par le vecteur de champ. La direction et la vitesse du mouvement seront influencées par la valeur d'angle enregistrée dans la cellule sur laquelle chaque particule se déplace actuellement. Ce cours s'adresse aux personnes créatives qui souhaitent comprendre comment le code fonctionne sous le capot. N'oubliez pas de consulter la section des ressources pour télécharger le code source si vous souhaitez le comparer au mien. J'ai inclus plusieurs téléchargements de code source à des moments clés du projet au fur de la progression de la classe, au cas où vous voudriez inspecter mon code et le comparer au vôtre. J'ai créé une page Web générique avec un élément de toile HTML dessus. J'ai créé un lien vers les fichiers style.css et script.js. J'ai fait une réinitialisation CSS globale et j'ai donné à l'élément de toile un fond noir. 19. Configuration de la toile HTML: Après une simple configuration HTML et CSS, tout le reste du projet sera géré par JavaScript ici dans le fichier script.js. Comme toujours, je dois configurer ma variable personnalisée Canvas appelée cannabis will be document, obtenir l'élément par identifiant et l'identifiant que j'ai donné à Canvas One. Le contexte Ctx est ce point variable de canevas GetContext. Et je le passe au pour créer une instance d'objet contextuel de rendu de canevas. Désormais, le CTX contient toutes les méthodes et propriétés de dessin intégrées méthodes et propriétés de dessin que tout navigateur Web peut comprendre. Je veux que tu aies un effet plein écran aujourd'hui. Ainsi, la largeur sera la fenêtre d' une rave et la hauteur de la toile sera la fenêtre de sa hauteur. Je ne sais pas si vous pouvez le voir, mais cela a donné lieu à des barres de défilement de ma page Web. Je ne les veux pas. La solution la plus simple consiste à donner une position absolue à l'élément du canevas , comme ça, sympa. Toute cette zone noire est donc notre toile, notre planche à dessin. Je peux utiliser la variable ctx de l'outil de ligne pour dessiner quelque chose. Maintenant, si je console, nous pouvons voir les paramètres par défaut. exemple, je peux voir que le type de FillStyle par défaut est le noir pour m'assurer que les formes que nous dessinons sont visibles sur fond noir. J'ai dit FillStyle à White. 20. Dessiner des formes sur toile: Vous pouvez voir ici toutes les méthodes de dessin intégrées à Canvas, par exemple la méthode de l'arc, qui peut être utilisée pour créer un arc ou un cercle complet. Si nous avions plus de formes sur Canvas, je devrais appeler begin path. Mais maintenant je peux l'ignorer. Et disons que je veux un cercle avec un point central coordonnées 100 horizontalement à partir du bord gauche de Canvas, 100 verticalement à partir du bord supérieur. Le rayon du cercle sera de 50 pixels. L'angle de départ de l' arc sera de 0 rad. Et comme je veux dessiner un cercle complet, l'angle final sera math.pi multiplié par deux, soit environ 6,28 rad ou 360 degrés. boucle est complète. La méthode Arc fonctionne avec une trajectoire, sorte qu'elle n'a aucun effet direct sur le cannabis. Il a juste positionné un chemin invisible. Nous pouvons choisir de tracer ce tracé ou de remplir cette forme avec de la couleur. J'appelle donc une méthode de remplissage intégrée comme celle-ci. Je peux déplacer le point central du cercle. Je peux modifier le rayon. Je peux même modifier l'angle final ou l'angle de départ pour obtenir une forme différente. OK, notre Canvas est donc configuré et nous l'avons testé en dessinant une forme. Dans cette zone, je conserverai mes paramètres généraux de Canvas pour que notre code reste organisé. Aujourd'hui, nous construisons un champ de flux animé. Il sera composé de lignes individuelles. Alors, comment tracer une ligne simple sur Canvas ? Nous commençons par Colin, intégrée et méthode Begin Path. Cela marquera le début d'un nouveau chemin et masquera tous les chemins précédents. S'il y en a, nous appelons la méthode moved to pour définir les coordonnées x et y de départ de la ligne. Nous appelons une ligne à une méthode pour définir la fin en coordonnées. Ou nous pouvons enchaîner plusieurs lignes pour créer une forme plus complexe, ce que nous allons faire aujourd'hui. Identique à la méthode à l'arc. Passez à la fin de la ligne deux méthodes décrites ci-dessus. Ils n'affichent rien directement sur Canvas. Maintenant, nous devons choisir si nous voulons tracer le tracé ou si nous voulons remplir cette forme avec de la couleur, je vais appeler la méthode de trait intégrée pour dessiner le chemin. Le style de trait par défaut est le noir, il n'est donc pas visible sur fond noir. Je suis monté ici et j'ai dit « style de trait » à « blanc ». Nous pouvons maintenant voir que nous traçons une ligne à partir des coordonnées 100, 202, 400, 500. Par défaut, la largeur de la ligne est d'un pixel. Je peux utiliser la propriété de largeur de ligne pour la définir sur dix pixels ou 100. Je peux également utiliser l'écart de ligne et le régler pour qu'il soit arrondi, par exemple 21. Programmation orientée objet dans JavaScript: D'accord, voici comment nous dessinons et stylisons des lignes sur un canevas HTML. C'est tout ce que nous devons savoir pour créer une grande variété d'effets. Je voulais créer de nombreuses lignes animées qui circuleront sur notre toile. Je vais utiliser la classe JavaScript appelée particule. Comme ça. Chaque particule se déplacera et nous relierons ses positions par une ligne. Les classes Javascript sont des modèles permettant de créer de nombreux objets similaires. Et nous sommes sur le point de construire on appelle un système de particules composé de nombreuses particules. J'aurai également une classe appelée Effect. Cela aurait pu être un simple objet car nous n'aurons qu'une seule instance de cette classe. Ce sera le cerveau principal de notre base de code. Nous avons donc une classe de particules, un plan que nous utiliserons chaque fois que nous aurons besoin de créer un nouvel objet particulaire. Et nous aurons une classe d'affect qui gérera l'ensemble de l'effet, toutes les particules à la fois. J'utilise des classes et programmation orientée objet pour garder notre code propre, bien organisé et facile à lire. Il s'agit d'un tutoriel pour les débutants Je veux donc que tout soit nettoyé et aussi facile à comprendre que possible. C'est mon objectif principal. La classe concernée devra être au courant de l'espace disponible pour le cannabis. constructeur s' attend donc à ce que la largeur et la hauteur soient des arguments extérieurs. Lorsqu'une instance de cette classe est créée en utilisant le nouveau mot clé à l'intérieur, j'ai converti ces arguments en propriétés de classe. Prenez with pass comme argument ici et convertissez-le en propriété de largeur sur cette instance de la classe d' effet, de même pour la hauteur. La classe Affect aura une méthode initialisée. Cette méthode ne s'exécutera qu' une seule fois pour tout configurer. Nous aurons cette propriété de particules canines. Il s'agira d'un tableau contenant tous les objets particulaires actuellement actifs. Ainsi, lorsque nous initialisons cet effet, nous voulons utiliser ce réseau de particules de charge et utiliser méthode de poussée intégrée pour introduire une nouvelle particule dans le réseau. Cette particule sera créée en utilisant la classe que nous avons définie à la ligne 11. Écrivons donc cette classe de particules dès maintenant. Chaque particule devra également être consciente de la largeur et de la hauteur du canevas, car elle doit savoir quand elle se déplace en dehors de la zone de canevas pour notre code reste modulaire au lieu de la taille booléenne du canevas à partir des lignes 3.4 Je vais prendre cette valeur de la classe d'effets principale. Je voulais accéder à ces propriétés à partir des lignes 920. Je vais donner à la classe de particules l'accès à l'ensemble de la classe d' effets. constructeur de classe Particle s'attend à un effet en tant qu' argument et, à l'intérieur, nous le convertissons en propriété de classe. Nous pointons donc ici vers l'objet de l'effet principal. Gardez à l'esprit que les objets en JavaScript sont appelés pour référencer les types de données. Nous ne créons pas de copie de l'objet d'effet. Chaque fois que nous créons une nouvelle particule, nous pointons simplement vers le même espace de la mémoire qui contient la classe d'effet de tous les objets particulaires. De cette façon, les particules ont accès à toutes les méthodes et propriétés du verre à effet principal. De plus, si l'une de ces propriétés mise à jour parce que nous pointons simplement vers cet objet, toute modification apportée à l'objet à effet sera immédiatement visible depuis les objets particulaires, ce qui nous sera très utile aujourd'hui. Comme je l'ai déjà dit, nous aurons un seul objet d'effet pour tout gérer. Et nous aurons de nombreuses particules, des centaines, voire des milliers. Voyons comment ça se passe. Chaque particule aura des coordonnées x et y de départ. coordonnée horizontale x sera une valeur aléatoire comprise entre zéro et cet effet de point à partir de la largeur du point 13, nous accédons à cette propriété à partir de la ligne 20. coordonnée verticale y sera une valeur aléatoire comprise entre zéro et cette hauteur de point à effet de point. Pour éviter les valeurs inférieures à des pixels, il est conseillé d' utiliser des entiers, nombres entiers sans décimales , en les encapsulant dans Math.floor Cela arrondira la valeur à l'entier inférieur le plus proche. Chaque particule bénéficiera d' une méthode d'extraction publique. Cette méthode s'attend à ce que les contextes soient utilisés comme argument pour spécifier le type de nous sur lequel nous voulions nous appuyer. Je le transmets comme argument pour que notre code reste plus modulaire et moins dépendant de l'environnement extérieur. Ensuite, nous prenons ce contexte et nous appelons la méthode du rectangle de remplissage intégrée. La méthode de remplissage du rectangle est très simple. Il prendra simplement les coordonnées X et Y aléatoires que nous venons de définir, et il y dessinera un rectangle. Sa largeur et sa hauteur seront par exemple dix fois dix pixels. Nous avons notre classe de particules et nous avons notre classe d'affect. Je voulais créer une instance de classe d'effets. Je crée une variable personnalisée que j'appelle par exemple effet, et elle sera égale à un nouvel effet comme celui-ci. Le nouveau mot clé recherchera la classe portant ce nom. Il le trouve ici et déclenchera son constructeur de classe en ligne 23. Nous pouvons voir que l'effet attend la largeur et la hauteur comme arguments. Nous lui transmettons donc la largeur de la toile à partir de la troisième ligne. Et un peu à la hauteur de la ligne quatre, comme ça. Maintenant, je peux prendre cela pour affecter la variable et appeler la méthode init que nous avons définie à la ligne 28. La méthode Init prendra un réseau de particules et insérera un nouvel objet particulaire dans le tableau. Nous obtenons une erreur car ici, à la ligne 12, vous pouvez voir que le constructeur de la classe de particules attend une référence à la classe d' effets principale comme argument, puis utilise cette référence pour accéder aux propriétés de largeur et de hauteur de Canvas. Puisque nous créons cette particule à l'intérieur de la classe d'effets elle-même, je lui transmets ce mot clé qui, dans cette zone, fait référence à l'ensemble de la classe d'effets. Agréable. Donc, après avoir créé une instance de verre à effet et après avoir appelé cette méthode d'initialisation, je pense que le réseau de particules de la ligne 26 contient un objet particulaire. J'enregistre le verre à effet sur la console pour vérifier. Je peux voir l'objet de l'effet. Il possède des propriétés de largeur et de hauteur. Et si j'ouvre ce réseau de particules, je peux voir qu'il y a un objet particulaire à l'intérieur. Je vérifie si toutes les propriétés ont des valeurs. Si je vois « indéfini » ou « non » quelque part, cela indiquerait un problème. Tout va bien ici. Maintenant, j'ai besoin d'un moyen de réellement dessiner mon effet sur Canvas. Je vais lui donner une autre méthode que j'appelle, par exemple rendu dans notre cycle sur tous les objets particulaires à l'intérieur d' un tableau de particules en utilisant un tableau pour chaque méthode. Pour l'instant, nous savons qu'il n'y a qu' un seul objet particulaire à l'intérieur. Pour chaque objet particulaire à l'intérieur d'un réseau de particules, j'appelle la méthode de retrait associée. Nous avons défini cette méthode de dessin à la ligne 17 et nous pouvons voir qu'elle attend le contexte comme argument. Je prends donc la méthode de rendu et je l'appelle nous avons besoin de ce contexte. Je prends donc le CTX de la deuxième ligne. Je le passe pour le rendu. Dans le rendu, il sera attendu en tant que contexte. Et nous transmettons cette référence contextuelle à la méthode draw, car nous savons qu'elle est attendue à la ligne 17. À partir de là, la méthode du rectangle de remplissage est appelée et notre particule est dessinée. Agréable. Je peux modifier la largeur et hauteur lorsque je rafraîchis la fenêtre du navigateur, les coordonnées x et y des lignes 14.15 sont aléatoires et les particules sont dessinées. 22. Dessiner les systèmes de particules: La classe d'effet principale que je crée est une propriété que j'appelle le nombre de particules. La méthode initialisée s'exécutera, elle veut juste configurer notre effet à l'intérieur. Je vais créer ces 50 particules. Je peux le faire en utilisant une boucle for. Il fonctionnera 50 fois, et chaque fois qu'il fonctionnera, il utilisera un réseau de particules, et il enverra une nouvelle particule avec des coordonnées x et y aléatoires à l'intérieur. Et c'est ainsi que l'on crée un système de particules simple. Si vous le souhaitez, vous pouvez enregistrer ce code sous forme de plaque standard dans un autre dossier, car vous pouvez l'utiliser pour de nombreuses expériences, effets et œuvres d'art génératives différents . J'appelle la méthode init à partir d' ici lors du chargement de la première page. Je peux également supprimer ce code et l'appeler this.in depuis le constructeur de la classe d' effets. Parce que lorsque nous créons une instance d'une classe à l'aide du nouveau constructeur de mots clés, tout le code du plan est exécuté ligne par ligne. Nous pouvons tirer parti de ce comportement en insérant ici le code que nous voulons exécuter au même moment où une instance de cette classe est créée. 23. Animer les systèmes de particules: Nous sommes en train de créer un champ de flux. Je veux que ces particules se déplacent et laissent des traces derrière elles. Animons cette vitesse X la vitesse horizontale en sera une. Les particules se déplaceront d'un pixel par image d'animation dans le sens positif. Sur l'axe horizontal des X, ils se déplaceront vers la droite. Rapidité. Y sera également d'un pixel par image. Une direction positive sur l'axe vertical Y signifie vers le bas. Comme ces deux forces seront appliquées à la particule en même temps, je m'attendais à ce que les particules se déplacent vers le coin inférieur droit de Canvas. Voyons voir. Le mouvement sera géré dans la méthode de mise à jour. Cette méthode définira une étape unique dans l'animation. Et lorsque nous appelons cette méthode de mise à jour 62 fois par seconde, cela crée une illusion de mouvement. Pour chaque image d'animation, je souhaite augmenter la position horizontale x de cette particule à partir de la ligne 14 par la valeur de la vitesse x à partir de la ligne 16. Je souhaite également augmenter la position verticale en fonction de la vitesse. Pourquoi ? Ici, dans le rendu, lorsque nous parcourons toutes les particules, nous déclenchons la méthode de dessin et nous appelons également la méthode de mise à jour que nous venons d'écrire. Cela s'appelle, veut juste pour qu'il n'y ait pas de mouvement. Et il doit appeler cette méthode de rendu encore et encore. Je voulais dessiner des particules, mettre à jour leurs positions, les dessiner à nouveau à ces positions mises à jour, les mettre à jour à nouveau, les dessiner à nouveau, etc. En répétant cela encore et encore, nous allons créer de l'animation, une illusion de mouvement. Nous avons besoin d'une boucle d'animation. Je crée une fonction personnalisée que j'appelle, par exemple animer depuis notre rendu d'appel pour dessiner et mettre à jour toutes les particules. Ensuite, j'appelle Request Animation Frame et méthode intégrés. Je le passe, j'anime le nom de sa fonction mère. Ainsi, Animate s'exécute, le rendu s' appelle les particules, sont dessinées et mises à jour, puis le cadre d'animation et la méthode appellent animate. Encore une fois, nous avons une méthode de trame d'animation par requête en boucle conçue à cet effet, et elle possède des fonctionnalités spéciales telles que tout cela permet de générer les horodatages pour nous. Et il s'adapte également au taux de rafraîchissement de l'écran. J'ai un écran normal, donc mes animations s'exécutent à 60 images par seconde. Si vous avez un jeu et un écran à taux de rafraîchissement élevé, vos animations s'exécuteront plus rapidement. Vous pouvez facilement utiliser le cadre d'animation de demande et horodatage généré automatiquement pour définir la vitesse d'animation souhaitée. Maintenant, tout est prêt et je peux lancer animation de toutes les particules attendues pour qu'elles se déplacent d'un pixel vers la droite et d'un pixel vers le bas dans l'image d'animation. Ils laissent des traces parce que nous pouvons voir la vieille peinture, leurs positions antérieures. Si je voulais voir uniquement l'image d'animation actuelle, je dois supprimer Canvas entre chaque image en utilisant la méthode du rectangle clair. Je souhaite effacer l'ensemble de la toile, des coordonnées zéro à zéro à la largeur et à la hauteur de la toile. Agréable. Nous sommes en train d'animer. Je change de vitesse. La relation entre la vitesse x et la vitesse. Pourquoi ? Nous allons définir la direction et la vitesse du mouvement. Nous pouvons également attribuer aléatoirement la vitesse de chaque particule. Que diriez-vous d'une valeur aléatoire comprise entre -2,5 et plus 2,5 moins une valeur déplacée vers la gauche, plus des valeurs vers la droite. Sur l'axe vertical, les valeurs négatives déplaceront les particules vers le haut. Les valeurs positives déplaceront les particules vers le bas. Le rapport entre la vitesse aléatoire x et la vitesse. Pourquoi déterminera la direction finale du mouvement ? Et maintenant, les particules se déplacent dans toutes les directions possibles. Je peux réduire la taille des particules. 24. Dessiner des lignes et des chemins: En fait, je veux tracer des lignes. J'appelle la méthode Big Bath pour indiquer à JavaScript que je voulais commencer un nouveau chemin. Au fur et à mesure que la particule se déplace sur Canvas pour chaque image d'animation, ses positions x et y sont mises à jour. Et je garderai une trace de ces positions sous forme simples objets avec des propriétés x et y dans le tableau d'historique. Dans un premier temps, chaque particule se verra attribuer une position x et y aléatoire quelque part dans la zone du canevas. Et nous utilisons ces valeurs comme premier objet, le premier élément avec un indice de zéro dans le tableau d'historique. Le point de départ de la ligne sera enregistré par la méthode move to. Nous voulons partir des coordonnées x et y du premier objet à l'intérieur de l' objet du tableau historique avec un indice de zéro. Ensuite, nous créons une boucle for. Il fonctionnera tant qu'il y d' autres éléments dans le tableau d'historique. Pour chaque objet, tous ces objets ressemblent à ceci. Pour chaque objet de position dans le tableau historique, nous allons prendre les coordonnées x et y d'un objet à cet index. Au fur et à mesure que les quatre boucles parcourent le réseau, nous transmettons ses coordonnées x et y aux méthodes de la ligne 2. Donc point de départ de la ligne. Ensuite, nous parcourons toutes les positions tableau historique et nous les relions par une ligne. Ensuite, nous traçons ce chemin pour le dessiner sur Canvas. Je dois maintenant m'assurer que les positions sont ajoutées au tableau historique au fur et à mesure que la particule se déplace. Chaque fois que nous mettons à jour la position des particules, nous prenons ce tableau d'historique de points et nous poussons un objet comme celui-ci avec ces valeurs x et y mises à jour à l'intérieur. Bien, on dirait que ce n'est qu'une ligne droite, mais c'est en fait une forme composée de nombreux segments de ligne plus petits. Je peux par exemple le faire bouger en ajoutant une valeur aléatoire comprise entre -1,5 et plus 1,5. Cela devrait permettre de mieux comprendre visuellement que ces lignes sont constituées de segments. Je peux faire la même chose verticalement. Je peux augmenter la plage aléatoire de -2,5 à plus 2,5. Je peux encore augmenter la portée. Une valeur aléatoire comprise entre -7,5 et plus 7,5. Enfin, cela commence à paraître intéressant. Hein ? Maintenant. Elles ne font que croître en lignes à l' infini. Et si je souhaite définir la longueur maximale d'une ligne ? Dans ce cas, cela signifie un nombre maximum de segments. Dans la méthode de mise à jour. Je dis que si la longueur du tableau historique est supérieure à la longueur maximale, appelez la méthode intégrée de décalage du tableau. Nous avons donc ici deux méthodes matricielles. La méthode Push ajoute un nouvel élément à la fin d'un tableau. La méthode Shift supprime un élément depuis le début. Parce que nous ajoutons de nouveaux éléments à la fin du tableau. La méthode Shift supprime le segment le plus ancien. Les compagnies aériennes se baladent donc comme ça. Ils peuvent ressembler à de petites créatures au microscope. Je pourrais juste leur donner un peu d' IA et en faire un jeu. Je peux augmenter la longueur maximale de la ligne à 100 segments. Ou je peux faire une valeur aléatoire de 10 à 110. Maintenant, certains d'entre eux ont une queue courte et d'autres une queue très longue. 25. Motifs de mouvement avec trigonométrie: Je peux également appliquer la trigonométrie, selon laquelle la particule aura une propriété inclinée qui débutera initialement à zéro. Pour chaque image d'animation, j'augmenterai l'angle d'une petite valeur. La valeur de l'angle est exprimée en radians. Ensuite, je peux transmettre cet angle toujours croissant au signe de Martha, qui cartographiera automatiquement ces valeurs le long d'une onde sinusoïdale. Cela donnera à la coordonnée horizontale une émotion ondulatoire irrégulière. Regardez ce qui se passe lorsque je fais cela également pour la position verticale. Au lieu d'ajouter ici, j'essaie de multiplier. Je le fais à la fois pour une combinaison de sinus et de cosinus. Nous allons cartographier les positions le long du rayon d'un cercle, multipliant par une valeur comme celle-ci pour augmenter le rayon. Vous pouvez essayer d'utiliser différentes combinaisons de valeurs et appliquer différentes opérations. Si vous souhaitez expérimenter, de nombreuses choses peuvent être faites ici. En gros, nous avons construit un système de particules dans lequel chaque particule trace une ligne derrière elle. Je commente une ligne 69 pendant un moment. 26. Créer un champ vectoriel: Mon objectif est maintenant de faire en sorte que ces lignes parcourent la toile suivant un ordre précis afin de créer un effet de champ de flux. Le champ de flux est basé sur une grille d'angles. Chaque cellule de la grille stocke une valeur d'angle. Et chaque cellule de cette grille dans le champ de flux a une relation avec les cellules voisines. Ils ne sont pas aléatoires. Ils augmentent ou diminuent progressivement. Et lorsque la particule se déplace sur la grille, cellule par cellule, vitesse et la direction du mouvement des particules sont influencées par ces valeurs d'angle, créant ainsi un motif de mouvement. algorithme très courant pour générer des valeurs d' angle pour un champ de flux est le bruit de Perlin. Il crée un bruit de gradient qui modifie progressivement les valeurs de manière aléatoire. L'effet obtenu est très naturel et peut être utilisé pour générer des textures pour de la sérine générée de manière procédurale ou pour bien d'autres choses. Aujourd'hui, nous allons générer un champ de flux en spirale dans lequel nous utilisons des valeurs de sinus et de cosinus et nous les attachons aux coordonnées verticales et horizontales de chaque point de chaque cellule. Cela crée un beau motif répétitif symétrique. Nous pourrons zoomer et dézoomer sur le motif pour des résultats très différents. Allons-y étape par étape et ce dont je parle deviendra clair au fur et à mesure que nous le construirons. Notre objectif est maintenant de créer une grille qui divise l'ensemble du canevas en cellules individuelles. Disons que je veux vendre la taille chaque cellule à 20 fois 20 pixels. Cela divisera le canevas en lignes et en colonnes. Le nombre de lignes et de colonnes dépendra de la largeur et de la hauteur du Canvas et de cette taille de cellule. Je pourrais calculer le nombre de lignes et de colonnes ici. Mais comme je veux que cet effet soit réactif, je vais calculer cette méthode d'initialisation interne. Nous pouvons ensuite appeler cette méthode d'initialisation chaque fois qu'un événement de redimensionnement se produit pour recalculer correctement l'ensemble de la grille de champs de flux. Ce champ de flux de charge sera un tableau contenant les valeurs d' angle pour les cellules individuelles de la grille. Le nombre de lignes sera la hauteur de la zone de toile divisée par la taille de la cellule. Le nombre de colonnes sera divisé par vagues par la taille des cellules. Nous définirons également le champ de flux sur un tableau vide au cas où cette méthode d'initialisation serait appelée lors du redimensionnement de Canvas. De cette façon, toutes les anciennes valeurs seront supprimées et nous pourrons recalculer les nouvelles valeurs. Maintenant, je veux parcourir cette grille chaque fois que cela implique un défi. La façon la plus simple de la gérer est d'utiliser deux boucles imbriquées, la boucle extérieure, le cycle sur la grille, ligne par ligne à partir de la ligne zéro, tant qu'il y a encore des lignes. La boucle intérieure parcourra chaque rangée de gauche à droite. Nous entrons donc dans la boucle extérieure, nous sommes sur la ligne zéro. Nous entrons dans la boucle intérieure et nous parcourons les cellules de cette rangée une par une. Nous atteignons la fin, nous sortons de la boucle intérieure. Nous entrons dans la boucle extérieure, Y augmente et nous entrons dans la ligne suivante. Encore une fois. Nous avons parcouru toutes les positions de cette rangée une par une. Nous répétons ce processus ligne par ligne jusqu'à ce que nous couvrons tout le canevas. Chaque fois que nous entrons dans une nouvelle cellule, nous créons une valeur d'angle. Nous pouvons faire différentes choses ici. Je vais simplement lier les coordonnées x et y au sinus et au cosinus pour créer un motif en spirale. Nous savons que si nous transmettons une augmentation de la valeur de l'angle au sinus ou au cosinus, ces méthodes cartographieront cette augmentation des valeurs le long d'une onde. Dans ce cas, ces valeurs croissantes correspondent positions x et y des cellules de la grille. Ainsi, lorsque nous nous déplaçons le long de la grille, nous créons des spirales et des courbes. Chaque fois que nous générons une nouvelle valeur d'angle, nous l'introduisons dans un tableau de champs de flux. Gardez à l'esprit que nous effectuons des cycles, intégrons ligne par ligne, pour générer ces valeurs, mais que nous les stockons dans un tableau sous la forme d'une seule séquence continue de valeurs. Nous devons garder cela à l'esprit lorsque nous devons extraire à nouveau ces valeurs d'angle, afin de les faire correspondre correctement à position x et y actuelle des particules. Donc, à ce stade, le tableau de champs de flux doit être rempli de valeurs d'angle. Alors, enregistrons cela sur la console. En fait, je me connecte à la console après chaque ligne, j'aurais dû mettre le journal de la console ici une fois que tout sera terminé, mais peu importe. Nous pouvons voir que des valeurs d'angle sont générées. Parfait. Nous avons donc parcouru le canevas, intégré, et pour chaque cellule de cette grille, nous avons généré une valeur d'angle et nous avons commencé toutes ces valeurs d'angle dans un tableau de champs de flux. Parce que nous avons transmis cette augmentation progressive valeurs x et y au sinus et au cosinus, nous avons créé un magnifique motif symétrique. Le motif sera révélé lorsque nous dessinerons le champ de flux. Alors allons-y. Nous avons déjà des particules qui se déplacent sur Canvas et qui tracent des lignes derrière elles. Actuellement, nous utilisons cette logique pour les déplacer. Laissons tout cela de côté et changeons complètement ce code dans la méthode de mise à jour. Ici, je veux que particules se déplacent les particules se déplacent et que la direction de leur mouvement dépendra de la position de la particule lorsqu'elle se déplace sur différentes cellules du champ de flux. Les valeurs d'angle dans le champ de flux changent cellule par cellule. Et cet angle déterminera le mouvement de la particule qui circule actuellement au-dessus de cette cellule. Il existe de nombreuses façons de procéder. Je vais créer une variable x temporaire auxiliaire, sera égale à l'exposition actuelle des particules divisée par la taille des cellules. En gros, je dis combien de cellules notre grille à partir du bord gauche de Canvas se trouve actuellement cette particule, dans quelle colonne nous nous trouvons actuellement. N'oubliez pas que la taille de la cellule a été définie sur 20. Je veux des nombres entiers ici, donc je vais arrondir la valeur vers le bas. variable Y auxiliaire sera la position y actuelle des particules divisée par la taille de la cellule. Combien de cellules ? Du haut, nous sommes sur quelle rangée. Je peux maintenant utiliser ces valeurs pour mapper les coordonnées x et y d'une particule à un indice dans le tableau de champs de flux. En gros, j'ai une particule avec une certaine position x et y dans une grille bidimensionnelle. Et j'ai un tableau qui représente cette grille, mais c'est juste un long ensemble de nombres. Donc, ce que j'essaie de faire maintenant, c'est mapper cette position x et y cet indice afin de pouvoir extraire la valeur d'angle correcte. des nanoparticules de la grille Position verticale et horizontale actuelle des nanoparticules de la grille. Et je sais sur quelle colonne et ligne la grille des champs de flux il se déplace actuellement. Je dois maintenant utiliser cette valeur de colonne et de ligne pour obtenir la valeur d'angle de la cellule à partir du tableau de champs de flux. C'est un peu compliqué à visualiser si vous êtes débutant, alors ne vous inquiétez pas trop pour obtenir un indice de disposition à partir d'un tableau rempli de liquide Je prends le numéro de ligne que nous avons calculé ici, et je le multiplie par le nombre de colonnes qui calculent ce bloc. Les lignes, les termes, les cellules par ligne ont essentiellement besoin de savoir dans quelle cellule nous nous trouvons actuellement car nous avons ajouté une valeur d'angle par cellule dans le tableau de champs de flux. Ensuite, nous ajoutons le nombre de cellules que nous avons dans la ligne actuelle de la grille, comme suit. Cela nous donne un indice dans un tableau de champs de flux qui contient la valeur d'angle de la cellule sur laquelle nous sommes en train de nous déplacer. Ensuite, nous définissons la valeur d'angle de cette particule par rapport à l'indice contenu dans le réseau de champs de flux que nous venons de calculer. 27. Comment créer un champ de flux: Nous avons maintenant plusieurs options différentes pour l'utiliser pour obtenir différents modèles. Je vais d'abord régler la vitesse x deux cosinus de l'angle. La vitesse y sera le signe de la même valeur que celle que nous venons d' extraire en ligne 35. Ensuite, je prends la position horizontale du filtre à particules et je l'augmente de cette nouvelle valeur de vitesse. Et je fais de même pour la position verticale, en l'augmentant de la vitesse verticale. Je supprime ce code. Nous nous sommes donc divisés en une grille invisible. Chaque cellule mesure 20 fois 20 pixels et possède une valeur d' angle spécifique. Nous calculons sur quelle colonne et sur quelle ligne de cette grille la particule se déplace actuellement. Nous mappons cette valeur de colonne et de ligne à indexer dans un tableau de champs de flux pour extraire valeur d' angle qui appartient à la cellule dont nous avons besoin, nous augmentons la vitesse x par le cosinus de cette vitesse angulaire. Pourquoi par signe ? Cela nous donnera une direction du mouvement en fonction de cet angle. Ensuite, nous avons augmenté la position X et Y des particules. À ces vitesses. Nous insérons cette nouvelle position des particules dans matrices historiques afin de pouvoir animer leur queue, la ligne que chaque particule agit seule. Si la longueur de la ligne est supérieure à la longueur maximale, nous supprimons le segment le plus ancien. Je fais un rendu non commenté pour voir quel mouvement nous obtenons. Cela n'en a pas l'air, mais nous avons déjà un champ de flux de travail avec un motif en spirale sinusoïdale et cosinusoïdale. Nous sommes juste zoomés très loin de là. Cela aura plus de sens si nous jouons avec le code maintenant. L'idée de base est donc qu'en analysant une valeur d'angle toujours croissante par rapport au sinus et au cosinus, nous ferons en sorte que les valeurs oscillent périodiquement entre moins un et plus un. Nous utilisons les positions X et Y de chaque particule lorsque celles-ci augmentent en valeurs d'angle. Le motif sera donc lié aux coordonnées de cette manière. Je le ferme entre parenthèses et je le multiplie par deux. Cela augmentera le rayon de la courbe. J'enlève le rectangle. Je voulais juste des lignes. Je fais en sorte que la longueur maximale de la ligne soit une valeur aléatoire, 10 à 210 segments. Je peux utiliser différentes valeurs ici. Augmentons le nombre de particules afin de mieux voir le schéma. Regardez ce qui se passe si j' augmente lentement cette valeur, 0,5. Je peux aller bien plus haut que ça. Environ dix heures, je crois. Mettons cette valeur dans une variable, dans une propriété de classe. C'est ce que j'appelle la courbe en pointillés. Je vais vous montrer pourquoi je l'appelle courbe dans une minute. Ce sera clair. J'utilise cette propriété ici. D'accord ? Je peux également multiplier x et y par une valeur. Si les valeurs sont identiques, nous obtiendrons un zoom symétrique sur ce modèle. Ce n'est pas encore tout à fait évident, mais une tendance claire en découlera. Soyez indulgent avec moi. Je veux que ces valeurs soient identiques pour des raisons de symétrie, et je les mettrai dans une propriété de classe. Je l'appelle Zoom. C'est ce que j'ai dit : le zoom au point zéro. Pour garder à l'esprit que courbe, le zoom est également lié à la taille des cellules, car la façon dont nous avons lié les courbes sinusoïdale et cosinusoïdale à une position dans laquelle une modification importante taille de la cellule affectera le modèle. Cela affectera le zoom. Je pense qu'à ce stade, nous pouvons déjà appeler cela un champ de flux. Augmentez lentement le zoom pour voir comment cette valeur affecte le motif. Je peux vraiment entrer dans le schéma, zoomer de près et, lentement, dézoomer dessus. Toujours. Je ne pense pas que le schéma soit évident. Passons au constructeur de classes de particules. Je peux supprimer ces valeurs initiales de vitesse x et de vitesse. Pourquoi ? Parce qu' ils sont immédiatement remplacés ici dans la méthode de mise à jour. Je veux que chaque ligne se déplace à une vitesse différente. Je vais donc attribuer à chaque particule une propriété de modificateur de vitesse, et ce sera un entier aléatoire de 1 à 3. Ici, je multiplie la vitesse x et la vitesse. Pourquoi utiliser ce modificateur de vitesse. Maintenant, certaines lignes se déplacent plus ou moins vite. Augmentons la vitesse. Modifiez l'arrangement. Pour vous montrer clairement comment courbe et le zoom influent sur le motif. Nous avons besoin que les lignes soient réinitialisées lorsqu'elles terminent leur séquence d'animation. Je crée une méthode que j'appelle, par exemple réinitialiser. Lors de la réinitialisation, j'ai indiqué que x et y se coordonnaient vers une nouvelle position aléatoire quelque part sur la toile. Et je dois également définir le tableau historique sur ces nouvelles valeurs comme position initiale avec un indice de zéro. heure actuelle, la plus grande liste infinie de mouvements se trouve loin de l'écran. Je vais créer une propriété que j'appellerai, par exemple timer. Ce sera la longueur maximale de la ligne multipliée par deux. Pour chaque animation, je réduirai le chronomètre d'une unité. Le chronomètre démarre avec une valeur égale à maxlength. Les termes utilisés sont réduits d'un pour chaque image d'animation. Tant que le chronomètre est supérieur ou égal à un, nous animerons la ligne et ferons ramper comme une poussière. Déjà. Lorsque le chronomètre atteint un, les lignes se figent comme ceci. À ce stade, nous voulons exécuter une instruction else qui commencera à supprimer un par un les anciens segments de chaque ligne, faisant ainsi disparaître la ligne à la fin. Pour ce faire, j'appelle shift on the history array. Cela nous donnera une erreur lorsque nous supprimerons tout du tableau d'historique, mais que nous essayons toujours de le dessiner. Je ne ferai donc que cette autre déclaration. Si le tableau d'historique contient plusieurs éléments, supprimez alors uniquement tous les segments de la ligne. Les lignes circulent. Lorsque le chronomètre atteint zéro, nous commençons à supprimer tous les segments jusqu'à ce qu'il n'en reste plus. Parfait. À ce stade, je souhaite que la ligne soit réinitialisée et ce cycle d'animation recommence. Sinon, appelez cette méthode de réinitialisation par points que nous venons de définir à la ligne 56. D'accord, cela ne fonctionne pas car je dois également remettre le chronomètre à sa valeur d'origine. Félicitations, vous avez créé un champ de flux. C'est une base de code très solide et nous pouvons faire tellement de choses avec elle. Il est enfin temps d'utiliser correctement Curve et le zoom pour vous montrer le motif dont je parlais. 28. Expériences sur le champ d'écoulement: Comme nous l'avons dit, le bruit de Berlin créera un aspect naturel dans le schéma de bruit dégradé. Nous calculons les valeurs d'angle pour notre champ de flux en ligne 85 à l'aide de la trigonométrie. Donc, même si cela n'en a pas l' air, il s' agit maintenant d'un schéma mathématique très symétrique qui se répète à l'infini dans toutes les directions. Laissez-moi vous montrer ce que je veux dire. Regardez ce qui se passe lorsque j' augmente la valeur de la courbe. J'aime beaucoup regarder cet effet. Il y a quelque chose de très détendu et je pense que vous pouvez maintenant constater un peu que nous avons un schéma qui se répète. Je change le zoom et je m'éloigne de celui-ci pour voir clairement la répétition. Je peux également zoomer de très près sur le motif et nous n'en regardons qu'une petite partie. On dirait que le flux est en fait aléatoire, mais nous savons que ce n'est pas le cas. Je vais augmenter le nombre de particules. Mon ordinateur peut gérer cela, mais vous devez ajuster le nombre de particules pour vous assurer que votre ordinateur puisse l' animer facilement afin ne pas avoir à utiliser 2 000 particules ici. Essayez différentes valeurs et voyez. Je ne recommande pas d' aller bien au-delà de 2000, sauf si vous avez un ordinateur très puissant. Les champs de flux ont un effet magnifique. Et maintenant tu sais comment en construire un toi-même. Nous jouons simplement avec les modèles de sinus et de cosinus ici, mais nous pouvons utiliser ce code pour modifier le flux et le faire suivre de nombreux modèles différents. Regardez ce qui se passe lorsque je modifie la courbe de valeur. Au fur et à mesure que la valeur augmente, un motif en spirale commence à apparaître. Ce genou va un peu plus haut. Il va commencer à se courber en spirale ici. Et à mesure que j'augmente la valeur, elle augmente de plus en plus. Cela créera en quelque sorte une forme d'escargot en spirale si nous montons assez haut. Maintenant, c'est de plus en plus évident. Et plus encore, la courbe s'enroule sur elle-même. Intéressant, n'est-ce pas ? Maintenant, je pense qu'il est très évident que la courbe affecte la forme en spirale du champ d'écoulement. Ce motif se répète à l' infini dans toutes les directions et nous pouvons zoomer et dézoomer en modifiant les valeurs que nous utilisons. Ce point zoome sur la ligne 75 Je peux zoomer de très près sur le motif. Et à mesure que j'augmente cette valeur, nous dézoomons lentement. À ce stade, nous pouvons constater la nature répétée de ce schéma. Comme nous l'avons supposé assez loin. Je vais encore plus loin. Je peux le faire tourner davantage en spirale. Vous voyez à quel point le motif est irrégulier et pas très lisse. Cela met en évidence la nature quadrillée du champ de flux, car l'angle ne change que tous les 20 pixels Je peux réduire la taille des cellules pour rendre le flux plus fluide. Et en gros, couper le cannabis en petits morceaux, cinq fois cinq pixels. Comme nous pouvons désormais insérer davantage de colonnes dans la zone de toile disponible, modification de la taille des cellules a également zoomer très loin du motif. Maintenant, nous pouvons clairement voir comment cela se répète sans cesse. Ce n'est pas un hasard comme le bruit de Perlin. C'est très mathématique et symétrique. Je zoome un peu plus loin. Je pense que la façon dont cela fonctionne est claire. Maintenant, n'hésitez pas à jouer avec et à faire vos propres expériences. 29. Mode réseau et débogage: Les deux nœuds sont essentiellement une grille d'angles. Visualisons cette grille pour comprendre comment elle fonctionne exactement. Créons un mode de débogage sur la classe d'effets principale. Je crée une méthode que j' appelle, par exemple, dessiner une grille. Il s'attendra à des contextes comme argument dans la création d'une boucle for. Tout d'abord, dessinons des lignes verticales, des colonnes. Cette propriété d'appel de points contient déjà une valeur représentant le nombre de colonnes de la grille. Nous l'utilisons donc ici. Chaque fois que nous entrons dans une nouvelle colonne, nous appelons begin path. Je voulais tracer une ligne verticale. Passez à la méthode pour définir les coordonnées x et y de départ de la ligne. Chaque ligne débutera à une position horizontale dynamique, taille de la cellule, à la largeur d' une seule cellule multipliée par le numéro de la colonne dans laquelle nous nous trouvons actuellement. Toutes les lignes verticales commenceront en haut à partir de la coordonnée y zéro. deuxième ligne déterminera les coordonnées x et y de fin de nos lignes de quadrillage. position horizontale sera à nouveau taille de la cellule multipliée par le numéro de colonne. Et je veux que les lignes se terminent tout en bas de la zone de toile. Donc cette hauteur de point. Ensuite, nous avons tracé des lignes. Voyons ce que nous avons obtenu jusqu'à présent grâce à la méthode de dessin de la grille de Colin à partir de la méthode de rendu. Agréable. Nous voyons des lignes verticales représentant des colonnes dans notre champ de flux. La taille des cellules n'est que de cinq, donc nous voyons une ligne tous les cinq pixels, je la change en 30. Comme vous pouvez le constater, cela a également affecté le zoom sur le motif. mesure que la taille des cellules augmente, nous pouvons placer moins de cellules par rangée, ce qui signifie que les spirales créées par le sinus et cosinus en ligne 85 ont moins de temps pour se développer. Tout cela est dû au fait que nous réduisons la valeur de l'angle, nous passons au sinus et au cosinus aux numéros de colonne et de ligne, moins de colonnes, à une plage inférieure de valeurs transmises sous forme d'angle par rapport au sinus et de cosinus en ligne 85, ce qui affecte le schéma. Je peux toujours compenser cela en ajustant cette propriété de zoom sur la ligne 75. D'accord, nous dessinons des lignes verticales. Tracons également des lignes horizontales, les rangées, pour compléter notre grille. Encore une fois, nous commençons par commencer le chemin. Les coordonnées x et y de chaque ligne horizontale seront nulles horizontalement. Ainsi, à partir du bord gauche de Canvas et verticalement ce sera la taille de la cellule multipliée par le numéro de ligne. Le point final de chaque ligne sera le bord droit du Canvas. Ainsi, cette extrémité horizontale et verticale du point sera à nouveau taille de la cellule multipliée par le numéro de ligne. Je trace les lignes. Parfait. Nous pouvons maintenant voir la grille complète. Regardez attentivement les lignes. Voyez-vous comment la valeur de l'angle la direction de la ligne changent aux points lorsque les lignes entrent dans de nouvelles cellules de la grille est attribuée à chaque cellule du champ de flux valeur d'angle différente est attribuée à chaque cellule du champ de flux, et les lignes suivent ces angles pour leur indiquer la direction du mouvement. Ce visuel devrait vous aider à comprendre comment fonctionnent plutôt les champs de flux. Et si vous codez en même temps, vous pouvez l'inspecter de près sur votre ordinateur et voir vraiment ce qui se passe. Modifiez la valeur de la taille des cellules, deux, voire un nombre plus grand, et le mystère de la création de champs de flux devrait être résolu. Je voulais affiner les lignes de la grille, mais je ne veux pas que cette modification affecte la largeur des lignes fluides. Pour cette raison, je vais encapsuler tout ce bloc de code entre la sauvegarde et la restauration. Ces deux méthodes Canvas intégrées garantissent que toute modification apportée à un état restera limitée à une zone spécifique. Ces modifications peuvent inclure tout type de paramètres tels que le style de remplissage, le style de trait, la largeur de ligne, opacité, l'alpha global, ainsi que éléments tels que la rotation et la mise à l'échelle, que nous n'utilisons pas aujourd'hui. Si vous voulez savoir comment utiliser la rotation et la mise à l'échelle, vous pouvez consulter mon cours sur le fructose. Si je règle le style de trait pour écrire, cela n'affectera que le grade, pas les lignes fluides, ni le système de particules. La méthode de sauvegarde crée un point de sécurité, comme dans un jeu vidéo, nous pouvons y apporter toutes les modifications souhaitées, par exemple largeur de ligne, seulement 0,3 pixel. Ces modifications affecteront ce code de dessin, puis le restaureront. Nous allons réinitialiser toutes les modifications apportées ici au point où elles étaient lorsque nous les avons qualifiées de sûres. ce fait, lorsque nous tracerons ultérieurement les lignes fluides, le système de particules utilisant méthode de dessin sur la classe de particules, elles ne seront pas du tout affectées par ce style de trait et cette largeur de ligne. Je voulais conserver la grille dans notre projet, mais je voulais un moyen pour l'utilisateur de masquer et de l' afficher facilement. Je crée une propriété en mode de débogage appelée ce point d back qui sera initialement définie sur true, comme nous l'avons fait avec Colin ici. Lorsque la classe d'effet est instanciée, tout le code du constructeur s'exécute. Je peux en fait mettre n'importe quel code ici, même un écouteur d'événements Lorsque nous créons une instance de classe d' effets en utilisant le nouveau mot clé, à ce moment-là, je veux un écouteur d'événements pour l'événement key down soit appliqué. Je dois m'assurer que j'ai toujours accès aux propriétés du constructeur de classe, particulier à cette propriété de débogage depuis cet écouteur d' événements. Si vous utilisez une fonction de rappel normale, vous devrez la lier. Alternativement, je peux utiliser la fonction de flèche ES6. Ces fonctions héritent automatiquement du skewered de leur scope parent. Ainsi, même lorsque cet écouteur d'événements s'exécutera plus tard, il pourra toujours se souvenir qu'il a été initialement défini ici, et il pourra contrôler cette propriété de débogage par points pour nous. Si vous utilisez une fonction de rappel normale ici, vous obtiendrez une erreur car ce mot clé deviendra indéfini. Lorsqu'un événement de fermeture de clé se produit, nous enregistrons cet objet d'événement généré automatiquement sur la console. J'ai décidé de l'appeler par un nom variable E, mais vous pouvez l'appeler comme vous voulez. Si j'ouvre cet objet d'événement ici, je peux voir qu'il contient une propriété clé qui nous indique sur quelle touche a été pressée. C'est exactement ce dont j'ai besoin. Si le point E est un opérateur de comparaison triple égal à D, définissez-le pour déboguer la valeur opposée. S'il est actuellement faux, définissez-le sur vrai. Si c'est actuellement vrai, définissez-le sur faux. Il s'agit d'une ligne de code très utile qui nous permet de basculer facilement entre vrai et faux. Je veux seulement que ce code s' exécute si le mode de débogage est vrai, je voulais seulement voir ce champ de flux dégrader lorsque le mode de débogage est actif. Maintenant, si vous cliquez sur Canvas et appuyez encore et encore sur la lettre D de votre clavier, vous activez et désactivez le mode de débogage. Nous utiliserons à nouveau ce mode de débogage dans la classe avancée où je vous montrerai comment tracer des formes de lettres et des images. Maintenant que les cellules individuelles du champ de flux sont relativement grandes, nous pouvons clairement voir que les lignes se brisent et changent de direction aux limites de chaque cellule. Parce que chaque cellule contient une valeur d'angle différente, ce qui influence le mouvement de ces lignes. N'hésitez pas à jouer avec le code, donner une valeur différente à la taille de la cellule en ligne 70. Ensuite, vous pouvez ajuster ce changement ajustant ce Zoom en ligne 75, vous pouvez trouver des combinaisons intéressantes. Comme ici, où j'ai un motif assez intéressant qui est clairement affecté par le fait que les cellules individuelles du champ de flux mesurent 50 fois 50 pixels. Je vais progressivement augmenter la courbe, la spirale intérieure de notre champ d'écoulement sinusoïdal. La beauté des mathématiques. Saviez-vous que vous pouviez créer de l'art avec des mathématiques comme celles-ci ? 30. Couleurs aléatoires: J'ouvre une autre fenêtre de navigateur et je vais utiliser Google Color Picker. Je cherche quelque chose comme ça où je peux cliquer où je veux et cela me donnera cette valeur de couleur. Vous pouvez choisir la gamme de couleurs de votre choix. Je prends cette couleur en copiant sa valeur hexadécimale. Je l'attribue à cette propriété de couleur de point sur la classe de particules. Dans la méthode de dessin sur la classe de particules, j'ai indiqué le style du trait à cette couleur de point. Si l'ensemble du champ de flux était d'une seule couleur, comme celle-ci, cela ne sert à rien de répéter le style de trait Colin. Je le déclarerais quelque part, donc il ne s'exécute qu'une seule fois lors du premier chargement de page pour améliorer les performances. Mais ici, j'essaie de donner à nos particules une gamme de couleurs aléatoire. Je crée un tableau, j'appelle cela des couleurs à points. J'ai mis cette valeur dedans comme ça. Je retourne à mon sélecteur de couleurs. Je suis parti d'une couleur foncée, donc je vais un peu plus clair dans cette direction, par exemple et encore une fois, je copie cette valeur hexadécimale. J'ai également mis cette couleur similaire mais plus claire dans le tableau. Cette couleur de point sera une couleur choisie au hasard dans ce tableau de couleurs de points. Je peux y accéder via leurs index. Cet indice de couleur de point zéro est celui-ci. Le premier indice de couleur de ce nœud est celui-ci. Prenons une autre couleur et ajoutons-la au tableau. Je choisis une autre couleur , encore plus claire. J'en choisis un de plus. Cette fois, ce sera très léger. Vous pouvez choisir autant de couleurs que vous le souhaitez. Peu importe le nombre de couleurs que vous ajoutez à ce tableau. Je veux que chaque particule se voie attribuer au hasard un indice de ce tableau. Comment puis-je m'y prendre ? Bien sûr, en utilisant Math.random entre zéro et la longueur de ce tableau de couleurs à points. Cependant, Math.random, cela nous donne des valeurs à virgule flottante. n'y a pas d'index 1.5 dans ce tableau, j'ai donc besoin d'entiers. J'intègre tout cela dans Math.floor. Et c'est ainsi que vous pouvez attribuer de manière aléatoire une valeur parmi un tableau de valeurs disponibles à chaque objet créé par une classe. Vous pouvez voir qu'une valeur aléatoire est attribuée à chaque ligne, et notre effet semble plus intéressant. N'hésitez pas à revenir au sélecteur de couleurs et à choisir votre propre gamme de couleurs. Il serait probablement intéressant de créer des curseurs pour ce zoom par points afin que les utilisateurs puissent le contrôler facilement. Vous pouvez finalement le faire comme un défi si vous le souhaitez. 31. Conception réactive: Si je redimensionne la fenêtre du navigateur, comme pour tout projet Canvas, l'élément du canevas ne sera pas redimensionné automatiquement. De la même manière, nous appliquons EventListener pour l'événement Keydown ici dans le constructeur de classes d' effets secondaires. Je peux également créer un écouteur d'événements Windows redimensionné. Nous sommes à l'intérieur d'une classe, donc je ne veux pas tirer largeur et la hauteur de l'extérieur. Nous allons donc enregistrer cet objet d'événement généré automatiquement sur la console. Je supprime ce journal de console. Et je supprime également celui-ci. Nous sommes donc un objet d'événement de connexion à la console qui a été généré automatiquement lorsque nous avons redimensionné la fenêtre du navigateur et que nous avons déclenché l'écouteur d' événements de redimensionnement. À l'intérieur, je peux voir la cible de l'événement, en l'occurrence l'objet de la fenêtre du navigateur. Et à l'intérieur, nous pouvons voir la nouvelle mise à jour en hauteur et en largeur. Nous allons donc simplement utiliser ces valeurs. La console enregistre la largeur intérieure du point cible et la hauteur intérieure du point cible E. Maintenant, je peux redimensionner la fenêtre du navigateur et voir la nouvelle largeur et la nouvelle hauteur. Parfait. Ainsi, lorsque nous avons redimensionné, je voulais définir la largeur et la hauteur de l'effet en fonction de ces valeurs. Le problème est que nous devons également redimensionner l'élément de toile lui-même. Et encore une fois, je devrais sortir de ma classe pour le récupérer. Je voulais que mes cours restent modulaires. J'ai besoin d'une référence à l'élément canvas dans ma classe. Si je refactorise cet effet de code, je n' attendrai que Canvas comme argument à l'intérieur, nous le convertissons en propriété de classe. Et à partir de cette toile à points, nous pouvons maintenant prendre la largeur et la hauteur comme ceci. J'ai 69 ans, ça nous donne maintenant accès à l'élément canvas lui-même. Je ferme la console. Je dois prendre cette variable de canevas de la première ligne, et je dois la transmettre au constructeur de classe d' effet au moment où nous créons une instance de classe d' effet en utilisant le nouveau mot clé ici à la ligne 135. À l'intérieur, il est converti en cette propriété Canvas à points. Et de leur largeur et de leur hauteur sont extraites. Alors maintenant, lorsque l'événement de redimensionnement se déclenche, j'appellerai cette méthode de redimensionnement par points, que nous écrirons. Suivant. Je lui passe la nouvelle largeur et la nouvelle hauteur du redimensionnement de la fenêtre du navigateur. Nous obtenons ces valeurs à partir de cet objet d' événement généré automatiquement. Je vais écrire cette méthode ici. À l'intérieur de la classe d'effets. Nous savons qu'il attend les nouvelles largeur et hauteur redimensionnées comme arguments. Nous avons une référence à l' élément de toile réel ici, à la ligne 69. Donc je le prends, et je prends aussi la largeur et la hauteur. Je copie ces trois lignes et je les colle ici. Lorsque nous redimensionnons la fenêtre du navigateur, nous obtenons une nouvelle largeur et une nouvelle hauteur. Nous définissons la largeur de l' élément de toile à la nouvelle largeur. Nous avons indiqué la hauteur de l' élément de toile à la nouvelle hauteur. Nous définissons ensuite les propriétés de largeur et de hauteur de l'effet en fonction de ces nouvelles valeurs mises à jour. Si je redimensionne la fenêtre du navigateur, cela semble intéressant, mais je ne suis pas sûr que nous ne gaspillons pas de mémoire comme ça. Si je reviens à une taille plus petite, les lignes devraient finalement revenir à la plus petite zone disponible. Et puis, lorsqu'ils auront plus d'espace, le motif devrait s'étendre à un espace plus grand. Encore une fois, je pense que la façon dont je préfère procéder est d'appeler la méthode init. Encore une fois, après le redimensionnement de la fenêtre. Ne fais pas ce que je fais maintenant. N'exécutez pas ce code car si j'appelle this.in à partir de la méthode de redimensionnement et que je redimensionne la fenêtre du navigateur. Il se passe quelque chose de très grave. Nous introduisons de plus en plus de particules dans ce réseau de particules ponctuelles, et l'effet ralentit considérablement. Si je passe à la méthode init, vous pouvez voir que chaque fois que la méthode init s'exécute, nous supprimons le tableau de champs de flux et nous le remplissons avec une nouvelle grille d'angles. Je dois faire de même avec les particules. Nous plaçons ces particules ponctuelles dans un tableau vide, supprimons une ancienne particule qui se trouve à l'intérieur et nous créons un nouvel ensemble de particules. En termes de performances, ce n'est pas la meilleure solution. Nous n'avons pas besoin de nouvelles particules. J'aurais pu simplement créer une méthode de réinitialisation pour chaque particule. Et j'aurais pu réinitialiser la position des particules ici plutôt que de toutes les supprimer et créer de nouvelles pour les remplacer. Nous pouvons également utiliser la technique de regroupement d'objets ici si nous avons besoin d' augmenter et de diminuer le nombre de particules en fonction la taille de la toile. Cela fonctionne maintenant car j'appelle cette méthode d'initialisation par points depuis l'intérieur du redimensionnement sur la ligne 126. Lorsque nous redimensionnons, nous supprimons l'ancien champ de flux, le dégradons et le remplaçons par un nouvel ensemble d' angles désormais ajustés à la nouvelle largeur et à la nouvelle hauteur du canevas. Et nous supprimons également toutes les particules. Et nous créons un nouvel ensemble avec des positions aléatoires réparties sur la nouvelle zone de toile disponible. Bien sûr, pour que cela fonctionne, nous devons nous assurer de l'appeler .in it à partir de la méthode de redimensionnement ici, je suppose que la plupart des utilisateurs ne seront pas redimensionnés je suppose que la plupart des utilisateurs ne seront pas et que la page ne sera pas redimensionnée encore et encore. La solution est donc parfaitement correcte. 32. Expérimenter les schémas de champ de flux: La forme du champ de flux est ce que j' appelle le sinus et le cosinus d'un motif de courbe en spirale, peu comme une torsion de langue pour les personnes ayant des connaissances linguistiques modérées. Je ne sais pas si cette forme a un nom officiel. Si c'est le cas, faites-le moi savoir, s'il vous plaît. C'est le modèle que vous obtenez lorsque vous utilisez l'augmentation des positions dans une grille bidimensionnelle sous forme valeurs d' angle transmises au sinus et au cosinus. Nous voyons la formule ici. Cette ligne de code qui détermine la forme du motif. Nous pouvons jouer avec elle de différentes manières et obtenir des résultats très différents. Regardez ce qui se passe si je remplace la multiplication par une addition ici. Ou qu'en serait-il si je le faisais ici ? Ou j'essaie ça ? Je règle le zoom. Intéressant. Je peux également ajuster la courbe. Vous pouvez simplement changer les opérateurs au hasard ici et vous tomberez peut-être sur quelque chose d'intéressant que je n'ai pas essayé. Encore une fois, c'est ainsi que je peux lentement dézoomer sur le motif. Je peux augmenter la courbe. Et en raison des modifications apportées à l'opérateur lors du calcul d'une grille angulaire, la direction de l'ensemble du motif change désormais . Ça a l'air sympa. Je pourrais peut-être utiliser cet effet comme arrière-plan spatial dans le prochain cours de développement de jeux. Je pourrais même le faire réagir à certains objets. Nous en apprendrons davantage à ce sujet dans la prochaine partie, où je vous montrerai comment faire circuler les lignes autour du texte. Étonnamment, faire moins d'égal à égal ici changera également la tendance. Cela deviendra plus évident lorsque je dézoomerai. Je pense que c'est parce que nous modifions le moment auquel les cellules de la grille se séparent pour former une nouvelle ligne. Si je reviens à la multiplication nous revenons au schéma en spirale habituel. Je suis juste en train de jouer avec ça maintenant. J'essaie de changer dans Zoom. Je change de courbe. Je peux également faire les deux signes ici. Ou je peux échanger le sinus et le cosinus. Je pense que la façon dont cela fonctionne est claire. Maintenant, n'hésitez pas à jouer avec et à faire vos propres expériences. 33. Dessiner du texte: Ici, sur le verre à effet principal, nous avons la méthode d'initialisation. Il se divise en une grille et crée des valeurs d'angle à l'aide de cette formule trigonométrique. Je voulais quand même d'abord me diviser en grille. Ensuite, au lieu de cet algorithme, je souhaite dessiner du texte sur Canvas et calculer les valeurs d'angle de la grille de champs vectoriels à partir de là. Dessinons d'abord ce texte. Pour plus de clarté, je vais mettre ce code dans une méthode distincte. Je vais appeler ça dessiner du texte. J'aurai besoin d'accéder à l'objet de contexte CTX à partir d' ici pour pouvoir installer les propriétés de Canvas à partir d'ici. Dans un premier temps, je vais simplement extraire variable CTX directement de la deuxième ligne. Nous allons refactoriser cela dans une minute. À partir de là, j'accède à la propriété de la police et je la règle sur un impact de 500 pixels. Je veux des lettres en gros caractères gras. Ensuite, j'appelle la méthode intégrée FiltText, qui attend au moins trois arguments, le texte à dessiner et les coordonnées x et y où le dessiner. Le texte que je veux dessiner est le JS, car nous découvrons le JavaScript aujourd'hui. coordonnée horizontale sera cette largeur de point, la largeur du Canvas multipliée par 0,5. Le milieu de la toile horizontalement, coordonnée verticale y sera cette hauteur de point multipliée par 0,5, le milieu de la toile verticalement. Comme vous pouvez le voir, j'extrait la variable CTX de la ligne vers l'intérieur de ma classe. Je veux suivre les bonnes pratiques et garder nos cours autonomes. Je vais donc refactoriser cela. J'aurai besoin d'accéder au CTX à partir de la méthode Draw text ainsi qu' à partir de la méthode init, car c'est à partir de là que la méthode Draw Text sera appelée. J'ai également besoin d'accéder à ce même contexte à partir de la méthode draw a grid. Comme nous avons besoin de CTX dans de nombreux endroits différents dans la classe d'effets, je vais choisir la solution suivante. Nous avons le code CTX ici sur la deuxième ligne. Je m'assurerai d'affecter le constructeur de classe attendu comme argument. Et à l'intérieur, je vais le convertir en une propriété de classe appelée ce contexte de points. Comme ça. Nous utiliserons ce contexte de points ici et ici dans la méthode de dessin de texte. En ce qui concerne le taux de drogue également, on ne s'attend plus à ce qu' agisse d'un argument venant de l'extérieur. Au lieu de cela, dans tous ces endroits, j'utiliserai cette propriété de classe de contexte de points que nous venons de créer. Nous utilisons également le contexte dans le rendu. Il ne s'attendra plus à ce que le contexte soit un argument. Je vais également supprimer l' argument contextuel passé pour dessiner la méthode sur des particules et, ici, pour dessiner une grille. Je pense avoir commis quelques erreurs ici. Restez avec moi une seconde, s'il vous plaît. En fait, je dois intégrer ce contexte juridique pour dessiner une méthode sur des particules comme celle-ci. OK, je lance le code, j'obtiens une erreur. J'ouvre le constructeur de classe d'effets de la console du navigateur expect CTX et je le convertit en cette propriété de contextes de points. Je dois m'assurer de transmettre le CTX ici à la ligne cent 51 lorsque je crée une instance de cette classe. De plus, je n'ai plus besoin de transmettre le CTX à la méthode de rendu. Ici. Je prends la méthode draw text et je l'appelle depuis l'intérieur du rendu comme ceci. Lorsque nous transmettons les coordonnées x et y à la méthode FiltText, ces coordonnées définissent le point d'ancrage de ce texte où le texte est dessiné par rapport à ce point d'ancrage en fonction de la valeur des textes, des lignes et des propriétés du canevas de base du texte. L'alignement du texte gère l'alignement horizontal. Nous avons placé le point d'ancrage du texte au milieu du cannabis. Regardez donc ce qui se passe lorsque je place la ligne de texte au centre. Je peux également utiliser la propriété de base du texte pour aligner le texte verticalement par rapport à ces coordonnées de point d'ancrage. Je l'ai réglé au milieu. Encore une fois. Lorsque vous dessinez du texte sur du cannabis, les valeurs que vous transmettez aux coordonnées x et y de FiltText définissent le point d'ancrage où se trouve le texte par rapport à ce point d'ancrage en fonction des valeurs que vous attribuez aux propriétés de base du texte, des lignes et du texte. Par défaut, le texte est aligné à gauche horizontalement et la ligne de base alphabétique verticalement. Nous les avons placés au centre, au milieu pour obtenir un texte centré comme celui-ci. Il est très important de comprendre que si vous devez travailler avec du texte sur un canevas HTML, je définirai le débogage sur true pour activer le mode débogage Je veux que ce texte soit visible en mode débogage. Oh, j'ai une erreur. La console me dit que c'est ici. Je dois également utiliser ce contexte de points ici pour dessiner ma grille. Je l'ai probablement déjà remarqué. Donc, lorsque nous sommes en mode debug, je veux voir le champ vectoriel se dégrader. Et je veux que vous voyiez ces grosses lettres blanches qui détermineront la forme du champ d'écoulement. Pouvoir afficher et masquer ce texte facilement en appuyant sur la lettre D du clavier, en passant en mode debug, facilitera la compréhension et la modification de l'effet. Rendu intérieur. Je dis que si c'est le débogage qui est vrai, alors seulement dessinez une grille et dessinez du texte. Maintenant, vous pouvez appuyer sur la lettre D encore et encore pour activer et désactiver le mode de débogage. 34. Comprendre les données de pixels: Dans la méthode init, je veux dessiner vers x à ce stade. N'oubliez pas que la méthode init ne s' exécutera qu'une seule fois lors du chargement de la première page et qu'elle créera un champ vectoriel et un système de particules pour nous. Après avoir dessiné ces grandes lettres blanches sur Canvas, je veux que vous scanniez Canvas à la recherche de données en pixels. Mon objectif ultime est de savoir quelles cellules de la grille sont en forme de lettres en retard et quelles cellules de la grille ne contiennent que l'arrière-plan noir vide. Je le fais en scannant du cannabis à la recherche données en pixels après avoir dessiné ce texte dessus. Et j'analyserai ces données en pixels et je les cartographierai sur la grille. Je vais appeler la méthode intégrée get ImageData. Cette méthode renvoie un objet de données d'image généré automatiquement représentant les données de pixels sous-jacentes pour une portion spécifiée de cannabis. Il s'attend à ce que quatre arguments précisent la portion de cannabis que nous voulons analyser. Je souhaite pixelliser les données de l'ensemble de l'élément du canevas. Donc, de la coordonnée zéro-zéro à cette largeur de point, cette hauteur de point. En d'autres termes, obtenez ImageData. Je vais scanner une partie spécifique du cannabis à la recherche de données pixellisées, nous pourrons en extraire les couleurs et les coordonnées de chaque pixel. Pour cela, je dois comprendre comment les données de cet objet de données d'image généré automatiquement sont organisées ? Je vais l'attribuer à une variable constante que j'appelle par exemple pixels, et notre console l'enregistrera. Je peux voir l' objet de données d'image ici dans la console. Je l'ouvre et je peux voir qu'il a largeur et la hauteur de la zone numérisée. C'est important. Nous devons connaître ces valeurs pour pouvoir extraire les coordonnées x et y de chaque pixel. Si nous connaissons la largeur, nombre de pixels dont nous disposons, chaque ligne de données, nous savons après combien de pixels ce tableau se divise en une autre ligne. Le canevas est numérisé. Et dans le même ordre, nous avons créé notre grille d'angles ligne par ligne de haut en bas , de gauche à droite sur chaque ligne. Si j'ouvre ce tableau de données, c'est là que toutes les informations sur les pixels sont stockées. C'est en fait très simple. Il contient juste une longue séquence d'entiers. La console de mon navigateur divise ce très long tableau en blocs, mais il s'agit en fait d'une longue ligne de chiffres. Comment cela se traduit-il en pixels ? Je peux voir qu'il s'agit d'un type spécial de tableau appelé UI et tableau bloqué T8. Il ne peut contenir que des entiers de huit bits non signés, regroupés de 0 à 255. déclaration de couleur RGBA en CSS, nous savons que chaque couleur peut être représentée par une combinaison de rouge, de vert et de bleu. Chaque couleur a une valeur comprise entre 0 et 255. Et différentes combinaisons de ceux-ci nous permettent de créer n'importe quelle couleur dans la déclaration de couleur CSS RGBA. La valeur d'opacité Alpha est de 0-1. Ici, dans ce tableau de pixels, alpha est également représenté par une valeur comprise entre 0 et 255. Nous devons nous rappeler qu'un tableau de données de pixels est une ligne de nombres extrêmement longue où chacune des quatre valeurs représente le rouge, vert, le bleu et l'alpha sur un pixel, un seul pixel. C'est donc le pixel 1. Les quatre valeurs suivantes, notre pixel deux, et ainsi de suite. Je peux voir que la largeur de la zone numérisée est 528 pixels et la hauteur de 464 pixels. 528 fois 464, soit 244 992 pixels au total numérisés. Et nous savons que chacun de ces pixels est représenté par quatre valeurs en pixels. Réseau. Valeur pour le rouge, vert, le bleu et Alpha. 244 992 fois quatre font 979 968. Ici, nous pouvons voir que le tableau de données de pixels contient exactement 979 968 éléments. Donc ça marche. Si je regarde quelque part au milieu du tableau, je devrais pouvoir trouver ces pixels blancs qui constituent les formes des lettres. Ici, je peux voir que nous avons 55 à 55 à 55, qui est blanc, et 2554 alpha entièrement visible. Nous savons que ces quatre pixels avec un indice 533 600 pixels dans le tableau de données pixels représentent des pixels quelque part dans cette zone blanche. Si je change aussi le style de remplissage, n'est-ce pas ? J'ai ouvert le tableau. La plupart du temps, je vois que les pixels noirs sont des zéros, des zéros, une opacité de 00, car l'arrière-plan de notre toile est transparent. Ici, je peux voir que ces pixels rouges à 55 indiquent zéro, verts, zéro bleu à 55 Alpha. Ces valeurs représentent un pixel rouge entièrement visible, quelque part dans la zone rouge Nous savons que ces pixels sont le texte dessiné sur Canvas. 35. Gérer les données de pixel: OK, donc la méthode init exécutera toutes celles lors du chargement de la première page et, à l'intérieur, nous essayons de créer une grille d'angles, un champ vectoriel. Nous avons dessiné du texte et nous avons scanné avec ce texte dessiné dessus avec la méthode intégrée get ImageData. Maintenant, nous conservons toutes les valeurs de pixels dans cette variable de pixels. Je vais commenter ce code qui a calculé les angles en spirale pour chaque cellule de la grille en utilisant notre formule spéciale pour les sinus et les cosinus. Je vais plutôt créer la forme du texte des lettres pour déterminer les angles maintenus dans chaque cellule du champ vectoriel. Pour ce faire, nous devons utiliser des boucles imbriquées. Encore une fois, la boucle extérieure parcourra Canvas ligne par ligne, sautant par taille de cellule. Chaque fois que nous entrons dans une nouvelle ligne, nous définissons la taille de la cellule à 20 pixels. Ici, à la ligne 75, je peux afficher et masquer cette grille composée de 20 fois 20 cellules en appuyant sur la lettre D de mon clavier. À l'intérieur, la boucle intérieure parcourra chaque rangée horizontalement de gauche à droite. Saut également d'une cellule à l'autre en fonction de la valeur de la taille de la cellule. J'espère que nous comprenons maintenant comment ces deux éléments imbriqués en boucle circulent sur le canevas ligne par ligne, de haut en bas. Chaque fois que nous saisissons une nouvelle cellule dans la grille, nous devons calculer un indice. Nous avons déjà calculé l'indice ici, à la ligne 40. Cette formule nous aide à convertir les coordonnées x et y en une valeur unique représentant l'indice dans un tableau. Lorsque nous parcourons la grille cellule par cellule, ligne par ligne, je souhaite faire correspondre la position de cette cellule à un index correspondant à ces coordonnées dans un tableau de pixels afin de savoir quelles données de pixels ont été numérisées pour cette cellule particulière. Une correspondance entre les coordonnées x et y de la cellule. Je suis actuellement en train de parcourir ces boucles imbriquées vers un index spécifique dans un tableau de pixels afin extraire les données de pixels pour cette zone du canevas. Encore une fois, il s'agit de cette formule où nous multiplions le nombre de lignes par la largeur. Nous obtenons donc des pixels par ligne plus x, qui représente le nombre de pixels nous nous trouvons actuellement dans la nouvelle ligne. Cette fois, nous essayons de faire correspondre l' index dans un tableau de données en pixels. Nous savons que chaque particule est représentée par quatre éléments, quatre nombres entiers, 0 à 255, représentés en rouge, vert, bleu et Alpha. Donc, pour obtenir cet indice correct, je multiplie ce par quatre. Je connais maintenant l'indice en pixels qui correspond aux coordonnées x et y de cette cellule particulière dans le champ vectoriel, le grade. Je veux la couleur par laquelle je commence, non ? Le rouge sera un tableau de pixels à cet index. Le vert sera l' indice qui suivra. Donc, indice de pixels plus un. Le bleu représente l'indice plus deux. Ensuite, nous avons Alpha, indice plus trois. Ensuite, nous obtenons la valeur rouge du pixel suivant , le vert, le bleu, l'alpha, etc. Nous avons donc le rouge, vert et le bleu de chaque pixel. La combinaison de ces valeurs nous donnera la couleur du pixel sous-jacent. heure actuelle, tous les pixels du texte sont rouges, mais nous allons bientôt modifier cela. 36. Convertir les couleurs en angles: Mon objectif est maintenant de faire en sorte que la couleur des lettres affecte la direction du flux, l'angle dans la grille du champ vectoriel, par exemple pixels rouges poussent le flux vers la droite. La couleur bleue coule vers le bas, couleur verte s'écoule vers la gauche, par exemple, et toutes les valeurs de couleur intermédiaires nous donnent un angle quelque part entre ces directions. Il existe de nombreuses façons de convertir les couleurs en angles, et nous pouvons obtenir de nombreux effets différents ici. Le moyen le plus simple serait de convertir d'une manière ou d'une autre les trois valeurs rouge, vert et bleu en un seul nombre. Je peux par exemple générer une valeur de niveaux de gris à partir de cette valeur RGB. Les couleurs RGB sont calibrées sorte que lorsque les trois couleurs pour le rouge, le vert et le bleu sont égales, la couleur résultante est une nuance de gris. La couleur se situe quelque part sur le spectre des niveaux de gris, sans biais vers le rouge, vert ou le bleu. Nous pouvons convertir en niveaux de gris en obtenant la moyenne des trois, rouge plus vert plus bleu divisée par trois. Maintenant, je pourrais créer un effet de niveaux de gris à partir de cette valeur moyenne et en l'appliquant nouveau au rouge, au vert et au bleu. Mais en fait, je voulais juste prendre cette valeur moyenne unique et la convertir en valeur d'angle. Nous avons une gamme de niveaux de gris allant de 0 à 255. Et je veux mapper ces valeurs : deux angles, 0-6, 0,28 rad, 6,28 rad convertis en 360 degrés, un cercle complet. Les couleurs peuvent donc circuler dans n'importe quelle direction en fonction de la valeur d' échelle de gris de cette zone, car nous n' opérons qu'avec des valeurs positives. La formule est donc très simple. Prenez le rapport entre l'échelle de gris actuelle de cette cellule dans le champ vectoriel et la valeur maximale. Et appliquez ce rapport à cette valeur d'angle. Supposons que si le niveau de gris est de 127,5, cela représente 50  % entre la valeur minimale de zéro et la valeur maximale de 250. 527 points 5/255 est 0,5. Nous avons le ratio, et maintenant je le multiplie par la plage angulaire maximale de 6,28 rad, ce qui nous donnera la moitié de cette valeur, 3,14. 3,14 est un demi-cercle pi. ailleurs, si l'échelle de gris est par exemple 63,75, 63,75 divisée par la valeur maximale de 255 nous donne un ratio de 0,25, 25 % par rapport à la valeur maximale, soit un quart. Nous appliquons le même rapport à la valeur d'angle maximale de 0,25 fois 6,28, ce qui nous donne 1,57 rad demi-quart de cercle. En gros, je prends le ratio, la relation entre la valeur actuelle des niveaux de gris et la valeur de couleur maximale possible de 255. Et j'applique ce rapport à la plage d'angles de 0 à 6, 0,28 rad. Comme nous utilisons une échelle de gris de cette manière, le flux résultant sera influencé par la clarté ou l' obscurité des couleurs sur le spectre des niveaux de gris. Je vous montrerai ce que je veux dire lorsque l'animation sera lancée. Je veux limiter le nombre de décimales que nous obtenons ici car il n'est pas nécessaire de calculer de petites valeurs d'angle. Deux décimales, c'est bien. J'ai mis l' expression entière entre crochets, afin de pouvoir appeler le JavaScript intégré à une méthode fixe. Je le passe à, je ne veux que deux décimales. OK, alors que la méthode init s'exécute, nous définissons le champ de flux sur un tableau vide. Ici, je vais remplir le tableau avec une grille de valeurs d' angle (méthode de poussée intégrée du tableau). Et nous pousserons un objet dont propriété x est définie sur une coordonnée x, une coordonnée horizontale à partir de la boucle intérieure pour lorsque nous par la taille de cellule dans chaque ligne, à la vente de cellules, y sera un indice y depuis la boucle extérieure pour lorsque nous par la valeur de la taille de cellule sur cannabis ligne par ligne, de haut en bas. La valeur de l'angle de couleur est cette plage de couleurs en niveaux de gris convertie en une valeur d'angle en radians, qui garantit que les particules circulent dans une direction différente sur différentes couleurs. Dans la console, nous pouvons voir cet objet de données d'image. En fait, je ne veux pas qu'il pointe vers l'objet entier, mais uniquement vers le tableau de pixels, qui se trouve ici dans la propriété data. Les pixels seront des objets ImageData renvoyés par les données point de la méthode intégrée get ImageData. Nous pointons directement vers ce tableau maintenant. Nous le voyons maintenant dans la console ici. tableau de champs de flux contient désormais des objets dotés de propriétés x, y et d'angle de couleur pour chaque cellule de la grille de champs vectoriels. Nous devons nous assurer de tenir compte ce changement lorsque la mise à jour positions des particules apparaît dans méthode de mise à jour sur la classe de particules. Ici, nous extrayons la valeur de l'angle d'un réseau de champs de flux en fonction de la position X et Y actuelle des particules sur Canvas. Maintenant, il existe un objet avec trois propriétés à chaque index Je dois donc accéder à sa propriété inclinée par couleur ici. Comme ça, sympa, il se passe quelque chose. Nous avons deux problèmes à résoudre. Je souhaite uniquement exécuter ce bloc de code qui fait correspondre position des particules à un objet représentant une cellule dans le champ de flux. Si un objet se trouve à cet indice sur l'angle de couleur Dan, cela résoudra le problème selon lequel les particules se déplacent en dehors des limites du Canvas entre les récitations. Deuxièmement, si vous codez en même temps, vous pouvez effectuer un zoom arrière et vous pouvez voir que nous sommes déjà en train de dessiner dans un champ de flux en forme de lettres JS, mais pour une raison ou une autre, il est incliné vers la droite. Pourquoi ça ? Je vais réduire la taille de la police pour que nous puissions voir que nous avons la forme, mais pourquoi est-elle déformée comme ça ? Je vais réduire la taille de la cellule. Nous pouvons maintenant voir clairement le champ de flux a la forme de lettres JS, mais il est biaisé d'une manière étrange. En fait, il m'a fallu quelques minutes pour comprendre ce qui se passait, mais passons rapidement à la solution. Si vous savez pourquoi il le fait avant que je ne le dévoile, mettez la vidéo en pause et saisissez-la dans les commentaires. heure actuelle, vous voyez ici que nous définissons largeur et la hauteur du canevas sur la largeur et la hauteur actuelles de la fenêtre du navigateur. Le problème est que lorsque nous créons le champ de flux, si la valeur de la cellule correspond à la classe d'effet principale, la largeur et la hauteur de chaque cellule de la grille ne sont pas un nombre par lequel la largeur du canevas peut être divisée. Sans reste, nous obtiendrons quelques pixels restants lorsque nous interrompons une ligne lorsque nous scannons Canvas ligne par ligne de haut en bas. Au fur et à mesure que nous descendons ligne par ligne, les pixels restants à la fin de chaque ligne s'accumulent et le champ de flux se dégrade. Et le champ d'écoulement se dégrade. Le nombre d'éléments qu'il contient ne correspond pas exactement au nombre de cellules que nous pouvons placer sur Canvas. Les rangées sont donc de plus en plus poussées vers la droite. Il existe plusieurs moyens de résoudre ce problème. Nous devons simplement nous assurer que la largeur du canevas est divisible par la taille de la cellule sans reste, sans valeurs résiduelles. Je vais le résoudre en réglant largeur de la toile sur une taille spécifique. Mais vous pouvez également utiliser une formule dynamique à l'aide de l'opérateur rest. Si vous vouliez le garder en plein écran, si vous souhaitez conserver la fonctionnalité réactive. J'ai dit que la largeur de la toile était de 600 pixels. Et comme la taille de cellule de la ligne 75 est fixée à 20 pixels, 600 est divisible par 20 sans aucun résidu Nous obtenons donc la forme correcte. Je vais également régler la hauteur du canevas à 600 pixels, ou peut-être 500 fois 500. Lorsque je redimensionne Canvas, méthode de redimensionnement de notre client déclenchée et elle casse à nouveau la forme, car elle permet à la largeur de la toile d' être quelque chose qui n'est pas directement divisible par la taille de la cellule sans reste Je peux soit m' assurer qu'elle ne recherche que type de taille si la nouvelle largeur est divisible par la taille de la cellule. Ou je peux simplement le commenter pour l'instant , ici en ligne et 92. Et comme Canvas mesure 500 fois 500 pixels, je veux qu'il soit centré exactement au milieu de la page. Je peux le faire avec du CSS. Il s'est déjà positionné en absolu, donc je lui donne un top 50 %, laissé 50 % et une translation de transformation de -50 % à 50 %. Bien entendu, vous pouvez le positionner différemment selon l'endroit où vous le souhaitez. Je vais maintenant régler l'arrière-plan l'élément corporel en noir. Je pense que ça a l' air bien pour le moment. J'augmente la taille de la police. 450 peut-être. Oui, nous convertissons la couleur en angle. Regardez donc où les particules circulent lorsque le texte est correct. Et regardez ce qui arrive à leur direction de mouvement. Quand je change la couleur en vert. L'angle bleu est en fait similaire à la lecture, car nous ne répartissons pas la gamme de couleurs elle-même, mais nous la convertissons d'abord en niveaux de gris, puis nous la convertissons en angle. Il semble que le bleu et le rouge aient une valeur de niveaux de gris très similaire. Vous verrez la plus grande différence d'angles lorsque vous utilisez des couleurs claires ou foncées. Des couleurs très éloignées les unes des autres sur le spectre des gris. Marron. Essayons quelque chose de beaucoup plus clair, du jaune. Nous pouvons clairement voir que la direction du flux est influencée par la couleur, par la couleur du texte, parfaite. 37. Flux et dégradés: Je pourrais le laisser ici, mais je jouais avec et j'ai trouvé d'autres choses vraiment cool à partager avec vous. C'est toujours mon moment préféré où toute la logique est en place. L'effet fonctionne et je peux expérimenter. Nous savons que les différentes couleurs poussent le flux de particules dans des directions différentes. Voyons donc ce qui se passe lorsque le fond du texte n'est pas une seule couleur, mais un dégradé qui passe d' une couleur à l'autre. Je me demande à quoi cela va ressembler. Une variable personnalisée appelée dégradé, et j'appelle la méthode de dégradé linéaire intégrée de Canvas. Il attend quatre arguments, x et y du point de départ, et x et y du point final. Le dégradé sera tracé le long d'une ligne entre ces deux points. Je veux un dégradé à partir des coordonnées du coin supérieur gauche, zéro à zéro vers le coin inférieur droit Les coordonnées affectent la largeur et la hauteur, qui sont identiques à la largeur et à la hauteur du canevas. Maintenant, je peux prendre ce dégradé d'une variable et j' appelle la méthode intégrée d'ajout de couleur à partir de celle-ci. À un décalage de 0,2, la couleur sera blanche, par exemple décalage de 0,8. J'essaie le bleu intégral. Maintenant, je peux simplement définir FillStyle sur cette variable de dégradé. Génial, c'est tellement cool, comme la façon dont le flux se courbe lorsque nous passons du bleu au blanc. Maintenant que nous avons compris cela, nous pouvons expérimenter différentes gammes de couleurs et différents dégradés. J'ajoute un autre arrêt de couleur au point zéro pour la couleur jaune. 0.6 sera, par exemple, vert. Je peux simplement jouer avec les valeurs de couleur pour voir quel flux j'obtiens. Il est intéressant de voir comment le sens du flux change lorsque les couleurs changent en fonction du dégradé. J'ai oublié de mentionner une caractéristique importante des méthodes Canvas intégrées à FiltText et à trait nous pouvons leur transmettre cinquième argument facultatif pour définir la largeur maximale du texte. Je dirais que la largeur maximale du texte est le poids de la toile. Maintenant, si le texte est plus long, il sera écrasé pour tenir dans la zone. Si je veux des marges, je peux dire que cette largeur de point est multipliée par 0,8. Et le texte reprendra au maximum 80  % de Canvas. Cela prendra 80  % si nous lui donnons plus d'espace en augmentant la largeur du canevas. Je reviens à la taille du canevas 500 fois 500 pixels. J'ai changé le mot pour qu'il soit fluide. Nous pouvons changer la police en Helvetica, par exemple retour à impact. Et les textes seront en JS. Je veux qu'il coule pour se courber davantage vers la droite. Je joue donc avec les valeurs de couleur pour que le dégradé influence la direction du champ de flux. Ça a l'air sympa. Je copie ce bloc de code et je renomme également tous ces dégradés. Et je l'utilise comme FillStyle en ligne 112e. Je joue à nouveau avec les valeurs pour voir ce qui se passe. Je sais à peu près dans quelle direction chaque couleur s'écoule, mais c'est surtout par essais et erreurs. Cela semble intéressant. Je crée un dégradé trois en copiant ce bloc de code et en l'utilisant comme FillStyle en ligne cent 18. Cette fois, il s'agira d'un gradient radial, nous devons donc lui transmettre six arguments, x et y du point central du cercle intérieur. C'est Radius. Je voulais donc que le cercle intérieur commence exactement au milieu de la toile, horizontalement et verticalement. Et le rayon sera de dix pixels. Le bord extérieur du cercle de dégradé radial partira à nouveau du milieu de Canvas et le rayon correspondra à la largeur du bureau. Intéressant. J'ajuste les couleurs pour voir quelle forme j'obtiens. Vous pouvez voir comment le dégradé radial affecte le flux d'une manière différente. J'aime beaucoup celui-ci. Je conserverai les trois dégradés que j'ai définis afin passer de l'un à l' autre plus tard si je le souhaite. 38. Conseil, astuces et expériences: Lorsque les angles changent de direction, c'est un virage serré. Cela peut fonctionner pour vous, mais peut-être voulons-nous que les lignes tournent plus progressivement lorsque l'angle dans le champ vectoriel change. Nous maintenons la valeur d'angle actuelle pour chaque particule ici sur la classe de particules principale. Nous modifions cette valeur dans la méthode de mise à jour pour qu' elle corresponde à la valeur d'angle de la grille dans le champ de flux. Je vais créer ici une autre propriété appelée nouvel angle. Et je vais vérifier la différence entre l'angle actuel et le nouvel angle. Et au lieu de passer instantanément à ce nouvel angle, lorsque des particules entrent dans une nouvelle cellule de la grille du champ de flux, nous pousserons simplement les particules vers ce nouvel angle d'une certaine fraction de leur différence. Ou pour réduire les calculs nécessaires, plutôt que de calculer la fraction de la différence entre l' angle existant et le nouvel angle, je peux simplement avoir une valeur définie appelée caractère d'angle. Ce sera une petite valeur en radians. Ici, dans la méthode de mise à jour, j'ai dit nouvel angle deux, un angle stocké dans la cellule du champ vectoriel. Et je dis que si l'angle actuel de la particule est supérieur au nouvel angle, réduisez la valeur de l'angle de la particule par la valeur de caractère angulaire que nous avons définie, rapprochez l'angle existant du nouvel angle, je choisis de procéder de cette façon pour économiser des performances. Vous pouvez également demander de modifier la valeur de l'angle d'un dixième de la différence entre l'angle et le nouvel angle, ce qui vous donnera des courbes plus graduelles au détriment des performances car davantage de calculs sont nécessaires. Sinon, si l'angle est inférieur à l'angle u, augmentez la valeur de l'angle en fonction du caractère de l'angle. Encore un autre endroit, nous abordons un nouvel angle. Vous pouvez maintenant constater que les virages serrés ont disparu et que nous poussons doucement les particules vers certaines valeurs d'angle. J'ajuste la valeur des caractères d'angle pour les pousser un peu plus fort. Ou nous pouvons créer une valeur aléatoire ici entre une petite plage afin que chaque particule se courbe différemment. Je peux régler la longueur maximale. Je peux modifier le modificateur de vitesse. Nous avons toute la logique en place. Si vous le souhaitez, vous pouvez jouer avec lui pour voir quelles variantes de cet effet vous pouvez créer. Voici donc ma méthode de base efficace en termes de performances, à faire en sorte que les particules changent de direction plus progressivement au fur et à mesure qu'elles circulent sur la grille de cellules du champ d'écoulement. J'aimerais également pouvoir contrôler le nombre de particules circulant à l'intérieur formes des lettres et le nombre de particules circulant dans la zone située à l'extérieur des lettres. Maintenant, c'est complètement aléatoire, mais il n'est pas nécessaire que ce soit le cas lorsque les particules se réinitialisent. Je voulais vérifier s'il se réinitialisait l' intérieur ou à l'extérieur des formes des lettres, quelque part dans la zone transparente autour de la lettre. Si c'est en dehors des lettres, je voulais réessayer. J'aurai une variable appelée attempt. Il commencera à zéro. Dans un premier temps. J'aurai un indicateur appelé Réinitialisation réussie. Dans un premier temps, ce sera faux. Lorsque les particules se réinitialisent à l'intérieur des formes des lettres, nous passerons à vrai. Je vais faire une boucle pendant un moment. Lorsque les particules se sont réinitialisées, j'ai voulu essayer cinq fois. Il essaiera à cinq reprises de choisir au hasard une position quelque part dans Canvas pour essayer de réinitialiser les formes des lettres. Tant que le nombre de tentatives est inférieur cinq et que le succès de la réinitialisation est faux, je créerai un index de test. Ce sera une cellule aléatoire quelque part dans le tableau des champs de flux. Je vérifie si cet indice de test a un alpha supérieur à zéro, ce qui signifierait que c'est la cellule du champ de flux données en pixels présentent une couleur visible, ce qui signifierait qu'il s'agit de l' une des lettres. Sinon, il sera transparent, ce qui signifierait que c'est l' arrière-plan vide autour des lettres. Si Alpha est supérieur à zéro, cela signifie que nous avons trouvé l'une des cellules contenant des lettres. Nous avons donc défini les positions x et y de la particule sur les positions x et y de la cellule dans le champ d'écoulement. Le réseau. Ici, je peux voir que les cellules remplies objets à l'intérieur d'un tableau de champs de flux contiennent des valeurs x, y et des angles de couleur. Donc, ce X et ce Y viendront de là. J'ai dit que ces coordonnées x et y étaient le premier point du chemin en les ajoutant au tableau d'historique. Et j'ai remis le chronomètre à la longueur maximale deux. Je vais également définir le succès de la réinitialisation sur true. Surtout, je dois m' assurer que chaque fois que nous essayons de le faire, nous augmentons le nombre de tentatives d'une unité, de sorte que lorsque nous atteignons cinq, cette boucle, nous ne voulions pas créer une boucle temporelle interminable. Cela ne se poursuivra que tant que ces deux conditions seront réunies. Donc uniquement lorsque les tentatives sont inférieures à cinq et en même temps, tant que le succès de la réinitialisation est faux. Si j'exécute le code, il ne se réinitialise pas du tout. Cela indique donc que cette condition sur la ligne 78 renvoie toujours faux. C'est parce que nous n'introduisons pas cette valeur Alpha dans les objets de nos cellules de champ de flux. J'ai modifié le nombre de tentatives ici à 50. Donc, ici, je suis en train de calculer 160 alpha en ligne. Je dois m'assurer que la valeur se retrouve réellement dans le tableau de champs de flux. Comme ça. Les lignes parfaites se réinitialisent à l'intérieur des lettres. J'ai dit maximum, essayez de revenir à quatre une fois la boucle terminée. Si, après quatre tentatives de réinitialisation, nous n'avons toujours pas trouvé de cellule avec un alpha supérieur à zéro et que nous avons réinitialisé, réussite est toujours fausse. Nous allons rétablir les coordonnées x et y de cette particule quelque part de manière aléatoire sur le canevas. Il ne réinitialise toujours pas les particules en dehors de la forme des lettres. Même si je n' en fais que deux tentatives. Que diriez-vous d'une seule tentative ? Je vais trouver une solution. Donne-moi juste une seconde, d'accord ? Je dois mettre ces nouvelles positions dans le tableau d'historique. Et surtout, je dois remettre le chronomètre à la longueur maximale multipliée par deux pour que les particules s'animent. Agréable. Ainsi, lorsque les particules se réinitialisent, ce code tente un certain nombre de fois de réinitialiser les particules à l'intérieur des formes de lettres. Et s'il ne trouve pas cette cellule après un certain nombre de tentatives, il réinitialisera simplement la particule quelque part de manière aléatoire autour de Canvas. Nous pouvons modifier le nombre de particules que nous voulons réinitialiser à l'intérieur et extérieur de la forme des lettres en modifiant le nombre de tentatives sur la ligne 75. Lors de la dernière tentative, moins les particules ont de chances de retrouver la forme des lettres à temps. Ils pourraient donc se réinitialiser à l'extérieur. Je peux augmenter le nombre de particules et la taille des cellules. Nous pouvons constater que la plupart des particules sont désormais réinitialisées sous forme de lettres, mais parfois, nous en retrouvons une autre, quelque part à l'extérieur. Vous pouvez ajuster le nombre de particules et taille des cellules comme vous souhaitez et selon ce que votre ordinateur peut gérer ici. Je peux supprimer ce code. Je pense que nous comprenons tous maintenant comment ces valeurs affectent l'animation. Peut-être 2000 particules. Et si j'ajoutais du blanc à la gamme de couleurs pour certains reflets ? Intéressant, je le supprime à nouveau. J'essaie le dégradé 1 pour changer la direction du champ de flux. Dégradé aussi. Je pense que mon préféré est le dégradé 3. Lequel préfères-tu ? J'augmente la longueur maximale, ce qui a un effet sur les performances. Les lignes plus longues nécessitent plus de puissance informatique pour dessiner. Nous créons donc une grille, nous dessinons du texte sur Canvas. Nous analysons ce genre de personne à l' aide de textes dessinés dessus. Pour les données de pixels, nous les parcourons dans une grille afin d'extraire les valeurs de couleur et les coordonnées de chaque pixel. Et nous convertissons ces résultats en couleurs en angles. À partir de ces informations, nous créons un champ de flux, une grille d'angles, où la direction des angles est influencée par le texte dessiné sur Canvas. Je peux supprimer ce bloc de code. Ensuite, nous créons ici un système de particules. Peut-être que je voulais que les particules commencent à s'échapper des formes des lettres dès le chargement de la première page. Je vais donc déclencher manuellement méthode de réinitialisation sur chaque particule au fur et à mesure que je les crée, ce qui les obligera à faire quelques tentatives pour trouver des cellules dans le champ de flux contenant des valeurs de couleur, cellules situées au-dessus des formes de lettres. J'ai modifié le texte pour qu'il soit fluide. Vous pouvez voir que cela perturbe le dégradé radial, ce qui est normal. Augmentez la largeur du canevas à 1500 pixels. Je peux créer la largeur maximale du texte ici. Je peux utiliser des dégradés pour changer la direction du flux. Cela semble intéressant. Que diriez-vous de Gradient One ? Vous avez probablement réalisé que cela fonctionnerait sur les images et j' utilise simplement get ImageData pour obtenir des formes de lettres dessinées sur Canvas. Voulez-vous apprendre à l' utiliser sur des images ? Je vais vous montrer exactement comment procéder dans la prochaine partie. J'espère que tu t'amuses bien. 39. Les champs de flux d'images expliqués: Nous avons donc créé un champ de flux de texte et nous l'avons expérimenté. J'ai remis le texte en majuscule js pour qu'il s'adapte à l'écran et que nous puissions tout voir. Vous pouvez télécharger les images que j' utiliserai dans la section des ressources ci-dessous, ou vous pouvez utiliser les vôtres. J'utiliserai de petites images de 200, 200 pixels d'une taille d'environ 10 ko. La taille des images est importante pour les performances. Donc, si vous utilisez vos propres images, pensez-y et optimisez les images avant de les utiliser pour ce projet Si vous voulez que votre animation se déroule correctement, cet effet est parfait avec certaines images spécifiques. D'après mon expérience, le meilleur résultat est des formes simples avec des couleurs dégradées, car cela permet de bien arrondir le flux autour de celles-ci. Dans index.HTML, je crée un élément IMG avec un identifiant d'étoile et la source pointera vers cette image. Si vous vous souvenez de la partie précédente, l'astuce consistait à dessiner du texte sur Canvas, puis analyser les données de ces pixels et à créer un champ vectoriel, une grille d'angles à partir de cette forme. Je veux faire la même chose ici avec une image. Maintenant, je voulais dessiner cette image sur Canvas, puis je veux la scanner avec cette image dessinée dessus. Le problème est que ce partage de ressources entre origines comporte certaines limites . Il s'agit d' une mesure de sécurité qui nous empêche de dessiner une image aléatoire sur Canvas, puis de scanner ce canevas à la recherche de données en pixels. Si l'image ne provient pas de la même origine, ce type d'utilisateur est considéré comme entaché par des données d'origine croisée. Et votre code se terminera par une erreur de console vous demandant de dessiner une image sur Canvas et de la scanner avec get ImageData Cette image doit être considérée comme ayant la même origine. Si vous exécutez votre code à partir d'un serveur et que la source de l'image pointe ici vers une image stockée à la même adresse de serveur. Alors ça marchera. Je veux que cette base de code soit flexible et fonctionne facilement en local. Je ne veux pas revenir sur configuration d'un serveur local pour le moment. Une solution possible consiste donc à convertir l'image elle-même en une chaîne de données dite de base 64. Pour ce faire, nous pouvons utiliser une URL de données intégrée à la méthode JavaScript, ou de nombreux sites Web le feront pour nous en quelques secondes. En résumé, pour éviter tout problème de partage de ressources entre origines, je convertis le fichier image lui-même en une chaîne de données, puis j'utiliserai cette chaîne de données comme source d'image. Je le fais par Google et P et G, deux base-64. Notez qu'il n'est pas nécessaire que l'image soit au format PNG. Il fonctionnera également avec d'autres formats. Je vais choisir par exemple ce site Web à partir de PNG tools.com en ligne. Mais les autres sites fonctionneront de la même manière. Je fais glisser et déposez l' image que je souhaite convertir depuis mon ordinateur dans ce champ. Et il convertira instantanément l'intégralité du fichier image en une très longue ligne de code. Utilisez une image aussi petite que possible en termes de largeur et de hauteur, ainsi que de kilo-octets. Sinon, ce code sera trop long et entraînera des problèmes de performances lorsque nous l'animerons en une minute. Idéalement, utilisez les images et fournissez. Ensuite, une fois que vous avez obtenu un effet fonctionnel, vous pouvez passer à un autre fichier image. Cette chaîne de données en base 64 doit commencer comme cette image deux-points. Si ce n'est pas le cas pour vous, cochez cette case pour le convertir dans le format spécifique dont nous avons besoin. Je copie cette très longue ligne de code et je la colle ici en tant qu'attribut source. Dans Visual Studio Code, je peux cliquer sur Afficher puis sur Word Wrap pour rendre le fichier de code plus facile à gérer. Comme vous pouvez le voir, nous dessinons cette image d'étoile, mais nous n'utilisons jamais le fichier image réel. Cette longue chaîne de code remplace complètement le fichier image lui-même. Et comme tout ce code se trouve dans notre fichier HTML d'index, il est considéré comme ayant la même origine en toutes circonstances. Nous pouvons donc effectuer des opérations avancées sur les pixels avec un canevas HTML sans déclencher d'erreur de canevas contaminé. Laisse-moi te montrer. C'est facile à faire fonctionner maintenant, je n'ai pas vraiment envie de dessiner l'élément d'image lui-même, alors je prends son identifiant et je le cache avec du CSS. Au lieu de cela, je veux le dessiner sur Canvas où le JavaScript, je passe à l' effet principal de la classe et je crée une nouvelle propriété appelée cette image à points. J'ai pointé cette variable vers cet élément d'image en utilisant son identifiant comme d'habitude. Nous avons donc une variable pointant vers l'image de l'étoile ici sur la ligne 110. Dessinons-le sur Canvas. Ici, j'ai dit que la largeur de la toile était de 500 pixels. Tout comme j'ai cette méthode de dessin de texte. Pour que notre code reste organisé, je vais créer une méthode distincte pour dessiner l'image. Je ne veux pas l'appeler une image de dessin car ce nom existe déjà pour une méthode Canvas intégrée. Je vais appeler cette méthode personnalisée, par exemple dessiner une image de champ de flux pour plus de clarté. À l'intérieur, je prends ce contexte de points et j'appelle la méthode de dessin d'image intégrée. Il a besoin d'au moins trois arguments, l'image à dessiner et coordonnées x et y pour la dessiner. Pour le tester, je vais appeler Draw Flow Field Image from inside render car je ne suis pas défini en largeur et en hauteur en ligne 148, l'image est dessinée à sa taille d'origine. Nous pouvons le redimensionner ou l'étirer en transmettant des valeurs de largeur et de hauteur, 300 avec 100 de hauteur. Que diriez-vous d'une toile sur toute la largeur et sur toute la hauteur ? Agréable. Et si je voulais que l'image soit centrée exactement au milieu du cannabis, quelle que soit la taille choisie. C'est également très simple. Je crée une variable d'assistance appelée taille de l'image. Disons que je veux que la largeur et la hauteur de l'image soient égales à 70 % de la largeur du canevas. Je l'utilise ici comme largeur et hauteur. Oui Maintenant, j'ai indiqué la coordonnée X au milieu du cannabis. Donc, cette largeur de point est multipliée par 0,5 et je fais moins la moitié de la taille de l'image. L'image est centrée horizontalement. Pour la coordonnée verticale y, je fais la hauteur du canevas multipliée par 0,5. Le milieu du type correspond à la verticale moins la taille de l'image multipliée par 0,5. Parfait. Il s'agit d'une formule très simple pour centrer l'image au milieu du canevas HTML. Cela tient au fait que les images sur Canvas sont dessinées de la même manière que rectangles depuis le coin supérieur gauche vers la droite et vers le bas, en fonction de leur largeur et de leur hauteur. Si je le redimensionne maintenant à n'importe quelle taille, il sera toujours dessiné au milieu du Canvas. Je vais faire 80 % de la largeur de la toile, par exemple, comme je l'ai déjà expliqué, ici, nous créons une dégradation du champ de flux, nous dessinons quelque chose sur Canvas. Ensuite, nous analysons ce type de nous à l'aide texte, de la forme ou de l'image dessinée dessus pour obtenir des données en pixels afin de créer une grille de champs vectoriels à partir de celles-ci en convertissant les couleurs en angles. Toute cette logique de la partie précédente est déjà en place. ne me reste donc plus qu' à remplacer cette partie où l'on dessine du texte par du code qui dessine l'image. J'appelle Draw Flow Field Image et c'est parti. C'était facile. Je n'ai pas vraiment envie de dessiner l' image réelle de l'étoile dessus comme ça. Au lieu de cela, je pars d' ici et je veux le dessiner derrière les particules uniquement lorsque le mode de débogage est actif. Ainsi, à partir de ce bloc de code, nous pouvons maintenant activer et désactiver le mode de débogage en appuyant sur la lettre D du clavier pour afficher et masquer le champ vectoriel, la grille et l'image source. Je peux modifier la taille de l'image. Nous pouvons voir que tout reste toujours centré et que tout fonctionne bien. Si je redimensionne Canvas, il redimensionnera l' image avec celui-ci. Parce que j'ai dit que la taille de l'image de l'étoile devait être égale à 80  % de la largeur de la toile. 40. Trucs de manipulation des couleurs: Je ne pouvais pas laisser ça et te laisser faire tes propres expériences. Mais encore une fois, je jouais beaucoup avec le code et je me demandais comment conserver et utiliser les couleurs d'origine de l'image source. Hein ? Maintenant, nous utilisons les couleurs de ce tableau de couleurs à points sur la ligne 25, les couleurs de l' image source elle-même ne sont pas visibles. Autre que de les utiliser pour déterminer les angles du champ d'écoulement. Nous sommes déjà en train de scanner cette image à la recherche de données en pixels, alors pourquoi ne pas essayer de l'utiliser ? J'ai écrit plusieurs solutions différentes à cette fin. J'ai décidé de vous montrer celui-ci pour les raisons que j'expliquerai au fur et à mesure de l'implémentation Si vous avez des idées pour améliorer cette base de code, n' hésitez pas à me le faire savoir. Sur chaque objet particulaire, je vais stocker une propriété distincte pour le rouge, le vert et le bleu. Cela n'est pas nécessaire si je viens de prendre les couleurs telles qu'elles sont de l'image d'origine. Mais lorsque vous verrez à quoi cela ressemble, vous conviendrez probablement que nous avons besoin d'un moyen de passer d'une couleur à l'autre de manière dynamique et progressive au fur et à mesure que les particules et les lignes se déplacent d'une cellule à l'autre sur le champ de flux. C'est pourquoi j'aurai besoin des trois couleurs séparément comme ceci. Laisse-moi te montrer pourquoi. Je vais concaténer la déclaration de couleur RGB ici. N'hésitez pas à utiliser un modèle littéral ici à la place Si c'est votre syntaxe préférée, je vais simplement utiliser RGB plus, plus une virgule, plus un vert plus une virgule, plus bu plus un crochet fermant. Maintenant, nous pouvons modifier la couleur des particules qui s' y trouvent en définissant ces deux valeurs différentes. OK, ça marche bien. Je vais ici dans la méthode init où nous avons dessiné ce fichier image d'origine sur Canvas et nous l'avons scanné pour obtenir des données en pixels. J'aurai besoin de trois valeurs pour le rouge, le vert et le bleu. Je les rends donc disponibles en les insérant en tant que propriétés supplémentaires dans un tableau de champs de flux. Maintenant, c'est un peu comme une analyse de données en pixels cellule par cellule, ligne par ligne. Chaque fois que nous saisissons une nouvelle cellule dans le champ de flux dégradé, nous stockons toutes ces données pour chaque cellule de la grille à l'intérieur de notre tableau de champs de flux. Je sais maintenant quelle est la valeur rouge, verte et bleue de chaque cellule de la grille. Je peux donc faire correspondre la couleur des particules à ces valeurs lorsque les particules circulent sur Canvas. Dans la méthode de mise à jour sur la classe de particules. Dans cette zone, j'extrait l'élément à cet index particulier dans tableau de champs de flux dans une variable simplement parce que je voulais que la syntaxe ce bloc de code soit plus facile à lire. De plus, pour des raisons de performance, j'ai extrait cet index du tableau une seule fois, puis j'utilise cette référence existante à plusieurs endroits. Maintenant, je peux le remplacer ici et ici. C'est le même code. Nous venons de le refactoriser. Ainsi, dans cette zone, nous extrayons la valeur de l'angle d' un réseau rempli pour gérer le mouvement des particules. Dans cette zone, je vais extraire les valeurs de couleur de cette cellule dans le champ de flux. Je voulais uniquement les cellules contenant les données en pixels de l'image si leur alpha est supérieur à zéro, car je connais les cellules transparentes avec zéro alpha ou l'arrière-plan de l'image. On s'en fout de ceux d'ici. Donc, si cette cellule n'est pas transparente, utilisez cette propriété de lecture par points sur cet objet particulaire. Nous l'avons définie à la ligne 25 et l'avons réglée pour lire la propriété que nous venons d'extraire de propriété de lecture du champ de flux contenue dans cette cellule particulière du champ de flux sur lequel la particule se déplace actuellement. Nous ferons de même pour ce vert foncé et ce bleu foncé. Maintenant, je souhaite utiliser ces valeurs de couleur mises à jour pour créer à nouveau une chaîne de couleurs RGB. Je copie donc la ligne 28 et je l' utilise ici à la ligne 62. Agréable. Nous voyons les couleurs réelles de l'image. Cela signifie beaucoup de calculs supplémentaires par image d'animation à notre effet. Mais c'est à vous de décider si cela en vaut la peine ou si vous préférez utiliser des couleurs prédéfinies comme nous le faisions auparavant, je ne fais que vous montrer ce qui est possible. Comme d'habitude, tout cela peut être optimisé de différentes manières. Les techniques d'optimisation avancées pas dans le cadre de ce cours, mais nous en parlerons plus tard dans un autre cours. Vous pouvez voir que les lignes clignotent. Sais-tu pourquoi ? En effet, lorsque la particule passe d'une cellule bleue à une cellule blanche, par exemple, la couleur de toute la longue ligne que la particule traîne derrière elle prend instantanément cette nouvelle couleur. Cela changera instantanément la couleur de toute la ligne, car chaque ligne n'est qu'un appel de dessin. Nous pouvons donc simplement changer la couleur d' une partie de cette ligne avec le code que nous avons écrit jusqu'à présent. Encore une fois, plusieurs solutions s'offrent à vous. Je pourrais ajuster notre code pour vérifier si la couleur a changé. Ensuite, utilisez cette couleur mise à jour uniquement pour certains segments de ligne. Ou ce que je vais faire ici, changer la couleur de toute la ligne. Mais au lieu que ce changement de couleur se produise instantanément, je vais progressivement calculer la différence entre les deux couleurs en plusieurs étapes d'animation. Ainsi, les couleurs ne s'échangeront pas instantanément, elles passeront lentement. Comment faisons-nous cela avec le code ? Puisque nous sommes dans la section avancée, j'utiliserai une syntaxe simplifiée plus avancée. C'est ce qu'on appelle un opérateur ternaire, le seul opérateur JavaScript à trois opérandes. Nous l'utiliserons ici comme une simple déclaration d'une ligne si c'est le cas. Définissez une condition, une expression à évaluer. Si c'est vrai. Point d'interrogation, fais-le. Sinon, si c'est faux, deux points, faites-le. Ainsi, lorsque les particules circulent sur la grille du champ de flux, elles extraient les valeurs de couleur de ces cellules. Je vérifie si la valeur rouge de la particule est identique la valeur rouge de la cellule dans le champ de flux à cet indice. Si c'est le cas, ne faites rien et laissez-vous tranquille. Si la valeur rouge n' est pas la même, au lieu de la réattribuer instantanément à la nouvelle valeur rouge mise à jour, je vais simplement augmenter ou diminuer progressivement la valeur rouge d'une fraction de leur différence. Disons par un dixième de la différence. Nous aurions pu faire de même pour les valeurs d'angle ici, mais j'ai décidé qu'il était plus efficace en termes de performances d'utiliser une valeur définie stockée dans un caractère d'angle, même si l'utilisation de différences d' angle graduelles créerait des courbes plus naturelles dans le mouvement des particules. Tu peux essayer plus tard si tu veux. Quoi qu'il en soit, je vérifie si le rouge est le même que le nouveau rouge. Si c'est le cas, laissez-le tranquille. Si ce n'est pas le cas, rapprochez-les un peu plus, mais pas tout à la fois pour obtenir une transition progressive. Je ne vois pas si cela fonctionne ou non. Faisons donc la même chose pour le vert. Comme ça. Je dois faire attention à la syntaxe ici. Je pense que ça marche. Faisons-le aussi pour le bleu. Comme ça. Je suis juste en train de vérifier mon code pour voir si tout va bien après tout ce copier-coller. Oui, c'est bien. J'utilise 0.1 ici. Cette valeur déterminera la netteté ou la progressivité du changement de couleur, ainsi que la rapidité avec laquelle les couleurs passeront de la couleur existante à la nouvelle couleur cible. Avant que la transition de couleur ne se produise instantanément pour l'ensemble de la lignée de particules à segments multiples. Maintenant, ils se sont produits progressivement et l'effet est agréable. Je pense que c'est vraiment spécial. Je n'arrive pas à croire que nous sommes passés du tracé d'une seule ligne animée à des formes de champs de flux autour d'images. Si vous avez suivi jusqu'au bout, c'est une belle réussite, bravo, et félicitations pour votre dévouement à l'apprentissage. Vous êtes un codeur créatif, c'est sûr. Ici, sur la ligne 86, je peux contrôler nombre de particules qui redémarrent dans la forme et le nombre de celles qui redémarrent en dehors de celle-ci en modifiant le nombre de tentatives que nous donnons à chaque particule pour essayer donnons à chaque particule pour essayer de trouver cette forme entre les réinitialisations. Pour nous assurer que cela fonctionne, nous pouvons utiliser une autre image. Encore une fois, pensez à des images trop petites si possible. Des formes simples comme des étoiles conviennent parfaitement à cet effet. Vous pouvez télécharger l'autre image que j'ai fournie dans la section des ressources, ou vous pouvez utiliser votre propre image. Maintenant, je copie cette très longue ligne de code et je passe à l'indexation du code HTML. Nous avons besoin de ruptures de lignes pour remplacer la source. Donc, si tout se trouve sur une seule ligne, vous pouvez accéder à View Word Wrap pour créer lignes de frein dans VS Code Editor comme celle-ci. Pour remplacer la chaîne de données. Dans Visual Studio Code, je peux simplement sélectionner le début de cette très longue chaîne. Je fais défiler la page jusqu'à la fin. J'appuie sur la touche Shift de mon clavier. Et tout en maintenant la touche Shift enfoncée, je clique à l'endroit où je veux que la sélection se termine. Tous les textes intermédiaires seront surlignés et je peux appuyer sur Supprimer. Agréable. Maintenant que je sais que j'ai supprimé l'ancienne image, je colle la nouvelle chaîne de données en base 64 à partir de la nouvelle image. Je l'enregistre. Et voilà, nous dessinons une image différente et nous pouvons voir les couleurs sont correctement extraites des données de pixels source. Vous pouvez consulter le code source dans la section des ressources ci-dessous. Je vais également jouer avec le code maintenant et inclure certaines de mes autres expériences bonus que vous pourrez télécharger et inspecter si vous avez besoin d'inspiration pour approfondir cet effet. J'aime les projets de codage créatifs parce que nous en apprenons davantage sur l'animation ainsi que sur le programme et les principes généraux. Nous avons utilisé de nombreuses fonctions de manipulation de tableaux et de boucles aujourd'hui, par exemple, elles sont toutes très importantes dans toutes les branches du codage, pas seulement pour l'animation. Merci beaucoup d'avoir passé du temps avec moi. J'espère que tu as eu beaucoup de valeur aujourd'hui. Je te verrai plus tard.