• Présentation
• Introduction
• Exemples d'utilisations
• L'installation de Processing
• Les bases de Processing
• Dessiner
• L'espace de dessin
• Les formes
• Les couleurs
• Le texte
• Dessiner plus
• Les images
• Les styles de bordures
• La typographie
• Les transformations
• Programmer
• Les variables
• Les conditions
• Les répétitions
• Les listes
• Les méthodes
• Les objets
• Les commentaires
• Animer
• La méthode draw
• La ligne de temps
• L'animation d'un objet
• L'animation de plusieurs objets
• Sortir
• L'exportation
• L'impression
• La vidéo
• Interagir
• Les événements clavier
• Les événements souris
• L'entrée microphone
• L'entrée vidéo
• Compléter
• Les librairies externes
• Les modes
• Annexes
• Les astuces
• Les erreurs courantes
• La documentation en ligne
• Processing dans l'enseignement
• Arduino
• A propos de ce manuel
• Glossaire

Les objets

La programmation orientée objet (POO) permet de structurer son programme à partir des éléments concrets présents dans l'espace de dessin (balles, murs, personnages, etc.). Un objet est un modèle qui peut être dupliqué et dont chaque copie est unique. Ces 2 notions constituent les briques de base d'une application structurée. Un objet est composé de caractéristiques (propriétés) et d'actions (méthodes). Chaque instance (chaque copie unique) d'un objet possède sa vie propre avec des caractéristiques spécifiques tout en pouvant effectuer potentiellement les mêmes actions que ses sœurs (les autres instances du même objet).

