Share
Le didacticiel précédent de Particles.js a brièvement décrit les différentes fonctionnalités offertes par la bibliothèque et la façon de commencer à utiliser cette bibliothèque. Dans ce tutoriel, je couvrirai en détail tous les aspects de Particles.js qui traitent de l’aspect physique des particules..
La première chose que nous allons traiter est le nombre et la densité des particules. La densité détermine le nombre de particules qui seront emballées dans une zone donnée. Il est activé par défaut avec le value_area défini sur 800. Voici le JSON qui vous permet de contrôler le nombre de particules:
"nombre": "valeur": 50, "densité": "activé": vrai, "valeur_réseau": 500
Si vous définissez activer sous densité à faux alors le nombre de particules affichées sera exactement 50. En doublant la valeur de value_area réduira le nombre de particules d'environ la moitié.
Il y a trois façons de définir les couleurs des particules. Vous pouvez définir les couleurs au format HEX, RGB ou HSL. En raison d'un bogue dans la bibliothèque, les formats RGB et HSL ne fonctionnent que lorsque vous supprimez la valeur de couleur par défaut de la bibliothèque..
Si vous souhaitez définir de manière aléatoire la couleur des particules, vous pouvez le faire avec la valeur "random". Enfin, pour définir les couleurs de manière aléatoire à partir d'une liste de couleurs, vous devez fournir les couleurs au format HEX sous forme de tableau. Voici le JSON pour définir les couleurs des particules:
"couleur": "valeur": "#fff" // définir le blanc dans HEX (nous utilisons cette version) "valeur": r: 255, g: 255, b: 255 // définir le blanc dans RGB " valeur ": h: 0, s: 100%, l: 100% // définir le blanc dans le HSL" valeur ": [" # f00 "," # 0f0 "," # 00f "] // définir le rouge, le vert and blue randomly "value": "random" // définit les couleurs de manière aléatoire
La propriété opacity vous donne beaucoup de contrôle. Vous pouvez définir une valeur exacte ou utiliser des valeurs aléatoires en définissant "au hasard" à vrai. Non seulement cela, mais vous pouvez également animer l'opacité des particules. Voici le code JSON de la propriété opacity:
"opacity": "value": 1, "random": true, // mis à false dans notre cas "anim": "enable": true, "speed": 8, "opacity_min": 0.4, "sync ": faux
Réglage "sync" à vrai animera l'opacité de toutes les particules en même temps. En utilisant une valeur de 0.4 pour "opacity_min" veille à ce que l'opacité ne descende jamais en dessous de 0,4 pour aucune particule pendant l'animation. Voici une démo avec des étoiles se déplaçant à travers l'espace. Essayez de changer le nombre, la couleur ou l'opacité des particules pour voir leur effet..
Particles.js a cinq valeurs différentes pour créer des formes de base. Une forme simple comme cercle génère une particule circulaire, Triangle génère des particules triangulaires, et bord génère des carrés. Vous pouvez utiliser la valeur polygone créer un nb_sides polygone latéral, où vous fournissez la valeur nb_sides. Pour créer des formes d'étoiles réelles, vous pouvez définir le type de forme sur étoile. le accident vasculaire cérébral paramètre ajoute un contour d’une couleur et d’une largeur données autour de toutes les particules. Le code JSON ci-dessous créera des hexagones.
"forme": "type": "polygone", "contour": "largeur": 4, "couleur": "#fff", "polygone": "nb_sides": 6
Il est également possible d'afficher des images au lieu de formes de base. Tout d’abord, vous devrez spécifier le type de forme comme image. Ensuite, vous pouvez définir la source de l'image et la hauteur et la largeur souhaitées. Il ne faut pas oublier que la largeur et la hauteur ne détermineront pas la taille des particules mais leur format. Voici quelques JSON pour créer des particules avec des images d'astéroïdes:
"shape": "type": "image", "image": "src": "img / football.png", // Définit le chemin de l'image. "width": 1, // La largeur et la hauteur ne décident pas de la taille. "height": 1 // Ils décident simplement de l'aspect.
La bibliothèque vous permet également de mélanger plusieurs formes ensemble. Par exemple, vous pouvez décider de créer des cercles, des carrés et des hexagones simultanément. Dans ce cas, tout ce que vous avez à faire est de passer un tableau avec toutes ces formes.
"type": ["cercle", "arête", "polygone"]
La propriété size contient toutes les options de la propriété opacity. Vous pouvez définir la taille de manière aléatoire et animer la taille de particules individuelles. Examinez le code JSON suivant..
"taille": "valeur": 25, "aléatoire": vrai, "anim": "activé": vrai, "vitesse": 20, "taille_min": 10, "sync": faux
Si vous définissez au hasard à faux, toutes les particules seront de taille 25. Quand au hasard est réglé sur vrai, taille sert de limite de taille maximale pour les particules. Réglage synchroniser à vrai l'animation intérieure changera la taille de tous les éléments simultanément. Vous devez ouvrir la démo et essayer différentes valeurs pour le nombre de côtés de polygone, d'animation et d'autres propriétés pour voir comment elles affectent le résultat final..
Lorsque les particules sont suffisamment proches, vous pouvez tracer des lignes de connexion entre elles en activant la line_linked propriété.
Cette propriété a quatre valeurs supplémentaires. le distance propriété spécifie la distance maximale jusqu'à laquelle les lignes seront tracées. Vous pouvez également définir le Couleur comme une chaîne HEX. L'opacité des lignes varie en fonction de la distance entre les particules. La valeur que vous spécifiez comme opacité est l'opacité des lignes lorsque les particules sont vraiment proches les unes des autres. finalement, largeur détermine la largeur de vos lignes. Voici l'extrait JSON de la démo qui l'accompagne.
"line_linked": "enable": true, "distance": 200, "color": "#fff", "opacity": 1, "width": 4
Vous pouvez voir que les lignes disparaissent dès que la distance entre les particules dépasse 200 px.
J'ai essayé de couvrir tout ce que vous devez savoir pour changer la forme, la taille, la couleur et presque toutes les autres propriétés physiques des particules. Les exemples de ce didacticiel illustrent clairement à quel point il est facile d’utiliser cette bibliothèque. Si vous avez besoin d'une bibliothèque de particules de base, vous devriez absolument essayer Particles.js.
Le prochain tutoriel vous apprendra comment contrôler le mouvement des particules et leurs interactions entre elles et avec vous. Si vous avez des questions concernant ce didacticiel, veuillez laisser un commentaire..
Accentsconagua