Guide ultime du langage de traitement, partie I : les principes de base

Publié: 2022-03-11

Vous luttez contre l'ennui et avez envie d'utiliser votre créativité. Vous voulez construire quelque chose, quelque chose d'impressionnant visuellement, quelque chose d'artistique. Ou peut-être voulez-vous apprendre la programmation et faire quelque chose d'impressionnant dès que possible. Si tel est le cas, le langage de traitement est la solution.

Parmi tous les langages de programmation avec lesquels j'ai travaillé jusqu'à présent, Processing était sans aucun doute l'un des plus divertissants. C'est un langage simple - facile à apprendre, à comprendre et à utiliser, mais il est très puissant. C'est presque comme si vous peigniez sur une toile vide avec des lignes de code. Il n'y a pas de règles ou de lignes directrices rigides pour limiter votre créativité, la seule limite est votre imagination.

Guide ultime du langage de traitement Partie I : Les fondamentaux

Au collège, j'étais assistante d'enseignement d'un programme qui rassemblait des élèves du secondaire et leur enseignait le traitement. La plupart d'entre eux n'avaient pas de solides connaissances en programmation, certains n'avaient même pas écrit une seule ligne de code auparavant. En seulement cinq jours, ils devaient apprendre la langue et créer leurs propres jeux simples. Le taux de réussite était de près de cent pour cent, nous avons rarement fait face à des échecs. Dans cet article, c'est exactement ce que nous allons faire. J'ai réduit tout le programme en deux parties. Première partie, je vais parler de la langue. Je donnerai un aperçu de base, une procédure pas à pas pour le traitement et je donnerai quelques trucs et astuces. Puis dans la partie suivante, nous allons construire un jeu simple étape par étape, chaque étape sera expliquée en détail. Je convertirai également le code du jeu en JavaScript en utilisant p5js, afin que notre jeu puisse fonctionner dans un navigateur Web.

Ce que vous devez déjà savoir

Pour comprendre et suivre facilement ces articles, vous devez avoir une connaissance de base de la programmation, car je ne parlerai pas des fondamentaux de la programmation. Cependant, je ne toucherai généralement à aucun concept de programmation avancé, donc une compréhension superficielle suffira. Il y a certaines parties où je parle d'idées et de concepts de bas niveau tels que la programmation orientée objet (POO), mais ils ne sont pas cruciaux. Ceux-ci sont destinés aux lecteurs curieux qui s'intéressent à la structure de la langue. Si vous ne voulez pas savoir, vous pouvez simplement ignorer ces parties. En dehors de cela, la seule chose que vous devriez avoir est l'ambition d'apprendre cette langue géniale et l'enthousiasme pour créer votre propre jeu !

Comment suivre

Je suis toujours favorable à l'apprentissage de la programmation en essayant et en expérimentant. Plus tôt vous plongerez dans votre propre jeu, plus vite vous vous familiariserez avec le traitement. Ce sera donc ma première suggestion, essayez chaque étape dans votre propre environnement. Processing a un IDE simple et facile à utiliser (c'est-à-dire un éditeur de code), c'est la seule chose que vous aurez besoin de télécharger et d'installer pour suivre. Vous pouvez le télécharger à partir d'ici.

Alors, commençons!

Qu'est-ce que la langue de traitement ?

Cette section comprend un bref aperçu technique du langage, sa structure et quelques notes sur le processus de compilation et d'exécution. Les détails incluront des connaissances avancées sur la programmation et l'environnement Java. Si les détails ne vous dérangent pas pour l'instant et que vous avez hâte d'apprendre et de coder votre propre jeu, vous pouvez passer à la section "Principes de base du traitement".

