Colorisation intelligente dans GIMP

En tant que membre de l’équipe Image du laboratoire GREYC (CRNS, ENSICAEN, Université de Caen), j’ai implémenté un algorithme de “remplissage de dessin au trait” dans GIMP, aussi appelé “colorisation intelligente“. Vous avez peut-être entendu parler du même algorithme dans G’Mic (développé par la même équipe), donc quand on m’a proposé l’emploi, cet algorithme m’a rapidement intéressé. Ce devint ma première mission!

Le problème

Conceptuellement le remplissage de dessin au trait est simple: vous dessinez une forme au stylo noir, disons un cercle approximé, et vous souhaitez le remplir d’une couleur de votre choix. Vous pouviez déjà le faire, plus ou moins, avec l’outil de remplissage, en remplissant les couleurs similaires… à 2 problèmes près:

  1. Si le trait n’est pas bien fermé (il y a des “trous”), la couleur fuite. Les trous peuvent être le fait d’erreur de dessin, cependant on ne les trouve pas forcément aisément (cela peut être un trou d’un pixel au pire des cas), et perdre du temps à les trouver n’est pas très marrant. En outre, cela peut être un choix conscient voire artistique.
  2. Le remplissage laisse en général des pixels non coloriés proche des bordures du traits, à cause de l’interpolation, l’anti-aliasing ou pour d’autres raisons (à moins de ne dessiner qu’avec des pixels pleins, style “pixel art”), ce qui n’est pas un résultat acceptable.
2 principaux problèmes du remplissage des couleurs similaires

En conséquence, probablement aucun coloriste numérique n’utilise l’outil de remplissage directement. Diverses autres méthodes nécessitent par exemple l’outil de sélection contiguë (ou d’autres outils de sélection), l’agrandissement ou réduction de la sélection, puis seulement à la fin le remplissage. Parfois peindre directement avec une brosse est la méthode la plus adaptée. Assister à un atelier d’Aryeom sur le sujet de la colorisation est d’ailleurs absolument fascinant. Elle peut enseigner une dizaine de méthodes différentes utilisées par les coloristes. Elle-même n’utilise pas toujours la même procédure (cela dépend de la situation). Pour le project ZeMarmot, j’ai aussi écrit des scripts Python d’aide à la colorisation, qu’Aryeom utilise maintenant depuis des années, et qui fait un boulot très raisonnable d’accélération de cette tâche ingrate (mais la tâche reste ingrate malgré tout).

L’algorithme

Le papier de recherche s’intitule “Un algorithme semi-guidé performant de colorisation en aplats pour le dessin au trait” (on notera qu’il existe une version anglaise, mais le papier français est plus détaillé: “A Fast and Efficient Semi-guided Algorithm for Flat Coloring Line-arts“). J’ai travaillé sur la base d’un code C++ de Sébastien Fourey, avec les avis de ce dernier ainsi que de David Tschumperlé, tous deux co-auteurs du papier.

Pour nos besoins, je me suis intéressé à ces deux étapes de l’algorithme:

  1. La fermeture des traits, par la caractérisation de “points d’intérêt”, lesquels sont les bords de traits avec courbures extrêmes (on peut alors estimer que ce sont probablement des extrémités de lignes), puis en joignant ces points d’intérêts en définissant des facteurs de qualités à base des angles de normales, ou de distance maximum. Les lignes peuvent être fermées avec soit des splines (c’est à dire des courbes) soit des segments droits.
  2. La colorisation proprement dite, en “mangeant” un peu sous les pixels de traits, ainsi de s’assurer de l’absence de pixels non-coloriés près des bords.

Comme on peut le voir, l’algorithme prend donc en compte les 2 problématiques (que j’ai numérotées dans le même ordre, comme par hasard 😉)! Néanmoins je n’ai implémenté que la première étape de l’algorithme et ai adapté la seconde avec une solution propre (quoique basée sur des concepts similaires) à cause de problématiques d’utilisabilité.

Et voici donc le remplissage par détection de traits dans GIMP:

Remplissage par détection de trait

Je ne vais pas réexpliquer l’algorithme en détail. Si c’est ce qui vous intéresse, je suggère plutôt de lire le papier de recherche (10 pages), lequel est très clair, et a même des images très explicites. Si vous préférez lire du code, comme moi, plutôt que des équations, vous pouvez aussi regarder directement l’implémentation dans GIMP, principalement contenue dans le fichier gimplineart.c, en commençant en particulier avec la fonction gimp_line_art_close().

Ci-dessous, je vais plutôt me focaliser sur les améliorations que j’ai faites à l’algorithme, et que vous ne trouverez pas dans les papiers de recherche. Je rappelle aussi que nous avons travaillé avec l’animatrice/peintre Aryeom Han (réalisatrice de ZeMarmot) comme artiste-conseil, pour rendre l’implémentation utile pour de vrai, non juste théoriquement.

Note: cet article se concentre sur l’aspect technique de la fonctionnalité. Si vous souhaitez seulement savoir comment l’utiliser, je conseille d’attendre quelques jours ou semaines. Nous ferons une courte (néanmoins aussi exhaustive que possible) vidéo pour montrer comment l’utiliser ainsi que le sens de chaque option.

Étape 1: fermeture des traits

Pour donner un aperçu rapide de la logique algorithmique, voici un exemple simple à partir d’une ébauche de dessin par Aryeom (bon exemple puisqu’une telle esquisse est pleines de “trous”!). À gauche, vous pouvez voir l’esquisse, au milieu comment elle est traitée par l’algorithme (cette version de l’image n’est jamais visible par le peintre), et à droite mon essai de colorisation en aplats (avec l’outil de remplissage seulement, pas de brosse, rien!) en moins d’une minute (chronométrée)!

De lignes à colorisation, avec représentation interne au centre

Note: bien sûr, il ne faut pas voir cela comme un exemple de “travail final”. Le travail de colorisation est en général en plusieurs étapes, la première consistant en l’application d’aplats de couleur. Cet outil ne participe qu’à cette première étape et l’image peut nécessiter du travail supplémentaire (d’autant plus avec cet exemple qui se base sur une esquisse).

Estimer une épaisseur de trait globale locale (algo amélioré)

Un aspect de l’algorithme est rapidement apparu comme suboptimal. Comme dit plus haut, nous détectons les points clés grâce à la courbure des lignes. Cela pose problème avec les très grosses brosses (soit parce que vous peignez dans un style “lignes épaisses” ou bien juste parce que vous peignez en très haute résolution, donc avec des lignes “fines de dizaines de pixels”, etc.). L’extrémité de telles lignes peut alors présenter une courbure basse et donc ne pas être détectées. Dans le papier originel, la solution proposée au problème est:

Afin de rendre la méthode de fermeture indépendante de la résolution de l’image, une étape préliminaire permet de réduire si besoin l’épaisseur des tracés à quelques pixels, en utilisant une érosion morphologique. Le rayon utilisé pour cette érosion est déterminé automatiquement par estimation de la largeur des traits présents dans le dessin.

Section ‘2.1. Pré-traitement de l’image anti-aliasée’

Malheureusement calculer une estimation de largeur de traits unique pour un dessin entier présente des limites, puisque cela part du principe que le trait a une épaisseur constante. Demandez donc à un calligraphe ce qu’il en pense pour rigoler! 😉

En outre bien que cela fonctionnait globalement, des effets secondaires pouvaient apparaître. Par exemple des trous inexistants au préalable pouvaient apparaître (en érodant une ligne plus fine que la moyenne). Le papier était conscient de ce problème mais l’écartait en supposant que ce trou serait de toutes façons refermé dans l’étape de fermeture qui suivait nécessairement:

Il est à noter que d’éventuelles déconnexions provoquées par l’érosion appliquée, qui restent rares, seront de toute façon compensées par l’étape suivante de fermeture des traits.

Section ‘2.1. Pré-traitement de l’image anti-aliasée’

Pourtant dès les tests initiaux qu’Aryeom a effectuées avec la première version implémentée de l’outil, elle a rencontré des cas similaires. Une fois même, nous avions une zone parfaitement fermée à la base qui laissait fuiter la couleur, une fois l’algorithme appliqué ⇒ nous obtenions donc l’effet inverse du but de l’algoritme! Paradoxal! Pire, alors que trouver des micros trous dans des traits pour les combler est compliqué, trouver des micros trous invisibles (car existants seulement dans une représentation interne du dessin) tient de la gageure.

Pour couronner le tout, cette érosion ne semblait même pas vraiment bien accomplir son but, puisqu’on arrivait aisément à créer des dessins avec de grosses brosses où aucun point clé n’était détecté malgré l’étape d’érosion. Au final donc, cette étape d’estimation d’épaisseur de trait globale+érosion apportait plus de problèmes qu’elle n’en réglait.

Conclusion: pas glop!

Après de longues discussions avec David Tschumperlé et Sébastien Fourey, nous en sommes arrivés à une évolution de l’algorithme, en calculant des épaisseurs de ligne locales pour chaque pixel de trait (plutôt qu’une unique épaisseur de trait pour le dessin entier), simplement basé sur une fonction distance du dessin. Nous pouvons alors décider si une courbure est symptomatique d’un point clé relativement à l’épaisseur locale (plutôt qu’un test absolu sur un dessin érodé par une épaisseur moyenne).

