Déclarer une variable

Nous avons vu qu'il existait des variables prédéfinies. Mais nous pouvons aussi construire nos propres variables. En gros, cela signifie que l'on va créer notre propre boîte pour ranger des choses dedans. Supposons par exemple que l'on ait une balle qui va bouger sur l'écran. Une jolie balle rouge qui va suivre la souris, mais qui ne sera pas "sur" la souris. Pour mémoriser sa position nous aurons besoin de deux nombre qui représentent ses coordonnées. Nous allons stocker ces nombres dans deux variables.

P5JS nous laisse une assez important liberté pour le nommage des variables. Du coup, ici, nous allons appeler ces deux variables abscisse et ordonnee (attention, pas d'accent dans les noms de variables)

La première chose à faire c'est de déclarer cette variable. Pour cela, il suffit d'utiliser le mot clef var suivi du nom de variable. 

var abscisse;
var ordonnee;
Déclarations multiples

Et si je souhaite déclarer plusieurs variables en même temps ? C'est possible. Pour cela, il suffit de séparer les variables déclarées par une virgule 

var abscisse,ordonnee;

Affectation d'une valeur à une variable

En déclarant une variable, nous avons juste créé la boite avec l'étiquette. Mais pour l'instant, notre boite est vide. D'ailleurs, si nous essayons de nous servir de cette variable, nous risquons fort de voir une erreur apparaître.

Donner une valeur à une variable, en informatique, cela s'appelle un affectation. C'est assez simple. Pour affecter la valeur 87 à la variable abscisse, voilà l'instruction à utiliser 

abscisse=87;

Cette instruction va mettre dans la boite avec l'étiquette "abscisse" le nombre 87, comme dans le schéma ci contre.

Attention !

Cette notation informatique est très dangereuse. En effet, on utilise le symbole = qui a déjà une signification totalement différente en mathématique. En effet, en mathématique, a=b et b=a signifie la même chose : que a et b sont identiques. En informatique, ce n'est pas une égalité : c'est une affectation. On va mettre dans la "boite" abscisse la valeur 87. Mais écrire 87=abscisse n'aurait aucun sens. Cela provoquerait une erreur.

Pour contourner ce danger, dans d'autres langages de programmation, la notation est différente. Par exemple, certains langages utilisent la notation avec := pour l'affectation. 

 abscisse := 87

D'autres langages utilisent les symboles inférieurs et le tiret pour simuler une flèche 

 abscisse <- 87

Mais la très grande majorité des langages utilise le = pour l'affectation. L'instruction d'affectation est tellement utilisée qu'il faut faire court !

Modifier la valeur d'une variable.

Très souvent, au cours de son existence informatique, la valeur d'une variable va être modifiée. C'est normal, c'est bien là le rôle des variables : varier au cours du temps. Une modification de la valeur d'une variable, c'est juste une nouvelle affectation.

Là où la notation avec le signe = devient étrange, c'est lorsque que l'on modifie une variable par rapport à elle même (ce qui arrive très souvent). Par exemple, si je souhaite ajouter 10 à la valeur de abscisse, je vais utiliser l'instruction suivante : 

abscisse = abscisse + 10 ;

Là, si on pense au signe = dans son sens mathématique habituel, on risque un certain mal de crâne !

Ici, le abscisse de gauche désigne la variable dans laquelle on va mettre le résultat, c'est à dire la boîte. Le abscisse de droite lui désigne le contenu de la boite, que l'on utilise pour faire le calcul. Si l'abscisse valait 87, maintenant elle vaut 97. 

abscisse = 87 ; // valeur initiale 87
abscisse = abscisse + 10 ; // maintenant, abscisse a pour valeur 97

Cette notation devrait se lire dans la variable abscisse je vais mettre pour nouvelle valeur la valeur actuelle de abscisse plus 10. Ou encore à partir de maintenant l'abscisse aura pour valeur la valeur actuelle de l'abscisse plus 10. C'est une petite habitude de lecture à prendre, mais une fois que l'on a bien compris, on évite de nombreuses erreurs.

Remarque

Très souvent, on veut modifier une variable par rapport à elle même. C'est pour cela que des raccourcis existent en javascript comme dans beaucoup d'autres langages pour cette opération. On pourra résumer l'instruction 

abscisse = abscisse + 10 ;

avec l'instruction 

abscisse += 10 ;

et de la même façon, on a les raccourcis suivants : 

// soustraction
abscisse  -= 10 ;
//multiplication
abscisse *= 10 ;
//division
abscisse /= 10 ;
//modulo
abscisse %= 10 ;
Exemple

L'exemple ci dessous utilise deux variables (abscisse et ordonnee) qui servent pour mémoriser la position de la boule rouge dans le canvas. On utilise ensuite la position de la souris pour faire se déplacer la boule rouge vers la souris.

Travail à faire

Le travail suivant peut être réalisé :

    Suivez la boule !

    ellipses niveaux de gris

    Sur le même principe que l'exemple, on va définir non pas une mais 4 boules. La première, la plus grosse, se situe sous le curseur de la souris. Les autres, de plus en plus petite et sombre, suivent à chaque fois la boule précédente. Il faudra donc si variables pour les positions des boules (par exemple x1,y1,x2,y2,x3,y3) et il faudra réfléchir à leur évolution.

    NB : si on voulait avoir bien plus de boule, définir les variables une par une ne serait plus une solution . Il faudrait utiliser des tableaux.

    La balle rebondissante

    ellipses tests

    On a une balle qui va tomber en chute libre. Lorsqu'elle touche le sol, elle rebondit en perdant un peu de vitesse.

    On va essayer d'utiliser un modèle physique simplifié:

    • La vitesse initiale est nulle verticalment
    • La vitesse horizontale est aléatoire et reste constante
    • La vitesse augmente d'une quantité identique à chaque affichage

    Pour pouvoir faire cet exercice, on peut suivre les étapes suivantes

    • Quels sont les éléments physiques (les données) qui caractérisent mon problème ?
    • Compte tenu de cela, de quelles variables vais je avoir besoin ?
    • Écrire en français comment vont évoluer les variables. En particulier, comment va se passer le rebond ?
    • Le traduire informatiquement.

    evenements Complément : Lorsque l'on clique quelque part dans la fenêtre, la balle repart de l'endroit où l'on vient de cliquer.

    L'horloge

    difficile rectangles typographie

    Une autre variable prédéfinie est disponible dans P5JS : frameCount qui compte le nombre de fois ou le canvas a été réaffiché depuis le début du script. En utilisant la fonction frameRate(), on peut fixer le nombre de frales par seconde. Ici, on se propose de le fixer à 1 avec frameRate(1);. La fonction draw() sera donc exécutée une fois par seconde et on va s'en servir pour faire une horloge sur le principe de l'image ci dessus :

    • les minutes et les secondes sont affichées (penser à utiliser le modulo % qui donne le reste de la division entière et la fonction floor() qui donne la partie entière d'un nombre.)
    • Une barre progresse au fur et à mesure et elle indique le nombre de secondes. Une autre au dessus indique le nombre de minutes. En 60 secondes (puis en 60 minutes), la barre décrit la largeur de l'écran.