Ne vous inquiétez pas si ces définitions vous paraissent obscures à première lecture. Au fil de ce chapitre, nous allons détailler ces notions à l'aide d'un exemple simple et concret  : le tracé d'une puis de deux balles (de simples cercles) à l'écran. Pour réaliser ce dessin, nous faisons appel à un modèle de balle (l'objet) et à ses copies (les instances) qui possèdent chacune des caractéristiques différentes.

Le modèle de la balle est composé des caractéristiques (variables) suivantes :

• position sur l'axe x
• position sur l'axe y
• couleur

Le modèle de balle contiendra l'action (méthode) suivante :

• afficher

Quand créer un objet

Comment faire pour dessiner plusieurs balles à l'écran? La solution la plus évidente semble être de dupliquer les variables qui caractérisent la balle et les instructions permettant de l'afficher et de la gérer. La taille du code sera proportionnelle au nombre d'éléments visibles à l'écran. Plus j'ai de balles plus mon code sera long.

Ce procédé pose deux problèmes :

• si l'on veut modifier ou ajouter des actions à l'ensemble de ces balles, on devra modifier autant de fois le code qu'il y a d'éléments affichés,
• au fur et à mesure que l'on rajoute des éléments à l'écran le programme s'allonge au point de devenir ingérable (et si notre programme comportait 1'000'000 de balles ?).

Pour pallier à ces limitations, nous allons transformer notre balle en objet. Dès qu'une entité (balle, avatar, forme, etc.) de votre programme devient trop complexe ou qu'elle doit exister en plusieurs exemplaires, il faut en faire un objet.

Créer un objet

La création d'un objet se passe en deux étapes : la définition du modèle de l'objet et la création d'une copie unique de l'objet (instance).

Le modèle

Processing utilise le mot clé class pour définir un objet. Sa syntaxe s'apparente à la définition d'une méthode : class nomObjet {}. Toutes les caractéristiques et les actions sont écrites à l'intérieur. En général on va écrire la définition d'un objet tout à la fin de notre code. Éventuellement si l'objet est complexe, on créera un nouvel onglet dans la fenêtre d'édition de Processing (un nouveau fichier) afin de le séparer du reste du code.

class Balle {
}

L'instance

Une fois le modèle défini, il faut créer une copie de ce modèle qui sera unique. Processing utilise le mot clé new pour créer une instance d'un objet : new nomObjet();. Il faut stocker cet objet dans une variable afin de pouvoir le manipuler ultérieurement.

Balle maBalle = new Balle();

Dans l'exemple ci-dessus, nous déclarons une variable maBalle et nous lui assignons une copie de l'objet Balle. maBalle fait référence à cet objet et permet d'agir sur lui dans la suite du programme. Afin de rendre l'objet disponible dans tout le programme, nous plaçons la déclaration en en-tête de l'application.

Les caractéristiques

Les objets ont des caractéristiques qui les définissent et les rendent uniques. Ce sont des variables qui sont déclarées au début de l'objet.

class Balle {
  //Déclaration des paramètres de base de la balle
  float x;
  float y;
  color couleur;
}

Pour modifier une caractéristique après la création de l'objet, il faut procéder de la manière suivante: nomDeLInstance.nomDeLaCaractéristique = valeur; Par exemple :

 maBalle.x = 100;

Le constructeur

Le constructeur est une méthode appelée lorsque l'objet est créé. Il est l'équivalent de la méthode setup() de l'application. Il porte toujours le nom de l'objet. Le constructeur va prendre un certain nombre de variables en paramètre et les assigner à l'objet :

class Balle {
  //Déclaration des paramètres de base de la balle
  float x;
  float y;
  color couleur;

  Balle (float nouvX, float nouvY, color nouvCouleur) {
    x      = nouvX;
    y      = nouvY;
    couleur    = nouvCouleur;
  }
}

Lorsque nous allons créer l'instance (une copie) de l'objet, nous allons directement lui donner ses caractéristiques propres en paramètre. L'exemple ci-dessous crée une balle blanche placée aux coordonnées 100, 100 de la fenêtre de visualisation.

maBalle = new Balle(100, 100, color(255));

Attention ! Nous venons uniquement de créer une copie du modèle de l'objet. Il n'est pas encore affiché à l'écran.

Les actions

Les actions d'un objet représentent les différentes choses qu'il peut effectuer. Ce sont des méthodes mentionnées (déclarées) à l'intérieur de l'objet. Appeler une action sur une instance d'un objet se fait de la manière suivante: nomDeLInstance.nomDeLaMethode();

Dans notre exemple, notre balle comportera une seule action : être affichée. Nous allons utiliser les instructions fill() et ellipse() pour la dessiner.

class Balle {
  //Déclaration des paramètres de base de la balle
  float x;
  float y;
  color couleur;

  Ball (float nouvX, float nouvY, color nouvCouleur) {
    x      = nouvX;
    y      = nouvY;
    couleur    = nouvCouleur;
  }

  void display() {
    fill(couleur);
    ellipse(x, y, 40, 40);
  }
}

Pour afficher notre balle, il faut appeler sa méthode display() depuis sa copie dans la méthode draw() du programme.

void draw() {
  maBalle.display();
}

Programme final

//Déclaration et création d'une instance de l'objet Balle
Balle maBalle = new Balle(100, 100, color(255));

void setup() {
  smooth(); //Lissage des dessins
  size(400, 200); //Taille de la fenêtre
}

void draw() {
  background(0); //On dessine un fond noir
  noStroke(); //On supprime le contour

  maBalle.display(); //Affichage de la balle
}

class Balle {
  //Déclaration des paramètres de base de la balle
  float x;
  float y;
  color couleur;

  //Constructeur de la balle
  Balle (float nouvX, float nouvY, color nouvCouleur) {
    x          = nouvX;
    y          = nouvY;
    couleur    = nouvCouleur;
  }

  //Dessin de la balle
  void display() {
    fill(couleur);
    ellipse(x, y, 40, 40);
  }
}

Multiplier les balles

Créer une seconde balle devient, grâce au système des objets, un jeu d'enfant. Il suffit de déclarer une deuxième balle, par exemple maBalle2 et de l'afficher.

//Déclaration et création de plusieurs instances de l'objet Balle
Balle maBalle1 = new Balle(100, 100, color(255));
Balle maBalle2 = new Balle(200, 100, color(128));

void setup() {
  smooth(); //Lissage des dessins
  size(400, 200); //Taille de la fenêtre
}

void draw() {
  background(0); //On dessine un fond noir
  noStroke(); //On supprime le contour

  maBalle1.display(); //Affichage de la balle 1
  maBalle2.display(); //Affichage de la balle 2
}

class Balle {
  //Déclaration des paramètres de base de la balle
  float x;
  float y;
  color couleur;

  //Constructeur de la balle
  Balle (float nouvX, float nouvY, color nouvCouleur) {
    x          = nouvX;
    y          = nouvY;
    couleur    = nouvCouleur;
  }

  //Dessin de la balle
  void display() {
    fill(couleur);
    ellipse(x, y, 40, 40);
  }
}

N'hésitez pas à vous approprier ce programme en ajoutant autant de balles que vous voulez.