Non seulement cela fonctionnait mieux, cela ne créait pas de nouveaux trous invisibles dans des zones fermées, détectait des points clés sur de très gros traits en supposant la variabilité des traits (que ce soit un choix stylistique ou parce que la perfection n’est pas de ce monde!), mais en plus c’était même plus rapide!

En exemple, la version originelle de l’algorithme n’aurait pas réussi à détecter les points d’intérêt pour fermer cette zone avec de si gros traits. Le nouvel algorithme n’a aucun problème:

» Pour ceux intéressés, voir le code du changement «

Parallélisation pour traitement rapide

La fermeture de traits est clairement l’étape la plus longue du traitement. Bien que cela reste raisonnable sur des images FullHD voire même 4K, sur mon ordinateur, cela pouvait tout de même prendre une demi-seconde de traitement. Pour un outil intéractif, une demi seconde, c’est un siècle! Sans compter si on se met à traiter des images énormes (pas impossible de nos jours), cela peut alors prendre plusieurs secondes.

J’effectue donc ce calcul en parallèle afin qu’il soit exécuté au plus tôt (dès que l’outil de remplissage est sélectionné). Puisque les gens ne sont pas des robots, cela rend l’intéraction bien plus rapide en apparence, voire dans de nombreux cas, on peut ne même pas se rendre compte qu’il y a eu temps de traitement.

Available line art “Source” in the tool options

Partiellement pour la même raison, vous pourrez remarquer une option “Source” qui propose plus qu’à l’habitude dans d’autres outils (“Échantilloner sur tous les calques” ou sur le calque actif uniquement). Pour cet outil, vous pouvez aussi choisir le calque au dessus ou dessous du calque actif. C’est le résultat à la fois d’une décision logique (la couleur appliquée n’est pas du trait par définition) et pour des raisons de performance (il n’est pas nécessaire de recalculer la fermeture à chaque ajout de couleur).

Étape 2: remplissage

Rendre l’algorithme interactif et résistant aux erreurs

Le papier propose de remplir toutes les zones d’un coup à l’aide d’un algorithme de watershed.

J’ai fait le choix de ne pas honorer cette étape de l’algorithme, principalement pour raison d’utilisabilité. Lorsque j’ai vu les images de démonstration de cet algorithme sur G’Mic pour la première fois, le résultat semblait très prometteur; puis j’ai vu l’interface graphique, et cela semblait peu utilisable. Mais comme je ne suis pas le peintre de l’équipe, je l’ai montré à Aryeom. Ses premiers mots après la démo furent en substance: “je n’utiliserai pas“. Notez bien qu’on ne parle pas du résultat final (qui n’est pas mal du tout), mais bien de l’intéraction humain-machine. La colorisation est fastidieuse, mais si la colorisation intelligente l’est encore plus, pourquoi utiliser?

Qu’est-ce qui est donc fastidieux? G’Mic propose plusieurs variantes pour colorier une image: vous pouvez par exemple laisser l’algorithme colorier aléatoirement les zones, ce qui permet ensuite de sélectionner chaque aplat indépendamment pour recolorisation; vous pouvez aussi guider l’algorithme avec des touches de couleurs, en espérant qu’il fonctionnera suffisamment bien pour inonder les bonnes zones avec les bonnes couleurs. Je propose aussi de regarder cet article sympa de David Revoy, qui avait contribué à la version de base de l’algorithme.

filtre « Colorize lineart [smart coloring] »
La colorisation intelligente dans G’Mic est un peu complexe…

Ce sont des méthodes intéressantes et très sûrement utilisables, voire efficaces, dans certains cas, mais ce n’est pas une méthode générique que vous voudrez utiliser dans tous les cas.

Déjà cela implique beaucoup d’étapes pour colorier un seul dessin. Pour l’animation (par exemple le projet ZeMarmot), c’est encore pire, car nous devons coloriser des dizaines ou centaines de calques.
En outre, cela implique que l’algorithme ne peut se tromper. Or nous savons bien qu’une telle hypothèse est absurde! Des résultats non voulus peuvent se produire, ce qui n’est pas obligatoirement un problème! Ce qu’on demande à un tel algorithme est de fonctionner la plupart du temps, du moment que l’on peut toujours revenir à des méthodes plus traditionnelles pour les rares cas où cela ne fonctionne pas. Si vous devez défaire la colorisation globale (car faite en étape unique), puis essayer de comprendre l’algorithme pour refaire vos touches de couleurs en espérant que la prochaine fois, cela marche mieux afin d’essayer encore, un peu à l’aveuglette, alors l’utilisation d’un algorithme “intelligent” ne peut être que perte de temps.

À la place, nous avions besoin d’un procédé de colorisation intéractif et progressif, de sorte que les erreurs de l’algorithme puissent être simplement contournées en revenant temporairement à des techniques traditionnelles (juste pour quelques zones). C’est pourquoi j’ai basé l’intéraction sur l’outil de remplissage qui existait déjà, de sorte que la colorisation (par détection de traits) fonctionne comme cela a toujours fonctionné: on clique et on voit la zone cliquée être remplie devant ses yeux… une zone à la fois!

C’est simple et surtout résistant aux erreur. En effet si l’algorithme ne détecte pas proprement la zone que vous espériez, vous pouvez simplement annuler pour corriger seulement cette zone.
En outre je voulais éviter de créer un nouvel outil si possible (il y en a déjà tellement!). Après tout, il s’agit du même cas d’usage dont s’est toujours occupé l’outil de remplissage, n’est-ce pas? Il s’agit simplement d’un algorithme différent pour décider comment se fait le remplissage. Il est donc tout à fait logique que ce ne soit qu’une option dans le même outil.

En conclusion, je remplace le watershedding sur l’image totale en utilisant encore une carte de distance. Nous avions déjà vu que cela sert comme estimation décente d’épaisseur (ou de demi-épaisseur pour être précis) locale des lignes. Donc quand on remplit avec une couleur, on utilise cette information pour inonder sous les pixels de lignes (jusqu’au centre de la ligne approximativement). Cela permet ainsi de s’assurer qu’aucun espace non colorié ne soit visible entre le remplissage et les traits. Simple, rapide et efficace.
C’est une sorte de watershedding local, en plus simple et rapide, et cela m’a aussi permis d’ajouter un paramètre “Max flooding” pour garder l’inondation de couleur sous contrôle.

Colorisation intelligente sans la partie “intelligente”!

Un usage possible, et bien cool, de ce nouvel algorithme est de se passer de la première étape, c’est-à-dire ne pas calculer la fermeture des traits! Cela peut être très utile si vous utilisez un style de trait sans rupture (design simple avec lignes solides par exemple) et n’avez donc pas besoin d’aide algorithmique de fermeture. Ainsi vous pouvez remplir des zones d’un seul clic, sans vous préoccuper des la sursegmentation ou de la durée du traitement.

Pour cela, mettez le paramère “Maximum gap length” à 0. Voici un exemple de design très simple (à gauche) rempli avec l’algorithme historique par couleurs similaires (au centre) et par détection de traits (à droite), en un clic:

Gauche: AstroGNU par Aryeom – Centre: remplissage par couleurs similaires – Droite: remplissage par détection de traits

Vous voyez le “halo blanc” entre la couleur rouge et les lignes noires sur l’image du milieu? La différence de qualité avec le résultat à droite est assez frappant et explique pourquoi l’algorithme de remplissage historique par “couleurs similaires” n’est pas utilisable (directement) pour du travail qualitatif de colorisation, alors que le nouvel algorithme par détection de traits l’est.

Outil de remplissage amélioré pour tous!

En bonus, j’ai dû améliorer l’intéraction de l’outil de remplissage de manière générique, pour tout algorithme. Cela reste similaire, mais avec ces détails qui font toute la différence:

Clic et glisse

J’ai mentionné plus haut un problème de “sursegmentation”. En effet on peut appeler un algorithme “intelligent” pour le rendre attrayant, cela ne le rend pas pour autant “humainement intelligent”. En particulier, nous créons des lignes de fermetures artificielles basées sur des règles géométriques, pas de reconnaissance réelle de forme ni en fonction du sens du dessin, et encore moins en lisant dans les pensées de l’artiste! Donc souvent, cela segmentera trop, en d’autres termes, l’algorithme créera plus de zones artificielles qu’idéalement souhaitées (si en plus, vous peignez avec une brosse un peu crénelée, cela peut être très mauvais). Regardons à nouveau l’image précédente:

L’image est “sur-segmentée”

Le problème est clair. on voudra sûrement coloriser le chien avec un aplat de couleur unique, par exemple. Pourtant il a été divisé en une vingtaine de zones! Avec l’ancienne intéraction de l’outil de Remplissage, vous devriez alors cliquer 20 fois (au lieu du clic idéal à 1), ce qui est contre-productif. J’ai donc mis-à-jour l’outil pour autoriser le clic glissé, tel un outil de peinture avec brosse: cliquez, ne relâchez pas et glissez sur les zones à colorier. Cela est désormais possible avec le remplissage par détection de traits ainsi que sur couleurs similaires (pour le remplissage sur sélection, c’est par contre non pertinent, bien sûr). Cela rend le remplissage de dessin sursegmenté bien moins problématique puisque cela peut être fait d’un seul tracé. Ce n’est pas aussi rapide que le clic unique idéal, néanmoins cela reste tolérable.

Prélèvement de couleurs

