{"id":2817,"date":"2016-01-01T00:41:06","date_gmt":"2015-12-31T23:41:06","guid":{"rendered":"http:\/\/www.lyceelecorbusier.eu\/p5js\/?p=2817"},"modified":"2016-05-06T11:12:25","modified_gmt":"2016-05-06T10:12:25","slug":"p5-oop","status":"publish","type":"post","link":"https:\/\/www.lyceelecorbusier.eu\/p5js\/?p=2817","title":{"rendered":"\/ p5.js \/ 20 \/ Programmation Orient\u00e9e Objets"},"content":{"rendered":"<p><!--more--><\/p>\n<p style=\"text-align: center;\">\n<!-- iframe plugin v.5.1 wordpress.org\/plugins\/iframe\/ -->\n<iframe src=\"http:\/\/lyceelecorbusier.eu\/p5\/objet-rond\" width=\"780\" height=\"580\" style=\"border: 1px solid #ddd;\" scrolling=\"yes\" class=\"iframe-class\" frameborder=\"0\"><\/iframe>\n\n<p>Exemple de code : une ellipse se d\u00e9place al\u00e9atoirement.<\/p>\n<pre>var x = 320;\r\nvar y = 170;\r\n\r\nfunction setup() {\r\n\u00a0 createCanvas(640,360);\r\n\u00a0 background(250);\r\n}\r\n\r\nfunction draw() {\r\n\u00a0 stroke(255);\r\n\u00a0 fill(236,36,94);\r\n\u00a0 var choix = floor(random(4)) \/\/ floor, calcule la valeur enti\u00e8re la plus proche.\r\n\u00a0 ellipse(x,y,10,10);\r\n\u00a0\u00a0\u00a0\u00a0 if (choix === 0) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 x = x + 10;\r\n\u00a0\u00a0\u00a0 } else if (choix == 1) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 x = x - 10;\r\n\u00a0\u00a0\u00a0 } else if (choix == 2) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 y = y + 10;\r\n\u00a0\u00a0\u00a0 } else {\r\n\u00a0\u00a0\u00a0\u00a0 y = y - 10;\r\n\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0 x = constrain(x,10,width-10);\r\n\u00a0\u00a0 y = constrain(y,10,height-10);\r\n\u00a0 }<\/pre>\n<p>En <strong>Programmation Orient\u00e9e Objet<\/strong> la m\u00eame chose s&#8217;\u00e9crit :<\/p>\n<pre>var rond;\r\n\r\nfunction setup() {\r\n\u00a0 createCanvas(640,360);\r\n\u00a0 rond = new Rond();\r\n\u00a0 background(250);\r\n}\r\n\r\nfunction draw() {\r\n\u00a0 rond.pas();\r\n\u00a0 rond.aspect();\r\n}\r\n\r\nfunction Rond() {\r\n\u00a0 this.x = width\/2;\r\n\u00a0 this.y = height\/2;\r\n\r\n\u00a0 this.aspect = function() {\r\n\u00a0\u00a0\u00a0 stroke(255);\r\n\u00a0\u00a0\u00a0 fill(236,36,94);\r\n\u00a0\u00a0\u00a0 ellipse(this.x, this.y, 10,10);\r\n\u00a0 };\r\n\r\n\u00a0 this.pas = function() {\r\n\u00a0\u00a0\u00a0 var choix = floor(random(4));\r\n\u00a0\u00a0\u00a0 if (choix === 0) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 this.x = this.x + 10;\r\n\u00a0\u00a0\u00a0 } else if (choix == 1) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 this.x = this.x - 10;\r\n\u00a0\u00a0\u00a0 } else if (choix == 2) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 this.y = this.y + 10;\r\n\u00a0\u00a0\u00a0 } else {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 this.y = this.y - 10;\r\n\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0 this.x = constrain(this.x,10,width-10);\r\n\u00a0\u00a0\u00a0 this.y = constrain(this.y,10,height-10);\r\n\u00a0 };\r\n}<\/pre>\n<h5>Pourquoi faire compliqu\u00e9 quand on peut faire simple ?<\/h5>\n<p>La <strong>Programmation Orient\u00e9e Objet<\/strong> (POO) n&#8217;est pas plus facile. En revanche, elle aide \u00e0 mieux organiser le code, le pr\u00e9parer \u00e0 de futures \u00e9volutions et rend certaines portions r\u00e9utilisables pour gagner en temps et en clart\u00e9.<br \/>\nUn <strong>Objet<\/strong> est une suite de variables et de fonctions rang\u00e9es dans une bo\u00eete (l&#8217;objet). Les objets sont un moyen de grouper variables et fonctions associ\u00e9es. <span id=\"result_box\" class=\"\" lang=\"fr\"><span class=\"\">En POO<\/span><span class=\"\">, une variable<\/span> <span class=\"\">est appel\u00e9e une<\/span> <span class=\"\">propri\u00e9t\u00e9 (<\/span>ou <span class=\"\">variable d&#8217;instance<\/span>) et une fonction est appel\u00e9e <span class=\"\">une m\u00e9thode.<\/span><\/span><\/p>\n<p>Prenons l&#8217;exemple suivant :<strong><br \/>\nObjet<\/strong> : Fourmi<br \/>\n<strong>Propri\u00e9t\u00e9s<\/strong> : t<span id=\"result_box\" class=\"short_text\" lang=\"fr\"><span class=\"\">ype<\/span> <span class=\"\">(ouvri\u00e8re<\/span><span class=\"\">, soldat<\/span>)<span class=\"\">, poids<\/span><span class=\"\">, longueur<\/span><\/span><br \/>\n<strong>M\u00e9thodes<\/strong> : marche<span id=\"result_box\" class=\"short_text\" lang=\"fr\">, <span class=\"\">pince<\/span>, lib\u00e8re des ph\u00e9romones<span class=\"\">, mange<\/span><\/span><\/p>\n<p><strong>Propri\u00e9t\u00e9s<\/strong> = variables<br \/>\n<strong>M\u00e9thodes<\/strong> = fonctions<\/p>\n<p>Dans <em>p5.js<\/em> la fonction <strong>constructeur<\/strong> de l&#8217;objet se r\u00e9dige ainsi :<\/p>\n<pre>function Fourmi(){\r\n   \/\/d\u00e9claration des variables\r\n   var type;\r\n   var poids;\r\n   var longueur;\r\n\r\n      marche = function(){\r\n      \/\/  instructions \r\n      };\r\n      pince = function(){\r\n     \/\/ instructions\r\n     };\r\n     lib\u00e8redesph\u00e9romones = function(){\r\n     \/\/ instructions\r\n     };\r\n     mange = function(){\r\n     \/\/ instructions\r\n     };\r\n}<\/pre>\n<h5><span id=\"result_box\" class=\"\" lang=\"fr\"><span class=\"\">3 \u00e9tapes pour\u00a0 cr\u00e9er<\/span> <span class=\"\">la fonction <strong>constructeur <\/strong><\/span>:<\/span><span id=\"result_box\" class=\"\" lang=\"fr\"><\/span><br \/>\n<span id=\"result_box\" class=\"\" lang=\"fr\"><\/span><\/h5>\n<h6><span id=\"result_box\" class=\"\" lang=\"fr\"> 1. Cr\u00e9ez un <span class=\"\">bloc fonctionnel<\/span>.<\/span><\/h6>\n<pre>function Rond() {\r\n}<\/pre>\n<h6><span id=\"result_box\" class=\"\" lang=\"fr\">2. Ajouter <span class=\"\">les propri\u00e9t\u00e9s<\/span> et <span class=\"\">leur affecter des valeurs<\/span><span class=\"\">.<\/span><\/span><\/h6>\n<pre>function Rond(){\r\n  this.x = width\/2;\r\n\u00a0 this.y = height\/2;\r\n}<span id=\"result_box\" class=\"\" lang=\"fr\"><\/span>\r\n<span id=\"result_box\" class=\"\" lang=\"fr\"><\/span><\/pre>\n<h6><span id=\"result_box\" class=\"\" lang=\"fr\">3. <span class=\"\">Ajoutez les m\u00e9thodes<\/span><span class=\"\">.<\/span><\/span><\/h6>\n<p><span id=\"result_box\" class=\"\" lang=\"fr\"><span class=\"\">Parce que nous voulons faire de cette fonction une m\u00e9thode de l&#8217;objet, il est n\u00e9cessaire d&#8217;utiliser le mot cl\u00e9 <em>this<\/em>.<br \/>\nLa syntaxe classique,<br \/>\n<\/span><\/span><\/p>\n<pre> function aspect(){\r\n\u00a0\u00a0\u00a0 stroke(255);\r\n\u00a0\u00a0\u00a0 fill(236,36,94);\r\n\u00a0\u00a0\u00a0 ellipse(x, y, 10,10);\r\n\u00a0 }<\/pre>\n<p>et transform\u00e9e ainsi :<\/p>\n<pre> this.aspect = function() {\r\n\u00a0\u00a0\u00a0 stroke(255);\r\n\u00a0\u00a0\u00a0 fill(236,36,94);\r\n\u00a0\u00a0\u00a0 ellipse(this.x, this.y, 10,10);\r\n\u00a0 }<strong>;<\/strong><\/pre>\n<h5>Cr\u00e9ation de l&#8217;objet<\/h5>\n<p>D\u00e9clarer la variable de la m\u00eame habituelle :<\/p>\n<pre>var rond;<\/pre>\n<p>Initialiser l&#8217;objet avec le mot-clef <em>new.<br \/>\n<\/em><span id=\"result_box\" class=\"\" lang=\"fr\">L&#8217;objet est plac\u00e9 en m\u00e9moire <span class=\"\">avec toutes ses propri\u00e9t\u00e9s<\/span> <span class=\"\">et m\u00e9thodes.<\/span> <span class=\"\">Le nom du<\/span> constructeur <span class=\"\">est \u00e9crit \u00e0 droite du<\/span> <span class=\"\">mot-cl\u00e9 <em>new<\/em><\/span><span class=\"\">, suivi<\/span> <span class=\"\">par les param\u00e8tres<\/span> <span class=\"\">dans le<\/span> <span class=\"\">constructeur (si n\u00e9cessaire) : <\/span><\/span><\/p>\n<pre>rond = new Rond();<\/pre>\n<p>Dans <em>draw()<\/em> les m\u00e9thodes <em>pas()<\/em> et <em>rendu()<\/em> de l&#8217;objet sont appel\u00e9es ainsi :<\/p>\n<pre>function draw() {\r\n\u00a0 rond.pas();\r\n\u00a0 rond.aspect();\r\n}<\/pre>\n<h5>Plusieurs objets<\/h5>\n<pre>var rond;\r\nvar rond2;\r\n\u00a0var couleur1;\r\n\u00a0var couleur2;\r\n\r\nfunction setup() {\r\n\u00a0 createCanvas(640,360);\r\n\u00a0var couleur1 = color(255,36,95);\r\n\u00a0var couleur2 = color(19,227,41);\r\n\u00a0 rond = new Rond(width\/2, height\/2,10,couleur1);\r\n\u00a0 rond2 = new Rond(0,0,10,couleur2);\r\n\u00a0 background(250);\r\n}\r\n\r\nfunction draw() {\r\n\u00a0 rond.pas();\r\n\u00a0 rond.aspect();\r\n\u00a0 rond2.pas();\r\n\u00a0 rond2.aspect();\r\n}\r\n\r\nfunction Rond(x,y, diametre, couleur) {\r\n\u00a0this.x = x;\r\n\u00a0this.y = y;\r\n\u00a0this.diam = diametre;\r\nthis.couleur1 = couleur;\r\nthis.couleur2 = couleur;\r\n\r\n\r\n\u00a0 this.aspect = function() {\r\n\u00a0\u00a0\u00a0 stroke(255);\r\n\u00a0\u00a0\u00a0 fill(couleur);\r\n\u00a0\u00a0\u00a0 ellipse(this.x, this.y, this.diam,this.diam);\r\n\u00a0 };\r\n\r\n\u00a0 this.pas = function() {\r\n\u00a0\u00a0\u00a0 var choix = floor(random(4));\r\n\u00a0\u00a0\u00a0 if (choix === 0) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 this.x = this.x + 10;\r\n\u00a0\u00a0\u00a0 } else if (choix == 1) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 this.x = this.x - 10;\r\n\u00a0\u00a0\u00a0 } else if (choix == 2) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 this.y = this.y + 10;\r\n\u00a0\u00a0\u00a0 } else {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 this.y = this.y - 10;\r\n\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0 this.x = constrain(this.x,10,width-10);\r\n\u00a0\u00a0\u00a0 this.y = constrain(this.y,10,height-10);\r\n\u00a0 };\r\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[],"_links":{"self":[{"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/2817"}],"collection":[{"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2817"}],"version-history":[{"count":18,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/2817\/revisions"}],"predecessor-version":[{"id":2836,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/2817\/revisions\/2836"}],"wp:attachment":[{"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2817"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2817"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2817"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}