Bases de l'animation sous Processing (partie 2)

Dans la première partie, nous avons préciser les éléments les plus basiques pour pouvoir dessiner sous Processing. Animer n'est pas très différents du dessin, surtout si nous avons pas mal de notions déjà implémentées.
Animer c'est dessiner plusieurs images légèrement différentes d'une  manière successive pour créer l'illusion qu'il s'agit d'un objet en animation. La fréquence de l'animation et le degré de changement entre les images jouent un rôle important dans la qualité de l'animation.
D'un côté, si la fréquence de dessin est top basse, l'animation est perdue parce qu'elle devient un ensemble d'états (de l'objet en question) clairement distincts. Si elle est trop élevé, l'animation est perdues parce que l'utilisateur ne peut voir que le premier et le dernier états; il aura la sensation que l'objet en question a été téléporté de la première position vers la deuxième position.
De l'autre côté, les différences entre les différentes images doivent être non null, autrement il n'y a plus d'animation mais des objets immobiles. Comme elles ne doivent pas être trop grandes, sinon, on risque d'avoir le même effet de téléportation sensé avec une grande fréquence de dessin ( de mise à jour).
De toute ces notions, Processing a essayé d'implémenter une bonne partie. Si les objets de l'animation et la différence entre les différentes images (frames) sont la responsabilité de l'utilisateur (chaque utilisateur peut créer ce qu'il veut), Processing a pu apporté sa valeur ajoutée concernant le principe de l'animation et de la fréquence de l'animation.
Un script de base d'animation sous Processing doit définir les deux fonctions : setup() et draw().
setup()  : est, comme son nom l'indique, une fonction d'initialisation qui sera appelée une seule fois avant toutes les autres fonctions. Cette fonction est généralement utilisée pour initialiser les variables manipulées et les définir les propriétés générale de l'animation telles que l'arrière plan et la taille de la fenêtre.
draw() : est la fonction qui permet de dessiner le contenu de la fenêtre. Cette fonction est appelée 60 fois par seconde. Cette philosophie permet d'éviter au utilisateur de gérer deux choses :

1. La boucle de dessin,
2. Le rythme de dessin.

Prenons un exemple :

int i, j;

void setup(){
  size(600, 600);
  i = 0;
  j = 0;
}

void draw(){
  i++;
  j++;
  ellipse(i, j, 5, 5); // un cercle de 5 pixels
}

Ce script nous permet de dessiner une ligne qui grandit peu à peu en diagonale de la fenêtre. La question ici est : comment avons nous obtenu une ligne malgré que le script fait appel à la fonction "ellipse()" qui dessine un seul point ?
La réponse réside dans le fait que Processing ne vide pas la fenêtre entre deux appels à la fonction "draw()"; il y ajoute les nouvelles formes sans effacer les anciennes.
La méthode la plus simple pour effacer le contenu de la fenêtre est de re-dessiner l'arrière plan à chaque appel de la fonction "draw()". Ainsi, le script peut être modifié pour avoir un point qui se déplace en diagonale de la fenêtre au lieu d'avoir une ligne qui grandit.

int i, j;

void setup(){
  size(600, 600);
  i = 0;
  j = 0;
}

void draw(){
  background(255);
  i++;
  j++;
  ellipse(i, j, 5, 5);
}

A la fin, le point en déplacement finit par sortir de la fenêtre.

Le règles de dessin reste les mêmes que les règles présentées dans la première partie de cet article.

Note : l'utilisation de la méthode "ellipse()" qui dessine, à la base, la forme ovale nous permet de dessiner une un grand point. La méthode "point()" permet de dessiner un seul point mais il ne sera pas très visible sur les captures.

Bases de l'animation sous Processing (partie 1)

Processing facilite la création des animation. Il implémente les notions de base de toute animation. Dans cet article (sur deux parties), je vais brièvement présenter la différence entre un script de dessin et un script d'animation sous Processing.
Pour dessiner une forme, aucune condition préalable est nécessaire sauf la taille de la fenêtre. Cette taille peut être définie par la fonction "size". Elle respecte la norme en prenant le premier paramètre comme la largeur de la fenêtre et le deuxième paramètre comme sa hauteur. Par exemple :