Une autre amélioration notable est le prélèvement aisé de couleurs avec ctrl-clic (sans avoir besoin de sélectionner la pipette à couleurs). Tous les outils de peinture avaient déjà cette fonctionnalité, mais pas encore l’outil de remplissage. Pourtant on travaille là aussi clairement avec la couleur. Par conséquent pouvoir très aisément changer de couleur par prélèvement sur les pixels alentour (ce qui est un usage très commun des peintres numériques) rend l’outil extrêmement productif.

Avec ces quelques changements, l’outil de remplissage est désormais un citoyen de première classe (même si vous n’avez pas besoin de la colorisation intelligente).

Limitations et travail futur possible

Un algorithme pour peintres numériques

La Colorisation intelligente est faite pour travailler sur des dessins au trait. Cela n’est pas fait pour fonctionner sur des images hors dessin, en particulier des photographies. Bien sûr, on découvre toujours des usages non prévus que des artistes aventureux inventent. Peut-être cela se produira ici aussi. Mais pour le moment, pour autant que je puisse voir, c’est vraiment réservé aux peintres numériques.

Traiter des cas autres que lignes noires sur fond blanc?

Les lignes sont détectés de la manière la plus basique possible, avec un seuil soit sur le canal Alpha (si vous travaillez sur des calques transparent) ou sur le niveau de gris (particulièrement utile si vous travaillez avec des scans de dessins).

Ainsi la version actuelle de l’algorithme peut avoir quelques difficultés pour détecter des traits, si par exemple vous scannez un dessin sur papier non blanc. Ou tout simplement, vous pourriez avoir envie de dessiner en blanc sur fond noir (chacun est libre!). Je ne suis cependant pas certain si ces cas d’usage sont suffisamment courants pour valoir d’ajouter toujours plus de paramètres à l’outil. On verra.

Plus d’optimisation

Je trouve que l’algorithme reste relativement rapide sur des images de taille raisonnable, mais je le trouve encore un peu lent sur de grosses images (ce qui n’est pas un cas rare non plus, notamment dans l’industrie de l’impression), malgré le code multi-thread. Je ne serais donc absolument pas surpris si dans certains cas, vous ne préfériez pas simplement revenir à vos anciennes techniques de colorisation.

J’espère pouvoir revenir tranquillement sur mon code bientôt pour l’optimiser davantage.

Des bordures de couleur peu esthétiques

