Statique

"Au commencement, apparu Le Cercle..."

Donc, tout marche et on sait lire le code que l'on a ... ou presque.

circle(), est une fonction créée ni par nous, ni par le navigateur, mais par p5 et donc si l'on travail sans p5 plus tard elle n'existera pas. C'est une fonction pour laquelle il faut mettre trois nombres entres ses paranthèses quand on l'exécute.

• Le premier indique la position du centre du cercle sur l'axe X
• le deuxième indique la position du centre du cercle sur l'axe Y
• le troisième indique le diamètre du cercle

Vous remarquerez que le cercle est en haut à gauche de l'espace de dessin. C'est parce que le point (0,0) est le coin en haut à gauche.

On en a parlé brièvement mais les variables sont des noms auxquels sont associé une valeur.

Pour en créer une, il faut utiliser le mot clef let ou const comme ceci

let myVariable;

Et souvent on lui donne une valeur de départ comme ceci

let myVariable = 42;

Si on utilise le mot clef const plutôt que let, comme ceci:

const myVariable = 42;

...alors on aura une erreur si plus tard dans le programme on essaye d'y assigner une nouvelle valeur.

C'est pratique pour nommer nos valeurs et rendre notre code plus lisible. Par exemple, je peux reprendre notre code qui dessine un cercle et l'écrire comme ceci:

function draw() {
  let diameter = 100;
  circle(50, 50, diameter);
}

et comme ça je peux facilement me rappeler que la troisième valeur est le diamètre et non le rayon.

Mais ça ne s'arrête pas là!

C'est aussi (et surtout) utile pour avoir des lignes de code qui partagent la même valeur. Si je fait ceci, alors j'aurais la garantie que mes cercles seront toujours côte à côte.

function draw() {
  let diameter = 100;
  circle(50 + 0 * diameter, 50, diameter);
  circle(50 + 1 * diameter, 50, diameter);
  circle(50 + 2 * diameter, 50, diameter);
  circle(50 + 3 * diameter, 50, diameter);
}

Et d'ailleurs, je peux même changer la valeur de ma variable diamètre et ça resterait vrai puisque tout le reste du dessin en dépend.

Pour nous aider, p5 créer une varibable width et une variable height.

• width contient la largeur de l'espace de dessin, en pixels
• height contient la hauteur de l'espace de dessin, en pixels

Donc si j'écris ce code

function draw() {
  let diameter = 100;
  circle(50, 50, diameter);
  circle(width - 50, 50, diameter);
  circle(50, height - 50, diameter);
  circle(width - 50, height - 50, diameter);
}

J'aurai un dessin ressemblant à ceci :

Exercice

Écrivez un progamme qui met un cercle au millieu de l'écran

function draw() {
  circle(width / 2, height / 2, 100);
}

Exercice

Écriver un programme qui place 4 cercles à partir du centre comme ci-dessous.

Votre code doit garantir que les cercles sont tous à la même distance du centre. Vous êtes libres de choisir une valeur pour cette distance.

function draw() {
  let diameter = 100;
  let distance = 150;

  circle(width / 2 + distance, height / 2, diameter);
  circle(width / 2 - distance, height / 2, diameter);

  circle(width / 2, height / 2 + distance, diameter);
  circle(width / 2, height / 2 - distance, diameter);
}

Scope

Une variable a ce que l'on appelle un "scope" (qui est un mot anglais mais je trouve que "portée" n'aide pas franchement à mieux comprendre).

C'est la partie du programme dans laquelle la variable est valide. Autrement dit, si j'essaye de me servir d'une variable hors de son scope alors elle n'existera pas.

Une variable existe à partir du moment où on la créée avec let ou const et existe jusqu'à ce qu'on finisse le bloc de code qui l'englobe. Un bloc étant délimité par une paire d'accolades {}.

Donc dans la réponse au dernier exercice, diameter et distance sont créées au début de la fonction draw() et n'existe que dans la fonction draw(). On peut essayer avec plusieurs console.log() pour essayer d'afficher diameter à plusieurs endroits.

function draw() {
  console.log("test 1");
  console.log(diameter);

  let diameter = 100;
  let distance = 150;

  console.log("test 2");
  console.log(diameter);

  circle(width / 2 + distance, height / 2, diameter);
  circle(width / 2 - distance, height / 2, diameter);

  circle(width / 2, height / 2 + distance, diameter);
  circle(width / 2, height / 2 - distance, diameter);

  console.log("test 3");
  console.log(diameter);
}

console.log("test 4");
console.log(diameter);

Il y a plusieures choses à remarquer dans le résultat

1. le test 4 s'exécute en premier, ce qui est normal puisque notre script ne fait que deux choses
2. créer la fonction draw() qui sera executée bien plus tard
3. tenter d'afficher "test 4" puis la valeur de diameter
4. On se prend une erreur parce que, comme expliqué, diamater n'existe pas en dehors de draw(), d'autant que draw() n'a pas été exécuté et donc l'instruction pour créer diameter non plus du coups
5. le test 1 viens ensuite et ne marche pas non plus puisqu'évidemment on essaye d'afficher une variable qui n'existe pas encore
6. mais on n'a pas les tests 2 et 3 parce que, lorsque l'on a une erreur (comme celle du test 1) la fonction en cours est interrompue. Et d'ailleurs vu que la fonction draw() a été interrompue on n'est pas allé jusqu'à exécuter les fonctions circle() et donc nous n'avons pas de dessin

Pour voir le résultat des tests 2 et 3 ils nous suffit donc de retirer le test 1: