[new:5/7/2011]Lorsqu’on créée des animations il faut savoir ajouter une pincée d’aléatoire pour rendre les mouvements plus naturels, plus réalistes, plus organiques.
Seulement voilà, l’esprit humain est encore moins doué pour inventer des séries aléatoires que ne le sont les ordinateurs...
Il faut donc s’aider. Pour cela on trouve sur le Web quelques sites intéressants.
La tremblante du bouton
Du “bouton”, pas “mouton” hein... Rien à voir avec Creutzfeldt-Jakob ou les mad cows. Nul besoin d’infecter une pauvre bête innocente avec un prion malformé, nous voulons juste faire trembloter un bouton. L’effet peut être amusant (j’ai conçu une barre de menu sur ce principe, vous la verrez bientôt quand le nouveau site sera en route).
C’est un exemple typique où il faut créer l’illusion d’un mouvement désordonné, donc aléatoire.
Le principe de base consiste à créer une time line sur un état, par exemple le MouseOver, de placer des keyframes espacées régulièrement et d’ajouter une translation sur X et Y sur l’ensemble de l’objet à chaque keyframe.
Pour un mouvement suffisamment désordonné il faut entre 5 et 8 keyframes. Le problème n’est pas tant ici comment on fabrique cette animation sous Blend ou directement en Xaml mais comment on règle les translations pour que l’effet soit visuellement attractif.
Si vous essayez d’inventer six séries de couples de translation, je peux vous assurer que votre bouton aura un mouvement qui ne sera pas aléatoire, et ça se verra. Tentez le coup. Bien entendu, avec un peu d’esprit mathématique on peut y arriver. Mais pourquoi s’embêter ?
Utiliser un générateur de nombre aléatoire
Plutôt que de tenter de rendre votre pensée purement aléatoire, ce qui n’est pas possible si vous êtes sain d’esprit, il est bien plus efficace d’utiliser un générateur de nombres aléatoires.
Pour le bouton qui tremble il nous faut environ 6 couples d’entiers relatifs dont la valeur varie entre disons –4 et +4 (ici tout dépend de la taille du bouton et de l’intensité du tremblement qu’on désire obtenir).
En se rendant par exemple ici : http://www.random.org/integer-sets/ nous pouvons générer des ensembles d’entiers. Demander 6 couples de 2 entiers compris dans les valeurs fixées est un jeu d’enfant.
Ne reste plus qu’à copier ses valeurs dans la transformation (translation) des 6 keyframes et l’affaire est jouée...
On obtient ainsi rapidement et du premier coup un mouvement “naturel” en ce sens qu’il semble effectivement aléatoire, ce que le cerveau perçoit tout à fait. Il peut arriver qu’on soit obliger de générer une ou deux séquences différentes de plus et essayer les valeurs. L’aléatoire sur si peu de valeurs peut parfois être surprenant de régularité...
Pour rendre l’effet plus agréable la time line est en autoreverse et en durée infinie (si on suppose une animation sur le MouseOver cela est indispensable pour que l’effet dure tout le temps où la souris est au-dessus du contrôle, peu importe la durée exacte de ce “stationnement” de la souris).
D’autres utilisations
Faire trembler un bouton, un hyperlien ou tout autre objet est une utilisation possible. Il existe bien entendu une infinité de situations où les nombres aléatoires peuvent rendre des services inestimables. Je parle ici de leur utilisation dans des animations, on peut bien sur utiliser la technique dans du code pur et dur.
Par exemple initialiser la position d’un objet, créer une légère variation dans une couleur, dans un déplacement, etc.
Quand on utilise des nombres aléatoires par code, on peut utiliser la classe Random (bien qu’il ne s’agisse que d’un générateur pseudo-aléatoire). Mais quand il s’agit de créer des timelines le mieux est donc d’utiliser des générateurs existants.
D’autres liens
J’ai évoqué http://www.random.org/ plus haut. Ce site est très complet et propose de nombreux générateurs et outils comme un randomiseur de liste, un générateur de bitmaps, etc. Le site offre un véritable générateur aléatoire basé sur bruit atmosphérique. Les séries proposées sont réellement imprédictibles.
Le site http://stattrek.com/ propose une autre approche et d’autres outils. Sa vocation est plutôt de vous apprendre les statistiques. C’est assez bien fait et permet de recadrer certaines notions. Il y a bien entendu des outils comme un générateur de nombres aléatoires, un outil de calcul des permutations et combinaisons (très pratique quand on essaye d’estimer les combinaisons possibles dans un automate par exemple), et plein d’autres choses. En engliche bien entendu.
Lorsqu’il s’agit d’utiliser des valeurs stockées d’avance on peut aussi utiliser les digits du nombre Pi : http://www.piday.org/million.php. ce site propose 1 million de décimales. Pi n’est pas aléatoire en lui-même, il est le résultat exact d’une opération connue (je vous renvoie à vos cours de trigonométrie...), mais jusqu’à aujourd’hui il n’a pas été possible de détecter des cycles ou des patterns dans ses décimales qui elles, forment donc une série aléatoire. Dans le même esprit on peut trouver sur http://apod.nasa.gov/htmltest/gifcity/e.2mil 2 millions de décimales du nombre “e” (base des logarithmes naturels).
Ensuite on trouve plein de choses sur Internet, il suffit de chercher avec Bing ou Google, je ne vais pas vous gaver de liens que vous pouvez trouver vous-mêmes.
Conclusion
“Pensez-y !” me semble une bonne conclusion. C’est en tout cas ce que veut réellement dire ce billet : penser à utiliser des générateurs aléatoires. Ils peuvent ajouter une note de réalisme à vos programmes, les rendre plus organiques, plus agréables. Tout est affaire de créativité bien entendu, mais encore faut-il penser à l’existence de ces outils.
Pensez-y !
(et Stay Tuned !)