Le bord du remplissage n’est clairement pas aussi “joli” qu’il pourrait l’être par exemple en coloriant avec une brosse (où le bord montrerait un peu de “texture”. Par exemple, jetons à nouveau un œil à notre exemple d’origine.

L’endroit où le bord du remplissage est visible aura probablement besoin d’une retouche. J’ai ajouté un paramère d'”antialiasing” mais clairement ce n’est pas une vraie solution dans la plupart des cas. Ça ne remplace pas une édition manuelle avec une brosse.

Le pire cas est lorsque vous planifiez de retirer les traits après colorisation. Aryeom fait parfois ce type de dessins où les lignes ne servent qu’en support de travail avant d’être retirées pour le rendu final (en fait une scène entière dans ZeMarmot, un peu “rêveuse”, est faite ainsi). Dans ce cas, vous avez besoin d’un contrôle parfait de la qualité des bords des zones de couleurs. Voici un exemple où le dessin final est fait uniquement de couleurs, sans traits externes:

Image de production du film ZeMarmot, par Aryeom

Pas encore d’interface (API) pour les plug-ins

Je n’ai pas encore ajouté de fonctions pour que les scripts et plug-ins puissent faire du remplissage par détection de trait. Cela est fait exprès car je préfère attendre un peu après la première sortie, notamment pour m’assurer que nous n’avons pas besoin de plus ou meilleurs paramètres, puisque une API se doit de rester stable et de ne plus changer une fois créée, au contraire d’une interface graphique qui peut se permettre plus facilement des changements.

En fait vous vous êtes peut-être rendus compte que toutes les options disponibles dans G’Mic ne sont pas disponibles dans les options d’outils de GIMP (même si elles sont toutes implémentées). C’est parce que j’essaie de rendre l’outil moins confus, étant donné que nombres de ces options nécessitent de comprendre la logique intime de l’algorithme. Plutôt que de passer son temps à trifouiller des curseurs au hasard, j’essaie de trouver une interface qui nécessite peu d’options.

Outil de sélection contiguë

La détection de traits n’est pour l’instant implémentée que pour l’outil de remplissage, mais cela serait aussi tout à fait adapté comme méthode de sélection alternative pour l’outil de sélection contiguë. À suivre…

Segmenter moins

Avec des lignes propres et nets, et des formes simples, l’algorithme marche vraiment bien. Dès que vous complexifiez votre dessin, et surtout utilisez des traits avec un peu de caractère (par exemple la série de brosses “Acrylic”, fournie dans GIMP par défaut), un peu trop de points clés faux-positifs sont détectés, et par conséquent le dessin sur-segmente. Nous sommes tombés sur de tels cas, donc j’ai essayé diverses choses, mais pour l’instant je ne trouve aucune solution miracle. Par exemple récemment j’ai essayé d’appliquer un flou médian sur le trait avant la détection de points clés. L’idée est de lisser les imperfections du trait crénelé. Sur mon exemple de base, cela a bien marché:

Centre: sur-segmentation avec l’algorithme actuel
Droite: toujours trop segmenté, mais bien moins, après avoir appliqué d’abord un flou médian

Malheureusement cela a rendu le résultat sur d’autres images très mauvais, notamment en créant des trous (un problème dont nous nous étions débarrassé en ne faisant plus d’étape d’érosion!).

Centre: résultat très acceptable avec l’algorithme actuel
Droite: mauvais résultat qui ferait fuiter la couleur et qui perd de nombreux détails

Donc je cherche toujours. Je ne sais pas si on trouvera une vraie solution. Ce n’est clairement pas un sujet facile. On verra!

En règle générale, la sursegmentation (faux positifs) est un problème, mais il reste moindre que ne pas réussir à fermer des trous (faux négatifs), notamment grâce à la nouvelle intéraction clic et glisse. J’ai déjà amélioré quelques problèmes à ce sujet, tels les micro-zones que le papier de recherche appelle des “régions non significatives” (or elles sont vraiment significatives pour les peintres numériques, car rien n’est plus embêtant à remplir que des petits trous de quelques pixels); et récemment j’ai aussi réglé des problèmes liés à l’approximation rapide de la surface des régions, laquelle peut être fausse dans le cas de régions ouvertes.

Conclusion

Ce projet fut vraiment intéressant car il a confronté des algorithmes de recherche à la réalité du travail de dessin au quotidien. C’était d’autant plus intéressant avec la rencontre de 3 mondes: la recherche (un algorithme vraiment cool pensé par des esprits brillants du CNRS/ENSICAEN), le développement (moi!) et l’artiste (Aryeom/ZeMarmot). Par ailleurs, pour bien donner le crédit à qui de droit, beaucoup des améliorations d’interface furent des idées et propositions d’Aryeom, laquelle a testé cet algorithme sur le terrain, c’est à dire sur de vrais projets. Cette coopération CNRS/ZeMarmot s’est même tellement bien passée qu’Aryeom a été invitée fin janvier pour présenter son travail et ses problématiques de dessin/animation lors d’un seminaire à l’université ENSICAEN.

Bien sûr, je considère encore ce projet comme un “travail en cours”. Comme noté plus haut, divers aspects doivent encore être améliorés. Ce n’est plus mon projet principal mais je reviendrai clairement régulièrement pour améliorer ce qui doit l’être. C’est néanmoins déjà dans un état tout à fait utilisable. J’espère donc que de nombreuses personnes l’utiliseront et apprécieront. Dites nous ce que vous en pensez!

Un dernier commentaire est que les idées derrière les meilleurs algorithmes ne semblent pas nécessairement les plus incroyables techniquement. Cet algorithme de colorisation intelligente est basé sur des transformations très simples. Cela ne l’empêche pas de fonctionner très bien et d’être relativement rapide (avec quelques limites bien sûr), de ne pas prendre toute votre mémoire vive en bloquant l’interface du logiciel pendant 10 minutes… Pour moi, cela est bien plus impressionnant que certains algorithmes certes brillant, et pourtant inutilisables sur les ordinateurs de bureau. C’est de ce type d’algorithme dont on a besoin pour les logiciels de graphisme pour le bureau. C’est donc très cool et je suis d’autant plus heureux de travailler avec cette équipe talentueuse de G’Mic/CNRS. 🙂

Amusez vous bien à colorier vos dessins! 🙂

Nouvelle image pour nouvelle année

New year 2018

Bonne année à tous!

Aryeom a commencé le premier jour de l’année par un dessin en live de bienvenue à la nouvelle année, qui est dorénavant l’image d’en-tête du présent site.  Il était temps d’ailleurs, notre précédent en-tête était un peu à tendances estivales. 🙂

New year 2018Cette image est aussi au format 16:9 donc vous pouvez l’utiliser en fond d’écran si vous le souhaitez et si le format correspond. Cliquez simplement la miniature à droite pour la télécharger pleine taille.
Elle est sous licence Creative Commons BY 4.0 par Aryeom Han, réalisatrice de ZeMarmot.

En outre la session de dessin numérique fut diffusée live (comme beaucoup de sessions de GIMPage d’Aryeom dorénavant, tel qu’expliqué dans la section “Live Streaming du travail sur ZeMarmot” de notre compte-rendu 2017). Si vous avez manqué le live, vous pouvez vous rattrapper en regardant l’enregistrement. Comme d’habitude, nous rappelons que ce ne fut pas édité après coup, ni accéléré, ni rien; nous n’avons pas non plus rajouté de musique pour rendre la vidéo “cool” ou quoi que ce soit du genre. 😛
Il s’agissait d’un vrai live, avec Aryeom concentrée sur son dessin, ce qui explique qu’il s’agisse d’une vidéo de presque une heure avec des endroits où il ne se passe d’ailleurs rien. Faites avance rapide si vous voulez juste voir la progression en quelques minutes. 😉
Bon visionnage!

Ce live et ce dessin sont rendus possibles grâce à nos nombreux donateurs!

Rappel: les créations (Art Libre) d'Aryeom peuvent
être soutenues financièrement sur Liberapay, Tipeee
ou Patreon (projet ZeMarmot).

GIMP Motion: partie 2 — animations complexes

Voici la seconde vidéo d’introduction de GIMP Motion, notre plug-in pour de l’animation de qualité professionelle avec GIMP. Comme déjà écrit, c’est un travail en cours, les bugs et problèmes sont normaux à ce stade de développement. Je revois aussi régulièrement certains concepts au fur et à mesure qu’on les expérimente en produisant ZeMarmot. En étant conscients de ces points, n’hésitez pas à tester mon code, disponible dans le dépôt officiel de code source de GIMP sous la même licence que ce dernier (GPL v3 et au dessus). À terme, cela devrait être livré avec GIMP lui-même, quand j’estimerai que ce sera stable et suffisamment bon. Plus nous aurons de financement participatif (voir fin de l’article pour les liens de crowdfunding) plus cela se produira vite. 😉

Alors que la vidéo précédentes introduisait les “animations simples”, c’est-à-dire principalement des animations où chaque calque est une image finale de l’animation, cette seconde vidéo montre comment créer des animations “composites” où les images sont le résultat de l’association de plusieurs calques. Par exemple un calque de fond, des calques séparés pour un personnage, d’autres pour un second personnage, et même des calques à part pour des objets mobiles ou des effets (par exemple les traces dans la neige dans la scène en fin de vidéo).

Je montre aussi rapidement comment “jouer” avec la caméra, par exemple du “panning” dans une scène plus grande que l’écran pour suivre des personnages. Lorsque le logiciel sera fini, on devra pouvoir aussi animer tout effet (opérations GEGL). Par exemple pour flouter l’arrière ou l’avant plan, pour ajouter des effets de lumière (reflets ou autre…), ou simplement des effets artistiques ou du motion graphics…
Comme je le disais, c’est du travail en cours.

Un aspect difficile du projet est de garder une expérience fluide. Faire du rendu de dizaines d’images, chacune compositée à partir de plusieurs images hautes résolutions et d’effets complexes, cela prend du temps; or on ne veut pas “geler” l’interface, de même qu’on veut rendre possible la prévisualisation d’animation dès que possible et aussi fluide que possible. J’ai beaucoup travaillé et expérimenté sur ces aspects car, d’expérience, ce sont les points les plus pénibles en travaillant avec Blender où on s’est résigné à constamment faire des rendus d’extraits pour pouvoir les visionner dans des conditions acceptables (la prévisualisation est bien trop lente, même avec une bonne carte graphique, 32GB de RAM, un  bon processeur et des disques SSD).
Un résultat direct dans GIMP sera de rendre enfin libgimp thread-safe (mon patch est encore en attente de revue, mais il marche déjà très bien pour nous, comme vous pouvez le voir si vous testez notre branche). Cela sera donc une belle avancée pour tout type de plug-ins, pas seulement pour l’animation.
Cela m’a ainsi permis d’expérimenter plus facilement avec le multi-threading dans mon plug-in et je suis assez content du résultat jusqu’à présent (bien qu’il y ait encore beaucoup à faire).

Un autre gros chantier est d’avoir une interface aussi simple à utiliser que possible, tout en proposant des fonctionnalités avancées. Nous avons tant de problèmes dans d’autres logiciels où les options les plus avancées sont si complexes à utilisés qu’on ne peut que mal les utiliser… Bien entendu, c’est très compliqué (ce pourquoi c’est un problème dans tant de logiciels; je n’entends pas qu’ils sont mal implémentées: la solution n’est simplement jamais aussi simples qu’elle n’en a l’air) mais nous y travaillons. Aryeom me rappelle sans cesse les bugs et problèmes d’interface de toutes façons, donc je n’ai pas d’autres choix. 😉

Vous avez peut-être aussi remarqué que nous travaillons sur de très courtes animations. Nous dessinons en fait un unique plan par fichier XCF. Puis nous exporterons les images depuis GIMP Motion et travaillerons sur les transitions et davantage de compositing dans un autre logiciel (jusque là Blender VSE; on entend aussi beaucoup de bien de Kdenlive ces derniers temps, donc on réessaiera probablement; pour tout dire, ces 2 vidéos d’introduction furent faites avec Kdenlive également et c’est effectivement mieux que dans mes précédents tests). Puisque 2 plans présentent 2 points de vue totalement différents (par définition), il n’y a de toutes façons pas trop d’intérêt à les dessiner dans le même fichier. L’autre raison est que GIMP n’est pas fait pour travailler avec des milliers de calques haute-définition. Même si GEGL permet de travailler sur des images plus grandes que la mémoire en théorie, cela n’est pas idéal dans la pratique, surtout si on veut des rendus rapides (certains ont essayés! J’ai moi-même testé pour débugguer: ce n’est clairement pas utilisable au quotidien, comme on peut s’y attendre). Tant que GIMP est destiné à de l’imagerie statique, on peut considérer que c’est un état de fait acceptable. Si un jour l’animation devait devenir une fonctionnalité au cœur de GIMP, alors nous pourrons réfléchir à une utilisation plus intelligente de la mémoire.
D’un autre côté, un plan fait rarement plus de quelques secondes ce qui rend l’usage mémoire très raisonnable. En outre travailler sur l’animation plan par plan est un workflow des plus standards et qui prend tout son sens dans l’animation 2D (pour le cinéma avec acteurs ou la 3D, c’est une complètement autre histoire; je parle vraiment de 2D dessinée ici), donc ce n’est vraiment pas un si gros problème pour l’instant (même si ça peut toujours être mieux).

En conclusion, vous vous demandez peut-être d’où vient ce terme de “cel animation“, aussi connu sous le terme d’animation “traditionnelle”. Un jour peut-être, je ferai un petit historique sur l’animation qui vous donnera la réponse, et vous montrera comment le workflow de GIMP Motion s’en inspire beaucoup. Pour le moment, vous pouvez jeter un œil à Wikipedia, et voir comment les “cels” (des feuilles transparentes) correspondent plutôt bien au concept de “calques” de GIMP. 🙂

Bon visionnage!

Équipe ZeMarmot

Rappel: vous pouvez soutenir mes contributions de code
Libre en dollar US sur Patreon ou en euros sur Tipeee.
Plus nous obtenons de financement, plus rapidement nous
tout le monde aura accès à ces fonctionnalités dans les
versions stables de GIMP, ainsi qu'à plein d'autres
fonctionnalités sur lesquelles je travaille en parallèle.
:-)

 

GIMP Motion: partie 1 — animations simples

Mi-juillet, nous avons publié le code de GIMP Motion, notre logiciel pour animer dans GIMP. Il est disponible dans le dépôt de code officiel de GIMP avec la même licence (GPL v3 et plus).

Nous n’avons pas encore de sortie officielle de GIMP avec ce plugin. Si tout se passe bien, cela se produira bientôt, mais pour l’instant nous le jugeons trop expérimental et incomplet, bien que nous l’utilisions quotidiennement nous-même. La version qui sortira sera bien meilleure. 🙂
Cela signifie que si vous souhaitez l’essayer, vous devrez compiler GIMP vous même, ou trouver quelqu’un qui fournit un “build” (peut-être nous, plus tard…).

La vidéo ci-dessus présente les fonctionnalités de base pour créer des animations simples, telles que storyboards/animatiques, ainsi que le nécessaire pour la plupart des besoins pour les images animées (GIF, Webp…). Par “animation simple”, on entend des animations faites d’images uniques successives, sans composition complexe avec des calques d’arrière-plan, de personnages, etc. Cependant même là, de nouvelles fonctionnalités sont à venir, pour le panning/tilting/zoom de grands plans, ou des effets animés (flou animé par exemple), etc.

Nous publierons bientôt une seconde partie vidéo pour détailler les fonctionnalités plus avancées pour des animations complexes (celles avec arrière-plan, premier-plan, personnages…). Et oui, car nous avons à peine entrevu les possibilités présentes de notre plugin pour l’instant. 🙂

Bon visionnage!

Équipe ZeMarmot

Rappel: vous pouvez soutenir mes contributions de code Libre
en dollar US sur Patreon ou en euros sur Tipeee.

Design de décor: le terrier de ZeMarmot

Background design: ZeMarmot home (title)

