La puissance des fonctions est leur modularité. Les fonctions sont des unités indépendantes (des briques) qui sont utilisés pour construire des programmes plus complexes. setup() et draw() sont des fonctions tout comme preload ou mousePressed.
Il est possible de créer ses propres fonctions.

Partons de ce magnifique SpaceInvader

function setup(){
createCanvas(800,600);
background(255);
stroke(0);
}
function draw(){
fill(0);
rect(20,0,10,10);
rect(80,0,10,10);
rect(30,10,10,10);
rect(70,10,10,10);
rect(20,20,20,10);
rect(40,20,30,20);
rect(70,20,20,10);
rect(10,30,20,20);
rect(80,30,20,20);
rect(0,40,10,30);
rect(30,40,50,20);
rect(100,40,10,30);
rect(20,50,10,20);
rect(80,50,10,20);
rect(30,70,20,10);
rect(60,70,20,10);
}

La code est déjà fastidieux… si je veux dessiner plusieurs SpaceInvader il faut dupliquer le code, ajouter un translate();… pas cool ! Et je ne parle même pas de le faire bouger !

Heureusement il est possible de créer une fonction spaceInvader();

function setup(){
createCanvas(800,600);
background(255);
stroke(0);
}

function draw(){
    spaceInvader(10,10);
    spaceInvader(150,10);
}

function spaceInvader(x,y){
    fill(0);
    push();
    translate(x,y);
rect(20,0,10,10);
rect(80,0,10,10);
rect(30,10,10,10);
rect(70,10,10,10);
rect(20,20,20,10);
rect(40,20,30,20);
rect(70,20,20,10);
rect(10,30,20,20);
rect(80,30,20,20);
rect(0,40,10,30);
rect(30,40,50,20);
rect(100,40,10,30);
rect(20,50,10,20);
rect(80,50,10,20);
rect(30,70,20,10);
rect(60,70,20,10);
pop();
}

Les paramètres de la fonction sont un élément de flexibilité important function spaceInvader(x,y) { }
Chaque paramètre est une variable qui est créé à chaque fois que la fonction est exécutée. Lorsque cet exemple est exécuté, la première fois que la fonction spaceInvader(x,y) est appelé, la valeur du paramètre x est 10, et y est également 10. Dans la seconde utilisation de la fonction, la valeur de x et y est 150 est de nouveau 10. Chaque valeur est passée dans la fonction et ensuite partout où le nom de la variable apparaît dans la fonction, il est remplacé par la valeur.

Dans l’exemple suivant 2 paramètres supplémentaires ont été ajouté. Un pour la couleur, l’autre pour l’échelle. On constate que le nom de la variable peut différer dans la fonction spaceInvader()
Ce qui importe est l’ordre d’exécution et la cohérence interne.

function setup(){
    createCanvas(800,600);
    stroke(0);
    noLoop();
}

function draw(){
  background(255);
    for (var x = 10; x < width-150; x += 150) {
        for (var y = 10; y < width-150; y += 100) {
          var couleur = int(random(255));
      var echelle = random(0.25, 1.0);
    spaceInvader(x,y,couleur,echelle);
        }
}
}

function spaceInvader(x,y,c,s){
fill(c);
stroke(c);
    push();
    translate(x,y);
    scale(s);
      rect(20,0,10,10);
      rect(80,0,10,10);
      rect(30,10,10,10);
      rect(70,10,10,10);
      rect(20,20,20,10);
      rect(40,20,30,20);
      rect(70,20,20,10);
      rect(10,30,20,20);
      rect(80,30,20,20);
      rect(0,40,10,30);
      rect(30,40,50,20);
      rect(100,40,10,30);
      rect(20,50,10,20);
      rect(80,50,10,20);
      rect(30,70,20,10);
      rect(60,70,20,10);
    pop();
}

Exercice simple : créer un déplacement en x du spaceInvader.

exo 3