Codage créatif : images et logos

1. Projet 1 : effets de tranche et de dés sur les images: Je voudrais vous présenter une formule spéciale de physique du mouvement. Et une fois que vous saurez comment cela fonctionne, vous serez prêt à créer les effets interactifs les plus épiques. de bien comprendre ce que fait le code Il est très important de bien comprendre ce que fait le code si vous voulez avoir un contrôle complet et si vous voulez être en mesure expérimenter et de créer vos propres effets nouveaux et uniques. C'est pourquoi, comme toujours, nous n'utilisons aucun framework ni aucune bibliothèque, uniquement du Javascript classique et de la programmation orientée objet. Découvrons quelques animations en tranches et dés sur des images adaptées aux débutants animations en tranches et dés sur des images adaptées aux et abordons trois techniques fondamentales et très importantes qui vous permettront de vous préparer à l'ensemble ultime effets de manipulation d'images. Comme toujours, ce cours est adapté aux débutants, mais une compréhension de base du HTML, du CSS et du Javascript est nécessaire pour pouvoir suivre et comprendre réellement. 2. Installation HTML, CSS et JavaScript: Je crée trois fichiers dans le dossier de mon projet, un index HTML, style CSS et un script S. Dans l'index HTML, je crée une page Web simple standard. Je lui donne un titre. Je lie ma feuille de style, je crée un élément HTML à cinq canevas avec un identifiant de canvas one. Et je lie mon fichier de script. Je vais lui donner l'attribut defer pour assurer que tout le contenu de la page est chargé avant que le script n' exécute IntySSS, je donne une bordure à mon élément de canevas Je le centre au milieu de la page Web, fois verticalement et horizontalement. En utilisant la technique de la position absolue. Comme cela, dans le script GS, nous utilisons le canevas HTML standard, en configurant quatre lignes de code qui sont toujours les mêmes. Tout d'abord, nous pointons le script Java vers l' élément canvas à l'aide de son identifiant. Ensuite, nous prenons cette référence au canevas et nous appelons une méthode spéciale get context. Et nous instancions une API intégrée au canevas comme celle-ci. Nous pouvons maintenant utiliser cette variable CTX pour appeler toutes les méthodes de dessin sur toile afin d'accéder à ses propriétés Pour ce projet, j'ai défini la largeur du canevas à 500 pixels et la hauteur à 700 pixels. Je m'assure de définir la taille ici en script Java et non dans le style CSS pour m' assurer que élément et la taille de la surface de dessin de mon élément de toile sont définies sur ces valeurs. Pour éviter toute distorsion, nous allons découper les images en grille Chaque cellule de cette grille sera un objet distinct. Ici, j'ai un plan pour cet objet cellulaire. Nous allons également créer une classe. J'appelle par exemple effet le cerveau principal de la base de code. Nous gérerons l'état de l'ensemble de l'effet. À partir de là, le constructeur attendra le canvas comme argument à l'intérieur de I convert it en propriété de classe Oui, je peux extraire la variable canvas de la première ligne directement dans ma classe. Mais je préfère le faire de cette façon pour que mes cours restent plus autonomes par rapport à cette référence au canevas. Nous allons extraire avec et hauteur car je veux que les dimensions de l'effet correspondent à la taille de la toile. Je crée une instance de la classe en utilisant le nouveau mot clé. Il attend canvas comme argument, je lui passe la variable canvas de la première ligne. Si je consol l'effet, nous pouvons voir qu'il possède trois propriétés, canevas et la hauteur Tout fonctionne bien jusqu'à présent. 3. Comment organiser quelque chose en grille: Nous voulons découper la zone de canevas disponible en une grille. La largeur de chaque cellule sera la largeur du canevas divisée par, disons, 35. Nous voulons 35 cellules par ligne. La hauteur de chaque cellule sera égale hauteur du canevas divisée par 55. Nous voulons 55 lignes, 35 colonnes, 55 lignes. Utilisons la classe de cellule de la sixième ligne pour créer d'abord un seul objet de cellule. Tout le code contenu dans le constructeur de classe est exécuté ligne par ligne lorsque nous créons une instance de cette classe en utilisant le nouveau mot clé Si je fais cela, une instance de classe de cellule sera créée automatiquement. Au moment où je crée une instance de la classe d'effets, je consolerai la cellule Ok afin que nous puissions voir ses propriétés apparaître dans la console au fur et à mesure que nous les créons. C'est un bon moyen de vérifier si tout fonctionne au fur et à mesure que nous élaborons le projet Chaque cellule de la grille devra accéder aux propriétés de la classe d'effet principale. Une façon de le faire est de créer une référence pointant vers l'effet vers l' espace en mémoire. Les cellules de l'objet d'effet principal seront organisées en grille pour couvrir l'ensemble de la zone du canevas. Chaque cellule attendra des coordonnées x et Y afin de savoir exactement où elle doit se trouver dans la grille. J'ai transmis ce mot clé faisant référence à l'ensemble de cette classe d'effets Dans un premier temps, je veux dessiner cette cellule à la coordonnée 00. coin supérieur gauche du canevas, nous pouvons voir que l' objet de la cellule reçoit correctement les propriétés ici dans la console. Je veux que toutes les cellules aient la même largeur et la même hauteur, afin qu'elles aient toutes accès à la largeur et à la hauteur des cellules depuis l'objet d'effet principal. Nous avons maintenant suffisamment d' informations sur chaque cellule pour pouvoir la dessiner selon la méthode de dessin personnalisée du cannabis Nous nous attendrons au contexte comme argument. Encore une fois, je pourrais directement extraire CTX de la deuxième ligne, mais je préfère que mes classes soient plus indépendantes de leur portée lexicale Je vais le faire de cette façon. Chaque cellule ne sera qu'un rectangle noir. Pour l'instant, je peux le dessiner d'ici si je veux, mais ce ne serait pas pratique. Puisque l'image peut être composée de milliers de cellules. Nous les dessinerons tous à partir d' une méthode de rendu personnalisée comme celle-ci. Maintenant, j'appelle cette méthode de rendu depuis ma variable d'effet. Je passe le CTX à partir de la deuxième ligne. Nous voulons dessiner plusieurs cellules et je veux les organiser dans une grille. La première cellule sera ici horizontalement. La deuxième cellule sera là. Nous allons sauter par largeur de cellule horizontalement jusqu'à couvrir toute la ligne. Ensuite, nous passerons par hauteur de cellule verticalement à la ligne suivante. Nous allons répéter cette opération jusqu'à ce que nous couvrons toute la zone du canevas. Je vais tenir toutes les cellules dans un tableau. Je l'appellerai grille d'images. Pour obtenir cet effet, vous devez comprendre deux techniques fondamentales de codage créatif et deux, les techniques d'animation. Les deux sont extrêmement importants et peuvent être utilisés pour des milliers de choses différentes uniquement pour l'effet que nous produisons aujourd'hui. La première technique que nous devons comprendre est de savoir comment organiser n'importe quoi dans une grille. Nous allons le faire ici dans le cadre d'une méthode de création de grille personnalisée. Pour créer une grille, nous allons utiliser deux quatre boucles imbriquées. Imbriqué signifie qu'il existe une boucle à l'intérieur d'une autre boucle. La boucle extérieure gérera les lignes de la grille. Nous allons couvrir la toile de haut en bas, ligne par ligne. Nous allons commencer par le haut à partir de la coordonnée verticale zéro. Nous allons exécuter ces quatre boucles jusqu'à ce que nous atteignions la hauteur de la toile, c' est-à-dire jusqu'à ce que nous atteignions le bas Au lieu de sauter par une, nous sauterons toujours par hauteur des cellules pour nous assurer que chaque ligne a la bonne hauteur. Chaque fois que nous passons à une nouvelle ligne, nous utilisons quatre autres boucles pour parcourir toutes les cellules horizontales de cette ligne, de gauche à droite, de zéro à la largeur du canevas. Écrivons tout cela et nous allons rapidement récapituler le fonctionnement de la logique Organiser des objets dans une grille est une technique extrêmement utile à comprendre pour le codage créatif et aussi pour créer des jeux en deux D. Par exemple, chaque fois que nous passons à une nouvelle cellule de la grille, nous prenons un tableau de grille d'images et nous y introduisons une nouvelle cellule, en lui transmettant la référence à l'objet de l'effet. Cette fois, nous lui transmettons l'indice X de la boucle interne et l'indice Y de la boucle externe pour placer la cellule dans la grille au fur et à mesure que nous la créons ligne par ligne, de haut en bas. Pour récapituler, la boucle extérieure gère les lignes, la boucle intérieure gère les colonnes, les cellules placées horizontalement les unes à côté des autres À l'intérieur de chaque ligne, disons que nous sommes sur la ligne zéro, Y est un zéro, nous sommes en haut. Ici, nous entrons dans la boucle intérieure et nous poussons une cellule horizontale l'une à côté de l'autre, en sautant par la largeur de la cellule jusqu'à ce que nous atteignions la largeur du canevas. Nous sortons de la boucle intérieure. La boucle extérieure augmentera y en fonction de la hauteur de la cellule. Nous passons à nouveau à une nouvelle ligne, nous entrons dans la boucle intérieure, nous plaçons toutes les cellules de cette ligne de gauche à droite. Lorsque nous atteignons la largeur, nous sortons de la boucle intérieure, augmentons Y d'un, nous entrons dans une autre ligne. Et nous répétons ce processus jusqu'à ce que nous ayons les coordonnées x et y pour chaque cellule de la grille qui couvre l'ensemble du canevas. C'est une technique très utile si vous êtes débutant et c'est la première fois que vous la voyez. Ne vous inquiétez pas, cela aura plus de sens si vous l'utilisez plus souvent. Comme nous l'avons dit, tout le code du constructeur est automatiquement exécuté lorsque nous créons une instance de cette classe à l'aide du nouveau mot-clé Pour cette raison, je peux déclencher automatiquement des méthodes. À partir de là, j'appellerai create grid afin que lorsque nous créons une instance de classe d'effets, une grille d'objets cellulaires soit automatiquement créée et qu' une erreur apparaisse car nous n'avons pas cette cellule ici. Au lieu de cette ligne, je vais appeler chaque méthode sur la grille d'image du tableau à partir de la ligne 26. Pour chaque objet cellulaire que nous venons de placer dans ce tableau, j'appellerai sa méthode de dessin. Je veux dessiner toutes les cellules que nous venons de créer dans la console. Je peux voir que mon tableau contient 1 980 objets cellulaires. Je vais plutôt les caresser pour que nous puissions mieux voir la grille que nous venons de créer. Bon travail. Je peux modifier ces valeurs pour augmenter ou diminuer la taille de mes cellules. 4. Comment dessiner, recadrer et couper des images avec du code: Maintenant, je prends une photo. Idéalement, l'image doit être de la même taille que le canavas. Dans mon cas, c'est 500 fois 700 pixels. Je place l'image dans dossier de mon projet et je la référence ici. Je lui donne une idée de l'image du projet. Je ne veux pas dessiner l'élément IMG réel. Je ne lui en donne aucun affichage. Nous voulons dessiner cette image sur toile. Au lieu de cela, je l'intègre dans mon projet ici sur la classe d'effets principale. Cette propriété d'image dans le rendu, je l'appelle la méthode de dessin d'image intégrée. Et je lui passe l' image que je veux dessiner et les coordonnées X et Y. Où le dessiner, je peux déplacer l'image comme ceci. Je peux également lui donner des arguments optionnels de largeur et de hauteur. Et l'image sera étirée ou comprimée pour s'adapter à cette zone prédéfinie. Je veux découper l' image en morceaux. J'utiliserai donc à la place la version la plus longue de la méthode draw image avec neuf arguments. Cette version nous permet de mieux contrôler l'image que nous dessinons ou animons Nous lui transmettons l'image que nous voulons dessiner, source x, la source Y, largeur et la hauteur de la source, la zone que nous voulons recadrer entre l'image source et la destination X, la destination Y, largeur de destination et la hauteur de destination pour définir où dessiner ce morceau d'image recadré À destination de Cannavas, disons que je souhaite recadrer cette zone entre les coordonnées 00.200 Et je veux étendre cette pièce recadrée sur toute la toile Nous l'étendons de la coordonnée 00 au canevas. Avec la hauteur du canevas, nous avons maintenant un contrôle total . Ces quatre valeurs déterminent la zone de recadrage. Ces quatre valeurs déterminent où dessiner cette image recadrée Sur Destination Canavas, je veux que chaque cellule contienne un petit morceau d'image Je vais couper cette ligne. Au lieu de cela, je vais placer cette propriété d'image sur la cellule. Nous dessinons maintenant l'image plusieurs fois, une fois pour chaque cellule de la grille. Nous ne pouvons pas nous le permettre car Canvas est en fait très efficace pour dessiner des images. Il n'a pas besoin de calculer quoi que ce soit. Il prend simplement les données de l'image et les dessine. C'est une opération peu coûteuse par rapport au dessin d'une forme. Si je dessine la même image aux coordonnées x et y de chaque cellule, nous obtenons ceci. Si je le donne en hauteur, chaque cellule contient l'image entière. Nous savons déjà qu'il nous faut quatre arguments supplémentaires pour recadrer une partie de cette image. Source X, source Y, largeur de source et hauteur de source. Nous avons déjà organisé ces cellules dans une note. Nous avons déjà les valeurs du recadrage en coordonnées. Nous pouvons simplement le faire simplement. Maintenant, il semble que nous ne faisons que dessiner à nouveau une seule image. Mais en fait, à ce stade, nous dessinons une partie de l'image à partir de chaque cellule. Et les cellules combinées créent l'image complète. Comment puis-je le prouver ? Par exemple, je vais utiliser un index généré automatiquement Voici deux arguments dont nous avons besoin entre crochets. Dessinez uniquement la cellule dont l'indice est 300 ou 500. Dessinez uniquement les cellules dont l'indice est supérieur à 500 ou inférieur à 500. Moins de 600 801 000 201 300, je pense que nous avons prouvé ne s'agit plus d'une image unique, elle est composée de plusieurs pièces. 5. Comment animer des images avec du code: Pour la prochaine étape, je vais créer une boucle d'animation. Nous mettrons à jour certaines valeurs et redessinerons les cellules encore et encore pour créer une illusion de mouvement Je mets le rendu dans cadre d' animation de demande intégré que j'appelle. Et j'appelle Animate pour lancer l'animation. Cela semble statique, mais nous sommes déjà en train de l'animer. Je peux le prouver. Je donne à chaque cellule les propriétés de la diapositive X et de la diapositive Y. Des choses très différentes se produiront selon l' endroit où nous les ajouterons dans la méthode de dessin. Je les ajouterai aux coordonnées de la source X et de la source Y qui déterminent la zone de culture. Mais nous pourrions également les ajouter à la destination X et destination Y pour un ensemble d'effets complètement différent. Si chaque cellule possède la même valeur légère, l'image entière sera déplacée. Mais que se passera-t-il si nous les répartissons aléatoirement ? Cela les rend aléatoires une seule fois lors du chargement de la première page. Et si je créais une méthode de mise à jour et que je la répartissais aléatoirement pour chaque image d'animation ? Pour chaque image d'animation, nous appelons mise à jour et nous redessinerons toutes les cellules encore et encore. Intéressant J'espère que cela ne donnera pas mal à la tête à quelqu'un. Je peux également randomiser la diapositive Y comme ce magnifique chaos, Creative coding Je peux également faire glisser l' image sur le côté. Une valeur plus élevée, je suppose. Oui, bouge plus vite. Déplacez-vous dans la direction opposée, non ? Je pense que nous avons prouvé que nous animons effectivement. Nous pouvons également rendre la grille visible ici. 6. Interactivité de la souris: Je peux supprimer cette console. Je veux capturer les coordonnées de la souris. Je crée ici un objet qui les gardera pour moi. rayon sera la zone d'interaction autour de la souris dans laquelle les cellules réagissent d'une manière ou d'une autre à la présence de la souris. Je prends cette référence au canevas de la ligne 28 et j'ajoute l'écouteur d'événements Mouse Move Je peux déclarer des écouteurs d'événements ici dans le constructeur Nous savons déjà que cela signifie qu'ils seront automatiquement appliqués lorsque nous créerons une instance de classe d'effets. La seule chose ici est que la fonction de rappel ne peut pas être une fonction normale Il doit s'agir d'une fonction ES à six flèches pour nous permettre d'utiliser ce mot clé qui pointe vers cet objet d' effet et ses propriétés depuis ce rappel. Dans le cas contraire, il ne serait pas défini. Les fonctions de flèche héritent de cette référence, ce mot clé, de la portée parent Il peut conologuer l'objet d'événement généré automatiquement. Si je l'ouvre, nous voulons les coordonnées x et y du curseur de la souris. important ici, c'est que ces valeurs ne sont bonnes pour nous que si le canevas est en plein écran. Comme mon canevas n'est pas en plein écran, j'ai besoin de coordonnées X et Y qui tiennent compte de la zone blanche autour du canevas. Je vais devoir utiliser les valeurs de décalage X et de décalage Y. Ces propriétés tiennent plutôt compte espace blanc entre la page Web et le canevas pour nous donner la bonne position de la souris par rapport au canevas. Comme j'ai utilisé une fonction flèche ici, je peux accéder au domus x depuis le rappel et le configurer pour qu'il fasse un décalage x. Je fais de même pour la coordonnée verticale Y que j'ai testée en consolidant ces valeurs Je passe la souris sur le canevas et j'obtiens les coordonnées. 7. Comment trouver la distance entre 2 points: C'est maintenant la deuxième technique la plus importante que nous allons utiliser aujourd'hui. Nous voulons calculer la distance entre deux points dans un espace à deux D, dans ce cas, entre la souris et la cellule. Pour ce faire, j'ai besoin de D X, la distance entre la souris et cet objet de cellule sur l'axe X horizontal. J'aurai une propriété auxiliaire ici. J'appelle vitesse x sur l'axe X horizontal. Si je fais la diapositive x plus égale dx, le chaos est total Finissons-en avec ça. J'ai également besoin de D Y, la distance entre ces deux points sur l'axe vertical y. Pour calculer la distance entre ces deux points dans un espace à deux D, je dois calculer un hypoténus Nous avons ce côté et ce côté. La distance entre ces deux points est l'hypoténus, le côté le plus long du triangle droit Cela signifie que je peux utiliser la formule du théorème de Pitagora, qui ressemblerait à ceci en Mais comme nous sommes dans un environnement Java Script, nous pouvons également utiliser la méthode intégrée de l'hypoténus masted, qui nous donnera la même valeur, la distance entre la souris et cette cellule Je dis si la distance est inférieure valeur du rayon que nous avons définie sur l'objet de la souris. Nous allons faire un peu de physique des émotions. Nous allons créer une variable auxiliaire. J'appelle par exemple la force. Il sera égal au rapport entre la distance actuelle et le rayon, qui représente la distance maximale possible à l' intérieur de laquelle les cellules réagiront à la souris. J'ai dit vitesse x pour forcer pour chaque image d'animation, nous augmentons la zone de recadrage horizontale de la diapositive pour chaque cellule de cette vitesse horizontale V X. Lorsque je déplace la souris, il est clair que nous détectons déjà la distance. Je dis L. Si la distance est plus grande, assurez-vous que les cellules arrêtent de glisser. La vitesse verticale sera également égale à la force. Nous l'ajoutons ici. Je le définis ici. Je vais à nouveau arrêter le glissement dans l'instruction L. OK, nous y arrivons dès le chargement de la première page, nous constatons un certain mouvement dans nous constatons un certain mouvement dans le coin supérieur gauche à partir de la coordonnée 00. C'est parce que je mets la souris x et y sur null au début, mais dans ce cas, Javascript les voit comme 00. Même s'il est préférable de définir manuellement la valeur nulle, dans ce cas, je dois plutôt définir sur undefined Maintenant, il n'y a d' abord aucun mouvement dans le coin supérieur gauche qui l'a réparé. De plus, lorsque la souris quitte le canevas, la dernière position connue de la souris continuera d'interagir. Je copie ce bloc de code, je le transforme en événement de congé de la souris. Ici, nous allons également les définir sur undefined. Maintenant, nous avons l'animation. Uniquement lorsque nous déplaçons la souris sur Canavas. Nous réalisons de grands progrès. 8. Obtenir la direction du point A à point B: Maintenant, je veux que les tranches d'image s'étendent dans la bonne direction, directement ou vers la souris. C'est assez avancé. Si vous n'avez jamais utilisé math 82 auparavant, j'ai dû utiliser cette méthode pour quelques projets avant de mieux la comprendre. Ne vous inquiétez pas s'il n'est pas tout à fait clair après l'avoir utilisé une fois. Si vous êtes un débutant en animation, vous pouvez simplement revoir cette partie Ou vous pouvez regarder de nombreux autres tutoriels que j'ai réalisés dans lesquels j'utilise cette technique. C'est une technique qu'un codeur créatif utilise beaucoup. Et ce sera clair une fois que vous aurez commencé à l'utiliser et que vous aurez joué avec les valeurs pour voir ce qu'elles font. méthode mathématique 8102 intégrée nous donnera un angle en radians Nous pouvons utiliser cette valeur d'angle pour obtenir un angle entre deux points dans un espace à deux D et faire en sorte que deux objets se rapprochent ou s'éloignent l'un de l'autre. Dans ce cas, les deux objets sont le curseur de la souris et la cellule contenant la tranche de l'image. Nous sommes déjà en train de calculer DX et DY, distance horizontale et verticale entre la souris et la cellule La méthode 82 s'attend à ce que ces arguments nous donnent l' angle directionnel entre eux. Il attend y en premier et D x seconde. Il est important de se rappeler que c'est ainsi que fonctionne cette méthode intégrée. La méthode 82 nous donne un angle entre deux points, la souris et la cellule. Dans ce cas, il renvoie l'angle en radians entre l'axe x positif Et un rayon de 00 vers un certain point. La façon dont nous l'utilisons, le rayon passe de l'objet 1 de la cellule vers X et Y de la souris. Gardez à l'esprit que la souris peut être à droite ou à gauche de la cellule, ce qui signifie que nous pouvons obtenir des valeurs positives ou négatives. La plage de valeurs est comprise entre plus pi et moins pi. Si vous utilisez la souris premier ou en second dans en premier ou en second dans cette formule, vous obtiendrez un ensemble de valeurs différent. Les valeurs d'angle obtenues seront organisées différemment, mais dans le cadre du codage créatif, cela ne nous dérange pas vraiment , car une fois l'animation obtenue, si les objets se rapprochent, nous pouvons inverser leur direction en multipliant les valeurs par moins un Ce que je veux dire, c'est que nous pouvons ajuster le code ultérieurement aux valeurs que la méthode e deux nous donne. Je vais vous montrer pour récapituler. Pour nos besoins, la méthode e 2 prend DY et dx, la distance entre deux points sur un axe vertical et horizontal Sur la base de ces deux valeurs, cela nous donnera un angle entre moins pi et plus pi. Sous cet angle, nous savons dans quelle direction nous voulons pousser les objets pour qu'ils se rapprochent ou s' éloignent les uns des autres. La plage de valeurs entre moins pi et plus pi couvre l'ensemble de la zone circulaire. Parce que le cercle complet est égal à deux pi, 360 degrés, cela signifie que nous couvrons toutes les directions possibles sur un plan à deux D. Je sais que c'est beaucoup de mathématiques pour les débutants, ne ressentez pas la pression de bien comprendre tout cela à ce stade. La pratique montrera clairement qu' une fois que vous aurez compris cette technique, vous pouvez créer de nombreux effets vraiment sympas. L'effort en vaut la peine. Bien, nous allons maintenant transmettre cette valeur d'angle résultante aux méthodes sinus et cosinus, qui cartographieront leur position le long d'une zone circulaire. sinus et le cosinus peuvent fonctionner ensemble s'ils reçoivent le même angle d'entrée pour créer un mouvement circulaire ou une émotion ondulatoire, selon la façon dont nous les utilisons. Comme le sinus et le cosinus convertissent ces valeurs d'angle entre une plage de moins un et plus un, nous ne verrons pratiquement aucun mouvement . Avec ces petites valeurs, nous multiplions Avec ces petites valeurs, ce petit vecteur directionnel par la force augmentant son rayon Nous savons que la force est directement liée au rapport entre la distance actuelle entre les deux objets, souris et cellule, et leur distance maximale possible. Cela ajoutera beaucoup de physique agréable à notre projet, et le mouvement sera fluide et naturel. Nous en sommes au point où je vérifie quelle motion nous recevons. Ensuite, je vais simplement ajuster les valeurs pour obtenir le mouvement que je souhaite. Je synchronise les sorties sinus et cosinus en les échangeant, nous obtenons ce mouvement C'est ainsi que vous pouvez obtenir un mouvement circulaire s'éloignant du point central Dans ce cas, notre point central est le curseur de la souris. J'ai cette instruction L ici pour remettre l' image en place lorsque la souris s'éloigne. Mais pour obtenir un mouvement parfaitement fluide où les éléments de l'image glissent d'avant en arrière. Idéalement, le tout doit être calculé en tant que valeur unique. Ensuite, nous appliquons cette valeur finale aux propriétés des diapositives x et y. Cela nous donnera de bien meilleurs résultats, mais comment s'y prendre ? 9. Formule de physique du mouvement (friction et assouplissement): Je veux avoir ici un calcul qui soit le résultat de deux forces concurrentes. La première étape consiste à s'éloigner de la souris si la souris et la cellule sont suffisamment proches l'une de l'autre. La deuxième partie de ce calcul sera une force qui ramènera les images à leur place d'origine. Comme ces deux forces feront partie d' une formule unique, nous éviterons de faire des allers-retours car une seule valeur sera calculée ici à la fin. Développons cette formule et expliquons-la. La première partie est la force qui déplace les pièces. Et la deuxième partie consistera à essayer de les remettre là où ils étaient à l'origine, à leurs positions initiales. Maintenant, ils reculent trop vite. N'oubliez pas que l' ensemble de cette méthode de mise à jour s'exécute 60 fois par seconde, encore et encore. Recalculer ces valeurs pour chaque image d'animation. Je ne veux pas repousser la diapositive complètement en arrière, mais seulement d'une fraction de la différence entre la position actuelle et la position par défaut d'origine. J'ai multiplié en simplifiant pour créer ces étapes individuelles entre les deux comme ceci. Je veux qu'ils reviennent lentement là où ils étaient. J'essaie différentes valeurs et je vois ce qui se passe maintenant. En même temps, je veux que la force de poussée diminue avec le temps, s' affaiblissant progressivement. Dans le monde réel de la physique, nous appelons cette force de friction. Pour chaque image d'animation, je veux que la force ne représente que 80 % de la puissance de poussée. signifie qu'elle s' affaiblira progressivement et qu'elle finira par être dominée par la seconde moitié de la formule qui agit contre elle, essayant de ramener la cellule de la formule qui agit contre elle, en essayant de ramener la cellule à sa place d'origine d'une fraction de la différence entre sa position actuelle et sa position initiale d'origine Je fais de même pour la coordonnée verticale y. Nous faisons glisser la zone de recadrage de chaque cellule en appliquant deux forces concurrentes sur celle-ci Ces forces agissent l'une contre l'autre, mais elles font toutes deux partie d'une même formule. Nous obtenons un mouvement fluide. Par conséquent, si la distance entre la cellule et la souris est inférieure à la valeur du rayon que nous avons prédéfinie, nous calculons la force verticale et horizontale qui éloigne les diapositives de la souris. Cette force de poussée est appliquée aux valeurs des diapositives x et Y en tant que première partie de la formule. Et cette force de poussée diminue pour chaque image d'animation par friction, la vitesse de cette décroissance peut être modifiée en donnant à cette friction une valeur différente Nous appliquons alors une force dans la direction opposée. S'il y a un avantage ici, nous avons besoin d'un moins ici. Et cette force opposée ne représente qu'une fraction de la différence entre la position initiale des particules et leur position actuelle. Au fur et à mesure que la force de poussée diminue et que l'animation s'exécute, côté droit de la formule finit par prendre dessus et les diapositives retrouveront leur place d'origine Je vous encourage à jouer avec toutes ces valeurs. Swap, sinus et cosinus, échange plus et moins, donne de la friction et atténue les différentes valeurs Vous pouvez également appliquer cette formule à x et y des cellules à la place, pour obtenir un effet complètement différent. Une fois que vous aurez effectué vos propres expériences et trouvé au hasard des effets intéressants et uniques, ces calculs auront encore plus de sens. Je peux commenter les rectangles que nous dessinons car cela rendra l'effet plus performant Dessiner des images sur toile est bon marché, mais dessiner des formes coûte cher. Même les rectangles sont l'une des formes les plus simples, la valeur que nous accordons à la facilité définira la rapidité avec laquelle les pièces se remettent en place La valeur que nous attribuons à la friction définira la vitesse à laquelle la force de poussée diminue par image d'animation. frottement doit toujours être inférieur à un et supérieur à zéro. Si vous lui en donnez plus d'une, la force de poussée augmentera à l' infini et l'image ne infini et l'image réassemblera jamais d' elle-même. Non seulement ces valeurs elles-mêmes, mais également le rapport entre ces deux valeurs affecteront le mouvement. Désormais, la force de poussée ne diminue que 1 000 par image d'animation, ce qui signifie qu'elle reste élevée pendant longtemps point consiste essentiellement à découper la distance entre la position initiale de base et la position actuelle en plusieurs parties et à la déplacer vers cette position d'origine, une tranche à la fois Si ce point est égal à 0,01 nous nous rapprochons de la position d'origine de 100 % de la distance entre la d'origine et la position actuelle par image d'animation Mais comme la poussée force le boîtier 10 % par image d'animation, elle finira par permettre aux cellules de se remettre en place. Je ne sais pas si mes explications à la fin ont aidé ou rendu les choses plus confuses. Le meilleur moyen est de jouer vous-même avec les valeurs, voir quel mouvement vous obtenez, et cela commencera à avoir du sens. Maintenant que nous avons abordé cette technique, vous êtes prêt pour une version plus avancée de cet effet, dans laquelle nous transformons chaque pixel de l'image en particule et nous leur appliquons une formule physique similaire. Nous pouvons également augmenter le nombre de cellules qui composent l'image. Plus il y a de cellules, plus l'effet sera exigeant en termes de performances . Bien entendu, en ce moment, je demande à Javascript de dessiner 3 500 images 60 fois par seconde et de faire glisser leurs zones de recadrage autour du calcul de la physique du mouvement pour chaque cellule Cela fonctionne toujours assez bien sur mon ordinateur, mais je ne devrais probablement pas utiliser autant de cellules. Cela montre simplement à quel point Canvas est efficace pour le rendu des images. 10. Déplacer les cellules autour: OK, c'était la version adaptée aux débutants du cours. Je reviens pour vous faire quelques expériences rapides sur le tir. Si je supprime cette console, nous avons ces quatre variables pour déplacer la zone de recadrage à l'intérieur de chaque cellule et pour la faire glisser Je vais créer quatre autres variables. Et ces quatre vont déplacer la position X et la position Y de la cellule pour la position horizontale et verticale de chaque cellule. Et la vitesse X et la vitesse Y pour leurs déplacements. La vitesse, la diapositive X et la diapositive Y sont appliquées ici à la source X et à la source Y. Les arguments transmis à la méthode de dessin d'image déterminent la position du recadrage dans la zone Nous faisons glisser cette récolte dans la zone en utilisant VX et VY. Maintenant, je prends en position X et en position Y un ensemble distinct de variables et je les applique aux arguments de destination X et de destination Y. Cette zone sera consacrée aux effets de récolte, cette zone sera consacrée à la position et au mouvement des cellules. Ils travailleront bien ensemble. Si nous le faisons, eh bien, voyons comment cela se passe. La vitesse X sera la position cible finale moins la position de départ. Nous allons à nouveau procéder à des assouplissements. Nous allons découper ce voyage en dix parties. Et nous allons déplacer la cellule vers sa position cible un dixième de la distance par image d'animation. La vitesse Y est également la position cible moins la position de départ divisée par une certaine facilité de valeur. Je peux maintenant prendre ces valeurs et les appliquer à la position X et à la position Y, puisque nous utilisons celles présentes dans l' image de dessin comme destination X et destination Y. Cela déplacera en fait les cellules elles-mêmes de cette façon Ils bougent tous en même temps, donc ça évolue comme ça. Nous pouvons rendre cela beaucoup plus intéressant de différentes manières. Je vais vous en montrer quelques-unes. Par exemple, chaque cellule aura une valeur aléatoire de 2 à 12. Et nous allons alléger chaque cellule par sa propre facilité aléatoire. Dans valeur 2,52, nous pouvons modifier les Les cellules voleront à partir de différents points, différents coins de la toile, par exemple, selon ce que nous faisons ici. Coin inférieur droit, bas au milieu. Bien, je vous l'ai dit, nous allons rendre cela plus intéressant. Notez que les images réagissent toujours à la souris en faisant glisser la zone de recadrage. 11. Optimisations de performance: Je peux aussi les caresser, mais je dois utiliser les positions X et Y ici. Oui, c'est trop cool. Le fait de caresser ces rectangles affecte les performances. Réduisons le nombre de cellules ici. Ça a toujours l'air génial, tu ne trouves pas ? Essayons de trouver une bonne taille de cellule. Le seul problème est que ce bloc de code s'exécute en permanence. Je souhaite économiser des performances et arrêter de calculer ces petites valeurs de pixels Les cellules sont suffisamment proches de leur position cible initiale au moment où l'image a été assemblée ou du moins presque assemblée suffisamment près. Je dis uniquement si la vitesse x est supérieure à 0,1 ou si la vitesse Y est supérieure à 0,1 . Ensuite, déplacez-les. Sinon, nous supposons qu'ils ont déjà assemblé l'image. Ces calculs ne sont pas nécessaires. Maintenant, nous n'avons plus de vitesse x ni de vitesse Y. Nous devons les définir lors de la création de la cellule Donnons à chaque cellule une méthode de démarrage personnalisée. Ici, nous allons régler les vitesses. Nous appellerons automatiquement cette méthode de démarrage depuis le constructeur. Le problème est que les cellules peuvent être à gauche ou à droite. Les vitesses peuvent être négatives ou positives. En gros, je veux exécuter ce code uniquement lorsque les vitesses sont inférieures à -0,1 et plus 0,1, ce qui signifie que les cellules sont suffisamment éloignées de leurs positions cibles et je veux qu'elles se déplacent Supprimons simplement le point négatif. En les enveloppant dans la méthode absolue, comme ceci, il renverra le nombre absolu. OK, ce bloc de code déplace chaque cellule de sa position de départ vers sa position cible. Une fois que les cellules sont suffisamment proches et que l'image a été assemblée, nous n'exécutons plus ce bloc de code pour garantir les performances. 12. Expériences de codage créatives: Je veux tester si ce bloc de code cesse réellement de s'exécuter. Nous transmettions la valeur d'index des cellules à partir de la boucle pour chaque boucle. Ici, je veux que chaque cellule ait une valeur d'index unique qui augmente d'un pour chaque nouvelle cellule que nous créons. Je passe cette valeur au constructeur de classe de cellules. En tant que quatrième argument, je m'assure qu'il est attendu ici et qu'il est converti en propriété de classe. Je vais consoler l'index de chaque cellule ici. Je veux m'assurer qu'ils arrêtent tous d' exécuter ce calcul à un moment donné, lorsque les cellules sont suffisamment proches leurs positions cibles et que l'image a été assemblée, la limite de proximité que nous voulons qu'elles soient peut être modifiée ici et ici. Oui, nous pouvons voir que tous les index cessent d'être verrouillés à un moment donné Une telle console ralentira votre projet. Nous devons nous assurer de le supprimer lorsque nous n'en avons pas besoin. Nous pouvons faire bien d'autres choses. Chaque cellule possède une valeur d'index unique. Nous appelons automatiquement la méthode de démarrage lorsque nous créons chaque cellule. Nous pourrions également les retarder en reportant le délai fixé. Ici, nous lui transmettons la fonction de rappel. Combien de temps attendre avant que cela ne fonctionne ? Je ne veux pas tous les retarder de 500 millisecondes. Chacune sera retardée par sa propre valeur d'indice. Callback exécutera la méthode de démarrage et cela nous donnera une erreur La raison en est ce mot clé, il devient indéfini dans le cadre de ce rappel Nous avons déjà rencontré ce problème avec les rappels et ce mot clé ici, dans les écouteurs d'événements Nous savons qu'il existe une solution simple, car les fonctions de flèche en héritent de la portée parent Nous retransformons l'appel en fonction de flèche, et voilà, nous avons un délai personnalisé. Nous pouvons augmenter ce délai en multipliant l'indice ici où la zone de recadrage des cellules continue de glisser Pendant que toutes ces choses se produisent, c'est bien, maintenant je peux changer les positions de départ pour obtenir un ensemble de différents effets intéressants. Que diriez-vous du milieu ? Au lieu de placer les cellules dans le tableau, je vais les décaler, remplir le tableau de cellules par l'autre bout, et les cellules proviendront du dos de l'image comme ceci Si vous rencontrez des problèmes de performance, je vous recommande de retirer le charbon rectangulaire de la ligne 32, sinon vous pouvez dessiner moins de cellules. En ajustant propriétés de hauteur des cellules sur le verre à effet, nous pouvons les faire venir du haut au milieu. Comme ça. Nous pouvons également randomiser leur X de départ et obtenir un effet différent. Que diriez-vous d'un X aléatoire et d'un Y inférieur ? Nous pouvons également effacer la vieille peinture entre chaque image d'animation pour obtenir un effet comme celui-ci. Qu'en est-il du X aléatoire et du hasard Y0x, du Y aléatoire X négatif, et du hasard Y0x et Ils se déplacent tous avec une aisance constante. Ensuite, je peux obtenir des modèles plus organisés en ajustant ces deux valeurs. Je t'ai donné tellement d'autres valeurs que tu peux modifier. Il est maintenant temps pour vous de tirer parti de ce que nous avons appris et de créer votre propre combinaison unique. Nous avons un contrôle total et nous comprenons le fonctionnement de ce code. Si vous n'êtes pas sûr de certains d'entre eux, jouez avec les valeurs et observez ce qui se passe. Cela va commencer à avoir plus de sens. À terme, nous pourrons porter cela à un tout autre niveau. En faisant de chaque cellule un petit pixel de l'image, nous pouvons obtenir des images composées de beaucoup plus de pièces. Transformez les images en effets de particules et même en pluie de particules ou en feu de particules, par exemple. Si vous êtes prêt à faire passer vos images au niveau supérieur, je vous verrai dans la partie suivante. 13. Volume d'introduction inférieur: Javascript est un outil puissant. Explorons les secrets des techniques de dessin et d'animation dans développement web frontal moderne. Dans ce cours, nous allons commencer par dessiner un simple rectangle et une image sur des canavas HTML Nous allons découvrir comment transformer ces rectangles en un système de particules. Il s'agira d'un système de particules intelligent capable recréer et de mémoriser des formes à partir de données de pixels À partir de n'importe quelle image, je vais vous montrer comment donner à chaque particule une physique telle que la friction et l'assouplissement, et nous ajouterons quelques interactions avec la souris où nous pouvons diviser l'image en pixels individuels et elle se reconstituera automatiquement. Rejoignez-moi et découvrons comment transformer des images en œuvres d'art numériques interactives. 14. Leçon 1: Nous commençons par créer trois fichiers, index HTML, style CSS et script GS. J'ouvre l'index HTML. Dans mon navigateur Internet, j'utiliserai Google Chrome. Dans l'index HTML, je crée un balisage de page Web de base. J'utilise l' éditeur de code Visual Studio avec l'extension met Je peux donc simplement appuyer sur le point d' exclamation et la touche Tab pour obtenir un modèle de page Web de base comme celui-ci. Cette vidéo est une introduction au canevas HTML. Mais je suppose que vous connaissez quelques notions de base du script Java. Donnez un titre à ma page Web. Par exemple, de superbes effets Javascript. Je lie ma stase à un fichier comme celui-ci. Je crée un élément de canevas HTML avec une idée de canevas un. L'élément de toile HTML est utilisé pour dessiner des graphiques sur une page Web. Nous pouvons dessiner des formes statiques, ainsi que des animations interactives dynamiques qui réagissent aux entrées des utilisateurs, ce que nous allons faire aujourd'hui. L'élément canvas est un contenant pour nos œuvres d'art, c'est notre tableau d'art. Nous pouvons utiliser Javascript pour y dessiner des formes, des lignes, du texte ou des images. Cela peut sembler très basique, mais une fois que vous comprenez le fonctionnement de Canvas, vous pouvez créer une variété infinie d'art numérique, jeux interactifs et de graphismes Web. Dans ce cours, nous explorerons ce qui peut être fait avec les images et nous passerons des bases à des effets avancés vraiment intéressants. Hop, je crée un élément de différence avec une classe de contrôles, et à l'intérieur, nous aurons un bouton avec une idée du bouton Warp et un texte qui dit Lorsque nous cliquons dessus, l'image sera divisée en particules individuelles et l'image se réassemblera à nouveau. Automatiquement, nous pourrons contrôler la vitesse et le poids des particules lorsqu'elles se déplacent. Ce projet portera également sur deux physiques en D. Ne vous inquiétez pas, ce n'est pas si compliqué si vous procédez étape par étape avec moi pendant que nous écrivons le code. Nous allons également lier le fichier script G en bas de page. Pour lier notre logique de script Java dans Styssss, je commence par une réinitialisation globale pour m'assurer que notre page apparaît de la même manière dans tous les navigateurs. J'utilise le sélecteur astérisque pour cibler tous les éléments de la page, et je mets la marge à zéro Et si vous ajoutez un identifiant de toile à zéro, vous aurez un fond bleu C'est juste temporaire pour que je puisse voir où il se trouve sur la page lorsque je positionne avec une classe de contrôles qui sera définie sur position absolue. Cela le supprimera du flux de documents et le placera au-dessus de l'élément de canvass Nous devons nous assurer que les boutons qu'il contiendra ne sont couverts par rien et qu'ils sont toujours cliquables J'ai donc fixé son indice z à 100, en le plaçant tout en haut devant tous les autres éléments. 15. Leçon 2: Je reviens à l'index HTML et je crée un élément d'image. Je lui donne un identifiant d'image avec la source de l'image. Il va falloir faire un petit truc. Mes fichiers image sont prêts sur mon bureau. C'est juste une image normale au format PNG avec un arrière-plan transparent. Si je place simplement cette image dans le dossier de mon projet et que je pointe l'attribut source de l'image vers elle comme nous le ferions normalement, nous pourrons dessiner cette image sur le canevas, mais nous ne pourrons pas l'analyser pour les données en pixels et la diviser en particules. Si nous essayons de le faire, nous obtiendrons une erreur indiquant que le canevas a été entaché par des données d'origine croisée Cette erreur ne devrait se produire que lorsque vous exécutez votre code localement. Une fois le projet téléchargé sur un serveur en ligne, le fichier PNG de la source sera considéré comme ayant la même origine. Mais nous voulons que ce projet fonctionne à tout moment. Nous ne voulons pas déclencher d'erreur même lorsque nous travaillons localement de cette manière. Pour contourner l'avertissement relatif au canevas contaminé, nous allons convertir l' image elle-même en code Nous attribuons ce code comme source ici. De cette façon, l'image elle-même fera partie du fichier HTML d'index. Par conséquent, il sera considéré comme même origine en toutes circonstances, la plupart des gens ne savent pas que les images sur le Web peuvent être décomposées en une seule très longue ligne de code. Nous appelons cela une chaîne en base 64. Cette ligne de code contient toutes les données de l'image. En remplacement complet du fichier PNG que nous avons ici. Je peux convertir mon image au format base 64 en dessinant l'image sur le canevas, puis en appelant la méthode intégrée à deux URL de données sur l'élément du canevas, transformant le canevas entier avec cette image dessinée dessus en un écran de données. Aujourd'hui, nous utiliserons une option encore plus simple pour ce faire et nous utiliserons l'un des nombreux sites Web disponibles qui le feront rapidement pour nous. J'ouvre une autre fenêtre de navigateur et je tape sur Google PNG two base 64. Je sélectionne le premier lien sur le site en ligne Png tools.com. Si vous souhaitez utiliser les mêmes images que moi, vous pouvez les télécharger dans la description de la vidéo. Les images sont des ennemis du didacticiel du jeu Steampunk Fish que j'ai créé récemment Je peux simplement prendre l' image et la glisser-déposer ici sur le côté droit. Il génère du code en base 64 pour moi. Pour que le code fonctionne, je dois m'assurer que la chaîne commence par l'image de deux points de données, PNG base 64, comme ceci. Si cela ne commence pas comme ça pour vous, assurez-vous simplement de cocher cette case. Nous avons pris un fichier image PNG et nous avons converti l'image entière en une ligne de code. Cette chaîne contient désormais toutes les positions des pixels et les valeurs de couleur, remplaçant ainsi complètement le fichier image lui-même. N'importe quel navigateur Internet peut comprendre cette chaîne et en tirer l'image. Vous souhaitez apprendre à utiliser l'autre méthode et à générer cette chaîne dynamiquement avec Javascript sans utiliser de site Web externe. C'est ce que je fais dans mon autre cours, où nous créons des formes fractales complexes et les transformons en flocons de neige qui tombent Je mets en évidence cette très longue chaîne en base 64 et je la copie dans l'index HTML. Je place le pointeur de ma souris entre les guillemets l'attribut SRC et je colle tout cela dedans Si j'enregistre les modifications que nous dessinons, vous pouvez voir que la chaîne de base 64 contient l'image entière. Pas besoin du fichier PNG proprement dit. De cette façon, nous pouvons le manipuler avec Javascript comme nous le souhaitons. Vous pouvez cliquer sur Afficher Word Wrap pour basculer entre une vue où les lignes sont coupées comme ceci, nous pouvons voir tout le code Et d'un autre point de vue où tout est sur une seule ligne comme celle-ci, vous pouvez voir qu'il y a beaucoup de code. Il y a des années, j'ai publié une version simple de cet algorithme. Et cela ne fonctionnerait qu' avec de petites images, 100 fois 100 pixels. Tout ce qui est plus important deviendrait très lent et lent. Cette version fonctionne même avec des images plus grandes, car nous allons contrôler le nombre de particules dans lesquelles l'image se décompose à l'aide d'un script Java. Cette base de code comporte de nombreuses améliorations et optimisations. Vous verrez que plus l'image que vous utilisez est grande, plus la chaîne en base 64 est longue. Au lieu de pointer la source de l'image directement vers un fichier PNG, nous avons converti notre image Angular Fish en une chaîne de base 64. Cela nous permettra d' analyser l'image à la recherche données en pixels et d'y créer toutes sortes d' effets et d' animations intéressants sans avoir à faire face à des erreurs d'origine croisée. Je n'ai pas vraiment envie de dessiner l'élément image sur ma page Web. Je veux dessiner cette image sur mon élément de toile bleue. Je vais prendre le tag IMG et je l'affiche, aucun, l'image est masquée. Mais nous pouvons toujours y accéder avec Java Script pour le dessiner sur le canevas lorsque nous en avons besoin. Il se trouve toujours ici dans l'index HGML. 16. Leçon 3: Dans le script GS, je crée un écouteur d' événements pour l'événement de chargement. Tout le code de ce projet sera écrit dans cet écouteur d'événements L'événement Load garantira que l'ensemble du site Web, y compris toutes les ressources dépendantes telles que les feuilles de style et les images, est entièrement chargé et disponible avant que nous n'exécutions le moindre code Javascript. Lorsque je travaille avec du code Javascript qui dépend d'une image, une erreur courante m' est arrivée à de nombreuses reprises : je n'ai pas attendu que l'image soit chargée et que j'obtenais une toile vierge. Le code Javascript est exécuté très rapidement. Le chargement des images peut prendre quelques millisecondes supplémentaires. Nous ne pouvons pas percevoir cette différence à l'œil nu, mais si le code Javascript s'exécute avant le chargement de l'image, nous aurons un canevas vide chargé . L'écouteur d'événements est l'un des moyens de gérer ce retard Nous commençons par une simple configuration de canevas. Je crée une variable constante. J'appelle par exemple canvas. Et j'ai pointé du doigt l'élément HTML canvas que nous avons créé dans le fichier HTML d'index. En utilisant get element by ID, nous lui avons donné l'ID de canvas one. Comme cette variable, j'appelle CTX. raccourci pour le contexte est cette variable de canevas de la deuxième ligne get context. Le contexte est une méthode spéciale qui ne peut être appelée que sur une variable contenant une référence au HTML. get context à cinq éléments du canevas La méthode get context à cinq éléments du canevas attend un argument, nous appelons le type de contexte, nous pouvons lui transmettre deux D ou Web GL. Aujourd'hui, nous allons travailler avec deux D lorsqu'ils appelés ainsi : cette méthode get context créera une instance d'un objet appelé canvas Rendering Context two D. Cet objet contient tous les paramètres du canevas et toutes les méthodes de dessin de toile intégrées dont nous aurons besoin aujourd'hui. Je peux demander à CTX d'y jeter un œil . Je peux le voir ici. Si nous l'ouvrons, nous pouvons voir tous les paramètres du canevas par défaut, appelés état du canevas. Vous pouvez voir, par exemple, que le style de remplissage par défaut est défini pour bloquer ici, police par défaut est de dix pixels, san serif, la largeur de ligne par défaut est d'un pixel Nous pouvons remplacer n'importe lequel de ces paramètres en leur attribuant une valeur différente à l' aide d'un script Java, et nous le ferons Si je clique sur le prototype ici et que je le développe, nous pouvons voir toutes les méthodes à deux D intégrées. Nous pouvons utiliser ces méthodes pour dessiner rectangles, des cercles et des lignes Nous pouvons créer des dégradés et manipuler des images. Aujourd'hui, nous aborderons les bases et nous approfondirons la méthode de dessin d'image qui se trouve ici. Je vais également vous montrer comment analyser une image pixel par pixel et l'utiliser pour créer une animation magique avec la méthode get image data qui vient d'ici. Supprimons la console et fermons la console du navigateur. Je prends la variable canvas de la deuxième ligne et j'accède à sa propriété de largeur. Je l'ai réglé sur la largeur de la fenêtre pour que le canevas couvre toute la fenêtre du navigateur horizontalement. Je fais également la même chose avec la hauteur pour qu'elle recouvre l' écran verticalement. 17. Leçon 4: Aujourd'hui, je veux vous montrer comment créer ce que l'on appelle un système de particules. manière générale, un système de particules est un ensemble de petits objets. Chaque particule est un petit élément graphique. Il peut s'agir d'une image ou d'une forme. Nous pouvons programmer l'apparence et le comportement de ces particules d'une certaine manière afin de simuler différents types d'effets. Cela peut être du feu, des balles rebondissantes, essaims d'ennemis dans un jeu ou bien d'autres choses encore Aujourd'hui, nous allons transformer chaque particule en pixel dans notre image et nous allons les diviser en morceaux individuels. Dans le même temps, ces particules réagiront à la souris d'une manière dynamique agréable, en impliquant la physique et la friction. Pour créer toutes ces particules, nous allons utiliser une classe Javascript personnalisée. Je l'appelle par exemple particule comme celle-ci avec une majuscule P. Les classes Javascript sont des plans pour créer de nombreux objets similaires Javascript est un langage basé sur un prototype. Chaque objet Javascript possède une propriété interne appelée prototype qui peut être utilisée pour étendre les propriétés et les méthodes de l'objet. Les classes en Javascript sont appelées sucres syntaxiques. Il s'agit d'une syntaxe plus propre et plus élégante basée sur héritage basé sur un prototype Javascript natif qui imite les classes d'autres langages de programmation En termes simples, la classe est un modèle. Chaque fois que nous appelons cette classe de particules, elle crée un nouvel objet particulaire pour nous. Nous aurons également une classe que j'appellerai Effect. Cette classe gérera l'ensemble de l'effet, toutes les particules en même temps. Le dernier élément dont nous aurons besoin ici est classe Animation Loop Particle comme modèle pour créer des objets particulaires individuels, classe d' effets pour gérer toutes les particules en même temps Et une boucle d'animation Pour rendre tout cela animé et interactif, je vais donner ma méthode de constructeur de classes de particules Il s'agit d'une méthode spéciale lorsque j'appelle ma classe de particules ultérieurement avec le nouveau constructeur de mots clés. Le constructeur exécute tout le code qu'elle contient pour créer un nouvel objet vide et lui attribue des valeurs et des propriétés en fonction du plan qu'il propriétés en fonction du plan Définissons ce plan directeur. Définissons les propriétés de nos particules. Chaque particule sera une partie d'une image, un pixel. Il devra être placé dans une position bien précise et toutes les particules combinées constitueront l'ensemble de l'image. Cela signifie qu'il aura besoin de coordonnées x et y pour que le script Java sache où le dessiner sur HTML Canvas, comme dans le développement Web en général. Nous avons un axe X horizontal qui part de zéro pixel sur la gauche et augmente à mesure que nous nous déplaçons vers la droite. Nous avons également un axe Y vertical commençant à zéro pixel en haut et augmentant à mesure que nous descendons. Par exemple, la position 5 100 sur le canevas sera ici à 50 pixels de la gauche sur l'axe X et 100 pixels du haut sur l'axe Y. Dans un premier temps, je vais définir deux coordonnées x et y, 00 pour le coin supérieur gauche du canevas. Lorsque nous définissons des propriétés sur une classe Java, nous disons « x », qui signifie « propriété x ». Sur cette instance de classe de particules créée par le constructeur, à l'heure actuelle, nos particules seront des rectangles car Canvas dessine plus rapidement des rectangles que Dans la version précédente de cet effet, j'utilisais des cercles. Cette fois, nous serons en mesure d' attirer plus de particules de manière efficace. La taille de chaque rectangle de particules sera de trois fois trois pixels. 18. Leçon 5: Pour dessiner un rectangle sur le canevas, il suffit de prendre variable CTX de la troisième ligne qui contient une instance de l'API de jointure en D de canvas two et d' appeler la méthode de rectangle phil intégrée comme celle-ci Il attend quatre arguments position x et y où le dessiner et, avec la hauteur du rectangle, il remplira ce rectangle de couleur. Si nous ne définissons pas le style de remplissage, nous savons que le style par défaut de l'élément du canevas est le noir. Voici notre rectangle noir dessiné 120 pixels à partir de la gauche sur l'axe x et à 150 pixels du haut sur l'axe y, 100 pixels de large et 200 pixels de haut. S'il s'agit de votre premier projet de canevas, vous devriez peut-être publier la vidéo et modifier ces valeurs afin de comprendre comment les rectangles, comme les images sur le canevas, sont dessinés à partir des coordonnées que nous leur donnons Et ils vont vers la droite et vers le bas à partir de ce point, en fonction de leur largeur et de leur hauteur. Nous pouvons également dessiner des cercles, des courbes ou des lignes et créer différentes formes et animations. Avec ceux-ci, vous pouvez dessiner à peu près n'importe quoi. Une fois que vous savez comment fonctionne la toile, si vous êtes intéressé par l'art qui peut être réalisé avec des lignes, consultez mon cours sur les fractales. Aujourd'hui, nous allons approfondir les images. Incorporons notre image de poisson angulaire dans le projet et dessinons-la sur toile. 19. Leçon 6: Je crée une variable constante, que j'appelle image un. J'ai pointé vers l'élément d'image en utilisant son image d'identification, que je lui ai donnée ici. Maintenant, je peux prendre la variable CTX de la deuxième ligne qui, comme nous l'avons dit, contient toutes les propriétés et méthodes du canevas que j'appelle la méthode de dessin d'image intégrée comme celle-ci, méthode de dessin d'image attend au moins trois arguments L'image que nous voulons dessiner et les coordonnées x et y. Où le dessiner ? Je lui passe l'image 1 à partir de la ligne 7 et je veux dessiner l'image depuis le coin supérieur gauche de la toile à partir des coordonnées 00. Je lui donne une position de x 100. Nous poussons l'image sur 100 pixels vers la droite. Si je le transmets sur 100 pixels sous forme de coordonnée verticale y, je pousse l'image sur 100 pixels vers le bas. Je peux également le transmettre en option avec des arguments et des arguments de hauteur. Si nous ne transmettons pas la valeur et la hauteur, Javascript dessinera simplement l' image à sa taille d'origine. Si je lui donne une largeur de 100 pixels et une hauteur de 100 pixels, on comprime l'image dans une zone de 100 fois 100 pixels et on la déforme. Je peux étirer et comprimer l'image de cette façon, ce qui peut être utile pour certains effets. Si c'est la première fois que vous utilisez la méthode de dessin d'image, vous pouvez publier la vidéo et lui transmettre différentes valeurs pour x Y avec et hauteur afin de voir comment cela affecte la position et la taille de l'image. 20. Leçon 7: Nous savons maintenant comment configurer un projet Htimlcnvas. Nous savons comment utiliser la méthode de remplissage du rectangle pour dessiner un rectangle simple et comment utiliser une méthode de dessin d'image pour dessiner une image sur une toile. Utilisons notre classe de particules pour dessiner quelque chose. Je supprime ce code. Supposons que je veuille que chaque particule soit un carré noir de 30 fois 30 pixels. Je donne à ma classe de particules une méthode personnalisée. J'appelle, par exemple, Draw. Son travail sera de prendre les propriétés du constructeur de classe et de dessiner des particules de cette taille à ces coordonnées Commençons par le simple , puis nous le refactorisons pour utiliser les bonnes pratiques de programmation orientée objet Encore une fois, pour dessiner quelque chose, je prends la variable CTX de la troisième ligne À partir de là, j'appelle la méthode Phil Rectangle intégrée. Nous avons déjà appris que Phil Rectangle attend quatre arguments x, y, width et height. Ce script Java sait où dessiner ce rectangle et quelle doit être sa taille. Je passe ce x à partir de la ligne 11. Ce point y de la ligne 12 sous forme de coordonnées x et y. Je le passe au format didot à partir de la ligne 13. Comme avec la même propriété de taille de disdote hauteur comme celle-ci Nous définissons notre classe de particules. Nous avons un plan avec toutes les propriétés. Et nous avons une méthode de dessin dans laquelle nous prenons ces propriétés et les utilisons pour dessiner un rectangle. Comment exécutons-nous réellement ce code ? Pour le dessiner, nous devons créer une instance de cette classe. Je crée une variable constante, que j'appelle particule 1. Je l'ai défini comme égal à une nouvelle particule comme celle-ci. Le nouveau mot clé est une commande spéciale dans le script Java. Il recherchera une classe portant ce nom. Il trouvera cette classe ici à la ligne 9 et déclenchera automatiquement son constructeur Le constructeur de méthode créera un nouvel objet vide et lui attribuera propriétés en fonction du plan qu'il Comme cet objet particulaire a été créé à l'aide de cette classe de particules, il a accès à la méthode de dessin que nous avons définie à la ligne 15. Nous pouvons simplement l'appeler ainsi, Particle One Draw. Sympa. Nous utilisons notre classe pour créer et dessiner une particule. Je peux ajuster sa position X et Y ici pour le déplacer. Je peux également modifier sa taille. 21. Leçon 8: Si je veux créer plus d'une particule, je peux simplement répéter ce code et créer des variables pour la particule deux, particule trois, etc., mais cela ne serait pas très efficace. Notre code doit être sec, ce qui est un acronyme de Don't Repeat yourself. Nous essayons également de tout conserver dans une structure de code orientée objet. Nous pouvons utiliser cette classe d'effets que nous avons définie à la ligne 20 pour créer et gérer plusieurs particules. Les particules manipuleront des particules individuelles. classe d'effet gérera l'ensemble de l'effet, toutes les particules en même temps. Je lui donne un constructeur cette fois. Le constructeur s'attend à ce que deux arguments pour la largeur et la hauteur proviennent de l'extérieur Cela garantira que l'effet tient compte des dimensions actuelles du canevas. À l'intérieur je convertit ces arguments en propriétés de classe. Je dis de prendre la largeur qui a été transmise comme premier argument au constructeur de classe et de la convertir en propriété width Sur cette instance particulière de classe d'effets que vous créez en ce moment, il en va de même pour la hauteur. Nous aurons également la propriété d'un réseau de particules. Au départ, je l'ai défini sur un tableau vide, il contiendra tous les objets de particules actuellement actifs créés par classe de particules. À partir de la neuvième ligne, je donnerai à ma classe d'effets une méthode personnalisée que j'appellerai Par exemple, elle aura pour tâche d' initialiser l'effet et de remplir le réseau de particules de la ligne 24 avec de nombreux objets particulaires Commençons par une seule particule. Je prends ce réseau de particules et j'appelle la méthode push intégrée dessus. La méthode push ajoute un ou plusieurs éléments à la fin du tableau. Je veux introduire une particule, alors je lui transmets une nouvelle particule comme celle-ci. Le nouveau mot clé passera à la ligne 9 et déclenchera la création par le constructeur de classes de particules d'un nouvel objet particulaire basé sur ce plan. Je supprime ce code. Nous allons dessiner des formes à l'intérieur de notre classe d'effets. Maintenant, pour dessiner cette particule que nous détenons dans un réseau de particules, je crée une méthode de dessin. Cette méthode utilisera une matrice de particules de la ligne 24 et fera appel à chaque méthode de matrice intégrée à celle-ci. La méthode for each exécute une fonction fournie une fois pour chaque élément du tableau J'utiliserai ici l' ES six moderne en matière de fiscalité. C'est ce qu'on appelle la fonction flèche. Désormais, un réseau de particules ne contient qu'une seule particule, mais il peut également en contenir plusieurs. Je dis juste de prendre ce réseau de particules et d'appeler chacune d'entre elles. Attribuez à chaque objet du tableau un nom de variable temporaire (particule sur chacun de ces objets appelle la méthode de dessin associée. À partir de la ligne 15, nous avons une classe d' effets avec méthode init pour remplir le réseau de particules avec des objets particulaires et la méthode draw pour les dessiner tous. Cette méthode de dessin sur la ligne 29 dessine toutes les particules, l'effet complet. Cette autre méthode de dessin à la ligne 15 indique à quoi ressemblera chaque particule. Dans notre cas, nous avons décidé de les dessiner sous forme de simples rectangles noirs Pour l'instant, pour dessiner les particules, je crée une variable constante. J'appelle effect, et je lui donne une instance de ma classe d' effets comme celle-ci. À la ligne 21, je peux voir que le constructeur attend des arguments pour la largeur et la hauteur Je lui transmets la largeur du canevas à partir de la quatrième ligne et la hauteur du canevas à partir de la ligne cinq. Consolons cette variable d'effet pour vérifier si tout fonctionne jusqu'à présent Sympa. Je peux voir mon objet d'effet et il possède des propriétés de largeur et de hauteur ainsi qu'un tableau de particules actuellement vide. Je prends ma variable d'effet et je appelle méthode à partir de la ligne 26 comme ceci. Cette méthode devrait y introduire une particule. Je m'enregistre dans la console, oui, nous avons un objet particulaire à l'intérieur et je peux voir qu'il possède des propriétés x, y et size qui ont toutes des valeurs correctes. Si vous voyez « indéfini » dans certains d'entre eux, cela signifie qu'il y a une erreur quelque part dans votre code Il est bon de vérifier de temps en temps fur et à mesure que vous écrivez votre code, si toutes vos propriétés ont des valeurs, particulier si vous rencontrez des problèmes ou des erreurs pendant que Consolc est là pour nous aider Maintenant, je peux à nouveau prendre la variable d'effet et j'appelle la méthode draw à partir de la ligne 29. Je supprime également la console. Bien, nous dessinons une particule en utilisant notre nouvelle structure de code. Je peux déplacer la particule en modifiant ces valeurs. 22. Leçon 9: Nous faisons quelque chose de mal. Ici, nous extrayons la variable CTX de la troisième ligne directement dans notre classe Nous voulons que nos classes et nos objets soient modulaires, autonomes autant que possible et indépendants du code qui les entoure, de leur environnement lexical Plutôt que d'extraire directement le CTX, je vais le convertir en variable et le transmettre Je vais m'assurer que la méthode draw sur la classe de particules attend le contexte comme argument. J'utiliserai ensuite cette variable de contexte ici pour appeler la méthode du rectangle phil à partir de celle-ci. Je vais passer la variable tx de la troisième ligne comme argument à la méthode draw. Lorsque nous l'appelons sur la classe d' effets à la ligne 36, nous lui donnons ici un contexte de nom de variable comme celui-ci. Nous transmettons cette référence à la méthode de dessin sur la classe de particules. Cette référence sera transmise ici. À partir de là, nous appelons Phil Rectangle. En procédant ainsi, nous nous assurerons que notre code est modulaire. C'est considéré comme une bonne pratique plutôt qu'auparavant. 23. Leçon 10: Nous pouvons également randomiser les positions des particules. Plutôt que de coder les coordonnées en dur, je peux définir la position horizontale x un nombre aléatoire compris entre zéro et le poids du canevas. position verticale Y peut être une valeur comprise entre zéro et la hauteur du canevas. Maintenant, chaque fois que je rafraîchis ma page, particules se trouveront à une position aléatoire différente quelque part sur le canevas. Je pourrais également randomiser la taille si je le souhaite. Dans cette méthode, je crée deux particules en copiant cette ligne. Bien, nous avons maintenant deux particules que nous créons à l' aide du nouveau mot-clé. Chaque fois que le constructeur s'exécute sur la ligne dix, il attribue des positions aléatoires différentes en x et en y à chacune d'elles Je peux également créer trois particules comme celle-ci, comme nous l'avons fait avec la variable CTX Ici, nous extrayons la largeur et hauteur du canevas directement dans notre classe, qui rend cette classe dépendante du code qui l'entoure. Nous sommes déjà en train de convertir largeur du canevas et la hauteur du canevas, deux propriétés de classe sur la classe d'effet ici en les transmettant au constructeur de classe d'effets à la ligne 36 Supprimons ces deux particules pour assurer que chaque particule connaît la taille actuelle du canevas. Je m'assure que le constructeur de la classe de particules attend une référence à l'ensemble de la classe d'effets. À l'intérieur, d'effets. À l'intérieur je convertit cette référence en une propriété de classe appelée effet de point N'oubliez pas que les objets du script Java sont appelés types de données de référence. Cela signifie qu'en transmettant une référence à l'ensemble de l'objet d'effet à cet objet particulaire, je ne crée pas de copie de la classe d' effet à chaque fois que je crée une nouvelle particule. Cet effet de point n'est pas une copie, c'est juste une référence pointant vers un espace de mémoire où la classe d' effet principale est stockée. Elle présente de nombreux avantages. La principale est que lorsque nous mettons à jour des valeurs sur une classe d'effet, ces modifications seront immédiatement visibles à partir de cette propriété d'effet de point sur les objets particulaires. Cet effet de point pointe maintenant vers l' ensemble de cette classe d'effets, et nous pouvons accéder à toutes ses propriétés depuis l'intérieur de la classe de particules. ce fait, je peux remplacer la largeur du canevas par la largeur des points à effet de distance, faisant référence à la valeur de la ligne 23 Comme nous le savons, cette valeur représente la largeur du canevas. Nous pouvons également le faire ici à la ligne 13 et utiliser la hauteur du point à effet dist, une valeur provenant de la ligne 24. Si vous êtes débutant, transmettre de telles valeurs peut prendre un certain temps pour bien comprendre. Ne t'inquiète pas trop. Si vous éprouvez des difficultés, vous deviendrez bon dans ce domaine en écrivant davantage de base de code orientée objet. Maintenant que nous savons que la classe de particules attend un argument pointant vers la classe d'effet principale. Ici, à la ligne 28, où je crée une instance de classe de particules, je passe cet effet comme argument, une référence à tout cela, à cette classe entière. Cependant, comme nous sommes dans cette classe d'effets, je dois plutôt utiliser ce mot-clé. Ce mot clé utilisé dans cette classe représente l'ensemble de la classe elle-même. Lorsque j'actualise la page, une particule est générée aléatoirement et dessinée quelque part sur le canevas. Sympa. Nous transmettons largeur du canevas à la classe d' effets sur la ligne 35, convertissons en cette propriété de largeur de pensée sur la ligne 23 et utilisons cette valeur sur la ligne 12 pour calculer la position des particules. Nous faisons de même pour la hauteur. Maintenant, je peux à nouveau copier cette ligne pour créer de nombreuses particules. Mais que faire si je veux 100 particules ? Copier cette ligne de code deviendrait peu pratique. C'est un scénario parfait pour utiliser une boucle à quatre boucles. Je supprime tout ce code, et je vais plutôt l'enrouler dans une boucle à quatre boucles. Comme ça. L'indice commence à zéro, tant que l'indice est inférieur à dix, augmente l'indice d'un et crée une particule. Ces quatre boucles s'exécuteront dix fois et créeront dix particules. Quatre boucles sont excellentes pour nous aider à réduire la répétition du code. 24. Leçon 11: Dessinons également une image. Mais parce que je ne veux pas intégrer cette image une variable dans mes classes depuis l'extérieur. Permettez-moi d'en faire une propriété de classe sur la classe d' effet comme celle-ci. Je l'appellerai Did image. Nous pouvons le dessiner en prenant le contexte et en appelant draw image dessus. Je lui passe l'image en points de la ligne 24.00 pour les coordonnées x et y. Nous dessinons à nouveau nos poissons sur toile. Mais cette fois, nous le faisons à partir d'une base de code orientée objet autonome. 25. Leçon 12: images sur toile sont dessinées depuis le coin supérieur gauche, droite et vers le bas. Laissez-moi vous montrer comment centrer une image exactement au milieu d'un canavas Je vais créer une variable auxiliaire appelée ce centre x. Ce sera la largeur du point à partir de la ligne 21 Ainsi, la largeur de la toile multipliée par 0,5 au milieu de la toile à l' horizontale, point au centre Y est la hauteur du point à partir de la ligne 22 fois 0,5 au milieu de la toile Je peux utiliser ces nouvelles propriétés sous forme de coordonnées x et y transmises à la méthode de dessin d'image. Maintenant, l'image est dessinée à partir du point sur la toile qui se trouve exactement au milieu. Cependant, l'image n' est pas centrée. L'image en points est une référence à l' élément IMG que nous avons créé dans l'index HTML. Permettez-moi de confirmer que cet élément d'image a automatiquement généré des propriétés de largeur et de hauteur Si je conspologe la largeur de l'image en points, vous pouvez le voir. Il indique que la hauteur des points d'une image de 500 pixels est de 369 pixels. Maintenant que nous le savons, nous pouvons supprimer la console. Et nous pouvons utiliser la largeur et la hauteur de l'image pour décaler la position de la moitié de la largeur de l'image et de la moitié de la hauteur de l'image. Pour le centrer, je crée une propriété appelée point x sur la classe d'effets. Dans ce cas, distotex signifie position horizontale de l'image du poisson Il s'agira du point central x à partir de la ligne 25, donc le milieu de la zone du canevas horizontalement moins la moitié de la largeur de l'image. Maintenant, je peux passer didot x à la méthode de dessin d'image sur la ligne 37. Et l'image est centrée horizontalement. Faisons de même pour la position verticale Y point centre Y moins la hauteur du point de l'image Sdt multipliée par 0,5. Je le remplace ici Pour centrer une image sur le canevas, il suffit de trouver le milieu du canevas verticalement et horizontalement, et de décaler ces valeurs de moitié de la largeur et de moitié de la hauteur de l'image. 26. Leçon 13: Nous dessinons donc notre poisson sous forme d'image et nous dessinons dix particules. Faisons-en 100 particules. Faisons de chaque particule un carré, cinq fois cinq pixels. Vous pouvez jouer avec la taille. Chaque fois que je rafraîchis ma page, toutes ces centaines de particules prennent une position aléatoire quelque part sur le canevas. Nous pouvons également rendre la taille des particules aléatoire, comme ceci. Nous pouvons également faire bouger ces particules. Nous traiterons de cette logique ici. Dans la méthode de mise à jour, j'aurai besoin d'une nouvelle propriété appelée V x velocity x, qui est essentiellement une vitesse horizontale. Réglons-le sur 11 pixels par image d'animation. Pour l'instant, je crée également la vélocité y et je l'ai également réglée sur plus un. Dans la méthode de mise à jour pour chaque image d'animation, nous voulons augmenter la position horizontale à partir de la ligne dix par la valeur de Vx à partir de la ligne 13 Nous voulons également augmenter la position Y de la valeur de V Y. Chaque particule aura sa propre méthode de mise à jour qui définira son mouvement Je crée également une méthode de mise à jour sur la classe d'effets. Le travail de cette méthode consistera à appeler la mise à jour tous les objets particulaires actuellement actifs à l'intérieur. Je prends un réseau de particules. Pour chaque objet particulaire du tableau, j'appelle sa méthode de mise à jour, qui est créée à la ligne 19 comme ceci. Si j'appelle la méthode de mise à jour comme celle-ci, il ne se passera pas grand-chose. Toutes les particules sont dessinées une seule fois et leurs propriétés sont mises à jour une seule fois. n'y a rien En appelant les méthodes de mise à jour et de dessin encore et encore, nous avons besoin d'une boucle d'animation. Je prends ces deux lignes de code et je les insère dans cette fonction personnalisée que j'ai appelée animate. J'appelle la méthode intégrée du cadre d'animation de demande. Il se trouve sur l'objet de la fenêtre, mais il peut être appelé directement. Comme cette requête, la méthode du cadre d'animation appellera une fonction que nous lui transmettrons en argument avant le prochain repeint du navigateur Quand je le passe, le nom de sa fonction parent est animé. Il dessinera constamment toutes les particules et les mettra à jour encore et encore, créant l'animation avec le cadre d'animation de demande. Le nombre de rappels est généralement de 60 images par seconde. Il essaiera généralement de correspondre au taux de rafraîchissement de l'affichage dans la plupart des navigateurs modernes. Il mettra également automatiquement pause l'animation lors de l'exécution dans les onglets d'arrière-plan pour améliorer les performances et l' autonomie de la batterie de l'ordinateur. Lorsque j'appelle animate et que j' exécute mon code, nous obtenons ceci. Nos rectangles noirs se déplacent et laissent des traces. Les sentiers sont les anciens cadres d'animation. Si nous voulons voir uniquement l'image d'animation actuelle, nous devons supprimer le canevas chaque fois que nous mettons à jour les positions des particules. Je le fais en utilisant la méthode intégrée du rectangle clair. Je veux effacer le canevas de Corin à 00 heures. Je veux effacer toute la toile. Je prends des valeurs d'ici. La largeur de la zone dégagée sera égale à la largeur du canevas. La hauteur sera la hauteur de la toile. Nous sommes en train d'animer. Félicitations, vous êtes un programmeur créatif. Vous venez de construire un système de particules fonctionnel. Les particules se déplacent parce que nous ajoutons des vitesses x et y à leurs coordonnées x et y actuelles. Si nous voulons que chaque particule se déplace à une vitesse différente, je peux leur attribuer une vitesse aléatoire à partir d'une plage prédéfinie lorsqu'elles sont créées pour la première fois ici dans le constructeur de classes de particules Je peux, par exemple, définir leur vitesse sur un nombre aléatoire de 0 à 10. C'est très Si vous voulez que les particules se déplacent dans toutes les directions possibles, et pas seulement vers la droite ou vers le bas, nous pouvons augmenter la plage de vitesse en partant de nombres négatifs. Cette ligne représente un nombre aléatoire compris entre moins un et plus un. Les particules dont la valeur est négative se déplaceront vers la gauche. Les particules présentant une valeur positive ici se déplaceront vers la droite pour obtenir une coordonnée verticale y. C'est pareil. Les particules présentant une valeur négative ici se déplaceront vers le haut. Les particules avec une valeur positive se déplaceront vers le bas puisque chaque particule se verra attribuer une vitesse aléatoire x et une vitesse y différentes au moment où elles sont créées pour la première fois par le constructeur Ici, le rapport entre V, x et y donnera à chaque particule une direction et une vitesse de mouvement différentes . Chaque particule aura un vecteur différent. Supprimons le fond bleu et laissons le fond du canevas transparent. Comment faire en sorte que mes particules prennent la forme et la couleur de l'image et comment leur faire en sorte qu'elles se souviennent de cette forme et la recréent Si nous le cassons avec la souris, nous sommes sur le point de l'apprendre maintenant. Ceci conclut la première partie du cours où nous avons abordé les bases du canevas HTML. Nous avons appris à créer un système de particules de base simple et à manipuler, dessiner et centrer des images sur une toile. La deuxième partie de ce cours sera plus avancée et nous en apprendrons davantage sur la manipulation d'images et la physique des particules en profondeur. Félicitations, si vous êtes débutant et que vous suivez le loin, vous vous en sortez très bien. Si le code décrit dans les leçons suivantes semble plus difficile, ne vous inquiétez pas. Dans cette prochaine partie, nous entrons dans du codage créatif avancé. Mais je pense que tu peux le faire. Nous allons procéder étape par étape, et je ferai de mon mieux pour vous aider à comprendre. Allons-y. 27. Leçon 14: Il s'agit de notre classe de particules personnalisée. Son travail consiste à créer une nouvelle particule à chaque fois que nous l'appelons. Avec le nouveau mot clé. À l'heure actuelle, nos particules ressemblent à de petits carrés noirs. En fait, je veux pixeliser l'image et faire chaque bloc de pixels une particule d'une couleur spécifique Cette particule doit également se souvenir de sa position dans l'image globale, car nous voulons pouvoir la déplacer et faire d'autres astuces avec elle l'image globale, car nous voulons pouvoir , et nous voulons toujours qu' elle retrouve le chemin du retour à sa position initiale pour recréer l'image Ici, à la ligne 36, nous avons initialisé la méthode qui pousse simplement 100 particules aléatoires dans un réseau de particules Je fais un commentaire, nous devons trouver un autre moyen de transformer notre image en particules. Gardez également à l'esprit que distote x à partir de la ligne 33 et distote y à partir de la ligne 34 définissent la position horizontale et verticale de l'image de poisson que nous dessinons sur Je peux le prouver en augmentant la distance x d'un pour chaque image d'animation ici. Ce qui fera bouger le poisson vers la droite dans le sens positif. Sur l'axe X horizontal. Je supprime le code de méthode d' initialisation et j'y mets une image de dessin. Le travail de cette méthode initialisée consiste à dessiner une image sur Canvas, l' analyser et à la transformer en particules Ensuite, nous supprimons complètement cette image de Canvas, car nos particules constitueront et recréeront l'image elle-même. Faisons-le étape par étape. Puisque nous dessinons quelque chose de l'intérieur, nous devons nous assurer qu'il attend un contexte de dessin comme argument. Je l'appelle sur la ligne 48 d'ici. Et je dois m' assurer de lui transmettre cette variable de contexte CTX de la troisième ligne Il n'est appelé qu'une seule fois lors du chargement de la première page. Ici, Animate efface immédiatement le canevas et supprime l' image pendant un moment Je vais commenter animate pour l'empêcher de fonctionner, concentrons-nous sur la méthode initialisée Voici notre classe de particules personnalisée qui crée notre particule avec ces propriétés. Ensuite, il les dessine sous forme de carrés noirs et les fait bouger, mettant à jour leurs positions. Nous allons utiliser cette classe de particules et faire en sorte que chaque pixel de l' image soit transformé en une seule particule. Dans cette méthode, je crée une variable d'assistance temporaire appelée pixels. Il s'agira d'un tableau contenant toutes les positions et valeurs de couleur relatives à chaque pixel individuel sur Cannavas Nous ne pouvons pas analyser l'image elle-même. Nous devons dessiner l'image sur toile comme nous le faisons ici à la ligne 37. Ensuite, nous utilisons get image data pour analyser notre élément de toile avec l'image dessinée dessus. La méthode Get image data analyse une partie spécifique du canevas et renvoie ses données de pixels sous la forme d'un objet de données d'image spécial. Quatre arguments sont nécessaires pour spécifier la partie du canavas que nous voulons analyser Je souhaite analyser l' ensemble de l'élément de toile , de la coordonnée 00 à la largeur de canavasdizotwidth à partir de la ligne 27 et à la hauteur de la toile à partir de la La chose importante à mentionner ici est que pour obtenir des données d'image certaines mesures de sécurité sont intégrées lorsque nous exécutons le code localement, lorsque nous exécutons le code localement, comme nous le faisons actuellement dans ce projet. Si nous dessinons un fichier image puis essayons d'analyser ce canevas avec cette image dessinée dessus, nous obtiendrons une erreur de console indiquant que canevas a été entaché par des données d'origine croisée Même si vous placez le fichier image dans le même dossier local que votre fichier de script, il sera toujours considéré comme une origine croisée. C'est pourquoi nous avons tout fait au début, en convertissant le fichier image en chaîne de base 64. Ce faisant, l'image elle-même devient une partie du fichier HML d' index Nous pouvons éviter cet avertissement sur la toile souillée. Regardons les pixels pour voir l'objet de données d'image dans la console objet de données d'image dans Je peux voir que get image data a correctement renvoyé l'objet de données image. À l'intérieur de cette propriété de données, elle contient un tableau massif représentant les valeurs de couleur de chaque pixel de l'ensemble de l'élément du canevas. Il s'agit d'un type spécial de tableau, appelé tableau à huit clampes UI NT Il s'agit d'un tableau d'entiers de huit bits non assignés ajustés de 0 à 255. Si vous avez déjà travaillé avec les couleurs du Web, vous savez que chaque couleur peut être exprimée par RGB et par une valeur alpha appelée Nous l'utilisons tout le temps en CSS. Dans ce cas, le rouge, le vert et le bleu peuvent être n'importe quelle valeur comprise entre 0 et 255. En CSS, opacité alpha est une valeur de 0 à 1 dans ce tableau, alpha est également une plage de 0 à 255 où zéro est transparent et 255 est Ce tableau est organisé d'une manière spéciale, où chacun des quatre éléments représente le rouge, vert, le bleu et l' alpha d'un pixel. Quatre éléments de ce tableau représentent un pixel. Il est important de s'en souvenir. Je viens d'ouvrir le début du tableau et le canevas est analysé par les données d'image du kit situées dans le coin supérieur gauche. Cela signifie que ce pixel du coin supérieur gauche n'a aucun rouge, aucun vert, aucun bleu et aucune opacité C'est un pixel noir transparent. deuxième pixel est également zéro rouge, zéro vert, zéro bleu et zéro opacité L'opacité nulle signifie que ces pixels sont totalement transparents Les seuls pixels visibles sur la toile sont ceux qui composent notre dessin de poisson. Si vous effectuez une recherche dans le tableau, en particulier au milieu, vous verrez apparaître des valeurs de 0 à 255 ici, où chaque valeur représente le rouge, le vert, bleu et l'alpha de chaque pixel individuel Je reçois tous les zéros ici parce qu' une grande partie de la toile est transparente n'y a rien ici tant que nous commencé à dessiner le poisson ici. Les pixels eux-mêmes sont bien entendu beaucoup plus petits. J'utilise juste ce carré rouge comme aide visuelle. Imaginez que le carré rouge mesure une fois un pixel. 28. Leçon 15: Je supprime la console. Nous avons dessiné une image sur Canavas et analysé ses données en pixels Nous avons maintenant la couleur de chaque pixel sur le magasin Canavas. Dans cette variable de pixels, je veux que la variable de pixels pointe directement vers le tableau, non vers l'ensemble de l'objet de données d'image. Je parle de données pointant vers ce tableau bloqué de huit bits non signé. Je vais maintenant parcourir ce tableau ligne par ligne, de haut en bas. Si la valeur alpha est supérieure à zéro, cela signifie que ce sont les pixels qui composent le poisson, ceux qui ne sont pas transparents. Lorsque je trouve un pixel non transparent, je crée un objet particulaire pour celui-ci en utilisant notre classe de particules. Chaque fois que nous trouvons un pixel non transparent, nous créons une particule qui le représente. Pour parcourir quelque chose ligne par ligne de haut en bas, nous pouvons utiliser ce que l'on appelle les quatre boucles imbriquées Imbriqué signifie simplement qu'il s'agit d'une boucle à l'intérieur d'une autre boucle. Les quatre boucles extérieures géreront les coordonnées Y verticales. Il sautera ligne par ligne de haut en bas jusqu'à ce que nous atteignions la hauteur de la toile, puis nous nous arrêterons. Je ne veux pas vraiment que chaque ligne ne mesure qu'un pixel de haut. Je veux passer par des incréments plus importants, ce qui pixelisera notre image et rendra l'effet plus facile Nous ne pouvons pas vraiment créer 40 000 particules tout en obtenant une animation fluide. C'est possible, mais cela nécessiterait des optimisations avancées que je n'aborderai pas dans ce cours Nous voulons diminuer un peu la résolution. Au lieu de sauter d'un pixel lorsque nous terminons une ligne, nous allons sauter d'une certaine valeur. J'appelle par exemple un écart. Il ne s'agit pas vraiment d'un écart, mais plutôt de la taille de chaque pixel de particule qui constituera notre image. Nous serons en mesure de le modifier de manière dynamique. Peu importe la valeur que je lui accorde. Maintenant, n'oubliez pas qu' une valeur plus élevée dans Gap signifie de meilleures performances, mais une image plus pixelisée J'ai dit écart de 5 pixels, par exemple Chaque fois que nous avons fini de parcourir une ligne de pixels, nous sautons de cinq pixels vers le bas et nous commençons à analyser ces pixels. Chaque fois que nous entrons dans une nouvelle ligne, nous allons de gauche à droite jusqu'à ce que nous atteignions la largeur de la zone de toile. Chaque fois que nous sautons d' une position à l'autre, nous sautons par la valeur de l'écart. Ces quatre boucles imbriquées peuvent être un peu difficiles à comprendre au début La boucle extérieure est une position verticale en Y sautant d'une rangée à l'autre. La boucle intérieure cartographie les positions horizontales en X de gauche à droite pour chaque ligne. Supposons que nous commencions ici, y est égal à zéro. Nous entrons dans la boucle intérieure et nous passons de x05 pixels à la fois, pas à pas, jusqu'à atteindre la largeur, le bout horizontalement Nous sortons de la boucle intérieure. Nous entrons dans la boucle extérieure, y augmente de cinq, et nous sommes sur une autre ligne. Nous entrons dans la boucle intérieure. Encore une fois, nous allons de gauche à droite, cinq pixels à la fois. Lorsque nous atteindrons la fin, encore une fois, nous sortirons de la boucle intérieure, entrerons dans la boucle extérieure, y augmentera de cinq. Nous entrons dans la boucle intérieure et nous passons en position horizontale x. Ces boucles continueront jusqu'à ce que nous atteignions le bas de la toile, à la hauteur de la toile ici. À ce stade, nous avons parcouru tous les pixels de l'image Cette technique est utile pour de nombreux autres effets de codage créatifs. Lorsque vous devez parcourir une grille, c'est une bonne chose à savoir et cela devient beaucoup plus facile lorsque vous l'utilisez. Le plus souvent, nous parcourons l'ensemble du canevas, ligne par ligne, avec des sauts de cinq pixels Chaque fois que nous passons à la cellule suivante de cette grille imaginaire, nous voulons vérifier s'il y a des couleurs ou si nous sommes en train de parcourir la zone transparente. Si nous trouvons des couleurs, nous créons une particule en utilisant notre classe de particules. Nous voulons que cette particule se souvienne de ses positions x et y, sa position dans l' image et de sa couleur. Le défi est qu'au fur et à mesure que nous cet énorme réseau de données de pixels renvoyé par get image data et stocké dans une variable de pixels, les indices du tableau passent de zéro à des dizaines de milliers Nous devons trouver un moyen de prendre cette série linéaire de nombres et d'en tirer les coordonnées x et y, ainsi que la couleur. Commençons par obtenir l'indice, l'indice actuel du pixel que nous sommes en train de parcourir dans notre grille dans cet énorme tableau de données de pixels. Cette formule est un peu avancée, alors ne vous inquiétez pas si vous ne l'obtenez pas au début. L'indice actuel du pixel est y à partir de la boucle extérieure, le nombre de lignes que nous parcourons l'image ligne par ligne de haut en bas multiplié par la largeur du canevas que nous analysons. Cela nous donnera, par exemple, un bloc comme celui-ci. Ensuite, nous ajoutons les pixels horizontaux restants, en fonction de la distance à laquelle nous nous trouvons dans la nouvelle ligne plus X. Par exemple, quelque chose comme ça Nous sommes à cinq pixels horizontaux de la nouvelle ligne. Tout cela doit être entre crochets et multiplié par quatre, car nous savons que dans le tableau bloqué de huit bits non signé renvoyé par get image data, chaque pixel est représenté par quatre positions dans ce Quatre valeurs pour le rouge, le vert, le bleu et l'alpha. Nous voulons obtenir cet indice de tableau réel lorsque nous passons d'un pixel à l'autre. Cette ligne est là pour nous assurer que nous savons où nous trouvons actuellement dans le tableau de pixels. Au fur et à mesure que nous parcourons les pixels de l'image, ligne par ligne, nous mappons une ligne linéaire de nombres aux coordonnées X et Y. Si vous ne le comprenez toujours pas bien, n' hésitez pas à revoir cette dernière partie, ou ne vous en faites pas trop Être capable de comprendre la logique cette manière est réservé aux experts en mathématiques Nous sommes des codeurs créatifs et des développeurs Javascript Vous n'avez pas vraiment besoin de comprendre telles formules avancées, surtout si vous êtes débutant. Il suffit de savoir quand et comment les utiliser. Nous savons que chaque pixel est représenté par quatre entiers dans le tableau Nous savons que la valeur du pixel rouge est le premier tableau d'un pixel de l'indice actuel de la ligne 39 dans ce tableau sur lequel nous nous trouvons actuellement comme ceci. Nous savons que la valeur verte pour ce même pixel est l'indice suivant plus un. Ensuite, il y a un entier représentant l'indice de valeur bleu plus deux et nous avons l'indice d' opacité alpha plus trois Ensuite, nous avons à nouveau du rouge, vert, du bleu et de l'alpha pour le pixel suivant. Maintenant que j'ai le rouge, le vert, bleu et l'alpha de ce pixel, je peux le concaténer dans une bonne vieille déclaration de couleur RGB standard Je peux dire un support d'ouverture RGB entre guillemets comme celui-ci, plus le rouge de la ligne 43 plus le vert plus le coma plus le bleu plus un support de fermeture. Le fait est que nous ne nous soucions pas vraiment des pixels transparents dans toute cette zone. Nous ne créons pas de particules pour les pixels transparents de cette zone. Nous ne nous intéressons qu'aux pixels qui composent notre image d' angle fish. Les pixels autour sont blancs car le corps du site Web situé derrière celui-ci est blanc. La toile elle-même est transparente dans ces zones. C'est alpha, il y a zéro. Je peux dire si l'alpha de la ligne 46 est supérieur à zéro, ce qui signifie que le pixel de cette zone n'est pas transparent. Ensuite seulement, créez une particule pour cette position. Nous créons une particule en prenant un réseau de particules de la ligne 29 et en appelant la méthode push du tableau intégré. Nous introduisons un nouvel objet particulaire créé par notre classe de particules personnalisée à partir de la ligne sept à l'intérieur de la matrice. heure actuelle, notre classe de particules sait uniquement comment répartir de manière aléatoire des particules carrées noires sur la toile. Nous devons lui apprendre à s'attendre à ces nouvelles données de pixels et à s'organiser correctement pour former une image. Si tu trouves que je vais un peu trop vite en ce moment, fais-le-moi savoir. Je vais récapituler cette technique d'analyse des pixels étape par étape. Une fois que toute la logique en place, nous y sommes presque. Dans la méthode initialisée, nous avons simplement parcouru l'image ligne par ligne, capturant les positions X et Y et la valeur RGB de chaque particule Je dois m'assurer que le constructeur de classe de particules attend ces valeurs comme celle-ci . Je les convertit en propriétés de classe Plutôt que de définir à ce X la valeur X passée en argument, je vais créer une nouvelle propriété appelée origin X. Cette propriété mémorisera toujours position de cette particule dans l'image globale. Je l'ai mis à X qui a été passé en argument. Ce X a été calculé dans nos boucles imbriquées. Après avoir analysé le canevas pour l'origine des données en pixels, Y sera y. Cela a été passé en argument. Je vais envelopper ces valeurs dans un sol mathodé pour les arrondir au inférieur, juste pour m'assurer que nous n' obtenions aucune valeur inférieure au pixel Et le canevas n'a pas besoin d'utiliser l' anticrénelage pour lisser l'image Pour des raisons de performance, il est bon de modéliser au sol tout ce que nous dessinons sur toile Cette couleur sera transmise en tant qu'argument à partir d'ici. Cela proviendra de cette couleur RGB que nous avons concaténée il y a quelque temps à la ligne 50 afin que chaque particule conserve la couleur d'origine de l' OK, maintenant le constructeur de classe de particules sur la ligne huit attend l'effet x, y et la couleur comme arguments Je redescends dans notre classe d'effets principale Chaque fois que je crée une nouvelle particule, je lui transmets ce mot-clé pour représenter l'ensemble de cet objet d' effet. Comme premier argument, je lui passe l'indice des quatre boucles intérieures en position horizontale, y à partir des quatre boucles extérieures en position verticale y et couleur. C'est ainsi que vous analysez les données d'une image en pixels et que vous les convertissez en un système de particules. Si c'était un peu trop compliqué pour les débutants, si vous suivez toujours, bravo, maintenant il est temps de vous amuser avec Animation. 29. Leçon 16: Juste pour récapituler, la méthode initialisée ne s'exécutera qu'une seule fois lors du chargement de la première page Nous dessinons d'abord notre image sur le canevas, puis nous utilisons get image data pour analyser l'ensemble de l'élément du canevas. Pour les données de pixels, ces données de pixels sont présentées dans un tableau spécial où tous les quatre éléments représentent un pixel. Il s'agit des valeurs rouge, vert, bleu et alpha. Nous l'avons mis dans quatre boucles imbriquées comme celle-ci. Pour convertir une série linéaire de nombres, les index du tableau en coordonnées x et y. Nous utilisons la largeur et la hauteur de l'image pour savoir où se situent chaque ligne et chaque colonne afin de les mapper correctement. nous sautons de cellule en cellule dans notre grille imaginaire de cinq fois cinq pixels sur l'ensemble du canevas, nous extrayons les valeurs rouge, verte, bleue et alpha si l' alpha est supérieur à zéro Si le pixel n'est pas transparent, nous créons une particule à cette position en utilisant notre classe de particules personnalisée. Dessinons et animons maintenant ceci dedans. La méthode ne sera exécutée qu'une seule fois lors du premier chargement de page. Faisons un effet de console pour voir si toutes les particules de pixels s'y Je peux voir ici mon objet d'effet créé par notre classe d'effets personnalisée. De l'intérieur de la ligne 28, je vois le réseau de particules que nous avons défini sur la ligne 32. Il contient 2 775 objets particulaires. Ce nombre dépend de l'image que vous utilisez, partie transparente de l'image , ainsi que de la résolution à laquelle vous l'avez numérisée. Dans notre cas, nous l' avons scanné à une résolution de cinq fois cinq pixels définie dans cette propriété d'écart. Sur la ligne 38, je peux voir que chaque particule a une référence de couleur à l'objet de l'effet principal, positions d' origine X et Y, à la vitesse horizontale et verticale et aux positions X et Y actuelles. Si vous voyez « undefined » dans l'un de ces éléments de votre projet, cela signifie qu'il y a une faute de frappe quelque part dans votre code Nous devons nous assurer que toutes ces propriétés ont des valeurs pour que l' effet fonctionne. Décommen anime sur la ligne 76, ce qui supprimera immédiatement image du poisson et créera un ensemble de Je veux que ces particules commencent à se déplacer vers leurs positions d'origine x et d'origine y pour recréer l'image Avant cela, fixons simplement à ce point x la valeur x. Cela a été passé en argument. Ce jouet parsemé de points comme ça. Oui, la forme du poisson y est parfaite. Chaque particule mémorise également la couleur de l'image. Nous avons juste besoin de l'utiliser. Réglons le style Phil sur cette couleur de point comme ceci. Sympa. Le poisson se brise en morceaux cause des propriétés VX et VY J'ai réglé V x zéro et VY à zéro parfaitement. Vous savez maintenant comment recréer une image sous forme de système de particules. J'ai cette propriété d'écart de points sur la ligne 39, qui détermine le niveau de détail que nous voulons dans l'image. chiffre est faible, plus les performances exigeront cet effet. L'écart est de cinq pixels et je dessine des blocs de particules de dix fois dix pixels. Il y a beaucoup de chevauchements. Je peux le régler sur cinq, ou quand j'en fais quatre, il y aura un pixel. écarts dans la note peuvent la rendre dynamique en disant cet effet Do gap. De cette façon, la taille des particules changera automatiquement lorsque nous modifierons cette propriété d'écart entre les points. Une valeur élevée signifie une résolution plus faible. N'utilisez pas de décimales ici. Nous ne voulons pas de valeurs inférieures aux pixels pour des raisons de performances. En outre, dessiner des particules sous forme de rectangles est plus efficace en termes de performances J'ai déjà créé un tutoriel pour toutes les versions de cet effet, où chaque particule était un cercle. Cette nouvelle version avec des rectangles sera beaucoup plus rapide lorsque nous commencerons à l'animer et à la faire interagir avec Dessiner des rectangles est plus rapide que dessiner des cercles sur une toile Et lorsque vous avez 3 000 formes, 3 000 particules ou plus, vous pouvez vraiment sentir la différence. Nous pouvons égaliser l'écart de deux ou trois pixels, ce qui donnera une image nette. Je ne recommande pas de faire un pixel. Cela vous donnera beaucoup trop de particules en fonction de la taille de l'image, et cela ralentira lorsque nous l'animerons Il existe des techniques et des algorithmes d'optimisation du canevas que nous pouvons utiliser pour faire en sorte que les particules d'un pixel se déplacent facilement. Mais je n'aborderai pas cela dans ce cours. Je peux faire en sorte que la taille des particules soit toujours inférieure d'un pixel à la valeur d'écart actuelle pour gagner de la place. Vous pouvez jouer avec les valeurs pour voir ce qui se passe. Jusqu'à présent, il semblerait que nous ayons simplement pixélisé l'image. Mais gardez à l'esprit que chaque bloc de pixels est un objet particulaire, peut lui donner de la physique et du comportement. Pour des effets vraiment sympas, j'ai dit écart de 23 pixels. Pour l'instant, je vais regrouper le réseau de particules à partir de la ligne 33 en disant tableau de particules à effet comme celui-ci Comme j'ai dit « écart de trois pixels », nous obtenons 7 557 particules qui constituent l'image du poisson 30. Leçon 17: Je veux que les particules essaient toujours de revenir à leur position initiale. Ainsi, lorsque nous les déplaçons avec la souris ou que nous séparons l'image d'une autre manière, les particules sont toujours attirées vers leur position initiale. Je veux que l'image soit toujours automatiquement recréée chaque fois qu'elle est cassée Nous allons écrire cette logique dans la méthode de mise à jour de la classe de particules. Commençons simplement. Sans aucune physique, cette position plus est égale à la différence entre la position d'origine, qui est la position des particules dans l'image, et leur position horizontale actuelle. Y plus est égal à l' origine du point z moins ty. Nous voulons que les particules soient toujours conscientes de la différence entre leur position actuelle et leur position initiale dans l'image. Nous appelons la méthode de mise à jour sur la classe d'effets ici dans la boucle d'animation sur la ligne 74. Dans cette méthode, nous déclenchons la méthode de mise à jour à partir de la ligne 23 sur chaque objet particulaire individuel. Ici, à la ligne 63, mettons ces valeurs entre crochets et répartissons les particules sur le canevas. Au chargement initial de la page, ce x sera une méthode aléatoire comprise entre zéro et la largeur du canevas multipliée par l'effet de point. Pour vraiment voir le mouvement, je dois m'assurer que chaque étape par image ne représente qu'une petite fraction de la différence entre l'exposition actuelle et l'exposition originale. Comme ça. Je fais de même pour dist y. J'ai défini la position verticale initiale sur une valeur aléatoire comprise entre zéro et la hauteur du point à effet dist, qui est la hauteur de la zone de canevas disponible. Faisons de la physique très simple. Je vais l'appeler, je l'ai mis à 0,2 et je l'utilise ici et ici. En modifiant cette valeur, nous modifions la rapidité ou la lenteur avec laquelle l'image s' assemble. Il peut être intéressant de randomiser cette valeur et de faire en sorte que chaque particule se déplace à une vitesse différente Peut-être que si vous voulez un ralenti, assurez-vous qu'il s'agit d'un très petit nombre. Eh bien, c'est plutôt cool. Nous pouvons nous amuser tellement avec cette base de code. Maintenant, n'est-ce pas génial ce que vous pouvez faire avec un seul script Elga Nous n' utilisons même aucune bibliothèque. Nous avons écrit toute cette logique nous-mêmes. Nous pouvons jouer avec cet effet de nombreuses manières. Même le simple fait de changer le point de départ en position x et y nous donnera quelque chose de différent. Comme lorsque je m'asseyais en partant de x à zéro ou que j'étalais le Y de départ sur une zone beaucoup plus grande. Nous pouvons également faire un simple effet de rétrécissement. Cela aurait un aspect différent si la vitesse ou le relâchement de chaque particule est aléatoire. Il existe de nombreuses façons de jouer avec cette base de code. Je peux aussi étaler x et rendre Y nul. Je m'amuse juste avec ça maintenant. 31. Leçon 18: Créons un bouton sur lequel nous avons cliqué. Nous allons randomiser les positions X et Y de chaque particule et nous obtiendrons une belle animation de l'image se réassemble chaque fois que l'on clique sur le bouton J'appellerai cela, par exemple, Warp, comme une téléportation d'un film de science-fiction où personnes sont brisées en particules et Lorsque cette méthode Warp est exécutée, coordonnée horizontale x de chaque particule randomisée entre zéro et la largeur de l'effet Y sera une valeur aléatoire comprise entre zéro et la hauteur de l'effet. Comme ça, je vais également lui donner une valeur différente juste pour l'expérimenter. Je vais au cours d'effets principal. Et comme nous l'avons fait avec Draw and Update, j'ai créé une méthode de distorsion Lorsqu'il est déclenché, il parcourt le réseau de particules. Pour chaque objet particulaire du tableau, il exécutera la méthode warp à partir de la ligne 28 Passons à l'index HTML si vous voulez que cette longue chaîne de données en base 64 contenant notre image soit sur une seule ligne. Dans l' éditeur de code Visual Studio, vous pouvez sélectionner Afficher le mot Wrap dans le panneau de navigation supérieur. Ici, nous avons une différence avec une classe de contrôles et à l'intérieur il y a un bouton avec un ID de Warp (bouton de retour dans le script Je vais ici et nous allons gérer cette fonctionnalité du bouton Warp Je crée une variable constante, j'appelle Warp button et je la définis de la même manière que Document get element by ID Warp. Comme ça. Ensuite, je le prends et j'ajoute écouteur d' événements pour un événement de clic Dans la fonction de rappel, je prends un exemple d' effet que nous avons défini à la ligne 35 et instancié Et j'appelle sa méthode de distorsion publique associée à partir de la ligne 71 Ainsi, cette méthode principale de distorsion appellera Warp sur chaque particule individuelle, randomisant les positions x et y et en définissant une valeur différente Vos utilisateurs peuvent désormais déclencher cette animation scolaire en cliquant sur le bouton Warp. Génial, rendons le bouton un peu plus beau. Je suis sûr que vous savez comment styliser quelque chose avec du CSS, et ce n'est pas un cours de CSS, mais faisons-le quand même. Je prends tous les boutons de la page. Actuellement, nous n'en avons qu'un, et j'ai réglé le rembourrage à 20 pixels, la taille de police à 30 pixels, marge à dix pixels Rembourrage de dix pixels et marge de 20. Peut-être que j'ouvre une autre fenêtre de navigateur et que j'irai sur le site Web de Google Fonts. Je vais rechercher une police appelée Bangers pour le style de bande dessinée de l'école Je clique sur ce bouton plus pour l'ajouter à ma bibliothèque. Ensuite, je clique sur Afficher les bibliothèques sélectionnées, et cela me donne ces trois balises de lien. Je peux simplement les copier et les coller ici dans l'index HTML, je m'assure de les mettre avant mon fichier CSS de style personnalisé pour m'assurer qu'il y est disponible. Ensuite, il ne me reste plus qu' à copier cette règle CSS pour la famille de polices et à l' appliquer aux contrôles. Non, d'accord. Je dois l'appliquer à la balise du bouton elle-même. Supprimons ceci. 40 pixels parfaits, taille de police, couleur du texte blanc, couleur de fond noir. Juste pour rendre les choses intéressantes, au survol, j'échange la couleur Couleur du texte, noir, fond blanc. Sympa. Donnons une transition de 0,2 seconde. OK, j'aime bien ça. Nous avons transformé l'image en particules et nous avons ajouté un motif de distorsion qui servira de transition Cela montrera comment notre image se réassemble automatiquement lorsqu' elle est brisée Ajoutons plus de physique et d'interactivité en faisant réagir les particules individuelles à la souris 32. Leçon 19: Je veux que la classe d'effets principale soit toujours consciente de la position actuelle du curseur de la souris, je crée une propriété personnalisée is mouse. Ce sera un objet avec un rayon de trois propriétés. Je vais d'abord le régler sur 3 000. Cela définira la zone autour du curseur où les particules réagissent à la souris. Ce ne sera pas vraiment 3 000 pixels. Je vais vous expliquer pourquoi ce chiffre est si élevé une fois sur place, c'est pour des raisons de performance. positions X et y du curseur de la souris ne seront pas définies dans un premier temps constructeur de classe s'exécute une fois au moment où la classe est instanciée en appelant le Nous pouvons en profiter et nous pouvons y ajouter n'importe quel code que nous voulons exécuter au moment de la création de la classe d'effets. Je peux même ajouter un écouteur d'événements ici comme ça. Nous écouterons l'événement Mousemove. Je dois m'assurer que cet écouteur d'événements est lié à sa portée lexicale actuelle Je veux que ce soit dans le constructeur de classe d' effets afin que je puisse remplacer propriétés mousex et mousey lorsque l'événement mousemove Pour m'assurer que la fonction de rappel de cet écouteur d'événements se souvient de l'endroit dans lequel elle a été définie pour la première fois, je peux utiliser une méthode de liaison de script Java spéciale ou transformer la fonction de rappel en une fonction ES à six flèches Parfois, nous l' appelons aussi fonction Fat Arrow. L'une des particularités des fonctions de flèche est qu'elles lient automatiquement ce mot clé au contexte des codes environnants. Il sera toujours en mesure de voir cette propriété domouse, c'est exactement ce dont nous avons besoin ici Nous devons accéder à l'objet d'événement généré automatiquement, car cette fonction de flèche n' aura qu'un seul argument Je peux même retirer les crochets comme ça. Chaque fois que l'événement mousemove se déclenche, je prends ce point x de la ligne 47 et je place sur l'événement x coordonnée horizontale actuelle du curseur de la souris Je vais également placer ce dôme en pointillé de la ligne 49 à l'événement y. Comme ça. Nous allons tester si cela fonctionne en configurant la souris et la souris. Parce que j'ai placé cet écouteur d'événements mousemove dans le constructeur de classe de la classe Il sera automatiquement appliqué lorsque nous instancierons la classe d'effets ici à la ligne 86 Enregistrez mes modifications, rafraîchissez la fenêtre de mon navigateur. Maintenant, lorsque je déplace la souris sur le canevas, je peux voir que la position de la souris est mise à jour et que les valeurs mises à jour sont correctement enregistrées dans notre propriété personnalisée de souris à points sur le verre à effet. Parfait. Supprimons la console à la ligne 88. De plus, celui-ci sur la ligne 54. Il est bon de toujours supprimer des consologs comme celui-ci. Pour des raisons de performance, nous capturons les coordonnées x et y actuelles de la souris. Ici, nous voulons que chaque particule continue de vérifier à quelle distance elle se trouve de la souris. Si la souris est suffisamment proche, nous voulons que la particule soit repoussée par elle. Nous allons écrire cette logique dans la méthode de mise à jour sur la classe de particules x. La distance sur l'axe X horizontal entre la souris et cette particule correspond à l'effet de point mousetx à partir de la ligne 50 ici moins st x dy La distance entre la souris et la particule sur l'axe vertical y est cet effet de point dom y moins disty. Pour calculer une distance entre deux points, on peut utiliser le théorème de Pitagorien . Cela fonctionne comme ça. C'est une souris, c' est une particule. Nous créons un triangle rectangle imaginaire entre ces deux points. Il s'agit de la distance horizontale x. Nous l'avons déjà calculé à la ligne 25. Ce site est une distance DY sur l'axe vertical y. Nous l'avons calculé à la ligne 26. Pour obtenir ce site, qui est la distance réelle entre ces deux points, nous utilisons le théorème de Ptagora pour calculer l'hypoténus, le côté le plus long d' un triangle opposé à formule du théorème de Pitagora est que C est égal à la racine carrée a plus b au carré converti en script Nous disons que la distance est la racine carrée de la bouche de disto dx fois stod x, qui est un carré plus deux fois Didi au carré Cela nous donne la distance entre deux points, entre la particule et la souris. Je supprime la racine carrée car il s'agit d'une opération très coûteuse en termes de performances et nous n'en avons pas vraiment besoin. J'ai juste besoin d'ajuster le rayon de la souris à une valeur plus grande si vous n'utilisez pas la racine carrée ici. C'est pourquoi j'ai réglé le rayon de la souris à 3 000 ici sur la ligne 51. Vous pouvez ajuster la plage lorsque vous voyez sa taille lorsque l'animation se déroule dans une minute. Je veux implémenter un peu de physique. Je veux que les particules soient poussées plus fort si elles sont plus proches de la souris. Je le fais en créant une propriété d' assistance appelée à la force. Ce sera le rayon de la souris, la zone autour de la souris où les particules réagissent, divisé par la distance actuelle entre la souris et la particule pour que la particule s'éloigne de la souris dans la bonne direction. Je dois mettre Minus ici. Nous verrons comment cela fonctionne lorsque nous aurons de l'animation. Vous pouvez essayer de mettre des points positifs et négatifs ici et voir ce qui se passe. La force à laquelle les particules sont poussées est égale au rapport entre le rayon de la zone interactive de la souris et la distance actuelle cette particule et le pointeur de la souris. Je vérifie si la distance est inférieure au rayon de la souris. Si c'est le cas, nous repoussons la particule loin de la souris. Avant cela, j'utilise nouvelles propriétés de classe qui ne sont pas définies dans le constructeur Définissons-les d'abord. Dx, distance entre les points dy et force didot. Toutes ces propriétés seront nulles dans un premier temps. Je vais également créer une autre propriété que j'appelle par exemple l'angle du point. angle des points déterminera la direction dans laquelle les particules sont repoussées lorsqu'elles interagissent avec souris. Ici, nous calculerons cet angle à l'aide de matote, une méthode Javascript intégrée à 102 La méthode Matote 8102 renvoie une valeur numérique en radiance comprise entre moins pi et plus pi Nous savons qu'un cercle est égal à deux pi en radiance. Cette valeur renvoyée par matoteen deux représente ce que on appelle l'angle thêta entre un point x et un point y donnés et un axe x positif comme celui-ci est important de se rappeler que cette méthode Javascript intégrée attend une valeur de la coordonnée y premier et de la coordonnée x en second. La différence entre la position x Andy de la particule et la position x Andy du curseur de la souris représentée par Diddy et dis point x après la méthode 102 nous donne une valeur d'angle Nous augmenterons la vitesse horizontale, la vitesse Vx x, par la force à partir de la ligne 33 Cela dépend du rapport entre le rayon de la souris et la distance entre la souris et les particules productrices de particules qui se rapprochent lorsqu'elles sont poussées par une force plus importante, afin spécifier dans quelle direction elles sont poussées. Je passe cet angle. Nous calculons sur la ligne 3062, selon la méthode de la plupart des cosinus. Cette méthode cartographiera l' angle que nous lui transmettons en radians sous forme de valeur comprise entre moins un et plus un Cette valeur représentera le cosinus de l' angle et permettra particules de bien flotter le long des bords extérieurs du cercle lorsque la souris interagit avec Ces méthodes du double et du cosinus et tout ce qui a trait à trigonométrie sont assez difficiles à expliquer si vous les voyez pour la première fois Je ne pense pas qu'il soit important de bien le comprendre tant que vous savez comment l'utiliser et comment obtenir le mouvement souhaité. Lorsque nous lancerons l'animation, je jouerai ces valeurs pour voir ce qu'elle fait. Le feedback visuel que nous recevons lors du lancement de l'animation peut faciliter sa compréhension. C'est difficile, alors ne vous inquiétez pas si vous n'avez pas suivi toute cette logique trigonométrique Cela n'affecte pas votre capacité à être un bon développeur Javascript. Nous avons maintenant mis à jour le VX à partir de la ligne 16 en tenant compte de la force de la poussée et de la direction de cette poussée Nous ferons de même pour la vitesse verticale, mais cette fois nous utiliserons la méthode sinus. Nous passons sous le même angle. La méthode cosinus et la méthode sinus fonctionnent ensemble pour cartographier une position le long du rayon d'un cercle Maintenant, je peux utiliser les vitesses verticale et horizontale VX et VY, positions x et y calculées ici comme ceci Essayons d'abord de voir ce qu'il fait alors que les particules réagissent certainement à la souris. Mais quelque chose ne va pas. Je vais régler ça dans une seconde. Pour améliorer la physique, nous pouvons également appliquer le frottement. Je crée une propriété appelée friction. Je l'ai réglé à 0,95, je multiplie V x par lui ici, ce qui fait que sa force diminue lentement Pour chaque image d'animation, le mouvement est incorrect. Quoi qu'il en soit, je pense qu'il est intéressant de vérifier ce qui se passe. Je peux voir que j'ai fait une faute de frappe ici à la ligne 33. C'est censé être D x x x, dy fois day. Comme ça, le théorème de Pitagra. Maintenant, les particules se comportent comme prévu, parfaitement. Nous les bousculons pour les faire revenir à leur position initiale. Nous devons faire en sorte que le temps soit égal ici. Si je change de valeur à 0,2, nous obtenons un mouvement beaucoup plus rapide. Plus la valeur du frottement est faible, plus le frottement sera important. Il y a beaucoup de maths ici. Ne vous concentrez pas trop là-dessus. Ce cours porte principalement sur le Java Script et le dessin sur Canvas. Vous pouvez utiliser ces extraits de code mathématique pour d'autres projets. Même si vous ne comprenez pas encore parfaitement le fonctionnement des calculs, je vous encourage à jouer avec le signe «   changement de valeur moins échange », à essayer de le déchiffrer et à voir comment cela affecte le mouvement. J'espère que cela permettra de voir plus clairement ce qui se passe Lorsque j'augmente la friction et le rayon, nous obtenons cette limite plus progressive. Il existe une version étendue de ce cours liée à la description ci-dessous, laquelle nous allons encore plus loin et créons des transitions spéciales. Tu peux y jeter un œil si tu veux. J'espère que vous en avez trouvé un peu de valeur aujourd'hui. Je suis là pour vous aider à apprendre script Java et à découvrir toutes les choses incroyables que vous pouvez en faire. Pensez-vous que ce projet a été difficile avec tous ces algorithmes ? Dans quelle mesure cela a-t-il été difficile pour vous ? Donne-moi un chiffre dans les commentaires. Un est extrêmement facile, dix c'est très difficile, cinq c'est quelque chose entre les deux, je pense que c'est plus tard. 33. Leçon 20: Remplaçons l'image par autre chose. Vous pouvez utiliser votre propre fichier PNG avec un arrière-plan transparent ou vous pouvez télécharger la même image que moi dans la section Ressources. Cette image est un autre personnage de mon autre cours de Javascript où nous explorons une planète extraterrestre et étranges formes de vie mécaniques. Nous pouvons convertir une image en chaîne de base 64 avec Java Script. Mais il est plus rapide d'utiliser un site Web externe si vous voulez voir comment je convertit des images dessinées sur Canvas en données comme celles-ci à la volée, faisant partie dynamiquement de la base de code Javascript. Consultez mon autre cours de codage créatif sur les lignes, la rotation et les fractales. J'y explique étape par étape comment créer ma fractale procédurale. En fait, comme nous l'avons fait auparavant. Dans Google PNG à la base 64. Il existe de nombreux sites qui peuvent le faire. Assurez-vous simplement que le code converti commence par l'image de deux points. Si cette case n'est pas cochée, je copie la longue ligne de code Je vais indexer le HTML et je veux le remplacer ici à la ligne 15. C'est plus facile si j'active Word Wrap. Dans le code de Visual Studio, je clique sur Afficher Word Rap. Je souhaite remplacer tout ce code dans l'attribut source. Ce code représente l'image complète. Dans Visual Studio Code, je peux simplement surligner la partie au début. Ensuite, je fais défiler l'écran vers le bas à l' endroit où le code se termine et pour mettre en évidence tout ce qui se trouve entre les deux, j'appuie sur la touche Shift et je clique avec le bouton gauche de la souris à l'endroit où je veux que la sélection se termine ainsi. J'ai supprimé et je colle le nouveau code que nous avons copié depuis le site Web. Allez-y, nous échangeons l'image et tout fonctionne à merveille. C'est vraiment amusant de jouer avec cet effet. Je trouve cela très relaxant. Pour une raison ou une autre, j'ajuste la friction sur la ligne 19, j'ai indiqué le rayon de la souris à 3 000. Par exemple, de retour dans l'index HTML, je vais voir Word Wrap pour le désactiver Il vaut mieux avoir la longue chaîne de données en base 64 sur une seule ligne, sinon nous devons beaucoup faire défiler la page vers Je copie ce balisage pour le bouton de travail et je lui donne une idée du bouton de blocage avec texte qui dit blocs dans le script GS Je copie ce bloc de code et je l'ajuste pour qu'il pointe vers ce nouveau bouton de blocage. Dans Visual Studio Code, vous pouvez effectuer une sélection multiple de cette manière en surlignant un texte chaque fois que vous maintenez enfoncée la touche Commande sur Mac et Ctrl sur PC et que vous appuyez sur la lettre D, vous sélectionnez une autre occurrence de ce texte. J'enregistre une référence au modèle de bloc, j'y attache un écouteur d'événements et j'appelle à l' intérieur la méthode publique du bloc d'effets. Nous devons le créer. Je m'assure dans la classe d'effets dans laquelle nous avons créé Warp. Je crée la méthode des blocs. Son travail consistera simplement à parcourir le réseau de particules à partir de la ligne 56. Pour chaque objet particulaire de ce réseau, il déclenchera une méthode également appelée Blocks. Nous devons nous assurer que chaque particule possède une méthode portant ce nom. Je vais ici à la classe de particules et ici où nous avons créé Warp Method Avant de créer cette nouvelle méthode par blocs, je peux faire toutes sortes de choses pour embrouiller les particules, car nous savons qu'elles se réassembleront pour former une image. Encore une fois, grâce à la logique interne à la méthode de mise à jour que nous avons écrite auparavant, je peux, par exemple, diviser les particules en deux groupes. Un groupe viendra du haut du canevas, coordonnée zéro. L'autre moitié des particules proviendra du bas de la toile à partir d'une coordonnée verticale égale à la hauteur de la toile. Je peux le faire en utilisant ce qu' on appelle un opérateur ternaire. C'est le seul opérateur Java Script avec trois opéras. Dans ce cas, nous l'utiliserons comme une simple instruction if L d'une ligne. La structure est une condition simple à évaluer, interrogation, quelque chose à faire si la vérification évalue le vrai deux-points Il y a autre chose à faire s' il évalue le faux. La condition à évaluer sera de vérifier si la méthode aléatoire est supérieure à vérifier si la méthode aléatoire est supérieure 0,5 La méthode aléatoire appelée seule, comme celle-ci, renverra une valeur aléatoire 0 à 1. Elle devrait être supérieure à 0,5 dans environ 50 % des cas pour les particules réglant leur position verticale à zéro En haut, pour l'autre moitié des particules, définissez leur position verticale en Y pour affecter la hauteur. La condition de l'opérateur ternaire en bas du canevas pour vérifier si elle est vraie, faites ceci, sinon faites ceci Maintenant, lorsque je clique sur Motif de blocs, il divise les particules en deux groupes, par le haut et par le bas Super, je peux changer la valeur en fait dans Warp qui sera de 0,2 en blocs Nous pouvons essayer différentes choses Ainsi, lorsque nous cliquons sur différents boutons, particules ont une vitesse d'accélération différente, nous pouvons modifier les propriétés des particules que nous voulons. Ici, je peux, par exemple, les agrandir. Réglons la taille du rectangle de particules individuel à dix pixels. Intéressant. Le problème, c'est que lorsque je clique sur Warp, la taille des particules reste à dix pixels Je dois me rappeler que lorsque je manipule une nouvelle valeur dans la méthode des blocs, je dois également la définir pour la méthode Warp, si je ne veux pas que la taille soit la même comme ça Maintenant, Warp contient de petites particules, les blocs nous donnent de gros blocs de pixels provenant du haut et du bas 34. Leçon 21: Le prochain effet est vraiment cool. Dans l'index HTML, je crée un nouveau bouton avec un ID de bouton d'assemblage. Et le texte dit d'assembler dans le script GS. Ici encore, je crée une section dans laquelle je crée une variable pour stocker une référence Java Script à ce nouveau bouton, et je lui donne un écouteur d'événements à l'intérieur Nous appelons Effect Assemble. Dans la classe Effect, je vais créer une version de haut niveau de la méthode d' assemblage qui gérera toutes les particules , comme nous l'avons fait avec Warp et Blocks ici dans la classe de particules Je dois définir cette nouvelle méthode d'assemblage et lui donner une certaine logique À l'intérieur, nous attribuons à x un nombre aléatoire compris entre zéro et la largeur de l'effet. Y sera un nombre aléatoire compris entre zéro et la hauteur de l'effet. Je veux que les particules soient réparties de manière aléatoire sur la zone de toile disponible. Je dois définir la facilité et la taille. Puisque nous modifions également ces valeurs sous les boutons, cela fait la même chose que Warp Je veux qu'il se comporte différemment lors du réassemblage de l'image Je veux que les particules reprennent leur position initiale dans l'image, mais pas toutes en même temps, mais une par une. À une vitesse spécifique, nous devrons créer un commutateur qui activera et désactivera le comportement de recherche de cible de chaque particule. heure actuelle, les particules veulent toujours revenir à leur position initiale dans l'image. J'ai besoin d'un interrupteur qui les empêchera de le faire. Et créez un système de feux de signalisation indiquant « stop and go ». J'écrirai cette logique qui retardera retour des particules à leur position initiale. Ensuite, je vais récapituler toute la boucle logique. Ne vous inquiétez pas trop si vous ne comprenez pas tout au premier tour. Écrivons-le d'abord. Ici, dans la classe d'effets principale, je crée une propriété appelée compteur. Au départ, je l'ai mis à zéro. Cette contre-variable augmentera lentement. Au fur et à mesure qu'il augmente, il permettra à de plus en plus de particules de revenir à leur position initiale dans l'image. Chaque particule attendra un certain nombre de millisecondes avant de commencer à revenir en arrière pour assembler l'image Ce délai en millisecondes sera égal à cette contre-variable dans la méthode d'assemblage principale, j'ai mis le j'ai mis C'est important car nous aurons une autre transition qui utilisera le même compteur. Nous devons nous assurer que le compteur est toujours nul lorsque vous cliquez sur le bouton d'assemblage ou lorsque nous cliquons entre différents boutons de transition Nous en serons là, cela aura plus de sens dans une minute. Chaque fois que la méthode d'assemblage est déclenchée sur chaque particule individuelle, elle augmente cumulativement cette même variable de compteur en appelant assemble sur chaque objet particulaire à l'intérieur du réseau de particules, chaque particule augmente la valeur du compteur d'une unité Je vais créer un délai d'attente défini ici. La méthode Java Script set timeout appelle une fonction après qu' un certain nombre de mellisecondes de délai défini se soit écoulé sur Identique au cadre d'animation de la demande. Nous pouvons l'appeler directement comme ça. Elle s'attend à ce que la fonction appelle deux arguments et retarde le temps d'attente avant que nous l'appelions délai J'utiliserai cet effet de point pour contrer la valeur qui augmente d'un à chaque fois que la méthode d'assemblage de particules est appelée. De cette façon, chaque particule retardera légèrement la suivante . Comme pour chaque méthode de la classe d'effet principale appelle la méthode assemble sur chaque objet particulaire un par un. La fonction à appeler après cette augmentation du délai sera une fonction flèche car nous sommes dans une classe, dans un objet. Et je dois m'assurer que ce mot-clé est lié au contexte dans lequel le délai d'attente défini est défini Comme nous l'avons déjà dit, la fonction ES à six flèches se lie automatiquement de manière asymétrique à sa portée actuelle De cette façon, je peux utiliser ce point à l'intérieur et cela fonctionnera. Sinon, nous devrions utiliser la méthode de liaison Java Script ici. L'utilisation de la fonction flèche est syntaxe plus simple et elle fait la même chose que ce que j'ai dit Je veux créer un système de feux de signalisation où les particules sont invitées à s'arrêter et à repartir. Nous allons le faire en créant une autre propriété d'assistance appelée ce point actif Lorsque la particule active est définie sur true, elle peut se déplacer. Si la valeur active est fausse, particule se figera à sa position actuelle. Après le délai défini, le chronomètre se déclenche. Nous avons défini active sur true ici dans le constructeur de classe de particules, nous avons initialement défini active également sur true Dans la méthode de mise à jour, nous avons un code qui fait réagir le code de la souris qui ramène particule à sa position d'origine pour assembler l'image. Je veux que tout ce code ne s'exécute que si l'indicateur actif est défini sur true. Ici, lorsque le bouton d'assemblage est enfoncé, nous randomisons les positions x et y de chaque particule, les répartissant sur tout le canevas Nous définissons la vitesse et la taille de l'assouplissement. À ce moment-là, au fur et à mesure que les particules s'étalent, nous réglons cette variable active pour qu'elle tombe, les gelant toutes sur place. Comme la méthode for each s'exécute à l'intérieur de la classe d'effets principale, elle parcourt très rapidement l'ensemble du réseau de particules, de l'indice de départ à l'indice de fin. Chaque fois que ce code s'exécute pour une nouvelle particule, le compteur augmente légèrement, augmente cette valeur de délai. Chaque particule du réseau aura une valeur de compteur légèrement plus élevée, ce qui entraînera l'appel de ce délai d'attente défini avec une augmentation du délai Lorsque le délai défini se déclenche enfin, chaque particule est définie sur active true Et l'instruction if que nous avons créée dans la méthode de mise à jour à la ligne 32 lui permettra enfin de revenir à sa position initiale. Dans le même temps, il permettra également les interactions avec la souris. C'était amusant car la valeur du timer est égale au délai en millisecondes que chaque particule doit attendre avant de augmentez le temps devront en fait assemblage d'une valeur plus élevée, les particules attendre plus de millisecondes avant de pouvoir se déplacer La vitesse de l'assemblage lui-même dépendra également l'image et de la résolution que vous avez dans cette propriété d'écart. Parce que si votre image est composée de moins de particules de plus grande taille, elle s'assemblera plus rapidement. Vous pouvez également le ralentir en multipliant la valeur du compteur par quelque chose De cette façon, vous augmentez également les millisecondes. Par conséquent, vous ralentissez le processus d'assemblage. En le multipliant par moins de un, multipliant par moins vous l'accélérerez Je trouve que c'est vraiment cool de voir comment les particules attendent sur place jusqu'à ce qu'elles soient là, puis elles se mettent en position pour recréer l'image Nous pouvons également jouer avec les interactions de la souris l'image est en train de s'assembler et qu'elle fonctionnera toujours Elles se remettront simplement en place lorsque nous les autoriserons à le faire. C'est une base de code assez solide, je pense. N'hésitez pas à en faire vos propres expériences. L'un des problèmes que nous avons ici est que lorsque nous cliquons sur le bouton Assembler, cela définit instantanément cette séquence de temporisation pour toutes les particules Et si nous revenons à cette transition d' assemblage, si le délai d'expiration n'est pas encore activé, l'animation démarrera quelque part au milieu Nous devons également effacer tous les délais, toutes les particules. Chaque fois que nous activons l'effet d' assemblage , l'image commence toujours à s'assembler depuis le début. L'un des moyens d'effacer les délais consiste à les capturer dans une variable Je crée une nouvelle variable appelée dot timeout. Au départ, je l'ai défini sur undefined ici à la ligne 68, où nous créons un nouveau délai Nous l'avons défini comme étant égal à ce délai d'attente par points. Il s'activera en fait comme avant. définir comme égal à une variable comme celle-ci n'aura aucun effet sur la façon dont le délai d'attente se déclenche. Cependant, cela nous donne un moyen facile de l' effacer lorsque l' assemblage est appelé. abord, je souhaite effacer le délai d'expiration s'il existe une méthode de temporisation active en Java, annulant un délai d'expiration précédemment établi En appelant set timeout, il attend un argument qui sera un identifiant du délai que nous voulons annuler Set timeout renvoie un identifiant lorsqu'il est appelé, mais nous l'avons dans une variable, donc je peux simplement le transmettre cette fois comme ceci Et ça marchera ici. En fait, je ne sais pas pourquoi ça part toujours du milieu. Cela a quelque chose à voir avec le fait que ce nombre est trop petit, car lorsque je le fais, il sera réinitialisé correctement. Cela fonctionne avec de plus grands nombres. Lorsque j'entre trop de décimales, s'assemble à partir du milieu Je pense que oui, parce que le nombre que nous transmettons sous forme de millisecondes de retard est trop petit pour les index de début un tableau comme celui-ci, cela fonctionne vraiment bien Il vaut peut-être mieux ajuster vitesse d' assemblage en contrôlant l' augmentation du compteur ici sur la ligne 68 expériences. 35. Leçon 22: Créons un autre effet de transition. Je l'appelle impression à particules parce qu'elle me rappelle une imprimante 3D. Créer quelque chose couche par couche, ligne par ligne. Je crée un autre bouton avec un identifiant de bouton d'impression de particules et un texte indiquant « impression de particules ». Comme d'habitude, nous intégrons le bouton dans le projet. Ici, dans cette zone du script, nous lui donnons un écouteur d'événements pour les événements de clic et nous appellerons méthode d'impression par particules Nous créons une méthode d'impression par particules ici, identique à l'assemblage. Il faudra également remettre le compteur à zéro. Ensuite, il parcourra l'ensemble du réseau de particules du début à la fin. Cela déclenchera la méthode d'impression des particules , que nous allons définir. Maintenant, je le définis ici et cela fonctionnera de manière très similaire à la méthode d'assemblage. Cette fois, je veux que la coordonnée x initiale soit exactement au milieu de la zone du canevas. Cet effet multiplié par 0,5 Maintenant, toutes les particules proviennent de cette seule ligne au milieu. Si je disais la coordonnée Y initiale au milieu de la toile à la verticale, toutes les particules seront écrasées en un seul point Nous avons créé une singularité en pixels. À partir de là, l'image s'assemblera sous forme de canava, trou noir inversé, crachant des particules et diminuant l' particules et diminuant Je trouve que ça a l'air vraiment cool. Quelle est la transition que vous préférez : les blocs Warp assemblage ou l'impression de particules ? Laissez un commentaire pour me le faire savoir. J'espère que vous avez trouvé de la valeur et appris quelque chose de nouveau. Consultez mes autres cours si vous souhaitez explorer le codage plus créatif ou le développement de jeux en deux D avec Java Sq Vanilla, à voir plus tard.