{"id":2141,"date":"2016-01-01T00:47:02","date_gmt":"2015-12-31T23:47:02","guid":{"rendered":"http:\/\/www.lyceelecorbusier.eu\/p5js\/?p=2141"},"modified":"2016-10-09T18:56:07","modified_gmt":"2016-10-09T17:56:07","slug":"p5-js-13-fonctions","status":"publish","type":"post","link":"https:\/\/www.lyceelecorbusier.eu\/p5js\/?p=2141","title":{"rendered":"\/ p5.js \/ 14 \/ Fonctions"},"content":{"rendered":"

<\/p>\n

La puissance des fonctions est leur modularit\u00e9. Les fonctions sont des unit\u00e9s ind\u00e9pendantes (des briques) qui sont utilis\u00e9s pour construire des programmes plus complexes. setup()<\/em> et draw() <\/em>sont des fonctions tout comme preload<\/em> ou mousePressed<\/em>.
\nIl est possible de cr\u00e9er ses propres fonctions.<\/p>\n

Partons de ce magnifique SpaceInvader<\/strong><\/p>\n

function setup(){\r\ncreateCanvas(800,600);\r\nbackground(255);\r\nstroke(0);\r\n}\r\nfunction draw(){\r\nfill(0);\r\nrect(20,0,10,10);\r\nrect(80,0,10,10);\r\nrect(30,10,10,10);\r\nrect(70,10,10,10);\r\nrect(20,20,20,10);\r\nrect(40,20,30,20);\r\nrect(70,20,20,10);\r\nrect(10,30,20,20);\r\nrect(80,30,20,20);\r\nrect(0,40,10,30);\r\nrect(30,40,50,20);\r\nrect(100,40,10,30);\r\nrect(20,50,10,20);\r\nrect(80,50,10,20);\r\nrect(30,70,20,10);\r\nrect(60,70,20,10);\r\n}<\/pre>\n
La code est d\u00e9j\u00e0 fastidieux… si je veux dessiner plusieurs SpaceInvader il faut dupliquer le code, ajouter un translate();<\/em>… pas cool ! Et je ne parle m\u00eame pas de le faire bouger !<\/p>\n
Heureusement il est possible de cr\u00e9er une fonction spaceInvader();<\/em><\/p>\n
function setup(){\r\ncreateCanvas(800,600);\r\nbackground(255);\r\nstroke(0);\r\n}\r\n\r\nfunction draw(){\r\n\u00a0\u00a0 \u00a0spaceInvader(10,10);\r\n\u00a0\u00a0 \u00a0spaceInvader(150,10);\r\n}\r\n\r\nfunction spaceInvader(x,y){\r\n\u00a0\u00a0 \u00a0fill(0);\r\n\u00a0\u00a0 \u00a0push();\r\n\u00a0\u00a0 \u00a0translate(x,y);\r\nrect(20,0,10,10);\r\nrect(80,0,10,10);\r\nrect(30,10,10,10);\r\nrect(70,10,10,10);\r\nrect(20,20,20,10);\r\nrect(40,20,30,20);\r\nrect(70,20,20,10);\r\nrect(10,30,20,20);\r\nrect(80,30,20,20);\r\nrect(0,40,10,30);\r\nrect(30,40,50,20);\r\nrect(100,40,10,30);\r\nrect(20,50,10,20);\r\nrect(80,50,10,20);\r\nrect(30,70,20,10);\r\nrect(60,70,20,10);\r\npop();\r\n}<\/pre>\n
Les param\u00e8tres de la fonction sont un \u00e9l\u00e9ment de flexibilit\u00e9 important function spaceInvader(x,y) { }
\n<\/em>Chaque<\/span> param\u00e8tre est une variable<\/span> qui est cr\u00e9\u00e9<\/span> \u00e0 chaque fois que<\/span> la fonction<\/span> est ex\u00e9cut\u00e9e. Lorsque<\/span> cet exemple<\/span> est ex\u00e9cut\u00e9,<\/span> la premi\u00e8re<\/span> fois que la fonction<\/span> spaceInvader(x,y)<\/em> est appel\u00e9<\/span>, la valeur du<\/span> param\u00e8tre<\/span> x<\/span> est<\/span> 10<\/span>, et y est<\/span> \u00e9galement<\/span> 10. Dans<\/span> la<\/span> seconde<\/span> utilisation<\/span> de la fonction,<\/span> la valeur de x<\/span> et y<\/span> est<\/span> 150 <\/span>est de nouveau<\/span> 10.<\/span> Chaque valeur<\/span> est pass\u00e9e dans<\/span> la fonction et ensuite<\/span> partout o\u00f9 le<\/span> nom de la variable<\/span> appara\u00eet<\/span> dans la fonction,<\/span> il est<\/span> remplac\u00e9 par la valeur<\/span>.<\/span><\/span>
\n<\/em><\/p>\n
Dans l’exemple suivant 2 param\u00e8tres suppl\u00e9mentaires ont \u00e9t\u00e9 ajout\u00e9. Un pour la couleur, l’autre pour l’\u00e9chelle. On constate que le nom de la variable peut diff\u00e9rer dans la fonction spaceInvader()
\n<\/em>Ce qui importe est l’ordre d’ex\u00e9cution et la coh\u00e9rence interne.<\/p>\n
function setup(){\r\n\u00a0\u00a0 \u00a0createCanvas(800,600);\r\n\u00a0\u00a0 \u00a0stroke(0);\r\n\u00a0\u00a0 \u00a0noLoop();\r\n}\r\n\r\nfunction draw(){\r\n\u00a0 background(255);\r\n\u00a0\u00a0 \u00a0for (var x = 10; x < width-150; x += 150) {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0for (var y = 10; y < width-150; y += 100) {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0 var couleur = int(random(255));\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 var echelle = random(0.25, 1.0);\r\n\u00a0\u00a0 \u00a0spaceInvader(x,y,couleur,echelle);\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}\r\n}\r\n}\r\n\r\nfunction spaceInvader(x,y,c,s){\r\nfill(c);\r\nstroke(c);\r\n\u00a0\u00a0 \u00a0push();\r\n\u00a0\u00a0 \u00a0translate(x,y);\r\n\u00a0\u00a0 \u00a0scale(s);\r\n\u00a0 \u00a0\u00a0 \u00a0rect(20,0,10,10);\r\n\u00a0 \u00a0\u00a0 \u00a0rect(80,0,10,10);\r\n\u00a0 \u00a0\u00a0 \u00a0rect(30,10,10,10);\r\n\u00a0 \u00a0\u00a0 \u00a0rect(70,10,10,10);\r\n\u00a0 \u00a0\u00a0 \u00a0rect(20,20,20,10);\r\n\u00a0 \u00a0\u00a0 \u00a0rect(40,20,30,20);\r\n\u00a0 \u00a0\u00a0 \u00a0rect(70,20,20,10);\r\n\u00a0 \u00a0\u00a0 \u00a0rect(10,30,20,20);\r\n\u00a0 \u00a0\u00a0 \u00a0rect(80,30,20,20);\r\n\u00a0 \u00a0\u00a0 \u00a0rect(0,40,10,30);\r\n\u00a0 \u00a0\u00a0 \u00a0rect(30,40,50,20);\r\n\u00a0 \u00a0\u00a0 \u00a0rect(100,40,10,30);\r\n\u00a0 \u00a0\u00a0 \u00a0rect(20,50,10,20);\r\n\u00a0 \u00a0\u00a0 \u00a0rect(80,50,10,20);\r\n\u00a0 \u00a0\u00a0 \u00a0rect(30,70,20,10);\r\n\u00a0 \u00a0\u00a0 \u00a0rect(60,70,20,10);\r\n\u00a0\u00a0 \u00a0pop();\r\n}<\/pre>\n
Exercice simple : cr\u00e9er un d\u00e9placement en x du spaceInvader.<\/em><\/p>\n
Zdenek Sykora<\/a><\/p><\/blockquote>\n