size(600, 400);

Nous donne la fenêtre suivante :

Et puisque Processing cache la complexité liée à la programmation Orientée Objet en Java, la ligne de code précédente est tout ce que nous allons mettre dans le script.

Pour dessiner une forme donnée, il faut appeler la fonction adéquate. Une ligne est dessinée grâce à la fonction "line()" et une rectangle est dessiné en appelant la méthode "rect()". Chaque fonction nécessite des paramètres selon la forme que nous voulons dessiner. Par exemple, le code suivant :

size(600, 400);
rect(100, 100, 400, 200);

Nous donne la forme suivante :

Nous pouvons appeler plusieurs fonctions de dessin comme toutes les autres fonctions. Par exemple, le code suivant :

size(600, 400);
rect(100, 100, 400, 200);
line(100, 100, 500, 300);
line(100, 300, 500, 100);

Nous donne la forme suivante :

Il est possible de modifier l'ensemble des paramètres des dessin par appeler les fonctions adéquates avant d'appeler la fonction de dessin. Parmi ces paramètres, nous pouvons préciser la présence ou bien l'absence d'une ligne qui délimite la forme, la couleur de cette ligne et la couleur de remplissage. Par exemple, dans ce code :

size(600, 400);
noStroke();
fill(0, 200, 130);
rect(100, 100, 400, 200);

