Processing, quatrième cours
novembre 27th, 2008 Posted in ProcessingComme promis à présent, les rectangles (dont les carrés) et les ellipses (dont les cercles).
On peut difficilement faire plus simple. Pour dessiner un rectangle parallèle aux bords de l’écran, il suffit de d’indiquer son point supérieur gauche puis de décider de sa largeur et sa hauteur.
rect(20,25,50,60);
Avec ce code, processing dessine un rectangle dont le point supérieur gauche se trouve à 20 pixels du bord gauche et à 25 pixels du bord supérieur. Ce rectangle a une largeur de 50 pixels et une hauteur de 60 pixels.
La syntaxe de la commande rect est donc : rect(x, y, l, h);, où x et y sont l’abscisse et l’ordonnée du point supérieur gauche du rectangle, l sa largeur et h sa hauteur. Comme vous vous en doutez, si l’on choisit le même chiffre comme hauteur et comme largeur du rectangle, celui-ci sera un carré.
On ne peut pas faire plus simple. Comme je n’ai pas demandé de format particulier pour ma fenêtre, elle mesure 100 pixels par 100 pixels et sa couleur de fond est le gris. Puisque je n’ai pas décidé de la couleur de contour de mon rectangle, celle-ci est le noir et puisque je n’ai pas défini une couleur de remplissage pour mon rectangle, celui-ci est rempli en blanc. Si je ne veux pas de contour à mon rectangle, je dois invoquer la commande noStroke(); et si je ne veux pas lui attribuer de couleur de remplissage, je dois écrire noFill();. Évidemment, si j’ai utilisé les commandes noFill(); et noStroke(); en même temps, le résultat sera… que rien ne s’affichera. La couleur du trait de contour doit être réglée avec la commande stroke(); que nous connaissons déjà. L’épaisseur de ce trait de contour se règle avec la commande fill();, qui est parfaitement symétrique à stroke();. Mais passons à la pratique.
Le programme qui suit commence par régler la taille et la couleur de la fenêtre d’affichage (530×80 pixels, dans un gris assez clair). Puis il dessine successivement sept rectangles, en changeant les couleurs ou les options de remplissage et de contour grâce aux commandes fill, stroke, strokeWeight, noFill et noStro
size(530,80); background(220); rect(10,10,60,60); fill(255,0,0); rect(85,10,60,60); fill(0,255,0); stroke(0,0,255); rect(160,10,60,60); strokeWeight(5); fill(255); rect(235,10,60,60); noStroke(); fill(255,0,0); rect(310,10,60,60); fill(255,255,0); rect(385,10,60,60); stroke(0); noFill(); rect(460,10,60,60);
Voici le résultat que nous obtenons
Au passage, profitons en pour tester une propriété des couleurs déjà évoquée précédemment mais non-utilisée, l’opacité. Rappelez-vous, si j’écris stroke(0, 25);, cela signifiera que je veux que les traits soient noirs (0) mais à un certain degré d’opacité, à savoir 25 (sur 255, soit environ 10%). Cela fonctionne aussi pour la commande fill.
size(190,88); background(255); noStroke(); fill(255,0,0,20); rect(2,2,60,60); rect(6,6,60,60); rect(10,10,60,60); rect(14,14,60,60); rect(18,18,60,60); rect(22,22,60,60); rect(26,26,60,60); noFill(); stroke(0,0,255,80); strokeWeight(2); rect(102,2,60,60); rect(106,6,60,60); rect(110,10,60,60); rect(114,14,60,60); rect(118,18,60,60); rect(122,22,60,60);
Dans ce cas, j’ai commencé par définir une zone d’affichage de 190 pixels par 88, sur fond blanc. Puis j’ai décrété qu’il n’y aurait pas de traits de contours à mes formes (noStroke();) et j’ai sélectionné comme couleur de remplissage du rouge (255,0,0) à une opacité de 20, comme ceci : fill(255,0,0,20);. Le niveau d’opacité (ou de transparence, c’est la même chose) peut aller de 0 (totalement invisible) à 255 (totalement opaque). Avec la valeur de 20, j’obtiens une opacité d’environ 8%. Avec 127, j’obtiendrais une opacité de 50%, etc. Des carrés sont ensuite dessinés tous les quatre pixels. L’effet de transparence/opacité fait que plus il y a d’intersections et plus la couleur est dense.
Pour la seconde série, c’est la couleur de remplissage qui est supprimée (noFill();) et la couleur de contour qui est créée à une certaine opacité (stroke(0,0,255,80);), ce qui nous donne du bleu avec une opacité de 80 sur 255, soit environ 32%. L’épaisseur des traits est de 2 pixels (strokeWeight(2);).
Les ellipses fonctionnent de manière assez similaire aux rectangles puisque leur remplissage et leur contour se décide de la même manière (stroke, noStroke, strokeWeight, fill, noFill). Comme la commande rect, la commande ellipse s’invoque avec quatre arguments : ellipse (x, y, d1, d2);, où x est l’abscisse et y l’ordonnée de l’origine (du centre) de l’ellipse et ou d1 est son diamètre horizontal et d2 son diamètre vertical.
Dans l’exemple qui suit, après avoir décidé de la taille (530 x 100) et de la couleur (blanc) de la fenêtre d’affichage, je dessine cinq ellipses dont les centres se trouvent aux positions (40,50), (120,50), (200,50), (280,50) et (360,50). Le fait que leur coordonnée verticale soit toujours la même (50) les place sur la même ligne. Les trois premières figures ont des diamètres latéraux et verticaux identiques, ce sont donc des cercles. Les deux suivantes ont des diamètres non-égaux.
Plus loin, je supprime les traits de contour (noStroke();) puis je dessine quatre ellipses dont le point d’origine est le même (460, 50) mais dont les diamètres sont de plus en plus petits. Entre deux dessins, je change de couleur de remplissage.
size(530, 100);background(255); ellipse(40,50,20,20); ellipse(120,50,40,40); ellipse(200,50,60,60); ellipse(280,50,60,20); ellipse(360,50,20,60); noStroke(); fill(255,0,0); ellipse(460,50,80,80); fill(255,255,0); ellipse(460,50,60,60); fill(0,255,0); ellipse(460,50,40,40); fill(255); ellipse(460,50,20,20);
Le résultat est conforme au programme.
J’aurais aussi pu décréter une épaisseur des traits de contour particulière, ce que je n’ai pas fait.
Avec les ellipses nous retrouvons l’effet d’escalier, pas toujours heureux, qui apparaissait avec les lignes obliques dessinées à l’aide de la commande line.
Pour pallier à ce problème, exactement comme avec les lignes, on peut commencer son programme par la commande smooth(); dont l’effet est d’adoucir l’affichage de certains objets.
Si la commande smooth(); n’est pas lancée automatiquement au démarrage, c’est parce que l’on n’en a pas toujours besoin et qu’elle ralentit considérablement le travail de processing, ralentissement qui n’est cependant pas sensible sur des images aussi simples que celle-ci.
Il n’y a pas beaucoup plus à savoir sur les ellipses et les rectangles si ce n’est qu’il existe pour chacune de ces deux formes un paramétrage facultatif permettant de modifier le rôle du point de référence de la forme. Ainsi en écrivant rectMode(CENTER);, les rectangles ne seront plus repérés par leur point supérieur gauche mais par leur centre, tandis qu’en écrivant ellipseMode(CORNER);, le point de référence de l’ellipse ne sera plus son centre mais son coin supérieur gauche.
22 Responses to “Processing, quatrième cours”
By david t on Nov 27, 2008
jusqu’à maintenant on dirait presque du logo. :)
By Fred Boot on Nov 27, 2008
Continue Jean-No, tu tiens le bon bout !
By Jean-no on Nov 27, 2008
@david : comme le logo, processing sert avant tout à dessiner, effectivement. En revanche il a un plus grand intérêt pédagogique car par de nombreux aspects il est proche d’autres langages de programmation, à commencer par Java.
@Fred : merci de tes encouragements :-) Est-ce que ça signifie que tu vas re-télécharger processing et laisser tomber la bande dessinée pendant au moins deux jours ? :-)
By david t on Nov 27, 2008
oui, le logo est un dinosaure, mais j’en ai quelques souvenirs datant de l’école primaire, appelons cela un flashback involontaire.
autant la syntaxe des successeurs de C (dont java) procède d’une logique indiscutable, autant je regrette parfois ces vieux langages où les instructions ressemblaient à des codes d’espion.
(nostalgie de l’informatique…)
By Jean-no on Nov 27, 2008
Je ne suis pas nostalgique du basic, que je trouve illisible, ni du logo que je n’ai connu que de loin en loin. En revanche je reste un fervent défenseur du langage Lingo, qui se trouve dans Macromedia/Adobe Director. Il était simple et puissant, mais un peu baroque et peut-être un peu lent à exécuter. Enfin je dis « il était » mais la dernière version de Director n’est pas sortie il y a bien longtemps, donc on peut dire qu’il existe toujours, même si je ne le montre plus à mes étudiants, puisque ce logiciel reste méchamment associé à l’époque du cdrom culturel.
Ce qui est fort avec processing et qu’on avait dans les vieux langages, c’est l’immédiateté. J’écris « point(10,10) » et j’ai un point aux coordonnées (10,10), sans me casser plus que ça. Mais ensuite on peut écrire des programmes plus structurés, avec des fonctions et des objets. Je ne sais pas combien il faut taper de lignes avec java pour dessiner un point, mais c’est forcément plus long que ça.
By david t on Nov 27, 2008
je ne sais pas. je n’ai jamais fait de java, seulement du javascript, avec lequel on peut faire des choses très puissantes en quelques mots. je suppose qu’en java il faudrait d’abord initialiser un objet de type «viewport», puis un objet point, puis un objet ligne, et ainsi de suite pour chaque petit morceau. (c’est un peu le côté pénible de la POO.)
mais ce que je vois de processing est très probant en effet pour ce qui est de la facilité d’usage. le code est extrêmement lisible aussi. et si le but du langage est de créer des applets, cette simplicité me semble tout à fait indiquée. (c’est moins convaincant s’il s’agit de développer des applications indépendantes.)
basic, logo: bon, c’étaient des jouets, rien de plus. mon père faisait de l’APL dans les années 1970-80. ça c’était ésotérique. pour ma part je suis plutôt perl dans l’âme, mais j’ai de moins en moins d’occasions d’utiliser ce langage de plus en plus désuet. (PHP fonctionne bien mais ne me procure aucun plaisir d’écriture.)
je me disais l’autre jour que je devrais passer au ruby… pour rester dans les langages ésotériques.
By Fred Boot on Nov 27, 2008
@Jean-No : Non mec, j’ai perdu la flamme. On n’est pas dans Impitoyable là : les cowboys ne reviennent jamais. ;)
By Jean-no on Nov 27, 2008
@David : j’aime bien Javascript, même si j’ai souvent souffert avec les différences d’interprétation d’un navigateur à l’autre.
Processing est à mon avis mal adapté au très gros projets. D’ailleurs passé un certain stade, on panache processing de Java.
Je ne connais pas Ruby mais il existe une implémentation de processing pour Ruby. Il en existe d’ailleurs aussi une en Javascript.
@Fred : Bon, travaille bien alors :-)
By david t on Nov 27, 2008
comment? tu ne connais pas le module prototype? avec ça, fini les différences de navigateur. il faut que tu l’essaies si ce n’est déjà fait. sérieusement. lis un peu la doc (sur le site lié) pour t’en convaincre.
By Jean-no on Nov 27, 2008
J’ai utilisé Javascript intensément pendant des années, et je l’utilise encore mais il ne m’arrive quasiment jamais d’avoir un problème dû à l’hétérogénéité des navigateurs. Mais j’irais voir prototype oui
By david t on Nov 27, 2008
prototype est génial. vraiment. un plaisir.
(bon, il faut que j’arrête de polluer tes commentaires avec mes histoires de programmation, je suis complètement hors-sujet.) :)
By Jean-no on Nov 28, 2008
Non non, ce n’est pas hors sujet, au contraire.
By david t on Nov 28, 2008
un exemple de prototype (je ne sais pas ce que ça va donner une fois passé par wordpress par contre):
var setupPairImpair = function(ul) {
ul.childElements().each(function(li, index) {
if(((index+1) % 2) > 0) li.addClassName(‘impair’);
});
}
tu lui donnes un objet «ul» et il t’ajoute une classe «impair» à tous les deux «li».
By david t on Nov 28, 2008
comme je pensais, il m’a foutu en l’air mon «pre», tant pis :) heureusement ce n’est pas trop compliqué à décrypter.
By Jean-no on Nov 28, 2008
J’ai réussi à mettre le tag « pre ». WordPress n’acceptait pas pour toi ? C’est marrant, l’interface de modif des commentaires déjà postés est différente pour l’admin.
By david t on Nov 28, 2008
oui, je crois que wordpress est plus pointilleux avec les visiteurs qu’avec l’admin, ce qui n’est pas sans une certaine logique.
By Jean-no on Nov 28, 2008
Oui ça se tient
By sf on Déc 7, 2008
aah.
Quatrième cours et je suis déjà perdue.
Vais demandé à Santa Klaus un surplus de neurones, de patience et de perséverance; devrais être capable d’ingérer la logique ellipse pour la nouvelle année…(et d’abandonner les onomatopées de détresse (je conserve celles de perplexité)).
Merci pour ces cours.
By Jean-no on Déc 7, 2008
C’est moi qui explique mal alors. Parce que c’est réellement simple. Je connais un étudiant des Beaux-Arts de Rennes qui envisage de réaliser un cours de Processing assez original, totalement dénué d’explications… C’est peut-être le problème, mes explications se veulent complètes donc elles sont verbeuses. Mais si tu ouvres Processing et que tu écris juste
ellipse(50,50,20,70);puis que tu cliques sur « play », tu verras instantanément l’effet.By sf on Déc 7, 2008
Vos explications sont très claires !
Les difficultés que je rencontre sont inhérentes à mon mode de mémorisation version Shadoks : chaque nouvelle information pousse vers l’oubli une info moins récente…
Quand la fonction ellipse rencontre la fonction hasard, il y a…comme un blanc, soudain.
Mais cela reste anecdotique; le chapitrage de vos leçons permet justement de remédier à ces absences.
Il n’y a pas de petits projets sans grandes frayeurs (et inversement) ^_^
By david t on Déc 7, 2008
la meilleure manière de mémoriser un langage informatique est de l’essayer soi-même au fur et à mesure… les explications de jean-no sont très complètes et servent surtout à s’y retrouver pour ce qui est de la théorie.
d’ailleurs, «mémoriser» n’est pas le terme le plus approprié quant à l’apprentissage d’un langage informatique, il faut mémoriser des concepts de base et quelques mots-clés spécifiques au langage, pas le dictionnaire au complet (qui est toujours accessible à un clic de souris).
By Jean-no on Déc 7, 2008
Les langages les plus courants sont basés sur les mêmes principes, parfois sur la même syntaxe et sur le même vocabulaire… Souvent le plus gros problème n’est pas le langage mais sa mise en oeuvre (où est-ce qu’on écrit le script, comment on l’exécute). C’est là que Processing est extrêmement accessible par rapport à Java (qui en est proche), puisqu’on peut taper « line(0,0,100,100); » et cliquer sur play pour qu’il se passe déjà quelque chose.
Ensuite il faut savoir que les choses existent pour pouvoir les retrouver facilement. Parfois, le fait de maîtriser un langage rend difficile l’apprentissage d’un autre qui ressemble, parce qu’on a des automatismes, il faut donc bien comprendre la spécificité du langage pour en tirer partie.
Ce qui manque (pour l’instant, car je suis pris ces jours-ci) à mes explications, c’est ce qui intéresse tous ceux qui manipulent Processing ou autre, à savoir : que fait-on de ce qu’on a fabriqué ? Comment en tire-t-on des vidéos, des images fixes ou des applications ? J’y travaille.