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)

   ┌─────────────┐
   │     150     │  ← la valeur
   └─────────────┘
     let posX       ← le mot-clé + le nom (l'étiquette)

En JavaScript (et donc en p5.js), ça s'écrit :

let posX = 150;

Cette ligne fait trois choses d'un coup :

1. Elle crée une boîte avec let
2. Elle colle l'étiquette posX dessus
3. Elle met la valeur 150 à l'intérieur

Tu connais déjà ça !#

Tu as déjà utilisé des variables en JavaScript. En p5.js, c'est exactement la même syntaxe :

JavaScript classique	p5.js
let posX;	let posX;
posX = 150;	posX = 150;
let posX = 150;	let posX = 150;
posX = posX + 10;	posX = posX + 10;

Zéro surprise : c'est du JavaScript pur et simple.

let vs const#

En JavaScript, tu as deux façons principales de déclarer une variable :

Mot-clé	Quand l'utiliser	Exemple
let	La valeur peut changer au fil du temps	let posX = 150;
const	La valeur ne changera jamais	const TAILLE_MAX = 500;

let score = 0;          // ✅ score va évoluer
score = 10;             // ✅ OK, on peut modifier un let

const GRAVITE = 9.81;   // ✅ la gravité ne change pas
GRAVITE = 10;           // ❌ Erreur ! On ne peut pas modifier un const

💡 Bonne pratique : utilise const quand la valeur ne doit pas changer, let pour le reste. Ça rend ton code plus clair et évite des bugs.

⚠️ Et var ? Tu as peut-être vu var dans du code JavaScript. C'est l'ancienne façon de déclarer des variables. On ne l'utilise plus — préfère toujours let ou const.

Les types en JavaScript#

Contrairement à des langages comme Java ou C++, JavaScript ne demande pas de préciser le type. Il le devine tout seul. Mais il est important de connaître les types qui existent :

Type	Ce que ça stocke	Exemple
number	Un nombre (entier ou à virgule)	let age = 25; / let prix = 9.99;
string	Du texte	let nom = "Alice";
boolean	Vrai ou faux	let estVisible = true;

let largeur = 200;       // ✅ number (entier)
let vitesse = 3.5;       // ✅ number (à virgule)
let nom = "Alice";       // ✅ string
let actif = true;        // ✅ boolean

💡 Avantage JavaScript : pas besoin de choisir entre int et float comme dans d'autres langages. Un number gère les deux !

⚠️ Attention : en programmation, la virgule s'écrit avec un point ! On écrit 3.5 et pas 3,5.

Modifier une variable#

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

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

⚠️ Piège classique : écrire let score = 10; puis plus loin let score = 20;. JavaScript va te dire que la variable existe déjà ! Le let 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.3333...

💡 Bonne nouvelle : contrairement à d'autres langages (Java, C++...), JavaScript ne fait pas de division entière. 10 / 3 donne bien 3.3333... et pas 3. Un souci en moins !

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

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

Les variables spéciales de p5.js#

p5.js 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 createCanvas(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 :

function setup() {
  createCanvas(400, 300);
}

function draw() {
  background(240);

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

Essaie de changer createCanvas(400, 300) en createCanvas(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é :

function setup() {
  createCanvas(400, 300);
}

function 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 JavaScript. Tu la retrouveras partout : dans les frameworks, les API, la doc...

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 createCanvas(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 p5.js (https://p5js.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	let nom = valeur;	let posX = 200;
Créer une constante	const nom = valeur;	const GRAVITE = 9.81;
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 se crée avec let, une constante avec const
• Le let / const ne se met qu'une seule fois (à la création)
• JavaScript devine le type automatiquement (number, string, boolean)
• width, height, mouseX, mouseY sont des variables fournies par p5.js
• 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é !