Débuter avec Paper.js Animation et images

Jusqu'à présent dans cette série, j'ai couvert les projets et les éléments, les chemins et la géométrie, ainsi que les interactions des utilisateurs dans Paper.js. La bibliothèque vous permet également d'animer divers éléments de vos projets. Si vous le combinez avec la possibilité d'agir en fonction des entrées de l'utilisateur, vous pouvez créer des effets vraiment intéressants. Ce tutoriel explique comment animer des éléments dans Paper.js.

Des sections ultérieures du didacticiel aborderont également la manipulation d’images et expliquent comment manipuler les couleurs de pixels individuels. La bibliothèque vous permet également de créer des rasters à partir de vecteurs qui seront traités à la fin..

Notions de base sur l'animation

Toutes les animations dans Paper.js sont gérées par le onFrame gestionnaire d'événements. Le code à l'intérieur du gestionnaire est exécuté jusqu'à 60 fois par seconde. La vue est automatiquement redessinée après chaque exécution. Changer progressivement certaines propriétés dans la fonction peut créer de très beaux effets.

le onFrame fonction de gestionnaire reçoit également un un événement objet. L'objet a trois propriétés qui nous fournissent des informations pertinentes pour l'animation. 

Le premier est event.count, qui nous indique le nombre de fois que le gestionnaire est exécuté. Le second est event.delta, ce qui nous donne le temps total écoulé depuis la dernière exécution de notre gestionnaire. Le troisième est heure de l'évènement, ce qui nous donne le temps qui s'est écoulé depuis le premier événement de trame.

Vous pouvez animer de nombreuses propriétés dans le gestionnaire. Dans notre exemple, je vais faire pivoter trois rectangles et changer la teinte du rectangle central. Considérons le code ci-dessous:

var rectA = nouveau Path.Rectangle (point: [300, 100], taille: [200, 150], strokeColor: 'jaune', strokeWidth: 10); var rectB = rectA.clone (); rectB.strokeColor = 'orange'; rectB.scale (0,8); var rectC = rectA.clone (); rectC.strokeColor = 'black'; rectC.scale (1.2); fonction onFrame (event) rectA.strokeColor.hue + = 10 * event.delta; rectA.rotate (2); rectB.rotate (2); rectC.rotate (2); 

Comme le montre l'extrait ci-dessus, le code nécessaire pour animer nos rectangles est plutôt minimal. Pour le rectangle A, on incrémente la teinte de 10 fois event.delta à chaque exécution du onFrame gestionnaire. La valeur de event.delta sera généralement proche de 0,01. Si je n'avais pas multiplié sa valeur par 10, il aurait fallu beaucoup de temps pour constater le changement de couleur. 

Je tourne également chaque rectangle de 2 degrés chaque fois que le code est exécuté. Si nous devions utiliser la valeur heure de l'évènement pour faire pivoter les rectangles, les rotations seraient devenues très rapides après un certain temps.

Au lieu d'animer tout le chemin ou l'élément en même temps, vous pouvez également animer des segments individuels. Le processus lui-même est assez simple. Vous pouvez utiliser path.segments pour renvoyer un tableau de tous les segments constituant un chemin. On peut accéder à des segments individuels en fournissant un indice valeur. Avant d'aller plus loin, j'aimerais que vous jetiez un coup d'oeil au code ci-dessous.

var aSquare = new Path.RegularPolygon (new Point (550, 200), 4, 100); aSquare.fillColor = 'pink'; aSquare.fullySelected = true; fonction onFrame (event) for (var i = 0; i <= 3; i++)  var sinValue = Math.sin(event.time * 4 + i); aSquare.segments[i].point.x = sinValue * 100 + 350;  aSquare.segments[1].point.y = sinValue * 50 + 100; 

Ici, on commence par créer un carré en utilisant le Path.RegularPolygon (centre, côtés, rayon) constructeur. le côtés Ce paramètre détermine le nombre de côtés de notre polygone. le rayon Ce paramètre détermine la taille de notre polygone. J'ai aussi mis le entièrement sélectionné propriété à vrai afin que vous puissiez voir les points individuels.

À l'intérieur de onFrame gestionnaire, je parcours tous les segments à l’aide d’une boucle for et mets leur coordonnée x à une valeur calculée en fonction de leur index. En utilisant heure de l'évènement à l'intérieur de Math.sin () fonction ne crée pas de problèmes liés aux valeurs extrêmes car la valeur de la Math.sin () la fonction sera toujours comprise entre -1 et 1. 