Dans un film d’animation, le design ne se limite évidemment pas aux personnages. On va aussi designer les objets, accessoires,  et bien sûr les décors. Par exemple, voici notre processus pour le design de la “maison” de ZeMarmot… ou du moins la vue extérieure puisque nous ne voyons jamais l’intérieur (contrairement à la BD initiale que nous avions commencée).

Vous vous souvenez notre premier voyage de recherche? Nous avions trouvé alors, près du village de Saint-Véran, une colline avec un seul arbre au milieu.

The tree on the hill: ZeMarmot movie reference
L’arbre sur la colline: référence du film ZeMarmot

Et bien sûr, à son pied, un trou de terrier de marmotte.

Burrow hole in tree roots: ZeMarmot reference
Le trou du terrier dans les racines: référence du film ZeMarmot

On s’est dit que c’était vraiment cool. La plupart des entrées de terriers étaient juste des trous au milieu de plaines, alors celui-ci semblait un “trou spécial”. Notre personnage n’est pourtant pas une marmotte particulière. Ce n’est pas un leader hollywoodien, ni le chef du clan des marmottes, ou quoi que ce soit. Tout de même… c’est notre héros. Ce n’est pas n’importe quelle marmotte, c’est ZeMarmot! Pour cette raison, lui donner un terrier particulier semblait la chose à faire. C’est ainsi que ZeMarmot vit dorénavant sous un arbre!
La différence principale avec notre référence est que nous avons placé cet arbre dans une vallée et non sur une colline.

Voici l’entrée du terrier dans le storyboard:

Storyboard: burrow entrance
Storyboard: entrée du terrier

Le dessin au propre:

Drawing: burrow entrance
Dessin: entrée du terrier

Avec des couleurs:

Colored ZeMarmot's burrow entrance (WIP)
Entrée du terrier de ZeMarmot colorisé (travail en cours)

Notons que cette dernière image est un travail en cours. On a tout de même pensé que ce serait sympa de vous montrer la progression entre les photos de recherche, les sketchs de storyboard, le dessin puis enfin une colorisation.

J’espère que vous avez apprécié cet aperçu dans les coulisses de ZeMarmot! 🙂

Rappel: pour aider notre film d'animation, ZeMarmot,
à voir le jour, réalisé avec des logiciels libres —
pour lequel nous contribuons aussi beaucoup de code —
sous licence Creative Commons by-sa 4.0 international,
vous pouvez contribuer financièrement:
en USD sur Patreon ou en EUR sur Tipeee.

ZeMarmot — travail en cours: de l’animatique à l’animation

Alors que nous sommes en pleine étape d’animation, on s’est dit que vous aimeriez un peu en savoir plus sur cette étape de production. Comment passe-t-on d’images statiques à images animées?

Storyboard, puis Animatique

Nous avons déjà parlé en long, en large et en travers de ces étapes, donc nous n’allons pas épiloguer. Nous vous conseillons de lire les blog posts des mois passés pour en savoir plus. Ce sont les étapes des images “purement statiques” type BD (storyboard) puis d’images statiques projetées en vidéo (animatique).

Key Framing

Avec le numérique, le sens terme “keyframe” a changé plusieurs fois. Ainsi dans les vidéos formats, on entend par “keyframe” une image qui est complète dans le flux vidéo, en oppositions aux images partielles qui n’ont de sens qu’associés à une keyframe précédente. Dans l’animation 3D ou vecteur, on va en général nommer keyframe les positions extrêmes dans une transition (mouvement de personnage par exemple), dont les positions intermédiaires sont calculées par un algorithme (interpolation ). C’est plus ou moins la définition donnée par Wikipedia pour une keyframe: “A key frame in animation and filmmaking is a drawing that defines the starting and ending points of any smooth transition.

Cette définition est cependant un peu trop “mécanique”, liée aux méthodes modernes d’animer avec la 3D et le dessin vectoriel (ce n’est pas totalement vrai même avec ces techniques, mais avec un peu de paresse, en découvrant la magie de l’interpolation algorithmique, cela paraît être la définition pour beaucoup). Les keyframes sont en fait simplement des “images importantes”, ce qui est déterminé totalement subjectivement. Le Keyframing est donc une part de l’art de l’animateur, plutôt qu’une science. Bien sûr, très souvent, les keyframes sont des débuts/fins de mouvement, mais ce n’est pas une vérité absolue. On les appelle aussi parfois les “poses clés”; il s’agit donc des poses que l’animateur juge comme importantes pour rendre le mouvement juste, de manière totalement partiale comme pour tout œuvre.

Animation Pose à Pose vs Straight Ahead

Il y a 2 principales logiques pour animer. La première méthode consiste à décomposer le mouvement en poses clés (keyframes) dans un premier temps. Dans le second temps, quand vous êtes content du résultat, you pouvez ajouter les images intermédiaires (inbetweens). C’est la méthode pose à pose.

Dans un gros studio, les keyframes sont généralement dessinées par les animateurs expérimentés. Puis les assistants (animateurs juniors)  dessineront les inbetweens après coup. Cela permet un peu plus de partage de travail, d’efficacité et de multi-tâche. Pour ZeMarmot malheureusement, Aryeom fait toutes les étapes elle-même, puisque nous n’avons pas le financement pour engager plus d’artistes pour l’instant.

L’autre méthode s’appelle en anglais “Straight Ahead” et consiste à dessiner les images successivement les unes après les autres, sans décomposition préalable. Cela rend le planning de la séquence plus difficile et le timing est bien plus difficile à gérer. Il est également plus probable que vous gâcherez des dessins avec cette méthode. Néanmoins certains animateurs aiment la liberté apportée et aussi le manque de planification peut permettre des mouvements moins parfaits, moins mécaniques et donc plus réalistes. Il s’agit de reproduire les êtres vivants dans toute leur splendeur de parfaite imperfection!

En observant Aryeom travailler, on peut constater qu’elle utilise régulièrement l’une ou l’autre méthode. Cela dépend des séquences.

Conclusion

Nous espérons que vous aurez apprécié ce petit aperçu dans le monde de l’animation et le travail de l’animateur. Nous espérons également que la petite vidéo attachée vous aura intéressés. Nous l’avons choisie pour vous montrer diverses étapes de la même section de scène, l’une après l’autre, puis côte-à-côte.

Vous remarquerez aussi que nous avons tendance à montrer toujours les mêmes sections du travail car nous souhaitons vous éviter le moins possible de spoiler, ce qui gâcherait le visionnage final. 🙂

Amusez-vous bien!

Équipe de ZeMarmot

Rappel: pour aider notre film d'animation, à voir le jour, lequel est
fait avec des logiciels libres — et pour lequel nous contribuons aussi
beaucoup de code — et qui sera sous licence Creative Commons by-sa 4.0
international, vous pouvez contribuer financièrement en USD sur
Patreon ou en EUR sur Tipeee.

ZeMarmot: compte-rendu de fin 2016

Coucou!

Alors comment vous a traité 2016? Pas trop mal, j’espère? Bon l’année a été bizarre sur certains aspects, mais quelle année ne l’est pas? Parlons maintenant de ZeMarmot! Pour rappel, notre réalisatrice, Aryeom Han, s’était fait une entorse au pouce mais hormis lors d’usage trop constraignant ou prolongé de la main, elle peut désormais dessiner. Elle remercie d’ailleurs chaleureusement ceux qui nous suivent pour les gentils messages reçus.

Rappel du projet

Avant de rentrer dans le gros du compte-rendu, je souhaite rappeler — comme il est de coutume en fin d’année — que ZeMarmot est un projet entièrement financé par les bonnes volontés de particuliers et sociétés donatrices, dont l’action est à 2 niveaux: art et logiciel.

Je suis un des développeurs de GIMP, second plus gros contributeur en terme de nombre de commits depuis 4 ans; je développe aussi un plugin pour l’animation 2D avec GIMP, qu’Aryeom utilise sur ZeMarmot. Ce plugin devrait faire partie de GIMP 2.10.

Aryeom utilise le logiciel pour animer, dessiner et peindre un film, d’après une histoire originale: une marmotte qui voyage dans le monde! Et bien sûr, le film sera sous licence Creative Commons by-SA!

À ce jour, notre crowdfunding initial (~ 14 000 €) a permis de payer quelques mois de salaire à Aryeom. Je n’ai rien touché à ce jour (non que je ne veuille pas, mais le projet n’a pas les moyens). Il reste un peu de la somme initiale mais principalement gardée de côté pour payer les musiciens.

Maintenant nous nous reposons surtout sur un crowdfunding mensuel grâce aux plateformes Patreon (financement USD) et Tipeee (financement EUR). À ce jour, cela monte à 180 € par mois, soit à peine plus d’un jour de salaire (et avec les charges salariales et patronales, ce qui revient à l’artiste en net est très faible). 1 jour par mois pour faire un film, c’est pas assez, on est d’accord!

Mon rêve? Nous pourrions un jour être un studio qui emploie de nombreux artistes, produisant des films libres pour le cinéma (oui dans mon rêve fou, les films libres ont leur place sur le grand écran!), ainsi que des développeurs qui améliorent des logiciels libres pour le multimédia pour un écosystème logiciel libre, riche et pour tous!
À ce jour, avec ce financement, c’est encore juste un projet expérimental principalement fait bénévolement. Mais c’est le but.

Vous aimez mon rêve? Voulez-vous m’aider à le réaliser? C’est possible en donnant pour le projet! Que ce soit la pièce symbolique ou une donation plus généreuse, toute aide est un coup de pouce dans la bonne direction.

