Share
Dans le dernier tutoriel de Particles.js, vous avez appris à créer des particules avec les formes et les tailles souhaitées. Même si cela faisait du bien de voir toutes les particules bouger, il y a encore matière à amélioration. À l'heure actuelle, il n'y a aucune interaction entre les différentes particules. Ils se croisent comme si les autres particules n'existaient pas.
Ce didacticiel vous apprendra à déplacer les particules comme vous le souhaitez en contrôlant leur direction, leur vitesse et bien plus encore. Vous apprendrez également divers modes d’interaction et événements.
Toutes les particules de chaque système de particules ne se déplacent pas dans des directions aléatoires. Même quand ils le font, il y a d'autres forces en action. Par exemple, ils peuvent accélérer s’approcher les uns des autres ou rebondir après des collisions. Toutes ces options peuvent être contrôlées par diverses propriétés disponibles sous bouge toi.
Si vous ne voulez pas que les particules bougent du tout, vous pouvez le faire en réglant activer à faux. Vous pouvez spécifier la vitesse des particules en utilisant le paramètre la vitesse. Pour déplacer chaque particule à une vitesse aléatoire, définissez au hasard à vrai. D'autre part, pour les déplacer dans des directions aléatoires, spécifiez direction comme aucun.
Tôt ou tard, au moins une des particules atteindra les limites de notre système. Que cette particule rebondisse ou sorte d’une autre direction est décidé par la valeur de la out_mode paramètre. Quand il est réglé sur en dehors, les particules sortent de la toile. Quand il est réglé sur rebondir, les particules rebondissent après avoir atteint la limite.
Cela semble un peu anormal lorsque des particules se croisent sans aucun changement de vitesse. Pour changer la vitesse des particules à chaque collision, vous pouvez définir rebondir à vrai. Fait intéressant, cela ne fonctionnera que si soit le line_linked ou la attraction la propriété est activée. Les particules inversent leur direction chaque fois qu’elles entrent en collision, même si la collision n’est pas frontale..
Enfin, je voudrais discuter de l’attraction. Une fois que vous avez activé l’attraction, les particules changent de vitesse chaque fois qu’elles se trouvent à proximité immédiate d’autres particules. La modification peut être positive ou négative en fonction de la valeur des autres paramètres. L'attraction dans chaque direction est inversement proportionnelle à la valeur des paramètres respectifs, rotationX et rotation. Les valeurs par défaut sont très élevées pour observer une attraction notable. D'autre part, si vous rendez leurs valeurs trop basses, les particules vont gagner des vitesses très élevées après un certain temps.
Le JSON responsable du mouvement des particules ci-dessus est:
"move": "enable": true, "speed": 20, "random": true, "direction": "none", "bounce": true, "out_mode": "bounce", "attract": "enable": true, "rotateX": 10, "rotationY": 10
Vous devez garder à l'esprit que lorsque vous définissez tout droit à vrai et direction à aucun dans le même temps, les particules ne bougeront pas du tout.
Jusqu'ici tout va bien, mais vous vous demandez peut-être si les particules peuvent aussi interagir avec l'utilisateur, et si elles le peuvent, comment elles pourraient interagir.
Pour répondre à votre première question, les particules peuvent interagir avec l'utilisateur. Particles.js peut répondre à trois événements: flotter, Cliquez sur, et redimensionner. Cependant, vous devez d’abord savoir que les événements peuvent être détectés sur le canevas ou sur la fenêtre elle-même en définissant la valeur du paramètre. detect_on paramètre. Maintenant, tous ces événements seront déclenchés chaque fois que vous passez la souris sur, faites un déclic ou redimensionnez la toile / fenêtre.
Lorsque vous définissez redimensionner à vrai, les particules s'ajustent dans l'espace restant sans aucune distorsion. Quand redimensionner est réglé sur faux, les particules changeront de forme pour s'adapter aux changements de taille de la toile.
"detect_on": "canvas", "events": "onhover": "enable": true, "mode": "repulse", "onclick": "enable": true, "mode": "push "," redimensionner ": true
Vous vous demandez probablement ce que le mode paramètre fait dans l'extrait de code ci-dessus. Ce paramètre définit la manière dont les particules interagiraient avec l'utilisateur. La bibliothèque a défini cinq modes d’interaction. Elles sont saisir, bulle, repousser, pousser, et retirer.
le saisir Le mode crée des lignes de connexion entre votre point de survol ou de clic et les particules proches dans une distance spécifique que vous définissez vous-même. Ce mode ne fonctionne qu'avec l'événement de survol. Le JSON ci-dessous trace une ligne d'opacité 1 pour connecter toutes les particules dans un rayon de 800 px..
"grab": "distance": 800, "line_linked": "opacity": 1
le bulle Le mode change la taille et l'opacité de toutes les particules situées à l'intérieur d'une distance donnée pendant une durée que vous décidez. le repousser Le mode éloigne la particule de l’emplacement du clic. Ces deux modes peuvent être ajoutés à flotter ou Cliquez sur. La durée est applicable uniquement sur les événements de clic dans les deux cas..
"bulle": "distance": 600, "taille": 60, "durée": 0.1, "opacité": 1, "répulsion": "distance": 500, "durée": 0.5
Vous devriez essayer de changer divers paramètres pour rendre la démo encore meilleure.
le pousser Le mode ajoute un certain nombre de particules à chaque clic de souris. Les particules seront ajoutées à l'emplacement du clic. De même, le retirer Le mode supprime les particules de la toile. Les particules à éliminer sont décidées au hasard.
"push": "particules_nb": 3, "supprimer": "particules_nb": 1
Les trois tutoriels de cette série couvrent tout ce que Particles.js a à offrir. J'ai également mentionné quelques points de temps en temps afin que vous n'ayez pas à vous gratter la tête plus tard au sujet de problèmes tels que les particules qui ne se rebondissent pas les unes sur les autres, etc..
Si vous souhaitez en savoir plus sur tous les paramètres dont nous avons discuté, veuillez consulter la documentation de cette bibliothèque. De plus, si vous êtes bloqué à un moment quelconque lorsque vous utilisez la bibliothèque ou si quelque chose ne se comporte pas comme il se doit, j'aimerais vous suggérer de lire le code source pour voir ce qui se passe sous le capot..
Accentsconagua