CoursDébutant9 min de lecture

Variables et calculs

Donner un nom à une valeur pour la réutiliser, la modifier et faire des dessins paramétrables

§1.Qu'est-ce qu'une variable ?

Une variable est une étiquette que tu colles sur une valeur, pour pouvoir la réutiliser sans la réécrire à chaque fois. C'est comme noter dans un cahier « x = 42 » : à partir de maintenant, quand tu écris x, ça vaut 42.

Pourquoi c'est utile ? Imagine que tu dessines un polygone à 6 côtés avec une longueur de 50. Si tu veux changer pour 7 côtés et 80 pixels, tu dois modifier 14 nombres dans ton code. Avec des variables, tu changes UNE seule ligne.

Une variable porte un nom de ton choix (pas d'espaces, pas d'accents, commence par une lettre). Bonnes pratiques : utilise des noms PARLANTS — taille plutôt que t, nombre_cotes plutôt que n.

§2.Les 2 façons de déclarer une variable

let — variable modifiable: let crée une variable que tu peux changer plus tard. Sa valeur évolue au cours du programme.
const — variable fixe: const crée une constante : sa valeur ne peut PAS être modifiée après. Utile pour les paramètres importants de ton dessin que tu ne veux pas changer accidentellement.

Exemple : let qui change

javascript

1let taille = 50
2avancer(taille)        // avance de 50
3 
4taille = 100           // on change la valeur
5avancer(taille)        // avance de 100

Avec let, on peut donner une nouvelle valeur après la déclaration.

Exemple : const qui ne change pas

javascript

1const cotes = 6
2const taille = 60
3 
4for (let i = 0; i < cotes; i++) {
5  avancer(taille)
6  tourner_droite(360 / cotes)
7}

Résultat : Un hexagone régulier.

Pour changer pour un octogone, tu modifies UNIQUEMENT la première ligne. Le reste du code reste identique. C'est le pouvoir des variables : un code paramétrable.

§5.Les opérations mathématiques

+ (addition): a + b donne la somme.; Exemple. 5 + 3 vaut 8. Marche aussi pour coller des chaînes : "bon" + "jour" donne "bonjour".
- (soustraction): a - b donne la différence.; Exemple. 10 - 4 vaut 6.
* (multiplication): a * b donne le produit. Attention : on n'écrit JAMAIS 2x ou xy en code, toujours 2 * x ou x * y.; Exemple. 7 * 8 vaut 56.
/ (division): a / b donne le quotient (résultat décimal possible).; Exemple. 7 / 2 vaut 3.5.
% (modulo, le reste): a % b donne le reste de la division entière de a par b. Très utile pour alterner couleurs ou comportements.; Exemple. 10 % 3 vaut 1 (car 10 = 3×3 + 1). 8 % 2 vaut 0 (pair).

§6.Modifier une variable en boucle

Le vrai pouvoir d'une variable apparaît quand tu la modifies à chaque tour de boucle. Tu peux faire grandir une forme, faire varier la couleur, créer une spirale…

Spirale qui grandit

javascript

1let taille = 5
2 
3for (let i = 0; i < 40; i++) {
4  avancer(taille)
5  tourner_droite(90)
6  taille = taille + 4    // grandit à chaque tour
7}

Résultat : Une spirale carrée qui démarre petite et grandit progressivement.

§8.Raccourcis pratiques

x += 5: Raccourci pour x = x + 5. Idem pour -= (soustrait), *= (multiplie), /= (divise).
x++: Raccourci pour x = x + 1. C'est exactement ce qu'on utilise dans le for : i++.
x--: Raccourci pour x = x - 1.

Spirale plus courte avec +=

javascript

1let taille = 5
2 
3for (let i = 0; i < 40; i++) {
4  avancer(taille)
5  tourner_droite(90)
6  taille += 4            // équivalent à taille = taille + 4
7}

§10.Le hasard avec aleatoire()

SunuCode te propose deux fonctions pour générer du hasard, très utiles pour faire de l'art génératif (jamais deux dessins identiques) :

§11.Fonctions de hasard

aleatoire(min, max): Renvoie un nombre à virgule entre min et max.; Exemple. aleatoire(0, 360) → un angle au hasard entre 0 et 360°. aleatoire(10, 50) → une distance.
aleatoire_entier(min, max): Renvoie un nombre ENTIER entre min et max (inclus).; Exemple. aleatoire_entier(1, 6) simule un dé. aleatoire_entier(0, 4) tire un index entre 0 et 4.

Marche aléatoire colorée

javascript

1for (let i = 0; i < 50; i++) {
2  avancer(aleatoire(20, 60))
3  tourner_droite(aleatoire(0, 360))
4}

Résultat : Un chemin chaotique, différent à chaque exécution. La tortue avance de 20 à 60 pixels, puis pivote d'un angle aléatoire.

§13.Les tableaux : stocker une liste

Un tableau (array en anglais) est une liste ordonnée de valeurs, stockées dans une seule variable. Utile pour grouper plusieurs valeurs liées : une liste de couleurs, une liste de tailles…

Tableau de couleurs

javascript

1const couleurs = ["red", "blue", "green", "orange", "purple"]
2 
3for (let i = 0; i < 50; i++) {
4  // i % 5 donne 0, 1, 2, 3, 4, 0, 1, 2... à chaque tour
5  couleur(couleurs[i % 5])
6  avancer(20)
7  tourner_droite(72)
8}

Résultat : Une étoile multicolore, les couleurs cyclent en boucle.

couleurs[0] vaut "red", couleurs[1] vaut "blue", etc. On commence à 0 (pas à 1) — c'est la convention. Le modulo % nous permet de cycler dans la liste sans dépasser sa taille.

À retenir

let crée une variable modifiable, const une constante.
Une variable bien nommée vaut mieux qu'un commentaire.
+, -, *, / pour calculer. % donne le reste — utile pour alterner.
x += 5 et x++ sont des raccourcis pour x = x + 5 et x = x + 1.
aleatoire(min, max) et aleatoire_entier(min, max) pour du hasard.
Les tableaux ["a", "b"] stockent des listes, accessibles par index à partir de 0.