La démo suivante montre notre carré animé, qui d’ailleurs n’est plus un carré, grâce au code contenu dans notre onFrame gestionnaire. Je voudrais suggérer que vous essayiez différentes valeurs pour les paramètres de notre constructeur de polygone aussi bien que le péché fonction pour voir comment ils affectent l'animation finale de la démo.

Les bases de l'image

Les images dans Paper.js sont appelées rasters. Vous pouvez les transformer et les déplacer comme n'importe quel autre élément. Pour utiliser une image dans votre projet, vous devez d’abord l’ajouter au balisage de votre page Web en utilisant le code habituel. img tag et lui donner un identifiant. Ce identifiant est ensuite passé à la nouveau raster (id) constructeur.

N'oubliez pas que les images sur lesquelles vous travaillez doivent être déjà chargées et doivent être hébergées sur le même site Web que votre projet. L'utilisation d'images hébergées sur d'autres domaines entraînera des erreurs de sécurité. Dans ce tutoriel, nous allons manipuler l'image suivante:

Pour accéder aux couleurs de pixels individuels dans l'image ci-dessus, vous pouvez utiliser le raster.getPixel (x, y) fonction, où x et y sont les coordonnées de notre pixel. Le code ci-dessous génère 7 * 7 pixels remplis avec la couleur des pixels situés dans leur coin supérieur gauche:

var raster = new Raster ('landscape'); var gridSize = 8; var rectSize = 7; raster.on ('load', function () raster.size = new Taille (80, 40); pour (var y = 0; y < raster.height; y++)  for (var x = 0; x < raster.width; x++)  var color = raster.getPixel(x, y); var path = new Path.Rectangle( new Point(x, y) * gridSize, new Size(rectSize, rectSize)); path.fillColor = color;   project.activeLayer.position = view.center; );

Une fois le raster chargé, nous le redimensionnons à 80 * 40. pixels. À l'intérieur du niché pour boucles, nous allons sur les pixels individuels de ce raster et créons 7 * 7 carrés. Augmenter la taille de notre raster nous donnera de meilleurs résultats, mais l'exécution serait plus lente. Voici le résultat final avec le raster redimensionné visible dans le coin supérieur gauche:

Si vous souhaitez masquer le raster redimensionné, vous pouvez définir la raster.visible propriété à faux. Vous pouvez également manipuler la couleur des carrés générés. Par exemple, pour augmenter la composante rouge dans tous les carrés, vous pouvez utiliser la ligne suivante:

path.fillColor = color + new Color (0.4,0,0);

Le résultat final, dans ce cas, serait:

Rastérisation des éléments

Alors que Paper.js est une bibliothèque de graphiques vectoriels, il vous permet également de créer des rasters à partir d’éléments existants. Pour ce faire, vous devrez utiliser le item.rasterize () méthode. L'élément d'origine lui-même n'est pas supprimé du projet après le rastérisation. Vous pouvez également éventuellement spécifier la résolution de votre raster en pixels par pouce. Le code ci-dessous crée deux rasters à partir d'un polygone à différentes résolutions:

var aDodecagon = nouveau Path.RegularPolygon (nouveau Point (150, 180), 12, 30); aDodecagon.fillColor = '#CCAAFC'; var dodecRasterA = aDodecagon.rasterize (); dodecRasterA.position.x + = 250; var dodecRasterB = aDodecagon.rasterize (150); dodecRasterB.position.x + = 500; aDodecagon.scale (3); dodecRasterA.scale (3); dodecRasterB.scale (3);

Le polygone le plus à droite avec une résolution plus élevée est toujours net par rapport à celui du milieu. Voici le résultat final:

Dernières pensées

Si vous avez suivi tous les tutoriels de cette série, vous devez avoir suffisamment de connaissances pour commencer à utiliser Paper.js. Bien qu'il soit facile d'apprendre les bases de la bibliothèque, la maîtrise de tous les concepts nécessitera quelques efforts de votre part. Chaque fois que vous avez besoin de plus d'informations sur un sujet, vous pouvez consulter la référence sur le site officiel.. 

JavaScript est devenu l'un des langages de facto du travail sur le Web. Ce n’est pas sans ses courbes d’apprentissage, et il existe de nombreux cadres et bibliothèques pour vous tenir occupé. Si vous recherchez des ressources supplémentaires à étudier ou à utiliser dans votre travail, consultez ce que nous avons à votre disposition sur le marché Envato..

Si vous créez quelque chose d'intéressant en utilisant cette bibliothèque, partagez votre travail dans les commentaires..