float x, y; \/\/ d\u00e9claration des variables d\u00e9cimales x et y<\/span>\n\nvoid setup(){\n\u00a0\u00a0\/\/ au d\u00e9marrage<\/span>\n\u00a0\u00a0size(180,180); \/\/ r\u00e9glage du format de la fen\u00eatre<\/span>\n\u00a0\u00a0background(0); stroke(255);\u00a0\/\/ r\u00e9glage des couleurs<\/span>\n\u00a0\u00a0x=90;y=90; \/\/affectation de valeurs \u00e0 x et y;\u00a0<\/span>\n}\n\nvoid draw(){\n\u00a0\u00a0\/\/ script ex\u00e9cut\u00e9 r\u00e9guli\u00e8rement\u00a0<\/span>\n\u00a0\u00a0float newx = x+random(-5,5);\u00a0 \/\/ cr\u00e9ation de newx<\/span>\n\u00a0\u00a0float newy = y+random(-5,5);\u00a0 \/\/ cr\u00e9ation de newy<\/span>\n\u00a0\u00a0\/\/ contraintes appliqu\u00e9es \u00e0 newx et newy<\/span>\n\u00a0\u00a0\/\/ afin de les emp\u00eacher de sortir de l'\u00e9cran\u00a0<\/span>\n\u00a0\u00a0if(newx<0){newx=0;}\u00a0if(newx>width){newx=width;}\n\u00a0\u00a0if(newy<0){newy=0;}\u00a0if(newy>height){newy=height;}\n\u00a0\u00a0\/\/ trac\u00e9 de la ligne<\/span>\n\u00a0\u00a0line (x, y, newx, newy);\n\u00a0\u00a0\/\/ enfin, x prend la valeur de newx et y celle de newy<\/span>\n\u00a0\u00a0x = newx; y = newy;\n}<\/pre>\n<\/div>\n![\"\"](\"\/dernier\/files\/2008\/12\/dessin_fou_1.png\")
<\/p>\n
Le r\u00e9sultat d’un tel script sera le trac\u00e9 totalement au hasard d’un trait blanc sur un fond noir. L’image ci-contre montre une capture de l’image de la \u00ab\u00a0sc\u00e8ne\u00a0\u00bb \u00e0 un moment du d\u00e9roulement du programme. La fen\u00eatre fait 180×180 pixels et le trac\u00e9 commence en son centre c’est \u00e0 dire au point (90,90). \u00c0 chaque cycle, un nouveau point est calcul\u00e9, qui s’\u00e9loigne de la position pr\u00e9c\u00e9dente \u00e0 une distance variant entre -5 et +5 pixels dans les abscisses et entre -5 et +5 pixels dans les ordonn\u00e9es.
\nOn note qu’\u00e0 chaque cycle, une fois que les valeurs newx (x + random(-5,5)) et newy (y + random(-5,5)) ont \u00e9t\u00e9 calcul\u00e9es, la ligne est trac\u00e9e avant que x soit remplac\u00e9 par newx et y par newy.<\/p>\n
Ce script tr\u00e8s simple ne s’adapte cependant qu’au seul et unique cas o\u00f9 nous n’aurions qu’un seul traceur \u00ab\u00a0fou\u00a0\u00bb \u00e0 utiliser. Mais comment faire pour tracer plusieurs traits en m\u00eame temps, de plusieurs couleurs diff\u00e9rentes en m\u00eame temps ? C’est pr\u00e9cis\u00e9ment l\u00e0 qu’intervient la programmation objet, elle me permet de d\u00e9cr\u00e9ter l’existence d’un objet nomm\u00e9 \u00ab\u00a0traceur_fou\u00a0\u00bb qui existera simultan\u00e9ment en plusieurs occurrences (ou instances), comme suit :<\/p>\n
\ntraceur_fou[] traceurs = new traceur_fou[0]; \n\/\/ d\u00e9claration d'un tableau de type \"traceur_fou\"\n\/\/ ce tableau se nomme traceurs a au d\u00e9part z\u00e9ro \u00e9l\u00e9ments <\/span>\n\nvoid setup(){\n \/\/ d\u00e9marrage<\/span>\n size(180,180); \/\/ r\u00e9glage du format de la fen\u00eatre<\/span>\n background(0); stroke(255); \/\/ r\u00e9glage des couleurs<\/span>\n \/\/ cr\u00e9ation de dix objets de type traceur_fou<\/span>\n \/\/ qui sont ajout\u00e9s au tableau traceurs <\/span>\n for(int a=0;a<10;a++){\n traceurs = (traceur_fou[]) append(traceurs, new traceur_fou());\n }\n}\n\nvoid draw(){\n \/\/ de mani\u00e8re r\u00e9guli\u00e8re (draw())\n \/\/ une boucle permet de donner \u00e0 chaque objet de type traceur_fou <\/span>\n \/\/ l'ordre d'activer sa commande dessine() <\/span>\n for(int a=0;a<traceurs.length;a++){\n traceurs[a].dessine();\n }\n}\n\nclass traceur_fou{\n \/\/ d\u00e9claration des variables dont disposera chaque objet de type\n \/\/ traceur_fou\n float x=90;float y=90;color c;\n traceur_fou(){\n \/\/ \"constructeur\" d'objets de type traceur_fou\n \/\/ ici, la couleur \"c\" prend une valeur au hasard <\/span>\n c=color(random(255),random(255),random(255));\n }\n void dessine(){\n \/\/ dans le script \"dessine\" nous avons les \u00e9l\u00e9ments\n \/\/ utilis\u00e9s dans le pr\u00e9c\u00e9dent programme <\/span>\n stroke(c);\n float newx = x+random(-5,5);\n float newy = y+random(-5,5);\n if(newx<0){newx=0;} if(newx>width){newx=width;}\n if(newy<0){newy=0;} if(newy>height){newy=height;}\n line (x, y, newx, newy);\n x = newx; y = newy;\n }\n}<\/pre>\n<\/div>\n![\"\"](\"\/dernier\/files\/2008\/12\/dessin_fou_2.png\")
J’ai tent\u00e9 d’\u00e9crire un programme tr\u00e8s simple mais je m’aper\u00e7ois que sa lisibilit\u00e9 est assez relative. On peut en voir l’effet sur l’image qui se trouve ci-contre et qui est une capture de l’image de la sc\u00e8ne \u00e0 un moment de l’ex\u00e9cution du programme. Au lieu de tracer un trait au hasard, notre programme en trace dix en m\u00eame temps. Chacun a sa couleur propre, attribu\u00e9e au hasard.<\/p>\n
Le secret d’un tel programme est l’utilisation des \u00ab\u00a0classes\u00a0\u00bb d’objets. Une classe est un ensemble de propri\u00e9t\u00e9s de types disparates (une m\u00eame classe peut contenir des chiffres, des cha\u00eenes de caract\u00e8res, etc.) et de fonctions qui peuvent \u00eatre attribu\u00e9es \u00e0 plusieurs occurrences ind\u00e9pendantes.
\nPour prendre une m\u00e9taphore assez simple, nous pouvons dire que chacun d’entre nous est une occurrence unique de la classe \u00ab\u00a0\u00eatre humain\u00a0\u00bb. Nous avons de nombreux points en commun mais nous sommes tous diff\u00e9rents par certains aspects : notre nom, notre \u00e2ge, notre identit\u00e9 sexuelle, notre couleur de cheveux, etc. Nous sommes tous capables d’ex\u00e9cuter certaines fonctions de mani\u00e8re ind\u00e9pendante (marcher, courir, parler, etc.) ou simultan\u00e9e (vieillir). Si je voulais cr\u00e9er une classe d’\u00eatre humain disposant des propri\u00e9t\u00e9s et des fonctions \u00e9num\u00e9r\u00e9es ci dessus, je la r\u00e9digerais par exemple ainsi :<\/p>\n
\nclass etre_humain{\n\u00a0\u00a0String nom, sexe, cheveux; int age;\n\u00a0\u00a0\u00a0etre_humain (String n, String s, String c, int a){\n\u00a0\u00a0 \u00a0 \u00a0nom = n; sexe = s; cheveux = c; age = a;\n\u00a0\u00a0 }\n\u00a0\u00a0void \u00a0vieillis(){\n\u00a0\u00a0 \u00a0 \u00a0age = age+1;\n\u00a0\u00a0}\n\u00a0\u00a0void marche(){\n\u00a0\u00a0 \u00a0 \u00a0\/\/ ...commandes correspondant au fait de marcher<\/span>\n\u00a0\u00a0}\n}<\/pre>\n<\/div>\nJe peux \u00e0 pr\u00e9sent \u00ab\u00a0cr\u00e9er\u00a0\u00bb des instances de l’objet \u00ab\u00a0etre_humain\u00a0\u00bb de cette mani\u00e8re :<\/p>\n
\netre_humain \u00a0eh1 = new etre_humain(\"Georges\", \"homme\", \"brun\", 40);\netre_humain \u00a0eh2 = new etre_humain(\"Charles\", \"homme\", \"brun\", 50);\netre_humain \u00a0eh3 = new etre_humain(\"Lucille\", \"femme\", \"blond\", 32);\netre_humain \u00a0eh4 = new etre_humain(\"Charlotte\", \"femme\", \"chatain\", 36);<\/pre>\n<\/div>\nChaque instance est stock\u00e9e dans une variable. J’ai nomm\u00e9 mes variables eh1<\/code>, eh2<\/code>, eh3<\/code> et eh4<\/code>, mais j’aurais pu leur donner d’autres noms bien entendu. \u00c0 pr\u00e9sent, si je d\u00e9sire conna\u00eetre l’\u00e2ge de Georges (qui est stock\u00e9 dans\u00a0eh1<\/code>), je n’aurais qu’\u00e0 demander print(eh1.age);<\/strong><\/code>. Si je d\u00e9sire changer la couleur des cheveux de Charlotte je peux \u00e9crire : eh4.cheveux = \"roux\";<\/strong><\/code>.
\nEnfin, si je souhaite faire vieillir Charles d’un an, je peux \u00e9crire eh2.vieillis();<\/strong><\/code>.
\nCe genre d’exemple est un peu abstrait puisque nous ne parlons ici que de valeurs num\u00e9riques ou de cha\u00eenes de caract\u00e8res. La programmation orient\u00e9e objet est souvent un peu difficile \u00e0 comprendre au d\u00e9but.
\nVoici une derni\u00e8re d\u00e9monstration d’utilisation du paradigme \u00ab\u00a0orient\u00e9 objet\u00a0\u00bb.<\/p>\n\n\/\/ d\u00e9claration d'une liste d'objets de type \"cercle\"<\/span>\ncercle[] TousMesCercles = new cercle[0];\n\nvoid setup(){\n size(180,180); smooth(); strokeWeight(0.5); background(255);\n fill(255,25); \/\/ la couleur de remplissage est du blanc \u00e0 ~10% d'opacit\u00e9<\/span>\n \/\/ remplissage du tableau TousMesCercles avec 89 objets de type \"cercle\"<\/span>\n for(int a=1;a<90;a++){\n TousMesCercles = (cercle[]) append(TousMesCercles, new cercle(a));\n }\n}\n\nvoid draw(){\n noStroke();\n rect(0,0,180,180);\n stroke(0);\n for(int a=0;a<TousMesCercles.length;a++){\n TousMesCercles[a].dessine();\n }\n}\nclass cercle{\n \/\/ d\u00e9claration des variables<\/span>\n float rayon; float vitesse; float angle;\n cercle(float r){\n \/\/ initialisation de l'instance<\/span>\n rayon=r; angle=0; vitesse=radians(random(-3,3));\n }\n void dessine(){\n \/\/ fonction \"dessine\" propre \u00e0 chaque objet<\/span>\n angle+=vitesse; \/\/ la variable \"angle\" est incr\u00e9ment\u00e9e de \"vitesse\"\n \/\/ petit calcul trigonom\u00e9trique basique<\/span>\n line(90,90,90+cos(angle)*rayon, 90+sin(angle)*rayon);\n }\n}<\/pre>\n<\/div>\n![\"\"](\"\/dernier\/files\/2008\/12\/objets_traits_fade.png\")
Cette fois, nous avons cr\u00e9\u00e9 une classe nomm\u00e9e \u00ab\u00a0cercle\u00a0\u00bb (nous avons invent\u00e9 ce nom) qui utilise trois variables (nomm\u00e9es rayon<\/code>, vitesse<\/code> et angle<\/code>, toutes de type \u00ab\u00a0float\u00a0\u00bb) et qui contient deux fonctions, son \u00ab\u00a0constructeur\u00a0\u00bb\u00a0(sa fonction d’initialisation), nomm\u00e9 cercle()(c'est \u00e0 dire ayant le m\u00eame nom que la classe) <\/code>et une fonction nomm\u00e9e dessine()<\/code>.
\nUne liste nomm\u00e9e \u00a0TousMesCercles est d\u00e9clar\u00e9e en t\u00eate du script puis remplie de 89 \u00e9l\u00e9ments dans la fonction setup()<\/code>. Chacun de ces \u00e9l\u00e9ments s’est fait attribuer une variable nomm\u00e9e rayon et allant de 1 \u00e0 90. voit invoquer sa fonction dessine()<\/code> depuis la fonction draw()<\/code>.
\nLa fonction dessine()<\/code> incr\u00e9mente la variable angle en l’additionnant \u00e0 la variable vitesse. Enfin une ligne est trac\u00e9e entre le centre (90,90)<\/code> et un point calcul\u00e9 \u00e0 partir de l’angle et du rayon (90+cos(angle)*rayon, 90+sin(angle)*rayon)<\/code>. Nous reverrons peut-\u00eatre cette formule trigonom\u00e9trique de base ult\u00e9rieurement.
\nAu d\u00e9but de la fonction draw()<\/code>, la sc\u00e8ne n’est pas repeinte en blanc mais juste recouverte d’un rectangle blanc \u00e0 10% d’opacit\u00e9, ce qui donne un effet de persistance et d’effacement progressif des traits trac\u00e9s. L’image qui se trouve ci-contre correspond \u00e0 une capture de l’\u00e9cran \u00e0 un moment donn\u00e9 de l’animation mais vous devez copier-coller l’ensemble du code dans Processing pour en voir l’effet v\u00e9ritable.<\/p>\nIl est en tout cas important de noter que les op\u00e9rations r\u00e9alis\u00e9es sur un tableau d’objets ne peuvent \u00eatre r\u00e9dig\u00e9es comme suit :<\/p>\n
\nmonTableau = append (monTableau, monObjet);<\/pre>\n<\/div>\nmais doivent l’\u00eatre de cette mani\u00e8re :<\/p>\n
\nmonTableau = (classe[]) append(monTableau, monObjet);<\/pre>\n<\/div>\nil est \u00e0 noter aussi que le mot-cl\u00e9 this<\/code> est valide dans Processing. Ce mot-cl\u00e9 sert, pour un objet, \u00e0 se d\u00e9signer lui-m\u00eame. C’est l’\u00e9quivalent de me<\/code> dans le logiciel Director. Ainsi un objet pourrait s’ajouter de lui-m\u00eame \u00e0 une liste d’objets comme ceci :<\/p>\n\nbidule[] TousMesTrucs = new bidule[0];\n\nclass bidule{\n\u00a0\u00a0bidule(){\n\u00a0\u00a0 \u00a0\u00a0TousMesTrucs = (bidule[]) append (TousMesTrucs , this);\n\u00a0\u00a0}\n}<\/pre>\n<\/div>\nSi vous n’avez pas compris grand chose \u00e0 cet article, pas de panique. Ces concepts sont souvent difficiles \u00e0 assimiler. Le prochain article sera nettement plus accessible.<\/p>\n","protected":false},"excerpt":{"rendered":"
La programmation orient\u00e9e objet est un concept relativement r\u00e9cent dans l’histoire de l’informatique (n’ayant \u00e9t\u00e9 massivement employ\u00e9 que depuis le d\u00e9but des ann\u00e9es 1990, quoique l’id\u00e9e soit bien plus ancienne) mais il semble \u00e0 pr\u00e9sent impossible de vivre sans. En effet, des applications aussi banales que les interfaces graphiques d’ordinateurs ou la gestion des \u00e9l\u00e9ments […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[40],"tags":[],"class_list":["post-2848","post","type-post","status-publish","format-standard","hentry","category-processing"],"_links":{"self":[{"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=\/wp\/v2\/posts\/2848","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2848"}],"version-history":[{"count":0,"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=\/wp\/v2\/posts\/2848\/revisions"}],"wp:attachment":[{"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2848"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2848"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hyperbate.fr\/dernier\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2848"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}