Le traitement est un langage de programmation visuel qui vous permet d'esquisser avec des codes, pour ainsi dire. Cependant, ce n'est pas exactement un langage de programmation en soi, c'est ce qu'ils appellent un langage de programmation "Java-esque", ce qui signifie que le langage est construit sur la plate-forme Java, mais n'est pas exactement Java en soi. Il est basé sur Java et tout votre code est prétraité et converti directement en code Java lorsque vous appuyez sur le bouton d'exécution. La classe PApplet de Java est la classe de base pour tous les croquis de traitement. Pour donner un exemple, prenons quelques blocs de code de traitement de base :

 public void setup() { // setup codes goes here } public void draw() { // draw codes goes here }

Ces blocs de code seront convertis en quelque chose comme ceci :

 public class ExampleFrame extends Frame { public ExampleFrame() { super("Embedded PApplet"); setLayout(new BorderLayout()); PApplet embed = new Embedded(); add(embed, BorderLayout.CENTER); embed.init(); } } public class Embedded extends PApplet { public void setup() { // setup codes goes here } public void draw() { // draw codes goes here } }

Vous pouvez voir que le bloc de code de traitement a été enveloppé avec une classe qui s'étend de l'applet Java. Par conséquent, toutes les classes que vous définissez dans votre code de traitement, le cas échéant, seront traitées comme des classes internes.

Le fait que Processing soit basé sur Java nous donne beaucoup d'avantages, surtout si vous êtes un développeur Java. Non seulement la syntaxe est familière, mais elle vous donne également la possibilité d'intégrer du code Java, des bibliothèques, des fichiers JAR dans vos croquis, d'utiliser vos applets de traitement directement dans vos applications Java, de définir des classes et d'utiliser des types de données standard tels que int , flottant, char et ainsi de suite. Vous pouvez même écrire votre code Pocessing directement depuis Eclipse, si vous voulez passer du temps à le configurer. Une chose que vous ne pouvez pas faire est d'utiliser des composants AWT ou Swing dans vos esquisses de traitement, car ils entrent en conflit avec la nature en boucle de Processing. Mais ne vous inquiétez pas, nous ne ferons aucun de ces trucs fantaisistes dans cet article.

Fondamentaux du traitement

Le code de traitement se compose de deux parties principales, les blocs de configuration et de dessin . Le bloc de configuration s'exécute une fois lorsque le code est exécuté et les blocs de dessin s'exécutent en continu. L'idée principale derrière Processing est que ce que vous écrivez dans le bloc de dessin sera exécuté 60 fois par seconde de haut en bas, jusqu'à ce que votre programme se termine . Nous allons tout construire en profitant de cette idée même. Nous allons faire bouger nos objets, garder nos scores, détecter les collisions, mettre en œuvre la gravité et faire à peu près tout le reste en utilisant cette fonctionnalité. Cette boucle de rafraîchissement est le cœur de notre projet . J'expliquerai comment utiliser ce battement de cœur pour donner vie à votre code dans les sections suivantes. Tout d'abord, permettez-moi de vous présenter l'IDE de traitement.

EDI de traitement

Si vous avez lu jusqu'à présent et que vous n'avez toujours pas téléchargé l'IDE de traitement, continuez et faites-le. Tout au long de l'article, je vais décrire quelques tâches faciles à essayer par vous-même, vous ne pouvez vous entraîner que si l'IDE est opérationnel. Voici une brève introduction de l'IDE de traitement. C'est très simple et explicite, donc je vais le garder court.

Comme vous vous en doutez, les boutons d'exécution et d'arrêt font ce qu'ils suggèrent. Lorsque vous cliquez sur le bouton Exécuter , votre code sera compilé et exécuté. Par nature, les programmes de traitement ne se terminent jamais, ils s'exécutent indéfiniment jusqu'à ce qu'ils soient dérangés. Vous pouvez le terminer par programme, mais si vous ne le faites pas, vous pouvez utiliser le bouton d'arrêt .

Le bouton qui ressemble à un papillon à droite du run & stop est le débogueur . L'utilisation du débogueur nécessite un tout autre article qui lui est dédié. Cela sort du cadre de cet article, vous pouvez donc l'ignorer pour le moment. La liste déroulante à côté du bouton du débogueur est l'endroit où vous ajoutez / définissez des mods. Les mods vous fournissent certaines fonctionnalités, vous permettent d'écrire du code pour Android, vous permettent d'écrire du code en Python, etc. Les mods sont également hors de portée, vous pouvez donc le conserver dans le mode Java par défaut et l'ignorer également.

La fenêtre de l'éditeur de code est l'endroit où vos croquis s'exécutent normalement. Dans l'image, il est vide, car nous n'avons défini aucune propriété comme la taille ou la couleur d'arrière-plan, ou nous n'avons rien dessiné.

Il n'y a pas grand-chose à dire sur l'éditeur de code, c'est simplement là que vous écrivez votre code. Il y a des numéros de ligne (!) Les anciennes versions de Processing n'avaient pas cela et vous ne pouvez pas imaginer à quel point j'étais heureux quand je les ai vus pour la première fois.

La boîte noire ci-dessous est la console . Nous l'utiliserons pour imprimer des éléments à des fins de débogage rapide. L'onglet des erreurs à côté de la console est l'endroit où vos erreurs apparaîtront. Il s'agit également d'une nouvelle fonctionnalité utile fournie avec Processing 3.0. Dans les anciennes versions, les erreurs étaient imprimées sur la console et il était difficile de les suivre.

Bloc de configuration

Comme indiqué précédemment, les blocs de configuration sont exécutés une fois lorsque le programme démarre. Vous pouvez l'utiliser pour faire des configurations et pour des choses que vous aimeriez exécuter une seule fois, par exemple, charger des images ou des sons. Voici un exemple de bloc de configuration. Exécutez ce code dans votre propre environnement et voyez les résultats par vous-même.

 public void setup() { // Size of our sketch will be 800x600, // and use the P2D rendering engine. size(800, 600, P2D); // We could have used this function instead of size() // fullScreen(P2D); // The background color of our sketch will be black // by default, unless specified otherwise background(0); // We could have used this to set a background image. // Note that size of our sketch should be the same as the image. // background(loadImage("test.jpg")); // Shapes and objects will be filled with red by default, // unless specified otherwise. fill(255,0,0); // Shaped and objects will have a white border by default, // unless specified otherwise. stroke(255); }

Les méthodes liées au style (arrière-plan, remplissage, trait) seront expliquées dans les sections propriétés et paramètres. Pour l'instant, ce que vous devez savoir, c'est comment les paramètres et les configurations que nous définissons ici affectent l'ensemble de notre croquis. Les codes écrits ici sont utilisés pour définir certains ensembles de règles de base applicables tout au long de l'esquisse. Ce que vous devez également comprendre dans cette section, ce sont les méthodes répertoriées ci-dessous :

size() - Comme son nom l'indique, cette fonction est utilisée pour configurer la taille de notre croquis. Il doit être dans la première ligne du bloc de code de configuration. Il peut être utilisé sous les formes suivantes :

  • taille (largeur, hauteur);
  • taille (largeur, hauteur, moteur de rendu) ;

Les valeurs de largeur et de hauteur peuvent être données en pixels. La fonction Size accepte un troisième paramètre, renderer, qui est utilisé pour définir le moteur de rendu que notre esquisse utilisera. Par défaut, le moteur de rendu est défini sur P2D. Les moteurs de rendu disponibles sont P2D (Traitement 2D), P3D (Traitement 3D, à utiliser si vos esquisses incluent des graphiques 3D) et PDF (les graphiques 2D sont dessinés directement dans un fichier Acrobat PDF. Vous trouverez plus d'informations ici). Les moteurs de rendu P2D et P3D utilisent du matériel graphique compatible OpenGL.

fullScreen() - Depuis Processing 3.0, la fonction fullScreen peut désormais être utilisée à la place de la fonction size(). Tout comme la fonction size(), elle devrait également figurer sur la première ligne du bloc de configuration. L'utilisation est la suivante :

  • plein écran();
  • plein écran (affichage);
  • fullScreen (rendu);
  • fullScreen(affichage, moteur de rendu);

Si vous l'utilisez sans aucun paramètre, votre esquisse de traitement s'exécutera simplement en plein écran et s'exécutera sur votre écran principal. Le paramètre 'display' est utilisé pour définir sur quel écran votre sketch sera exécuté. Par exemple, si vous connectez des moniteurs externes à votre ordinateur, vous pouvez définir la variable d'affichage sur 2 (ou 3, 4, etc.) et votre sketch s'y exécutera. Le paramètre 'renderer' est comme expliqué dans la partie size() ci-dessus.

Bloc Paramètres

Il s'agit d'une autre fonctionnalité introduite avec la nouvelle version de Processing. C'est un bloc de code, tout comme setup et draw. Il est utile lorsque vous souhaitez définir des méthodes size() ou fullScreen() avec des paramètres variables. Il est également nécessaire de définir size() et d'autres propriétés de style telles que smooth() dans ce bloc de code si vous utilisez un environnement autre que le propre IDE de Processing, tel qu'Eclipse. Mais vous n'en aurez pas besoin dans la plupart des cas, certainement pas dans cet article.

Dessiner un bloc

Il n'y a rien de spécial à parler du bloc de tirage, mais tout est spécial à ce sujet. Le bloc de tirage est l'endroit où toute la magie opère. C'est le cœur de votre programme, battant 60 fois par seconde. Ce bloc de code abrite toute votre logique de code. Toutes vos formes, objets, etc. seront écrits ici.

La plupart du code dont nous parlerons dans cet article proviendra du bloc de dessin, il est donc important que vous compreniez clairement le fonctionnement de ce bloc de code. Pour vous faire une démonstration, voici quelque chose que vous pouvez essayer. Notez d'abord que nous pouvons imprimer n'importe quoi sur la console en utilisant les méthodes print() ou println() . Les méthodes d'impression impriment uniquement sur la console, mais println imprime et ajoute une nouvelle ligne à la fin, de sorte que chaque println() s'imprimera dans des lignes séparées.

Alors, jetez un œil au bloc de code suivant. Tout d'abord, essayez de deviner ce qu'il affichera dans la console. Alors, allez-y et essayez-le:

 void setup(){ } void draw(){ int x = 0; x += 1; print(x+" "); }

Si vous avez deviné « 1 2 3 4… », je vous ai eu ! C'est l'une des confusions dans le traitement. Rappelez-vous que ce bloc est exécuté à plusieurs reprises ? Lorsque vous définissez une variable ici, elle est définie sur chaque boucle encore et encore. À chaque itération, x est défini sur 0, est incrémenté de 1 et est imprimé sur la console. Nous obtenons donc le résultat « 1 1 1 1… ». Cet exemple était quelque peu évident, mais il peut prêter à confusion lorsque les choses se compliquent un peu.

Nous ne voulons pas que x soit écrasé, alors comment pouvons-nous y parvenir et obtenir le résultat « 1 2 3 4… » ? En utilisant des variables globales . Ce n'est rien d'extraordinaire, nous ne définissons la variable qu'en dehors du bloc de dessin afin qu'elle ne soit pas redéfinie à chaque itération. De plus, la portée de la variable sera accessible tout au long de l'esquisse. Voir le code ci-dessous :

 int x = 0; void setup(){ } void draw(){ x += 1; print(x+" "); }

Vous vous demandez peut-être comment une variable définie en dehors de nos blocs peut fonctionner ? Et pourquoi n'avons-nous pas utilisé le bloc setup() puisqu'il est exécuté une fois au début ? La réponse est liée à la programmation orientée objet et aux portées, si vous n'êtes pas familier, vous pouvez sauter ce paragraphe. Reportez-vous à la partie où j'ai expliqué comment le code de traitement est converti en Java. Rappelez-vous comment ils sont enveloppés dans une classe Java ? Les variables que nous écrivons en dehors des blocs setup() et draw() sont également encapsulées, elles sont donc traitées comme des champs de la classe externe qui encapsule notre code. Utiliser x+=1 revient au même qu'utiliser this.x+=1. Il fonctionne également de la même manière dans notre cas, aucune variable appelée x n'est définie dans la portée de draw() et une portée externe est recherchée, qui est la portée de this . Et pourquoi n'avons-nous pas défini notre variable x dans la section setup() ? Si nous le faisions, la portée dont x est défini serait la portée de la fonction setup et elle ne serait pas accessible depuis le bloc draw().

Dessiner des formes et des textes

Nous savons maintenant comment configurer notre esquisse à l'aide du bloc de configuration et nous savons ce que fait le bloc de dessin. Il est donc temps d'obtenir un petit visuel et d'apprendre les parties amusantes du traitement : comment dessiner des formes.

Avant de commencer, vous devez comprendre le système de coordonnées . Dans Processing, vous déterminez les coordonnées de chaque objet que vous dessinez à l'écran. Le système de coordonnées est en pixels. L'origine (c'est-à-dire le point de départ) est le coin supérieur gauche, vous devez donner vos coordonnées par rapport à ce point. Une autre chose que vous devez savoir est que chaque forme a un point de référence différent. Par exemple, rect() a son coin supérieur gauche comme point de référence. Pour ellipse(), c'est le centre. Ces points de référence peuvent être modifiés avec des méthodes telles que rectMode() et ellipseMode(), que j'expliquerai dans la section propriétés et paramètres. Un exemple de figure est fourni pour vous aider à mieux comprendre.

Cet article est un aperçu de base du traitement, nous ne toucherons donc pas à des formes complexes telles que des sommets ou des formes 3D. Les formes 2D de base seront en fait plus que suffisantes pour créer notre propre jeu. Dans la figure, vous pouvez voir des exemples de la façon dont les formes sont dessinées. Chaque forme a sa propre syntaxe à créer, mais l'idée de base est de donner soit ses coordonnées, soit ses tailles, soit les deux. Voici quelques formes que vous devriez connaître (pour toutes les valeurs indiquées ci-dessous, 'x' et 'y' signifient les coordonnées x et y en pixels, 'w' et 'h' signifient également les valeurs de largeur et de hauteur en pixels):

point() - Point simple, n'a besoin que d'une seule coordonnée. Usage:

  • point(x, y)
  • point(x, y, z) - Si vous utilisez 3 dimensions.

line() - Pour créer une ligne. Vous pouvez créer une ligne avec uniquement un point de départ et un point d'arrivée. Usage:

  • ligne(x1, y1, x2, y2)
  • line(x1, y1, z1, x2, y2, z2) - Si vous utilisez 3 dimensions.

triangle() - Pour créer un triangle. Utilisation : triangle (x1, y1, x2, y2, x3, y3)

quad() - Pour créer un quadrilatère. Utilisation : quad(x1, y1, x2, y2, x3, y3, x4, y4)

rect() - Pour créer un rectangle. Le point de référence est le coin supérieur gauche par défaut (reportez-vous à la figure). Voici l'utilisation :

  • rect(x, y, w, h)
  • rect(x, y, w, h, r) - 'r' signifie le rayon en pixels pour arrondir les coins.
  • rect(x, y, w, h, tl, tr, br, bl) - Rayon pour les coins supérieur gauche, supérieur droit, inférieur droit, inférieur gauche respectivement. C'est aussi en pixels.

ellipse() - Pour créer une forme d'ellipse. Ceci est également utilisé pour créer un cercle, les mêmes valeurs de largeur et de hauteur doivent être données. Le point de référence pour cette forme est le centre par défaut (voir la figure). Voici l'utilisation :

  • ellipse(x, y, w, h)

arc() - Dessine un arc. Usage:

  • arc(x, y, w, h, start, stop) - 'start' et 'stop' sont utilisés pour déterminer l'angle de début et de fin du dessin de l'arc. Les valeurs sont en radians. Des constantes telles que "PI, HALF_PI, QUARTER_PI et TWO_PI" peuvent être utilisées.
  • arc(x, y, w, h, start, stop, mode) - La variable 'mode' sert à déterminer le style de rendu de l'arc (chaîne). Les options disponibles sont "OPEN, CHORD, PIE". OPEN laissera les parties non dessinées sans bordure. CHORD complétera les parties non dessinées avec une bordure. PIE fera ressembler votre arc à un graphique circulaire.

L'affichage de textes à l'écran est similaire à l'affichage de formes, l'idée de base est que vous déterminez une coordonnée à laquelle vous voulez que votre texte soit affiché. Il y a cependant plus à gérer les textes. Vous aurez plus de contrôle sur vos textes après la section propriétés et paramètres, où vous apprendrez comment appliquer les paramètres et les propriétés aux objets. Pour l'instant, je vais montrer les bases de l'affichage des textes. Il y a plusieurs façons de le faire, je ne montrerai que l'essentiel.

text() - Affiche les textes. Usage:

  • text(c, x, y) - 'c' signifie caractère, tout caractère alphanumérique sera affiché.
  • text(c, x, y, z) - Si vous travaillez avec 3 dimensions.
  • text(str, x, y) - 'str' est la chaîne à afficher.
  • text(str, x, y, z) - Si vous travaillez avec 3 dimensions.
  • text(num, x, y) - 'num' est la valeur numérique à afficher.
  • text(num, x, y, z) - Si vous travaillez avec 3 dimensions.

Propriétés et paramètres

La première chose qui devrait être expliquée dans cette section serait la logique derrière la définition des propriétés des objets. La couleur de remplissage, la couleur d'arrière-plan, la bordure, la largeur de la bordure, la couleur de la bordure, l'alignement des formes, les styles de bordure, etc. pourraient être quelques exemples de ces propriétés.

Lorsque vous définissez une propriété, vous devez vous rappeler que le code s'exécutera de haut en bas . Supposons que vous définissiez la propriété "fill" sur rouge, tous les objets dessinés sous cette ligne seront remplis de rouge jusqu'à ce qu'ils soient écrasés par une autre propriété fill. La même chose s'applique également aux autres propriétés, mais notez que toutes les propriétés ne s'écraseront pas les unes les autres. Par exemple, la propriété "stroke" n'écrase pas la propriété "fill", mais elles fonctionnent ensemble. Voici une représentation visuelle pour vous permettre de comprendre la logique :

Comme vous pouvez le voir sur l'image, la première ligne définit la couleur de remplissage sur le rouge et la deuxième ligne définit la couleur du trait sur le bleu. Nous avons maintenant deux paramètres actifs : remplir les traits rouges et bleus. Comme vous vous en doutez, quel que soit notre objet sur la ligne suivante, il sera rempli de rouge et aura des traits bleus (le cas échéant). Vous pouvez continuer à examiner l'image de cette façon, et vous saisirez la logique.

Voici quelques propriétés et paramètres essentiels couramment utilisés :

Paramètres de style

fill() - Définit la couleur de remplissage des objets. Ce paramètre est également utilisé pour colorer les textes. Pour l'instant, nous avons seulement besoin de connaître l'utilisation suivante :

  • fill(r, g, b) - Valeurs rouges, vertes et bleues sous forme d'entier
  • fill(r, g, b, a) - Valeur alpha supplémentaire, max est 255

noFill() - Définit la couleur de remplissage sur transparent.

stroke() - Définit la couleur du trait des objets. La propriété Stroke s'applique aux lignes et aux bordures autour des objets. Pour l'instant, nous avons seulement besoin de connaître l'utilisation suivante :

  • stroke(r, g, b) - Valeurs rouges, vertes et bleues sous forme d'entiers.
  • stroke(r, g, b, a) - Valeur alpha supplémentaire, max est 255

noStroke() - Supprime le trait.

strokeWeight() - Définit la largeur du trait. Usage:

  • strokeWeight(x) - x est un entier et représente la largeur du trait en pixels.

background() - Définit la couleur d'arrière-plan. Pour l'instant, nous avons seulement besoin de connaître l'utilisation suivante :

  • background(r, g, b) - Valeurs rouges, vertes et bleues sous forme d'entiers.
  • background(r, g, b, a) - Valeur alpha supplémentaire, max est 255

Paramètres d'alignement

ellipseMode() - Définit où prendre comme point de référence en alignant les ellipses. Usage:

  • ellipseMode(mode) - 'mode' est le paramètre, voici les paramètres disponibles :
    • CENTRE (par défaut) : Prend le centre comme point de référence.
    • RAYON : Cela prend également le centre comme point de référence, mais dans ce mode, les valeurs w et h que vous spécifiez sont traitées comme la moitié (c'est-à-dire le rayon au lieu du diamètre)
    • COIN : Prend le coin supérieur gauche comme point de référence.
    • CORNERS : définit les deux premiers paramètres (x et y) comme emplacement du coin supérieur gauche et les deux derniers paramètres (w et h) comme emplacement du coin inférieur gauche de l'ellipse. Donc ce mode, "largeur" ​​et "hauteur" n'est pas pertinent. Le penser comme ellipse(x_tl,y_tl,x_br,y_br) a plus de sens dans ce cas.

rectMode() - Définit où prendre comme point de référence l'alignement des rectangles. Usage:

  • rectMode(mode) - 'mode' est le paramètre, voici les paramètres disponibles :
    • CENTRE : Prendre le centre comme point de référence.
    • RAYON : Cela prend également le centre comme point de référence, mais dans ce mode, les valeurs w et h que vous spécifiez sont traitées comme la moitié
    • COIN (par défaut) : prend le coin supérieur gauche comme point de référence.
    • CORNERS : définit les deux premiers paramètres (x et y) comme emplacement du coin supérieur gauche et les deux derniers paramètres (w et h) comme emplacement du coin inférieur gauche de l'ellipse. Donc ce mode, "largeur" ​​et "hauteur" n'est pas pertinent. Le considérer comme rect(x_tl,y_tl,x_br,y_br) a plus de sens dans ce cas.

Paramètres liés au texte

textSize() - Définit la taille de la police du texte. Usage:

  • textSize(size) - Valeur entière de la taille souhaitée.

textLeading() - Définit la hauteur de ligne de vos textes. Usage:

  • textLeading(lineheight) - Valeur en pixels de l'espace entre les lignes.

textAlign() - Définit où prendre comme point de référence l'alignement des textes. Usage.

  • textAlign(alignX) - 'alignX' est pour l'alignement horizontal. Disponible : GAUCHE, CENTRE, DROITE
  • textAlign(alignX, alignY) - 'alignY' est pour l'alignement vertical. Disponible : HAUT, BAS, CENTRE, LIGNE DE BASE.

Animations

Jusqu'à présent, nous avons appris à dessiner des objets et des textes. Mais le problème avec eux, c'est qu'ils sont statiques. Maintenant, comment fait-on pour les faire bouger ? Simple, au lieu de donner des coordonnées sous forme d'entiers, on utilise des variables pour pouvoir les incrémenter/décrémenter . Avoir du sens ? Jetez un oeil au code suivant :

 // initialize x and y as 0 int x=0; int y=0; void setup(){ size(800,600); background(255); // set background color to white } void draw(){ fill(255,0,0); // fill color red stroke(0,0,255); // stroke color blue ellipseMode(CENTER); // ref. point to ellipse is its center ellipse(x, y, 20, 20); // draw the ellipse // increment x and y x+=5; y+=5; }

Voyez-vous comment nous avons géré l'animation ? Nous définissons x et y comme variables globales et leur valeur initiale à 0. Dans notre boucle de dessin, nous avons créé notre ellipse, défini la couleur de remplissage sur rouge, la couleur de trait sur bleu et les coordonnées sur x et y. Lorsque nous incrémentons x et y, la balle change simplement d'emplacement. Mais il y a un problème avec ce code, pouvez-vous le remarquer ? Comme un défi facile pour vous-même, essayez de comprendre quel est le problème et testez-le. Voici le résultat :

Mon intention de laisser cela se produire était de vous faire réaliser comment fonctionne la nature en boucle du traitement. Reportez-vous à l'exemple de la section "Dessiner un bloc", vous souvenez-vous pourquoi nous avons obtenu "1 1 1…" au lieu de "1 2 3…" ? La même raison pour laquelle le ballon laisse des traces. Chaque fois que le bloc de dessin itère, x et y sont incrémentés de 5 et donc la balle est redessinée à 5 pixels vers le bas et vers la droite. Cependant la balle est tirée des itérations précédentes reste dans la vue. Comment fait-on pour les faire disparaître ? Des suppositions?

Pour se débarrasser des marques laissées par la balle, nous supprimons simplement l'arrière-plan (255) du bloc de configuration et le collons pour qu'il soit la toute première ligne du bloc de dessin. Lorsque notre code d'arrière-plan était dans le bloc de configuration, il s'est exécuté une fois au début, rendant notre arrière-plan blanc. Mais cela ne suffit pas, nous en avons besoin pour mettre notre arrière-plan en blanc sur chaque boucle pour couvrir les boules tirées des boucles précédentes. L'arrière-plan étant la première ligne signifie qu'il s'exécute en premier, il devient le calque de base. Sur chaque boucle, notre toile est peinte en blanc et de nouveaux éléments sont dessinés sur le fond blanc. Nous n'avons donc pas de repères.

C'est l'idée derrière l'animation des choses dans Processing, en manipulant les coordonnées des objets par programmation pour changer leur emplacement. Mais comment allons-nous faire des trucs fantaisistes, comme garder la balle dans l'écran ? Ou peut-être mettre en œuvre la gravité ? J'enseignerai comment faire ce genre de choses dans la prochaine partie de cet article. Nous apprendrons en essayant et en construisant. Nous apprendrons comment le faire et les appliquerons immédiatement à notre jeu. À la fin, nous aurons un jeu complet, jouable et, espérons-le, amusant.

Interactions clavier et souris

Les interactions clavier et souris dans Processing sont très simples et directes. Il existe des méthodes que vous pouvez appeler pour chaque événement, et ce que vous écrivez à l'intérieur sera exécuté une fois lorsque l'événement se produit. Il existe également des variables globales telles que mousePressed et keyPressed que vous pouvez utiliser dans votre bloc de dessin pour tirer parti de la boucle. Voici quelques-unes des méthodes avec des explications :

 void setup() { size(500, 500); } void draw() { if (mousePressed) { // Codes here will be executed as long as the mouse // button is pressed if (mouseButton == LEFT){ // This lines will be executed as long as // the clicked mouse button is the left mouse // button. } } if (keyPressed) { // Codes here will be executed as long as a key // on the keyboard is pressed if (key == CODED) { // This if statement checks if the pressed key // is recognised by Processing. if (keyCode == ENTER) { // This lines will be executed if the pressed key // is the enter key. } } else{ // This lines will be executed if the pressed key // is not recognised by processing. } } } void mousePressed() { // These codes will be executed once, when mouse // is clicked. Note that mouseButton variable is // also be used here. } void keyPressed() { // These codes will be executed once, when a key // is pressed. Note that key and keyCode variables // are also usable here. }

Comme vous pouvez le voir, il est assez facile de vérifier si la souris est cliquée ou quelle touche est enfoncée. Il y a cependant plus d'options disponibles pour les variables mousePressed et keyCode. Les options disponibles pour mousePressed sont LEFT, RIGHT et CENTER. Il y en a beaucoup plus disponibles pour keyCode ; HAUT, BAS, GAUCHE, DROITE, ALT, CONTRÔLE, MAJ, RETOUR ARRIÈRE, TAB, ENTRÉE, RETOUR, ÉCHAP et SUPPRIMER.

Une chose à savoir sur les variables de la souris, et nous l'utiliserons beaucoup, c'est comment obtenir les coordonnées de la souris. Pour obtenir les coordonnées exactes du curseur, nous pouvons utiliser les variables mouseX et mouseY directement dans le bloc draw(). Enfin, il existe de nombreuses autres méthodes utiles que vous devriez examiner. Ils sont tous documentés dans le référentiel de traitement.

Conclusion

Vous devriez vous familiariser avec Processing maintenant. Cependant si vous vous arrêtez ici, toutes ces connaissances s'envoleront . Je vous recommande fortement de continuer à pratiquer, en jouant avec ce que vous avez appris. Pour vous aider à pratiquer, je vais vous proposer deux exercices. Vous devriez faire de votre mieux pour le faire vous-même. Si vous êtes bloqué, Google et Processing Reference devraient être vos meilleurs amis. Je fournirai le code pour le premier, mais les regarder devrait être la dernière chose que vous ferez.

Exercice recommandé 1

Vous devez créer 4 boules de couleurs différentes , en partant des 4 coins de l'écran et en passant par le centre à des vitesses différentes . Lorsque vous cliquez et maintenez le bouton de la souris enfoncé, les balles doivent se figer . Et lorsque vous lâchez la souris, les balles peuvent revenir à leur position initiale et continuer à bouger. Donc, je cherche quelque chose comme ça.

Après avoir essayé l'exercice vous-même, vous pouvez consulter le code ici.

Exercice recommandé 2

Vous souvenez-vous du célèbre économiseur d'écran DVD dont le logo DVD rebondit sur l'écran et que nous attendions tous désespérément qu'il arrive au coin de la rue ? Je veux que vous reproduisiez cet économiseur d'écran, mais en utilisant uniquement un rectangle au lieu du logo du DVD. Lorsque vous démarrez l'application, l'écran doit être noir et le rectangle doit commencer à un emplacement aléatoire. Chaque fois que le rectangle atteint le coin, il devrait changer de couleur (et évidemment de direction). Lorsque vous déplacez la souris, le rectangle doit disparaître et la couleur de fond doit devenir blanche (c'est un économiseur d'écran, n'est-ce pas ?). Je ne donnerai pas le code de cet exercice dans cet article. Vous devriez faire de votre mieux pour l'implémenter, et le code sera fourni dans la deuxième partie de cet article.

La deuxième partie du guide ultime du traitement, un tutoriel étape par étape pour créer un jeu simple, a été publiée.

Lectures complémentaires sur le blog Toptal Engineering :

  • Comment aborder la rédaction d'un interprète à partir de zéro