Nous avons demandé à Processing de ne pas dessiner une ligne autour de notre rectangle comme nous avons demandé que le remplissage aura la couleur 0 pour le rouge, 200 pour le vert et 130 pour bleu (un codage de 0 à 255 pour chaque couleur, d'autres modes existent sous Processing). Le résultat est :

Cela est concernant le dessin, comment créer des animations ? Voir partie 2.

Le trésor caché

L'évolution rapide des différentes technologies liées à la programmation et au développement complique de lus en plus la tâche du développeur. Être un développeur d'une technologie particulière veut dire suivre ses différentes avancées et faire la mise à jour de ses connaissances pour pouvoir exploiter et bénéficier des nouvelles versions et des nouvelles frameworks. Cette tâche devient très difficile vu le rythme suivant lequel les nouvelles propositions sont déployées. Ainsi, le développeur se trouve face à deux solutions.
La première solution est la spécialisation dans un ensemble donné de technologies. A mon avis, c'est la solution suivie par la plus part des développeurs. Chaque développeur choisit la technologie qu'il trouve meilleure pour lui (comme préférence personnelle) ou bien pour son travail (exigence professionnelle). Après plusieurs années d'expérience, il sera un expert dans ces technologies. La plus part des auteurs des livres font partie de cette catégorie.
La deuxième solution est l'apprentissage limité selon le besoin. Dans le cas où le développeur se trouve obligé de travailler sur plusieurs projets avec des technologies différentes, il peut apprendre une partie ou une API d'un langage ou d'une plate-forme donné suffisamment pour pouvoir satisfaire son engagement professionnel mais pas pour mériter le titre d'expert ou pour occuper le poste de consultant dans cette technologie. Je ferai beaucoup moins confiance dans un livre si je trouve que son auteur soit de cette catégorie.
Dans les deux cas, il restera probablement des trésors cachés. Et par trésor, je veux dire un outil, un langage, une API ou une extension que vous ne connaissez même pas l'extasient ou que vous n'utilisez pas son potentiel d'une manière correcte.
C'est mon cas avec le langage Processing. Processing : "(autrefois typographié Proce55ing) est une bibliothèque Java et un environnement de développement libre (sous licence GNU GPL), créé par Benjamin Fry et Casey Reas, deux artistes américains. Processing est le prolongement « multimédia » de Design by numbers, l'environnement de programmation graphique développé par John Maeda au Media Lab du Massachusetts Institute of Technology" (Wikipedia, simplement). Processing cache une grande partie de la complexité relative à la programmation Orientée Objet que nous trouvons dans Java. Il permet aussi de créer facilement des graphiques et des animations en implantant une grande partie des notions relatives à l'animation; la chose qui est complètement absente dans Java.
Dans mon cas, j'ai toujours utilisé les Applets pour implanter des animations de base à des fin pédagogiques et d'enseignement. Avec l'abondant des Applets, j'ai cherché une solution alternative et j'ai tombé sur Processing. Ma première impression était un regret profond de toutes les années que j'ai perdues en utilisant les Applets au moment où je pouvait faire appel à Processing. En effet, pour dessiner un carré, il vous suffit 2 lignes de code :

size(600, 400);
rect(100, 100, 400, 200);

Processing est le plus grand trésor sur lequel j'ai tombé cette année. Avec les possibilités qu'il offre (quelques exemples), il fera, probablement, partie de mon quotidien durant les prochains jours où  je tenterai de l'explorer et de l'exploiter.
Note Importante : Apprendre une technologie ou un langage ne se résume pas dans l'apprentissage du syntaxe de base ou bien de l'API de base seulement. Le développeur doit avoir des connaissances plus approfondie et doit pouvoir faire face aux problèmes et erreurs souvent rencontrés ou même non-documentées.

Enseigner et écrire pour maîtriser, et pourquoi pas le modèle chinois?

“Si vous n'arrivez pas à expliquer un concept à un enfant de 6 ans, c'est que vous ne maîtrisez pas ce concept.” - Albert Einstein.

Il nous arrive dans notre cursus d’ingénieur d’apprendre des tas de choses, de les comprendre et de les utiliser, sans pour autant les maîtriser. La maîtrise n’est confirmée si on les enseigne.

“Vous ne devez pas écrire un livre sur une thématique donnée si vous n’arrivez pas à en parler pendant une heure, sans préalable préparation, devant un publique.” - Tariq Suwaidane.

Encore plus difficile qu’enseigner, écrire un livre sur une thématique nécessite plus de connaissance et une meilleure maîtrise. Alors devons nous attendre d’atteindre ce niveau pour essayer d’enseigner ou bien d’écrire?

Heureusement, d’autres modèles peuvent être suivis pour atteindre la perfection, et en particulier le modèle chinois : et si on essaye de le faire, même si on ne le maîtrise pas? Et si on essaye d’apprendre et de maîtriser pendant qu’on le fait? Si on observe l’évolution de la production chinoise des produits de haute technologie et des voitures, nous allons apercevoir clairement l’application de ce modèle.

Le modèle n’est pas nouveau, il découle des théories pédagogiques constructives qui encouragent l’apprentissage par l’application et non pas par un passage passif de connaissances de l’enseignant vers l’apprenant. Dans ce contexte, l’apprenant est surveillé et supporté par son enseignant pour obtenir les résultats attendus; il effectue des activités d’apprentissage où l'échec n’est qu’une étape vers le succès. Néanmoins, son application dans la vie quotidienne et dans la vie professionnelle a donné des résultats très satisfaisants malgré que l’environnement professionnel oppose le milieu éducatif, il est très hostile, il n’offre aucun support ou encadrement et il ne donne des chances minimes pour retenter.

Quand je dis “enseigner” pour maîtriser, je ne parle pas d’enseigner dans une institution officielle; la préparation d’une formation gratuite donne la possibilité de vivre une expérience similaire et faire plusieurs tentatives pour perfectionner ses connaissances dans le domaine en question et dans le domaine pédagogique. Du même, “écrire” ne veut pas dire se plonger dans une aventure risquée de publication d’un livre, mais, rédiger et écrire des tutoriels et e-books gratuits sur Internet.

Je pense que nous avons, plus que jamais, la possibilité d’apprendre et de maîtriser par appliquer, enseigner et écrire grâce aux technologies d’internet qui nous permettent d’avoir un feedback de nos amis et des communautés spécialisées sur nos productions, et du coup, on peut voir la société remplace l’enseignant d’une manière positive.