Share
Le traitement est l’une des bibliothèques les plus puissantes disponibles aujourd’hui pour la création d’illustrations visuelles algorithmiques, en 2D et en 3D. Il est open source, basé sur Java, et propose une grande variété de fonctions permettant de dessiner et de peindre avec du code à la fois amusant et simple..
En utilisant la bibliothèque principale de Processing dans vos applications Android, vous pouvez créer des animations et des graphiques hautes performances sans avoir à vous soucier des API OpenGL ou Canvas d'Android. Généralement, vous n’aurez même pas à vous soucier de tâches de bas niveau telles que la gestion des threads, la création de boucles de rendu ou le maintien de la cadence..
Dans ce tutoriel, je vais vous montrer comment ajouter Traitement à une application Android et vous présenter certaines des fonctionnalités les plus utiles..
Processing est livré avec son propre environnement de développement intégré, qui peut être utilisé pour créer des applications Android. Cependant, si vous êtes déjà un développeur d'applications Android, je suis sûr que vous préféreriez utiliser Android Studio à la place. Alors allez-y et téléchargez la dernière version du mode Android de Processing.
Dans le fichier ZIP que vous avez téléchargé, vous trouverez un fichier nommé traitement-core.zip. Extrayez-le et renommez-le en processing-core.jar en utilisant la ligne de commande ou l'explorateur de fichiers de votre système d'exploitation.
Enfin, ajoutez le fichier JAR comme l’une des dépendances de votre projet Android Studio en le plaçant dans le app modules libs dossier.
Vous avez maintenant tout ce dont vous avez besoin pour commencer à utiliser Processing.
La quasi-totalité des fonctionnalités de Processing est disponible via le PApplet classe, qui sert essentiellement de toile sur laquelle vous pouvez dessiner. En l'étendant, vous obtenez un accès facile à toutes les méthodes proposées.
val myCanvas = object: PApplet () // Plus de code ici
Pour configurer la toile, vous devez remplacer sa réglages() méthode. Dans la méthode, vous pouvez spécifier deux détails de configuration importants: les dimensions souhaitées du canevas et l'utilisation du moteur de rendu 2D ou 3D. Pour le moment, rendons la zone de travail aussi grande que l'écran de l'appareil et utilisons le moteur de rendu 2D par défaut. Pour ce faire, vous pouvez appeler le plein écran() méthode de raccourci.
remplacer les paramètres amusants () fullScreen ()
le réglages() méthode est une méthode spéciale nécessaire uniquement lorsque vous n'utilisez pas l'IDE de Processing. Je vous suggère de ne plus ajouter de code.
Si vous souhaitez initialiser des variables ou modifier des paramètres liés au dessin, tels que la couleur d'arrière-plan du canevas ou le nombre d'images qu'il doit afficher par seconde, utilisez le installer() méthode à la place. Par exemple, le code suivant vous montre comment utiliser le Contexte() méthode pour changer la couleur de fond de la toile en rouge:
Accentsconagua
remplacez fun setup () background (Color.parseColor ("# FF8A80")) // Matériau Rouge A100Comme le canevas ne fait toujours pas partie d'une activité, vous ne pourrez pas le voir lorsque vous exécuterez votre application. Pour afficher le canevas, vous devez d'abord créer un conteneur à l'intérieur du fichier XML de présentation de votre activité. UNE LinearLayout widget ou un FrameLayout widget peut être le conteneur.
UNE PApplet instance ne peut pas être directement ajoutée au conteneur que vous avez créé. Vous devez le placer dans un Fragmentation par exemple d'abord et ensuite appeler le setView () méthode du Fragmentation exemple pour l'associer au conteneur. Le code suivant vous montre comment procéder:
// Place la toile dans le fragment val myFragment = PFragment (myCanvas) // Afficher le fragment myFragment.setView (canvas_container, this)
À ce stade, si vous exécutez l'application, vous devriez être en mesure de voir une toile vierge couvrant tout l'écran de votre appareil..
Maintenant que vous êtes en mesure de voir la toile, commençons à dessiner. Pour dessiner à l’intérieur de la toile, vous devez remplacer le dessiner() méthode du PApplet sous-classe créée précédemment.
redéfinit fun draw draw () // Plus de code ici
Cela peut ne pas sembler évident immédiatement, mais Processing, par défaut, essaie d’appeler le dessiner() méthode autant de fois que 60 fois par seconde, tant que la toile est affichée. Cela signifie que vous pouvez facilement créer à la fois des images fixes et des animations..
Le traitement utilise diverses méthodes nommées de manière intuitive qui vous permettent de dessiner des primitives géométriques telles que des points, des lignes, des ellipses et des rectangles. Par exemple, le rect () méthode dessine un rectangle, et le ellipse() méthode dessine une ellipse. Les deux rect () et ellipse() les méthodes attendent des arguments similaires: les coordonnées X et Y de la forme, sa largeur et sa hauteur.
Le code suivant vous montre comment dessiner un rectangle et une ellipse:
rect (100f, 100f, 500f, 300f) // Le coin supérieur gauche est à (100,100) ellipse (350f, 650f, 500f, 400f) // Le centre est à (350,650)
De nombreuses méthodes sont également surchargées, ce qui vous permet de modifier légèrement les formes de base. Par exemple, en passant un cinquième paramètre à la rect () méthode, un rayon de coin, vous pouvez dessiner un rectangle arrondi.
rect (100f, 900f, 500f, 300f, 100f) // Rayon d’angle de 100 pixels
Si vous exécutez votre application maintenant, vous devriez voir quelque chose comme ceci:
Si vous souhaitez modifier la couleur de la bordure des formes, vous pouvez appeler le accident vasculaire cérébral() méthode et passez la couleur souhaitée comme argument. De même, si vous souhaitez remplir les formes avec une couleur spécifique, vous pouvez appeler le remplir() méthode. Les deux méthodes doivent être appelées avant de dessiner la forme.
Le code suivant dessine un triangle bleu avec un contour vert:
trait (Color.GREEN) remplissage (Color.BLUE) triangle (100f, 1600f, 300f, 1300f, 500f, 1600f)
Si vous exécutez votre application maintenant, vous pourrez voir le triangle bleu, mais vous remarquerez également que toutes les autres formes ont également viré au bleu..
Si la raison ne vous est pas évidente, rappelez-vous que le dessiner() La méthode est appelée à plusieurs reprises. Cela signifie que tout paramètre de configuration que vous modifiez pendant un cycle de tirage aura un effet sur les cycles de tirage suivants. Ainsi, afin de vous assurer que toutes vos formes sont dessinées avec les bonnes couleurs, il est conseillé de toujours spécifier explicitement la couleur de chaque forme que vous dessinez, juste avant de la dessiner.
Par exemple, en ajoutant le code suivant au début de la dessiner() méthode, vous pouvez rendre les autres formes blanches à nouveau.
// Définissez le remplissage et le contour sur blanc et noir // avant de dessiner le contour des rectangles et des ellipses (Color.BLACK), effectuez un remplissage (Color.WHITE)
À ce stade, la toile ressemblera à ceci:
Avec Processing, la gestion des événements tactiles est extrêmement facile. Vous n'avez besoin d'aucun gestionnaire d'événement. Tout ce que vous avez à faire est de vérifier si une variable booléenne nommée mousePressed est vrai de savoir quand l'utilisateur touche l'écran. Une fois que vous avez confirmé que l’utilisateur touche l’écran, vous pouvez utiliser le mouseX et souris variables pour déterminer les coordonnées X et Y du toucher.
Par exemple, le code suivant dessine un nouveau rectangle chaque fois que l'utilisateur touche le canevas..
// Vérifie si l'utilisateur touche le canevas si (mousePressed) // Spécifie les couleurs de remplissage et de trait , 100f, 100f)
Si vous exécutez votre application maintenant et faites glisser votre doigt sur l'écran, vous devriez voir dessiner beaucoup de rectangles jaunes.
Avant de poursuivre, voici un petit conseil: si, à un moment quelconque, vous souhaitez vider le fond, vous pouvez simplement appeler le Contexte() méthode à nouveau.
background (Color.parseColor ("# FF8A80")) // Matériau Rouge A100Il n'y a que jusqu'à présent que vous pouvez obtenir avec des primitives simples. Si vous souhaitez créer des illustrations complexes et complexes, vous aurez probablement besoin d'accéder aux pixels individuels de la zone de travail..
En appelant le loadPixels () méthode, vous pouvez charger les couleurs de tous les pixels de la toile dans un tableau nommé pixels. En modifiant le contenu du tableau, vous pouvez très efficacement modifier le contenu du canevas. Enfin, une fois que vous avez fini de modifier le tableau, n'oubliez pas d'appeler le updatePixels () méthode pour rendre le nouvel ensemble de pixels.
Notez que le pixels array est un tableau unidimensionnel dont la taille est égale au produit de la largeur et de la hauteur de la toile. Comme le canevas est bidimensionnel, la conversion des coordonnées X et Y d'un pixel en un index valide du tableau implique l'utilisation de la formule suivante:
// index = xCoordinate + yCoordinate * widthOfCanvas
L'exemple de code suivant, qui définit la couleur de chaque pixel de la toile en fonction de ses coordonnées X et Y, devrait vous aider à mieux comprendre comment utiliser le pixels tableau:
override fun draw () loadPixels () // Load array // boucle sur toutes les coordonnées valides pour (y dans 0… hauteur - 1) pour (x dans 0… largeur - 1) // Calculer index val index = x + y * width // Mise à jour des pixels à l'index avec une nouvelle couleur pixels [index] = Color.rgb (x% 255, y% 255, (x * y)% 255) // // Rend les pixels avec les nouvelles couleurs updatePixels ( )
le Color.rgb () La méthode que vous voyez ci-dessus convertit les valeurs individuelles de rouge, de vert et de bleu en un entier représentant une valeur de couleur unique comprise par le framework de traitement. N'hésitez pas à modifier les arguments que vous lui transmettez, mais assurez-vous qu'ils sont toujours compris entre 0 et 255.
Si vous choisissez d'exécuter le code sans aucune modification, vous devriez voir un motif qui ressemble à ceci:
Vous savez maintenant comment créer des graphiques 2D à l'aide du langage de traitement. Avec les compétences que vous avez acquises aujourd'hui, vous pouvez non seulement rendre vos applications Android plus attrayantes, mais également créer des jeux complets à partir de rien. Vous n'êtes limité que par votre créativité!
Pour en savoir plus sur le traitement, je vous suggère de passer du temps à parcourir les pages de référence officielles..
Et pendant que vous êtes ici, consultez certains de nos autres articles sur le développement d'applications Android.!