Cliquez pour financer ZeMarmot en € (Tipeee) »
Cliquez pour financer ZeMarmot en $ (Patreon) »

Pas encore sûr? Prenez votre temps, lisez davantage et n’hésitez pas à revenir voir nos pages de financement si vous aimez ce que vous voyez!

Notez bien qu’en plus du financement, le nombre de contributeur est aussi important car cela remonte le moral de se sentir soutenu par plus de monde. En outre de gros chiffres nous donneront du poids lorsque nous chercherons de plus gros financements auprès d’organismes privés ou publics, mais aussi auprès de producteurs potentiels avec la possibilité de ne pas compromettre sur les aspects idéalistes du projet.

L’animation

Voici 2 vidéos pour illustrer le travail d’Aryeom. Dans cette première vidéo, elle explique quelques plans de la Marmotte:

Cette seconde vidéo examine des plans montrant un second personnage, l’aigle royal, grand prédateur de la marmotte:

Des pages entières sur l’art de l’animation pourraient être écrites à partir de ces quelques extraits mais je m’en tiendrai aux bases. Peut-être détaillerais-je dans de futurs articles.

Animer = donner la vie

Aryeom l’évoque et plusieurs extraits de la vidéo en sont l’exemple. Quand un personnage se déplace d’un point A à un point B, il ne s’agit pas de “bouger” celui-ci. Vous devez donner l’impression qu’il agit de son propre accord, en être vivant et pensant, en un mot, qu’il est “animé“.

Ce n’est pas étonnant qu’un des livres de référence du métier se nomme “L’illusion de la Vie” (de Frank Thomas et Ollie Johnston), aussi livre de chevet d’Aryeom. Cela a de nombreuses conséquences sur le travail de l’animateur.

Crédible plutôt que réaliste

Avant d’aller plus loin, je souhaite mettre un point au clair: bien que l’animation “réaliste” existe (Disney vient à l’esprit), une bonne animation est avant tout une animation “crédible”.

Il est tout à fait acceptable et même habituel d’exagérer des mouvements pour une raison ou une autre (effet comique parfois, mais même parfois il n’est pas impossible qu’un geste exagéré paraisse plus crédible qu’un geste réaliste), ou l’inverse (se débarrasser de détails trop anatomiquement corrects). Il n’y a pas de mauvais choix, seulement des décisions pour obtenir un style désiré.

Maintenant que tout est clair, continuons.

“Bouger un bras” n’est pas possible

L’exemple classique donné aux débutants: “lève ton bras droit”. C’est fait? As-tu vraiment bougé seulement le bras? Non, vois-tu, pour garder l’équilibre, ton corps s’est déplacé sensiblement à gauche en contrepoids, ton épaule droite s’est soulevée alors que la gauche s’est abaissée pour rester dans l’axe, maintenant oblique… Probablement tes pieds et jambes même se sont adaptés pour compenser le déplacement du centre de gravité.
Le corps entier s’est mis en mouvement pour ce qu’on aurait pu croire une simple action. En conséquence, on ne bouge pas “un bras”, mais un “corps” entier (dans une nouvelle configuration où le bras se trouve à la place souhaitée).

C’est la principale raison pour laquelle un animateur redessinera le corps entier à chaque image et ne peut se contenter de récupérer des bouts d’images en modifiant seulement certaines parties du corps. Quitte à simuler la vie, autant le faire proprement.

Note: le terme “animation” dans l’esprit d’un développeur fait en général une connexion neuronale avec “interpolation“, le processus mathématique qui consiste en le calcul automatique de positions intermédiaires. La conséquence de mon explication précédente est qu’en réalité cela sera rarement utile en animation traditionnelle, même numérique. En vectoriel et 3D, c’est bien plus fréquent mais même là, le rôle d’un bon animateur ne doit absolument pas être minimisé. En 3D/vecteur, l’interpolation remplace tout au plus l’assistant qui dessinait les entre-deux (les images entre 2 images clés) de l’animation traditionnelle.

Timing, silence et accélération

On l’entend souvent dire de la bouche de poètes ou danseurs: le silence est aussi important que l’action. J’ajouterais aussi l’accélération et la décélération.

On le voit bien dans le premier exemple de la vidéo 1 (à 0’41). Aryeom était mécontente de la marmotte qui court dont la vitesse est presque linéaire. Il y a bien une petite décélération sur la fin, mais trop peu. Sa version finale montre donc Marmotte arriver plus vite avec un ralentissement bien plus visible, rendant le mouvement plus crédible dans son entier.

Dans la vidéo 2 (à 1’09), l’envol de l’aigle est encore un bon exemple de timing difficile. D’abord l’aigle semblait lourd et pataud (“malade” dit-elle dans la vidéo). Puis au contraire trop léger, presque à l’image d’un moineau. Il lui fallut 8 versions pour obtenir un envol qui lui plaise. Regardez notamment la toute fin quand il se met à planer… Ce genre de détails de quelques centièmes de seconde peut passer inaperçu au public et pourtant occuper longtemps un animateur.

Images fixes vivantes (a.k.a.line boil“)

Un effet assez usuel dans l’animation est cette sorte d’image tremblotante lors du plan présentant l’aigle fier sur sa montagne (vidéo 2 à 0’33). Parfois vous voulez une situation fixe mais une image statique contredit l’attente du cerveau: dans la vie, l’absence totale de mouvement n’existe pas. Essayez de ne pas bouger plusieurs secondes devant une caméra pour voir! Ça tombe bien, dessinez deux fois exactement les mêmes lignes relève de la gageur, donc l’animateur rusé redessine la même image plusieurs fois et boucle. Nous avons maintenant une image fixe … qui vit!

Éviter les cycles

Les boucles sont un outil habituel de l’animation et il n’est pas rare de voir un étudiant s’entraîner sur des “cycles de marche”. Pourtant plus on cherche à monter en qualité, moins les boucles sont acceptables. De même que l’immobilisme n’existe pas dans la vie, on ne répète jamais 2 fois exactement le même mouvement. Si votre caractère fait plusieurs pas, vous préférerez peut-être les redessiner à chaque fois, et vous ne réutilisez pas les images précédentes.

Bien sûr, c’est à vous de placer la limite. Peut-être que cette nuée d’oiseaux dans le lointain ira bien avec des boucles (et même du copier-coller pour multiplier les oiseaux). Tout est question de choix, temps et d’argent passé à payer un animateur sur cela, bien entendu.

Animer, c’est dessiner… beaucoup

Concluons donc en disant que ce métier consiste à dessiner et redessiner énormément!

À tel point qu’on en perd le nord. L’anecdote du pigeon dans la vidéo 2 est vraie et c’est moi qui ai proposé à Aryeom de la rentrer dans la vidéo tellement c’est drôle. Un jour, Aryeom vient me voir et me montre ce plan sur lequel elle travaille depuis des jours. Elle me demande: “tu trouves pas qu’on dirait plutôt un pigeon?”
Je ne l’aurai pas arrêtée, elle était partie pour recommencer de zéro.

Mais après tout, un art où on redessine tout, même pour exprimer l’immobilisme et où on s’interdit les raccourcis (boucles), c’est peut-être déjà un peu pour les fous, non? 😉

Plus sérieusement: il existe plusieurs écoles et beaucoup sont pour se simplifier la vie et autorisent la réutilisation d’images. Au Japon — même si le studio Ghibli est un contre-exemple connu qui se complique la vie, comme nous — le reste de l’industrie du cinéma d’animation a su nous prouver à maintes reprises qu’il est possible d’afficher une image statique pendant 30 secondes, de rajouter des sons et des voix, puis d’appeler cela une animation!

Parfois c’est un choix artistique aussi, ou un focus. Par exemple Les Simpsons ne sont pas un chef-d’œuvre graphique animée (ils font régulièrement des blagues de mise-en-abîme où ils se moquent de la qualité de leur propre animation d’ailleurs), mais ils ont les scripts les plus extraordinaires; et c’est clairement ce qui fut leur succès.
Au final, il n’y a pas de mauvais choix. Chacun suit sa voie.

C’est celle de ZeMarmot!

Musique

Courte note: nous avons commencé à travailler avec les musiciens de l’AMMD, à distance et en rencontre physique le 1er décembre. Nous avons quelques extraits de “premières idées”, mais les diffuser ne ferait nullement honneur au travail des musiciens. Il vaudra donc mieux attendre et s’en tenir à cela pour le moment!

Logiciel

Ai-je perdu mes lecteurs après ce long chapitre “animation”? Pour ceux qui sont encore là, un petit compte rendu de mes activités de dév.

GIMP

Je fais ma part sur GIMP, pour l’améliorer de manière générale et rapprocher la sortie de la version 2.10. Je compte donc 259 commits en tant qu’auteur en 2016 (60 dans les 3 derniers mois) + 48 en tant que relecteur/responsable. J’ai commenté sur 352 rapports de bug en 2016, faisant une habitude de faire le plus possible de revues de patch.

J’ai beaucoup de projets pour GIMP, certains ambitieux comme un système de gestion des plugins (installation/désinstallation/mise-à-jour… directement depuis un dialogue dans GIMP) ainsi que sur l’évolution de l’interface graphique (cela devra être discuté en détail sujet par sujet dans d’autres articles).

