Les Variables

🎯 Objectif : Comprendre ce qu'est une variable, savoir en créer, et les utiliser pour positionner et dimensionner des formes de manière intelligente. À la fin de ce chapitre, tu seras capable de dessiner des formes qui s'adaptent à la taille du canevas.

C'est quoi une variable ?#

Imagine une boîte avec :

• une étiquette (le nom de la variable)
• une valeur à l'intérieur (le contenu)
• un type inscrit sur la boîte (quel genre de contenu elle accepte)

   ┌─────────────┐
   │     150     │  ← la valeur
   └─────────────┘
     int posX       ← le type + le nom (l'étiquette)

En Processing, ça s'écrit :

int posX = 150;

Cette ligne fait trois choses d'un coup :

1. Elle crée une boîte de type int (nombre entier)
2. Elle colle l'étiquette posX dessus
3. Elle met la valeur 150 à l'intérieur

Le parallèle avec Scratch#

En Scratch, tu crées une variable avec le bloc "mettre maVariable à 10". En Processing, c'est la même idée, mais on écrit tout sur une seule ligne :

Scratch	Processing
Créer une variable "posX"	int posX;
Mettre "posX" à 150	posX = 150;
Créer + mettre en une fois	int posX = 150;
Ajouter 10 à "posX"	posX = posX + 10;

Les types de base#

En Scratch, une variable peut contenir n'importe quoi : un nombre, du texte, un vrai/faux. En Processing, il faut préciser le type quand on crée la variable. C'est comme choisir la bonne taille de boîte avant d'y mettre quelque chose.

Pour l'instant, on va utiliser deux types :

Type	Ce que ça stocke	Exemple
int	Un nombre entier (sans virgule)	int age = 25;
float	Un nombre à virgule	float prix = 9.99;

int largeur = 200;       // ✅ Correct : 200 est un entier
float vitesse = 3.5;     // ✅ Correct : 3.5 a une virgule
int taille = 10.5;       // ❌ Erreur ! Un int ne peut pas stocker de virgule

💡 Astuce : en cas de doute, utilise float. Un float peut stocker un entier (comme 3.0), mais un int ne peut pas stocker un nombre à virgule.

⚠️ Attention : en Processing (et en informatique en général), la virgule s'écrit avec un point ! On écrit 3.5 et pas 3,5.

Modifier une variable#

Une fois créée, tu peux changer la valeur d'une variable autant de fois que tu veux. Par contre, tu ne redis pas le type :

int score = 0;       // Création : on met le type
score = 10;          // Modification : PAS de type
score = score + 5;   // score vaut maintenant 15

⚠️ Piège classique : écrire int score = 10; puis plus loin int score = 20;. Processing va te dire que la variable existe déjà ! Le int ne se met qu'une seule fois, à la création.

Les opérations mathématiques#

Les variables numériques supportent les opérations de base :

Opération	Symbole	Exemple	Résultat
Addition	+	10 + 3	13
Soustraction	-	10 - 3	7
Multiplication	*	10 * 3	30
Division	/	10 / 3	3 ⚠️

⚠️ Piège de la division entière : quand tu divises deux int, le résultat est aussi un int — Processing coupe la partie décimale sans arrondir. 10 / 3 donne 3, pas 3.33.

Si tu veux un résultat précis, utilise des float :

int a = 10 / 3;       // a = 3 (partie décimale coupée !)
float b = 10.0 / 3.0; // b = 3.3333333

Tu peux bien sûr combiner variables et opérations :

int cote = 100;
int demiCote = cote / 2;   // 50
int doubleCote = cote * 2;  // 200

Les variables spéciales de Processing#

Processing te fournit des variables déjà toutes faites, prêtes à l'emploi. Pas besoin de les créer, elles existent automatiquement :

width et height — les dimensions du canevas#

Variable	Ce qu'elle contient
width	La largeur du canevas (en pixels)
height	La hauteur du canevas (en pixels)

Si tu as écrit size(400, 300), alors width vaut 400 et height vaut 300.

Pourquoi c'est utile ? Parce que ça te permet de positionner des formes par rapport au canevas, sans connaître sa taille à l'avance :

void setup() {
  size(400, 300);
}

void draw() {
  background(240);

  // Centre du canevas, quelle que soit la taille
  ellipse(width / 2, height / 2, 50, 50);
}

Essaie de changer size(400, 300) en size(600, 400) — le cercle reste toujours au centre ! Sans width et height, il faudrait recalculer à la main à chaque fois.

mouseX et mouseY — la position de la souris#

Variable	Ce qu'elle contient
mouseX	La position horizontale de la souris (en pixels depuis la gauche)
mouseY	La position verticale de la souris (en pixels depuis le haut)

Ces variables changent 60 fois par seconde (à chaque passage dans draw()). C'est ce qui permet de créer de l'interactivité :

void setup() {
  size(400, 300);
}

void draw() {
  background(240);

  // Un cercle qui suit la souris
  fill(255, 0, 0);
  ellipse(mouseX, mouseY, 50, 50);
}

Essaie ce code ! Tu devrais voir un cercle rouge qui suit ta souris partout sur le canevas.

💡 Expérience : que se passe-t-il si tu enlèves la ligne background(240) ? Essaie, le résultat est surprenant ! (On reviendra sur cette astuce dans le chapitre sur l'animation.)

Bien nommer ses variables#

Le nom d'une variable, c'est comme le nom d'un fichier sur ton ordinateur : il doit être clair et descriptif. Quelques règles :

Règle	✅ Bon	❌ Mauvais
Nom descriptif	posX, largeurCarre	a, x1, truc
Commence par une minuscule	tailleCercle	TailleCercle
Pas d'espaces ni d'accents	couleurFond	couleur fond, côté
Plusieurs mots → camelCase	vitesseMax	vitesse_max

La convention camelCase (première lettre en minuscule, puis majuscule à chaque nouveau mot) est le standard en Processing et en Java. Tu la retrouveras aussi en Arduino.

Exercice 3 — Carré centré#

Consigne#

Dessine un carré rouge avec un contour vert parfaitement au centre de l'écran, en utilisant width et height.

Contraintes#

• Le canevas fait size(400, 300)
• Le carré fait 100×100 pixels
• Le carré doit être centré sur le canevas
• Remplissage rouge, contour vert, épaisseur de contour de 3 pixels

Ce que tu devrais obtenir#

Un carré rouge avec un contour vert, pile au milieu du canevas.

Indices#

💡 Indice 1 — Le centre du canevas est à la position (width/2, height/2). Mais attention : par défaut, rect() dessine à partir du coin supérieur gauche, pas du centre !

💡 Indice 2 — Tu as deux façons de centrer un rectangle :

• Méthode calcul : soustraire la moitié de la taille au point central → rect(width/2 - 50, height/2 - 50, 100, 100)
• Méthode rectMode : cherche rectMode dans la documentation de Processing (https://processing.org/reference). Il y a un mode qui change le comportement de rect() pour dessiner à partir du centre...

💡 Indice 3 — rectMode(CENTER) fait en sorte que le premier paramètre de rect() soit le centre du rectangle, pas le coin. C'est beaucoup plus pratique pour centrer !

Exercice 4 — Dessiner dans le carré#

Consigne#

Reprends ton carré centré de l'exercice 3, et trace des lignes à l'intérieur en utilisant des variables pour tous les calculs de position.

Étape par étape :

1. Crée des variables x, y pour la position du coin supérieur gauche du carré, cote pour la taille du côté, et demiCote pour la moitié
2. Dessine le carré en utilisant ces variables
3. Trace la médiane verticale (ligne du milieu haut au milieu bas du carré)
4. Trace la médiane horizontale (ligne du milieu gauche au milieu droit)
5. Trace les deux diagonales (coin à coin)

Contraintes#

• Utilise uniquement des variables pour les positions (pas de nombres "en dur" sauf pour la taille initiale)
• Chaque ligne a une couleur différente
• Joue avec la transparence pour voir les lignes qui se croisent

Ce que tu devrais obtenir#

Un carré avec 4 lignes colorées à l'intérieur : les deux médianes (en croix +) et les deux diagonales (en croix ×).

Indices#

💡 Indice 1 — Commence par créer tes variables. Si tu utilises rectMode(CENTER), le coin supérieur gauche du carré est à (width/2 - cote/2, height/2 - cote/2). Si tu préfères, tu peux aussi utiliser rectMode(CORNER) (le mode par défaut) et calculer x et y directement.

💡 Indice 2 — La médiane verticale va du point (x + demiCote, y) au point (x + demiCote, y + cote). La médiane horizontale va de (x, y + demiCote) à (x + cote, y + demiCote).

💡 Indice 3 — Les diagonales relient les coins opposés. La première va de (x, y) à (x + cote, y + cote). La deuxième va de (x + cote, y) à (x, y + cote).

🎯 Défi bonus — Le suiveur de souris#

Reprends l'exercice 4, mais remplace les variables x et y par mouseX et mouseY. Ton carré (avec ses lignes intérieures) suivra la souris !

💡 Astuce : n'oublie pas le background() au début de draw(), sinon tu verras toutes les positions précédentes du carré.

Résumé#

Concept	Syntaxe	Exemple
Créer une variable entière	int nom = valeur;	int posX = 200;
Créer une variable à virgule	float nom = valeur;	float vitesse = 2.5;
Modifier une variable	nom = nouvelleValeur;	posX = posX + 10;
Largeur du canevas	width	ellipse(width/2, ...)
Hauteur du canevas	height	ellipse(..., height/2, ...)
Position souris X	mouseX	ellipse(mouseX, ...)
Position souris Y	mouseY	ellipse(..., mouseY, ...)

Les points clés à retenir :

• Une variable a un type, un nom et une valeur
• Le type ne se déclare qu'une seule fois (à la création)
• width, height, mouseX, mouseY sont des variables fournies par Processing
• Utiliser des variables rend ton code flexible : change une valeur, tout s'adapte

Dans le prochain chapitre, on va découvrir les conditions — le moyen de faire réagir ton programme différemment selon la situation. C'est le if qui ouvre la porte à l'interactivité !