Share
Two.js est une API facilitant la création de formes 2D avec du code. Suivez et vous apprendrez à créer et animer des formes à partir de JavaScript.
Two.js est agnostique en matière de rendu. Vous pouvez donc vous fier à la même API pour dessiner avec Canvas, SVG ou WebGL. La bibliothèque a beaucoup de méthodes qui peuvent être utilisées pour contrôler comment différentes formes apparaissent à l'écran ou comment elles sont animées..
La version non compressée de la bibliothèque a une taille d'environ 128 Ko, tandis que la version compressée est de 50 Ko. Si vous utilisez la dernière version, vous pouvez réduire davantage la taille de la bibliothèque en utilisant une version personnalisée..
Vous pouvez télécharger la version abrégée de la bibliothèque à partir de GitHub ou vous pouvez créer un lien direct vers la version hébergée sur CDN. Une fois que vous avez ajouté la bibliothèque à votre page Web, vous pouvez commencer à dessiner et à animer différentes formes ou objets..
Tout d'abord, vous devez expliquer à Two.js l'élément sur lequel vous souhaitez dessiner et animer vos formes. Vous pouvez transmettre certains paramètres au Deux constructeur pour mettre les choses en place.
Définissez le type de rendu à l'aide de la commande type propriété. Vous pouvez spécifier une valeur comme svg, webgl, Toile, etc. Le type est réglé sur svg par défaut. La largeur et la hauteur de l’espace de dessin peuvent être spécifiées à l’aide des touches largeur et la taille paramètres. Vous pouvez également définir l’espace de dessin sur tout l’écran disponible à l’aide des touches plein écran paramètre. Quand plein écran est mis à true, les valeurs de largeur et la taille sera ignoré.
Enfin, vous pouvez dire à Two.js de démarrer automatiquement une animation à l’aide de la méthode booléenne. démarrage automatique paramètre.
Après avoir transmis tous les paramètres souhaités au constructeur, vous pouvez commencer à dessiner des lignes, des rectangles, des cercles et des ellipses..
Vous pouvez dessiner une ligne en utilisant two.makeLine (x1, y1, x2, y2). Ici, (x1, y1) sont les coordonnées du premier point final, et (x2, y2) sont les coordonnées du deuxième point final. Cette fonction retournera un Two.Line objet, qui peut être stocké dans une variable pour une manipulation ultérieure à un moment ultérieur.
De la même manière, vous pouvez dessiner des rectangles normaux et arrondis en utilisant two.makeRectangle (x, y, largeur, hauteur) et two.makeRoundedRectangle (x, y, largeur, hauteur, rayon) respectivement. Rappelez-vous que X et y déterminer le centre du rectangle, au lieu de ses coordonnées en haut à gauche, comme beaucoup d'autres bibliothèques. le largeur et la taille les paramètres détermineront la taille du rectangle. le rayon paramètre est utilisé pour spécifier la valeur du rayon pour le coin arrondi.
Vous pouvez également afficher des cercles et des ellipses sur une page Web à l'aide de deux.makeCircle (x, y, rayon) et two.makeEllipse (x, y, largeur, hauteur) respectivement. Tout comme les rectangles, le X et y les paramètres spécifient le centre du cercle ou de l'ellipse. Réglage du largeur et la taille à la même valeur dans le cas d'une ellipse le rendra comme un cercle.
Une méthode utile dans Two.js que vous utiliserez fréquemment est two.makeGroup (objets). Vous pouvez soit transmettre une liste d'objets différents, soit un tableau d'objets, de chemins ou de groupes en tant que paramètre de cette méthode. Il retournera aussi un Two.Group objet.
Une fois que vous avez créé un groupe, vous pouvez manipuler tous ses enfants en même temps à l'aide des propriétés que le groupe vous rend disponibles..
le accident vasculaire cérébral et remplir Les propriétés peuvent être utilisées pour définir la couleur de trait et de remplissage pour tous les enfants d'un groupe. Ils accepteront tous les formulaires valides dans lesquels vous pouvez représenter une couleur en CSS. Cela signifie que vous êtes libre d'utiliser la notation RVB, HSL ou hexa. Vous pouvez aussi simplement utiliser le nom de la couleur, comme Orange, rouge, ou bleu. De même, vous pouvez définir des valeurs pour toutes les autres propriétés telles que largeur de ligne, opacité, mitre, et casquette. Il est possible de supprimer le remplissage et les contours de tous les enfants d’un groupe en utilisant aucun remplissage() et noStroke () les méthodes.
Vous pouvez également appliquer d'autres transformations physiques comme échelle, rotation, et Traduction. Ces transformations seront appliquées à des objets individuels. Ajouter de nouveaux objets à un groupe et les supprimer est facile avec des méthodes comme ajouter() et retirer().
Vous pouvez définir des dégradés linéaires et radiaux dans Two.js. Définir un dégradé ne signifie pas qu’il sera rendu automatiquement à l’écran, mais vous pourrez l’utiliser lors de la définition du dégradé. remplir ou accident vasculaire cérébral valeurs d'objets divers.
Vous pouvez définir un dégradé linéaire en utilisant two.makeLinearGradient (x1, y1, x2, y2, s'arrête). Les valeurs x1 et y1 détermine les coordonnées du début du dégradé. De même, les valeurs x2 et y2 détermine les coordonnées de la fin du dégradé. le arrête paramètre est un tableau de Two.Stop les instances. Celles-ci définissent les couleurs de chaque partie du tableau et l'emplacement de chaque couleur dans la suivante. Ils peuvent être définis en utilisant nouveau Two.Stop (offset, couleur, opacité), où décalage détermine le point du dégradé où cette couleur particulière doit être entièrement rendue. le Couleur Ce paramètre détermine la couleur du dégradé à un point donné. Vous pouvez utiliser n'importe quelle représentation de couleur CSS valide comme valeur. Finalement, le opacité Ce paramètre détermine l'opacité de la couleur. L'opacité est facultative et peut avoir n'importe quelle valeur entre 0 et 1.
Vous pouvez définir des gradients radiaux de manière similaire en utilisant two.makeRadialGradient (x, y, rayon, arrêts, fx, fy). Dans ce cas, les valeurs X et y détermine le centre du gradient. le rayon paramètre spécifie jusqu'où le dégradé doit s'étendre. Vous pouvez également transmettre un tableau d’arrêts à cette méthode afin de définir la composition chromatique des dégradés. Les paramètres fx et fy sont facultatifs et peuvent être utilisés pour spécifier la position focale du dégradé.
Découvrez quelques types de dégradés et leur code dans le CodePen ci-dessous.
Rappelez-vous que le X et y la position des gradients correspond à l’origine de la forme qu’ils essaient de remplir. Par exemple, un dégradé radial censé remplir une forme à partir du centre aura toujours X et y mis à zéro.
Two.js vous permet également d’écrire du texte sur la zone de dessin et de le mettre à jour ultérieurement en fonction de vos besoins. Cela nécessite l'utilisation de la méthode two.makeText (message, x, y, styles). Le nom des paramètres peut indiquer que message est le texte que vous voulez écrire. Les paramètres X et y sont les coordonnées du point qui servira de centre pour écrire le texte. le modes paramètre est un objet qui peut être utilisé pour définir les valeurs d'un grand ensemble de propriétés.
Vous pouvez utiliser des styles pour définir les valeurs de propriétés telles que font famille, Taille, et alignement. Vous pouvez également spécifier la valeur de propriétés telles que remplir, accident vasculaire cérébral, opacité, rotation, échelle, et Traduction.
Après avoir appris toutes ces méthodes et propriétés, il est temps de les appliquer à un projet. Dans ce tutoriel, je vais vous montrer comment utiliser Two.js pour restituer les dix premiers éléments du tableau périodique avec des électrons en rotation autour du noyau. Le noyau aura également un léger mouvement pour améliorer l'attrait visuel de notre représentation.
Nous commençons par définir quelques variables et fonctions qui seront utilisées plus tard.
Accentsconagua
var centerX = window.innerWidth / 2; var centerY = window.innerHeight / 2; var elem = document.getElementById ("atomes"); var elementNames = ["", "Hydrogen", "Helium", "Lithium", "Beryllium", "Boron", "Carbon", "Nitrogen", "Oxygen", "Fluor", "Neon"]; var styles = alignement: "centre", taille: 36, famille: "Lato"; var nucleusCount = 10; var nucleusArray = Array (); var electronCount = 10; var electronArray = Array (); fonction intRange (min, max) return Math.random () * (max - min) + min; Le code ci-dessus stocke les coordonnées du centre de notre fenêtre dans les variables centerX et centreY. Celles-ci seront utilisées plus tard pour placer notre atome au centre. le elementNames tableau contient les noms des dix premiers éléments du tableau périodique. L'index de chaque nom correspond au nombre d'électrons et de protons de cet élément et commence par une chaîne vide. le modes objet contient des propriétés pour le style de l'objet texte.
Nous avons également défini une fonction intRange () pour obtenir une valeur entière aléatoire dans des extrêmes donnés.
var deux = nouveau Deux (fullscreen: true). appendTo (elem); var protonColor = two.makeRadialGradient (0, 0, 15, nouveau Two.Stop (0, "rouge", 1), nouveau Two.Stop (1, "noir", 1)); var neutronColor = two.makeRadialGradient (0, 0, 15, nouveau Two.Stop (0, "bleu", 1), nouveau Two.Stop (1, "noir", 1)); pour (i = 0; i < nucleusCount; i++) nucleusArray.push(two.makeCircle(intRange(-10, 10), intRange(-10, 10), 8)); nucleusArray.forEach(function(nucleus, index) if (index % 2 == 0) nucleus.fill = protonColor; if (index % 2 == 1) nucleus.fill = neutronColor; nucleus.noStroke(); );
Cela crée une instance de Two et définit deux dégradés radiaux. Les gradients radiaux rouge / noir représenteront les protons et les gradients bleus / noirs représenteront les neutrons..
Nous avons utilisé le intRange () fonction pour placer tous ces neutrons et protons à moins de 20 pixels l’un de l’autre. le makeCircle () méthode définit également le rayon de ces protons et neutrons à 10 pixels. Après cela, nous parcourons nucleusArray et remplissez chaque cercle avec un dégradé différent en alternance.
pour (var i = 0; i < 10; i++) if (i < 2) var shellRadius = 50; var angle = i * Math.PI; electronArray.push( two.makeCircle( Math.cos(angle) * shellRadius, Math.sin(angle) * shellRadius, 5 ) ); if (i >= 2 && i < 10) var shellRadius = 80; var angle = (i - 2) * Math.PI / 4; electronArray.push( two.makeCircle( Math.cos(angle) * shellRadius, Math.sin(angle) * shellRadius, 5 ) );
Il était facile de placer des neutrons et des protons dans le noyau. Cependant, placer correctement les électrons à une distance uniforme demandera un peu de calcul. Nous utilisons le shellRadius variable pour spécifier la distance des différentes couches d'électrons du noyau. Un cercle entier couvre un angle égal à 2 PI radians. Nous pouvons placer différents électrons uniformément en répartissant les 2 radians PI également.
le Math.cos () et Math.sin () les fonctions sont utilisées pour séparer les composantes verticale et horizontale du vecteur de position de différents électrons en fonction de leur angle.
var orbitA = two.makeCircle (centerX, centerY, 50); orbitA.fill = "transparent"; orbitA.linewidth = 2; orbitA.stroke = "rgba (0, 0, 0, 0.1)"; var orbitB = two.makeCircle (centerX, centerY, 80); orbitB.fill = "transparent"; orbitB.linewidth = 2; orbitB.stroke = "rgba (0, 0, 0, 0.1)"; var groupElectronA = two.makeGroup (electronArray.slice (0, 2)); groupElectronA.translation.set (centerX, centerY); groupElectronA.fill = "orange"; groupElectronA.linewidth = 1; var groupElectronB = two.makeGroup (electronArray.slice (2, 10)); groupElectronB.translation.set (centerX, centerY); groupElectronB.fill = "yellow"; groupElectronB.linewidth = 1; var groupNucleus = two.makeGroup (nucleusArray); groupNucleus.translation.set (centerX, centerY);
Cette partie du code place les électrons de différentes couches ainsi que les neutrons et les protons dans leurs propres groupes. Il définit également les couleurs de remplissage pour tous les électrons d'une orbite spécifique à la fois..
deux .bind ("update", fonction (frameCount) groupElectronA.rotation + = 0.025 * Math.PI; groupElectronB.rotation + = 0.005 * Math.PI; groupNucleus.rotation - = 0.05;) .play (); var text = two.makeText ("", centerX, 100, styles); nucleusArray.forEach (fonction (nucleus, index) nucleus.opacity = 0;); electronArray.forEach (fonction (electron, index) electron.opacity = 0;); Cette partie du code définit l'opacité à zéro des électrons et des protons individuels. Il indique également à Two.js de faire tourner les électrons et les protons à des vitesses spécifiques.
visible = 0; document.addEventListener ("click", fonction (événement) if (visible < nucleusArray.length) nucleusArray[visible].opacity = 1; electronArray[visible].opacity = 1; visible++; text.value = elementNames[visible]; else nucleusArray.forEach(el => el.opacité = 0); electronArray.forEach (el => el.opacity = 0); visible = 0; text.value = elementNames [0]; ); La dernière partie du code nous permet de parcourir les éléments en cliquant sur la souris ou en tapant dessus. Pour charger l'élément suivant, nous rendons visibles un électron et un proton ou neutron et mettons à jour le nom de l'élément. Après avoir cliqué sur le dernier élément, toutes les particules sont à nouveau masquées pour que nous puissions tout recommencer. le visible la variable garde la trace du nombre de particules atomiques actuellement visibles afin que nous puissions les afficher ou les masquer en conséquence.
Essayez de cliquer ou de cliquer sur la démonstration suivante de CodePen pour afficher les dix premiers éléments du tableau périodique..
Nous avons commencé ce didacticiel par une brève introduction à la bibliothèque Two.js et à son utilisation pour dessiner des formes telles que des rectangles, des cercles et des ellipses. Après cela, nous avons discuté de la façon dont nous pouvons regrouper différents objets pour les manipuler tous en même temps. Nous avons utilisé cette possibilité pour regrouper des éléments afin de les traduire et les faire pivoter en synchronisation. Ces outils se sont tous réunis dans notre animation des atomes des dix premiers éléments du tableau périodique.
Comme vous pouvez le constater, la création de graphiques 2D animés est très facile avec Two.js. L'objectif de cet article était de vous aider à démarrer rapidement. Nous n'avons donc abordé que les bases. Cependant, vous devriez lire la documentation officielle pour en savoir plus sur la bibliothèque.!