J’expérimente aussi avec Flatpak pour que GIMP puisse fournir un paquet officiel. Pendant des années, notre position de sortie fut: un installeur Windows, un paquet OSX et GNU/Linux… ben attrape le code source et compile quoi! Ou bien utilise la vieille version de ton gestionnaire de paquet…
Je pense que cette situation pourra s’améliorer avec Flatpak et des technologies similaires.

Animation dans GIMP

Il s’agit donc d’un plugin, pas une fonctionnalité native. Cependant c’est presque aussi puissant, même si certaines fonctionnalités manquent (comme le lien non-bidirectionnel entre GIMP et les plugins: un plugin n’est pas notifié de changements sur les images notamment; fonctionnalité sur laquelle je prévois de travailler).
Le plugin d’animation a 2 vues:

Vue “storyboard”

GIMP's animation plug-in: storyboard view
GIMP’s animation plug-in: storyboard view

Cela correspond à la logique très basique 1 calque = 1 image, habituelle par exemple pour les créateurs d’animation GIF (ou MNG/WebP maintenant), excepté qu’il y a maintenant une jolie interface pour paramétrer la durée d’affichage de chaque image (plutôt que “taguer” les noms de calque, très mauvais choix d’interface, ce qui explique d’ailleurs que la fonctionnalité est quasi cachée, et trouvable sur de vieux tutoriaux seulement), faire de la composition de base et même commenter chaque vignette si besoin est. Le tout avec une bonne prévisualisation de l’animation.

Vue “x-sheet”

GIMP Animation plug-in: Cel-animation view
GIMP’s Animation plug-in: cel-animation view

Vue plus puissante où vous pouvez composer chaque image à partir de plusieurs calques, souvent au moins un décor et un personnage. L’exemple ci-dessus compose 3 images à chaque position: le décor, l’aigle et la marmotte.

Vous connaissez peut-être plus les vues de type “ligne de temps”, ce qui est en gros la même chose mais horizontal plutôt que vertical. J’ai essayé aussi mais suis rapidement revenu vers un design plus classique dans le monde de l’animation, appelé x-sheet (feuille d’exposition). Je le trouve plus pratique, mieux pour commenter, facile à scroller, et plus organisé. On voit peu de choses dans cette capture, mais le plugin cible vraiment une animation professionnelle et organisée. En particulier, avec des calques convenablement nommés, vous pouvez créer des cycles d’animation de dizaines d’images en juste quelques clics.

Je travaille aussi sur le keyframing d’effets (opérations GEGL animées) et les mouvements de caméra.

Beaucoup fut fait, mais bien plus reste à faire. Je posterai des articles plus détaillés et surtout pousserai le code publiquement sur une branche du dépôt de GIMP bientôt (probablement avant la prochaine réunion Libre Graphics Meeting en avril).

That’s all, folks!

Et voici donc notre compte-rendu de fin d’années de l’équipe ZeMarmot! J’espère que cela vous a plu. Et si vous n’avez pas tout dépensé en cadeaux de Noël, je rappelle que le projet accepte toute l’aide possible sur les liens donnés plus haut. Certains donnent juste 1 € par mois, d’autres 15 € par mois… il n’y a pas de limites. Au final, nous donnons vie à ZeMarmot tous ensemble! 🙂

Merci, et bonne année 2017!

Minuter votre film

La grande question à l’écriture d’un scénario: comment minuter le film qui en ressortira?

Montre au musée CIMA, par Rama (CC by-sa)
CIMA museum’s clock, by Rama (CC by-sa 2.0).

À partir du scénario

C’est déjà possible à partir du script. Une règle communément admise est qu’une page équivaut plus ou moins à 1 minute de film. Bien sûr, pour atteindre ce standard, vous voudrez formater votre fichier convenablement. Mes recherches m’ont donné ces quelques règles:

Format

  • Pages A4.
  • Police: 12-point Courier.
  • Marges de 2.5 cm sur tous les bords, sauf à gauche de 3.5 cm.
  • Ajoutez 5,5 cm de marge avant un nom de personnage dans un dialogue.
  • Ajoutez 2,5 cm de marge avant un texte de dialogue.
  • Pas de justification (aligner à gauche).
  • Pas d’indentation de début de paragraphe.

Je ne listerai pas toutes les règles, car il y a plein de ressources sur le web qui le font mieux. Par exemple, cette page fut utile (en anglais) ou encore celle-ci (en français et avec le système métrique international), voire même Wikipedia.
Il semblerait que le but de ces règles soit d’avoir un texte avec le moins d’aléatoire possible. Un script n’est pas fait pour être un bel objet, mais pour être aussi carré que possible. Donc au revoir justifications (qui étirent ou compressent les espaces) et indentations (pas à toutes les lignes)… Ces règles typographiques sont faites pour rendre le document “joli”, ce qui est bien moins intéressant pour un scénariste que la capacité de minuter son scénario en comptant le nombre de pages.

Fontes libres

Vous aurez peut-être remarqué que 12-point Courier est une police de Microsoft. Pour les utilisateurs de GNU/Linux qui me lisent, récupérez le paquet msttcorefonts. Sur Debian, ou Ubuntu, il s’agit de “ttf-mscorefonts-installer“. Cela n’existe apparemment pas dans les dépôts Fedora. Mais c’est pas grave. J’utilise personnellement Liberation Mono (Liberation est famille de polices créée par RedHat en 2007, sous licence libre). FreeMono est aussi une alternative mais Liberation Mono me convient bien.

Ce sont toutes des polices “monospace”, à “chasse fixe”, c’est a dire que chaque caractère occupe le même espace horizontal: ainsi ‘i’ et ‘W’ ont la même largeur avec ces polices. Encore une fois, les polices proportionnelles (les plus communes) sont faites pour être plus jolies, alors que les monospaces pour avoir une largeur régulière. On en revient à la fiabilité de la conversion texte -> minutage.

Je ne sais pas pourquoi Courier semble être devenu le standard de fait dans le cinéma, mais je ne crois pas qu’utiliser une autre police puisse être un quelconque problème. Utilisez simplement une autre police à chasse fixe.

Note: l’année passée, j’ai lu 3 scenari (hors ZeMarmot) et en fait aucun n’utilisait Courier, ni la plupart des règles décrites ici. Je ne suis pas sûr à quel point ces règles sont réclamées par les productions, mais elles ne semblent pas si strictes en France.

Écrire avec LibreOffice

À ce jour, j’écris simplement dans LibreOffice. Je ne vais pas faire un tutoriel, mais juste donner un simple conseil: utilisez les styles! Ne formatez pas directement: pas de gras, ou de soulignement, notamment pour les titres…
À la place, créez des styles pour “Text body” (défaut), “Dialogue speaker”, “Dialogue”, “Scene title”… Puis sauvegardez un template que vous pourrez réutiliser à loisir.

Aparté: en cherchant des références, j’ai lu des remarques étrange du type “avec un traitement de texte, vous risquez d’avoir des titres en bas de page” pour finalement conseiller de se procurer un logiciel dédié. C’est une méconnaissance claire des logiciels de traitement de texte. Avec les styles, cela n’arrive pas (option “Keep with next paragraph” dans l’onglet “Text flow“, ce qui est la valeur par défaut de tout style de titre).

Note: bien sûr, les logiciels dédiés sont plus que cela et rendront la vie du scénariste plus simple. Je prévois aussi d’en développer un. Donc je ne vais pas vous dire que cela ne sert à rien! Je veux simplement dire qu’en attendant qu’un tel logiciel libre existe, et si vous n’avez pas les moyens pour payer une licence d’un logiciel propriétaire, les logiciels de traitement de texte font tout à fait l’affaire quand on sait s’en servir.

C’est tout? Je suis ces règles et j’ai un minutage?

Bien sûr, c’est là qu’on se réveille. Tout d’abord, les langues sont intrinsèquement plus ou moins verbeuse. Ainsi l’allemand ou le français sont plus verbeux que l’anglais, lui-même plus verbeux que le japonais. Avec le même formatage, une page de votre texte pourrait durer 1 minute en français alors que la traduction en japonais sera plus rapide.

Puis rentre en jeu le style du scénariste. Chacun a son style, certains concis, d’autres plus étalés. Vous écrivez très probablement la même histoire avec un timing différent que votre voisin.

Et donc vous devez évaluer vos scripts différemment. Vous pouvez tenter de les jouer pour estimer votre timing. Vous pourrez alors créer votre propre conversion texte -> minutage, ou plutôt adapter votre format. Ainsi si vos pages vont trop vite, vous pourriez écrire plus petit, ou diminuer les marges.

Bien sûr, peut-être que votre style est simplement trop verbeux. Un scénario n’est pas une nouvelle. Vous n’essayez pas de faire un beau texte avec métaphores et figures de style. Vous écrivez un texte pour des acteurs (ou dans notre cas des peintres et animateurs).

Le cas ZeMarmot

En outre la règle 1 min = 1 page n’est pas fiable à l’intérieur d’un même document: une page sans dialogue pourra durer plusieurs minutes (les descriptions et actions sont plus condensées que des dialogues) alors qu’une page remplie uniquement de dialogues courts peut durer juste quelques secondes. Mais ce n’est pas grave: tout est question de moyenne. Cette règle de minutage n’est pas faite pour être exacte à la seconde, mais pour donner une approximation utile sur le document global.

ZeMarmot de son côté est particulier du fait qu’il n’y a aucun dialogue. Allait-on finir avec des pages de 5 minutes chacune? Grande question, en particulier car c’est mon premier scénario. Aryeom a aidé par son expérience, nous avons joué quelques scènes, avons essayé de les imaginer… Voici un exemple vivant montrant que peu de règles peuvent être universelles. Pour nous, ce fut donc plus dur de calibrer notre règle de minutage à partir du scénario.

Animatique

L’étape après le storyboarding est la création d’animatiques (en particulier pour le film d’animation). Cela nous permet de minuter plus précisément chaque scène, et même chaque plan. Cela nécessite un peu d’imagination puisque certaines images peuvent être affichées plusieurs seconde dans une animatique peu précise, mais cela donne tout de même une idée acceptable de ce qu’il se passe à l’écran. Au final, il s’agit du meilleur minutage que vous pourrez avoir d’un film avant la production elle-même. Pour de l’animation, c’est même très précis.

Le scénariste doit-il être esclave du minutage?

La grande question! En effet, vous pouvez obtenir un minutage différent de votre attente. Il y a 2 cas: trop long ou trop court.

Trop court, c’est assez facile, à moins que ce ne soit vraiment vraiment trop court (par exemple vous risquez de passer sous la barre long-métrage). Hormis cela, je pense qu’il est préférable d’avoir un film court et intense qu’un film long et ennuyeux.

Malheureusement trop long semble être la norme. Beaucoup de films sortent avec une durée de 2h30, voire 3h. J’en ai vu plusieurs ces dernières années qui étaient vraiment ennuyeux. Et je parle pas d’art et d’essai, mais bien de gros blockbusters remplis d’action. Non, décidément, 3h de superhéros qui se battent, c’est trop!
Donc mon conseil si votre script est beaucoup trop long: demandez vous si c’est vraiment nécessaire et si cela ne rendra pas le film chiant. Bien sûr, je ne fais pas les règles. Si vous bossez pour Hollywood, premièrement je doute que vous me lisiez; deuxièmement vous ferez bien ce que vous voudrez et les gens iront quand même voir le film. En tous cas, pour ZeMarmot, nous prévoyons de ne pas être trop ennuyeux (en tous cas par la durée du film).

Et voilà. Ce sont les résultats de mes expérimentations sur le minutage d’un film en pré-production. Bien entendu, je le répète: je suis débutant moi-même dans le domaine. Il s’agit ici d’un condensé de mes recherches, et de nos expériences communes. Donc ne prenez pas mes paroles pour argent comptant. N’hésitez pas à réagir en commentaire d’ailleurs si vous avez vous-même de l’expérience dans le domaine ou juste pour partager des opinions ou idées sur le sujet.

À propos: le pilote de ZeMarmot (pas le film final) est minuté à 8 minutes environ. 🙂

Rappel: pour aider notre film d'animation à voir le jour, lequel est
fait avec des logiciels libres — et pour lequel nous contribuons aussi
beaucoup de code — et qui sera sous licence Creative Commons by-sa 4.0
international, vous pouvez contribuer financièrement en USD sur
Patreon ou en EUR sur Tipeee.

Extrait de l’animatique de ZeMarmot

Comme déjà dit précédemment, nous avons terminé l’animatique de ZeMarmot et avons commencé le dessin et l’animation, c’est à dire la production. Cependant nous avons pris la décision de ne pas montrer immédiatement la version complète de notre dernière animatique, pour la raison principale que nous ne souhaitons pas gâcher le film au public. Il m’est déjà arrivé par le passé de voir une animatique avant une version finale et cela rend le plaisir du visionnage final bien moins sympa.

Néanmoins on se dit que c’est quand même cool de montrer aux gens ce qu’est une animatique, à quoi ça ressemble, etc. Donc nous avons sélectionné 30 secondes qui ne sont pas trop révélatrices, extraites de la première scène du pilote. Nous parlerons bientôt plus en détail de son utilité pour le film dans notre série de blog posts. Comme d’habitude, ce qui est dessiné numériquement (certaines parties furent faites sur papier) fut dessiné avec GIMP.

Qu’est l’animatique?

Je pense avoir déjà vaguement parlé de cette étape. Il s’agit en gros de l’étape qui suit le storyboard, en enchaînant les images de celui-ci avec le rythme juste et des effets basiques (mouvement panoramique, zooms…) afin d’avoir un premier aperçu de l’action finale. Bien sûr, il faut de l’imagination, surtout lorsque certaines images sont employées pendant plusieurs secondes. Ce n’est pas encore assez d’images pour appeler cela une animation à proprement parler.

Mais avec le bon état d’esprit, cela donne une bonne idée et permet aussi de chronométrer le film.

Dans la création d’un film d’animation, c’est aussi le moment où vous gelez l’histoire ainsi que beaucoup de décision de réalisation. En effet, s’il est techniquement toujours possible de changer certaines scènes ou les angles de caméra au dernier moment lors d’un tournage, cela peut s’avérer bien plus coûteux et frustrant dans un film d’animation 2D… à moins d’accepter avoir perdu des jours voire des semaines de travail et de demander à vos peintres et animateurs de redessiner tout avec une perspective différente.

C’est pourquoi des choix sont à faire et surtout vous devez vous y tenir autant que possible (cela n’empêche pas totalement des changements de dernière minute, mais vous devez vraiment peser le pour et le contre quand vous le faites).

L’animatique de ZeMarmot

Nous l’avons fini en avril, avec 2 versions : une sans son, et une commentée en détail (par moi-même, en français) pour les musiciens. Nous travaillons en ce moment avec eux sur quelques morceaux et j’espère que nous pourrons bientôt vous en dire plus sur cet autre aspect de la production.

À cette heure, notre animatique pour le pilote dure environ 7 minutes. Cela peut encore changer.

Rappel: pour aider notre film d'animation, à voir le jour, lequel est
fait avec des logiciels libres — et pour lequel nous contribuons aussi
beaucoup de code — et qui sera sous licence Creative Commons by-sa 4.0
international, vous pouvez contribuer financièrement en USD sur
Patreon ou en EUR sur Tipeee.
L'animatique ci-dessus est dessinée et éditée par Aryeom et est sous
licence CC by-sa 4.0, comme le reste.

Design de personnage (2): modèles physique

Autre aspect du design de personnage est la possibilité d’en faire des versions en “vraie 3D”. Non, je ne parle pas de modélisation 3D logicielle, comme avec Blender. Je veux vraiment dire de la “3D physique du monde réel“: vous pouvez toucher, avec vos doigts, sentir des bosses ici et là… Je sais, quelle incroyable technologie! 😉

Avec de l’argile (ou d’autre matériaux qui conviennent au modèle), vous pouvez représenter vos personnages, vos objets, et même des lieux de décors, avant même de filmer, dessiner, modeler en 3D (ou quelle que soit la technologie utilisée par votre film) les dits éléments. Ces techniques sont communes à probablement toute école d’animation, et studios d’animation. Il ne s’agit donc pas de faire des accessoires utilisés dans le film, mais bien pour faire le film (c’est à dire qu’ils ne seront pas visibles au final à l’écran). Les modèles physiques sont un outil de design ou une référence pour les modeleurs 3D, peintres, animateurs, acteurs et réalisateurs.

Petite aparté: nous avons vu quelques exemples bien sympa de cela en visitant le Weta studio en Nouvelle Zélande (studio célèbre qui fait les accessoires de la plupart des gros films hollywoodiens). Parmi d’autres choses, ils avaient cet énorme gorille — taille réel, je pense plus de 2 mètres de haut — qui fut créé uniquement pour servir de référence (je ne me souviens plus du film, et si même ils nous avaient dit le nom).

Vous rappelez-vous, quand je disais dans un post précédent que les feuilles de personnages sont utilisés comme références? Eh bien, si en plus des dessins “turnaround”, vous aviez votre modèle physique autour du quel vous pouvez vraiment tourner (turn around (anglais) = tourner autour)? Nous n’avons pas de vrai marmottes, mais nous avons donc des modèles en argile:

Plutôt cool, hein? 🙂

Ces statuettes furent réalisées en Novembre dernier, et à l’époque, hormis un court message sur le compte twitter de @ZeMarmot en décembre, nous n’avons pas pensé à en faire un poste. Leur but initial fut d’aider au choix du nouveau design du personnage principal, en expérimentant dans les formes “physiques”. Bien sûr, ces statuettes seront probablement encore utiles à l’avenir, par exemple — comme je disais plus haut — pour le dessin (en perspective notamment), le positionnement, etc. Voire même de la modélisation 3D s’il nous prenait l’envie de réaliser un modèle 3D de notre marmotte!

Vous avez peut-être d’ailleurs aperçu certaines de ces statuettes dans l’interview vidéo d’Aryeom, sur son bureau. C’est là que je me suis dit que ces petites statuettes méritaient bien leur propre publication sur le blog, vous ne pensez pas? 🙂

Note: ce post fut initialement publié seulement pour les
contributeurs Patreon > $10 le 27 février 2016 et rendu public
le 3 mars. Jetez un œil sur la page Patreon de ZeMarmot si
vous souhaitez également soutenir le projet.

Réutilisation: les photographies dans cette article sont par Jehan,
représentant Aryeom, et diffusée sous:
Creative Commons by-sa 4.0 international.