Je vous invite à visiter la galerie de Context Free Art pour avoir un aperçu de ce dont ce logiciel est capable. Et si grâce au petit tutoriel qui va suivre, vous arrivez à faire de jolies choses, n’hésitez pas à l’enrichir de vos créations !

On écrit ces instructions dans un langage qui s’appelle CFDG, pour Context Free Design Grammar. Voici une petite introduction pour commencer à faire vos propres créations en CFDG. Pour l’exemple, nous dessinerons des arbres comme celui que vous voyez ci-dessus, ce qui nous permettra à la fois de voir comment faire des instructions récursives et des instructions aléatoires. N’ayez surtout pas peur d’expérimenter, de modifier les nombres ou faire ce dont vous avez envie ! C’est comme ça que vous vous familiariserez vraiment avec ce langage.

Tout d’abord, il faut lui dire par où commencer. Pour ça on écrit startshape suivi du nom de la règle que l’on veut lui faire appliquer en premier. On peut décider de l’appeler comme on le veut, la seule contrainte étant que le nom ne doit pas contenir d’espaces ni de caractères qui ont une signification dans le code, comme les accolades que l’on va voir dans un instant, les / et les # qui servent à mettre des commentaires dans le code.

Donc, si j’écris startshape arbre et que j’appuie sur le bouton Render, il va chercher dans tout le code la règle qui s’appelle « arbre » et l’appliquer. Pour le moment je n’ai pas défini de règle « arbre », il va donc faire une erreur en disant qu’il n’a pas pu trouver la règle à appliquer.

Définissons donc notre règle. Pour lui annoncer que l’on va définir une règle, on écrit rule suivi du nom de la règle puis des instructions qu’elle contient entre des accolades. Même si la règle ne contient pas d’instruction, ce qui peut être utile dans certains cas, il faut quand même mettre les accolades. Ce qui nous donne, pour notre exemple :

startshape arbre

rule arbre{ CIRCLE{} }

Chaque instruction est aussi suivie d’accolades, qui nous permettent d’ajuster l’instruction si on le souhaite. Ici, j’ai mis l’instruction CIRCLE{} qui lui demande dessiner un cercle.Il existe quatre sortes formes de base : le cercle, le carré, le triangle équilatéral et les formes de base que l’on peut définir nous-mêmes, mais que nous ne verrons pas dans ce tutoriel. Ces formes sont les éléments de base de tous les dessins, car ce sont les seules instructions qui dessinent vraiment quelquechose, toutes les
autres instructions ne servent qu’à dire comment et où elles doivent être dessinées. Pour dessiner un cercle on dira donc CIRCLE{}, pour un carré on mettra SQUARE{} et pour un triangle on écrira TRIANGLE{}.

Maintenant, si nous appuyons sur Render, nous voyons apparaître un gros cercle noir comme demandé. Il prend toute la place car Context Free redimensionne automatiquement l’image pour que le rendu soit le plus grand possible.

Nous voulons un arbre. Comment est fait notre arbre ? Nous voyons qu’il est composés de branches. Chaque branche est un trait. Nous voyons aussi que, au fur et à mesure que nous nous éloignons des racines la largeur d’une branche est de plus en plus petite. Voyons comment appliquer ça en CFDG.

Pour faire un trait à partir de cercles, il suffit d’en mettre côte à côte ou mieux, de les faire se chevaucher. Nous pourrions écrire :

startshape arbre

rule arbre{
CIRCLE{}
CIRCLE{y 0.5}
CIRCLE{y 1}
//etc…
}

Quand il y a plusieurs instructions dans une règle, je passe à la ligne pour chaque instruction, c’est un choix, je trouve ça plus clair et je m’y retrouve mieux. Les // servent à mettre la ligne en « commentaire », c’est à dire que l’on indique au logiciel de ne pas tenir compte de ce qu’il y a écrit dans la ligne après les //.
À part ces petites remarques sur la forme, cette fois-ci nous avons donné des ajustements à deux de nos instructions : y 0.5 et y 1. y c’est l’axe vertical de notre dessin. L’axe horizontal est l’axe x. y 1 veut dire « déplace-toi de 1 vers le haut ». 1, c’est la hauteur ou la largeur du cercle ou du carré de base quand on ajuste pas sa taille. Si le nombre que l’on met après le y est positif on se déplace vers le haut, et s’il est négatif, on se déplace vers le bas. De la même manière, si on écrit x suivi d’un nombre positif on ira vers la droite, et si on écrit un nombre négatif on ira vers la gauche. J’ai choisi y car un arbre pousse à la verticale.

Ce morceau de code nous fait donc 3 cercles les uns sur les autres à la verticale et qui se chevauchent de moitié.

Si nous devions dessiner notre arbre comme ceci cercle par cercle, ce n’est pas demain la veille que nous aurions fini. Comme c’est tout le temps la même chose nous pouvons faire une règle récursive. Voici comment cela se présente :

startshape arbre

rule arbre{
CIRCLE{}

arbre{y 0.1 s 0.995}
}

Examinons ce que comprend le logiciel lorsqu’il exécute ce morceau de code :

• Commençons par exécuter la règle arbre. (startshape arbre)
• La règle arbre (rule arbre) dit de dessiner un cercle (CIRCLE{}) puis d’exécuter la règle arbre (arbre{ ), en la déplaçant de 0.1 (y 0.1) vers le haut et en la rétrécissant d’un chouïa (s 0.995).
• La règle arbre dit de dessiner un cercle puis d’exécuter la règle arbre, en la déplaçant de 0.1 vers le haut et en la rétrécissant d’un chouïa.
• La règle arbre dit de dessiner un cercle puis d’éxécuter la règle arbre, en la déplaçant de 0.1 vers le haut et en la rétrécissant d’un chouïa.
• etc…

C’est donc sans fin ? En théorie, oui, mais en pratique, le logiciel s’arrête quand ce qu’il doit dessiner devient tellement petit que c’en est invisible. Ce qui veut dire aussi que si ce qu’il doit dessiner ne rétrécit pas, le logiciel ne s’arrête jamais, à moins d’appuyer sur le bouton Stop qui remplace le bouton Render lorsqu’il est en train de faire un rendu.

Comme vous l’avez deviné, s ajuste la taille (size en anglais), et donc une taille de 0.995 est un chouïa plus petite que la taille normale 1. À chaque fois que le logiciel applique une nouvelle fois la règle arbre un chouïa plus petite, il « oublie » tout ce qu’il a fait avant et pour lui, la nouvelle taille est la taille normale parce qu’il a oublié qu’il y avait jamais eu une taille plus grande. C’est pour cela que ça s’appelle « Context Free », « Sans Contexte », parce qu’il ne tient pas compte de ce qui se passe avant ou après. Ce qui veut dire aussi que lorsqu’il se déplace de 0.1 vers le haut, ce 0.1 est lui aussi à chaque fois plus petit, comme le cercle qu’il vient de dessiner, et chaque fois un peu plus haut.

On obtient donc un genre de pic qui pointe vers le haut.

L’arbre que je montre en haut n’a pas les branches aussi droites, elles sont légèrement courbes. Pour ça il faut un autre ajustement, r, comme rotation. Le nombre qui suit  r est l’angle en degrés, dans le sens contraire des aiguilles d’une montre.

startshape arbre

rule arbre{
CIRCLE{}

arbre{y 0.1 s 0.995 r 1}
}

En appuyant sur Render, on obtient une spirale ! De la même manière que le logiciel considère comme taille 1 une taille toujours plus petite à chaque fois qu’il répète le rétrécissement, tourner de 1 degré vers la gauche modifie la verticale à chaque fois un peu plus à gauche.

Passons maintenant aux branches. L’intérêt de dessiner notre arbre avec Context Free est qu’il peut les générer aléatoirement, avec les branches pas toujours au même endroit.

startshape arbre

rule arbre 100{
CIRCLE{}
arbre{y 0.1 s 0.995 r 0.2}
}
rule arbre{
CIRCLE{}
arbre{y 0.1 s 0.85 r 15}
arbre{y 0.1 s 0.85 r -15}
}

Lorsque qu’on définit plusieurs règles qui portent le même nom, le logiciel choisit aléatoirement l’une ou l’autre. On peut l’influencer en mettant un nombre après le nom de la règle. Ici, j’ai mis 100 à la première règle arbre, ça veut dire qu’il y aura 100 chances sur 101 qu’il choisisse celle-ci, et 1 chance sur 101 qu’il choisisse l’autre. Si on ne précise pas, le logiciel fait comme si on avait écrit 1.

Dans la règle que j’ai ajoutée, je demande d’exécuter deux fois la règle arbre, pour qu’il fasse deux branches, une penchée vers la gauche, et l’autre vers la droite (r 15 et r -15) et plus petites (s 0.85). Appuyons sur Render. Voilà qui ressemble maintenant à un arbre, mais avec un peu trop de vent qui vient de la droite ! Il y a un autre défaut, c’est qu’au niveau des embranchements les petites branches partent du milieu du bout de la grosse branche, au lieu d’avoir leur côté aligné sur le côté de la grosse branche.

startshape arbre

rule arbre 100{
CIRCLE{}
arbre{y 0.1 s 0.995 r 0.2}
}
rule arbre{
CIRCLE{}
arbre{y 0.1 s 0.85 r 15 x -0.1}
arbre{y 0.1 s 0.85 r -15 x 0.1 flip 90}
}

Voici un nouvel ajustement : flip. Il sert à dessiner à l’envers, comme dans le reflet d’un miroir. Le nombre qui suit flip est l’angle de ce miroir : un angle de 0 est horizontal, et un angle de 90 vertical. Comme ça, les branches qui vont vers la droite se courbent aussi vers la droite, sans avoir eu à écrire toute une règle pour faire en sorte que des branches se courbent vers la droite.

Et notre code est fini ! Voici quelques exemples de rendus de ce même code :

Il est intéressant de préciser que dans mon exemple, les deux règles demandent au logiciel de dessiner une forme de base, mais ce n’est pas obligatoire : essayez donc d’enlever l’instruction CIRCLE{} de la première règle, et voyez ce qui se passe lorsque vous appuyez sur Render !

Il y a une dernière chose sur laquelle je veux attirer votre attention : la suite de lettres qui se trouve dans le champ à droite du bouton Render : la variante. C’est elle qui détermine les choix « aléatoires » du logiciel lorsqu’il y en a. Pour un même code et une même variante, le rendu sera toujours le même, mais comme il existe 321 272 406 variantes (toutes les combinaisons possibles avec 26 lettres de l’alphabet et 6 lettres maximum) on a de quoi faire une énorme forêt !

Dans un autre tutoriel je vous montrerai comment on peut mettre des couleurs là-dedans, mais aujourd’hui on va s’arrêter là, d’accord ?

Pour aller plus loin, il vous faudra lire la documentation en anglais,
ou bien poser vos questions sur le forum de Context Free, il semble qu’il y ait un bon nombre de francophones qui utilisent ce logiciel. Vous pouvez aussi copier coller le code des œuvres exposées dans la galerie dans votre logiciel Context Free et essayer de comprendre comment elles fonctionnent, en modifiant légèrement le code voir ce que ça change

C’est quoi une courbe de Bézier ? C’est une ligne fermée ou non, qui est définie par des points et des vecteurs. C’est pour ça qu’on appelle un dessin fait de courbes de bézier un dessin vectoriel. Cette ligne passe par tous les points, et elle est influencée par les vecteurs qui peuvent être attachés à ces points, pour ajuster la courbure de cette ligne. Voici un exemple de courbe de Bézier : on peut voir les points qu’on appelle des ancres ou bien des nœuds, et les vecteur que l’on appelle plus communément des poignées, qui sont toujours tangents à la courbe. On appelle segment le morceau de courbe qui se trouve entre deux points.

On peut se servir des courbes pour dessiner une surface, ou bien un contour, ou bien les deux à la fois. Les ancres et poignées seront évidemment invisibles sur le dessin final ^^

L’intérêt de ces courbes, c’est que quel que soit le niveau de zoom avec lequel on les regarde, elle seront toujours aussi lisses et aussi précises. Ce n’est pas le cas des pixels : si vous agrandissez 10 fois une image bitmap (=faite de pixels) vous vous retrouverez avec des carrés de 10 pixels de côté, et l’image s’en trouvera très dégradée. Prenez par exemple ce smiley que j’ai dessiné en vectoriel.

Si je l’agrandis 5 fois, voici ce que j’obtiens :

Hors voici ce que j’obtiendrais en agrandissant 5 fois le petit smiley s’il avait été un bitmap et non un dessin vectoriel :

C’est pour cette raison que l’écrasante majorité des polices d’écriture sont conçues en vectoriel et non en bitmap, pour qu’on puisse écrire à la taille quel’on veut sans perdre de qualité.

Si vous voulez vous essayer au dessin vectoriel, il existe Inkscape, qui est un logiciel gratuit dédié au dessin vectoriel. Le logiciel de référence utilisé par les professionnels est Adobe Illustrator, mais ce n’est pas le même prix … ^^

Ces courbes de Bézier vont nous être utiles pour certains tutoriels à venir.

Lien vers le tutoriel (je l’ai mis sur un page différente pour que vous puissiez bien le voir)

Voici un tutoriel pour vous apprendre comme son nom l’indique, à colorier un dessin en commençant par le rendre exploitable s’il ne l’est pas déjà. Autrement dit, pour transformer ceci :

En cela :

Pour un meilleur résultat, il faut que les traits de votre dessin soient bien noirs, un croquis au crayon mal appuyé rendra moins bien à l’écran. Au besoin, repassez-le au feutre noir. Et si vous le pouvez, scannez-le au lieu de le prendre en photo comme l’a fait ma soeur
J’ai pris son dessin comme exemple pour le tutoriel parce que l’on voit bien ce qui nous empêche de le colorier tel qu’il est. Mais quand on prend bien soin de faire son dessin avec des traits noirs propres et de le scanner correctement, comme je l’ai fait pour colorier mon Calamar, le résultat est de meilleure qualité.

Voilà le reflet animé :

Chaque calque est une couche différente de l'image. C'est comme si on avait plusieurs feuilles de papier calque (d'où le nom) superposées pour former l'image entière. On peut donc travailler sur chaque calque indépendamment des autres, et un calque laissera voir les calque du dessous par transparence aux endroits où il n'est pas peint opaque.

Cette animation vous aidera peut-être à comprendre ce qu'est un calque. Vous pouvez monter et descendre le calque "Carré" en appuyant sur les flèches vertes en bas, et rendre les calques visibles ou non en appuyant sur les yeux.

Les possibilités qu'offrent les calques sont infinies : on peut mettre un fond derrière un sujet, dupliquer et modifier un calque pour faire une ombre ou un reflet, colorier par dessus une image et gommer le coloriage sans gommer l'image dessous...

Pour publier une image sur internet, on enregistrera les images pratiquement toujours au format GIF, JPEG ou PNG.

Le format GIF

Le format GIF est très utile pour faire des animations. Le principal défaut de ce format est que le nombre de couleurs est limité à 256. Or par exemple les photos que j'ai prises avec mon appareil en contiennent environ cent mille à deux cent cinquante mille ! En revanche, contrairement au format JPEG, on peut avoir des pixels transparents, et donc des images pas forcément rectangulaires mais en forme de ce que vous voulez. Dans ce cas, vous serez limité à 255 couleurs, plus la transparence : un pixel est soit complètement opaque, soit complètement transparent.

Le GIF n'est avantageux que pour les animations depuis que le format PNG a été inventé, car ce dernier est plus performant que le GIF en tous points, sauf pour les animations qu'il ne supporte pas.

Voici un exemple d'animation GIF :

Le format JPEG

Le format JPEG, ou JPG, est très répandu sur internet, du fait du faible poids des images enregistrées dans ce format. Son faible poids a une contrepartie : les images perdent de la qualité. Elles contiennent plus de bruit, bien que les couleurs conservent leur diversité, elles perdent un peu de leur qualité. On ne peut pas avoir de transparence avec ce format : une image JPG sera toujours un rectangle plein.

Les photographies, qui contiennent un grand nombre de couleurs différentes, sont enregistrées en JPG car contrairement aux formats GIF et PNG, le format JPG ne répertorie pas toutes les couleurs qui composent l'image mais fait un caclul pour les déduire. Quand il y a beaucoup de couleurs, elles prennent donc moins de place.

Par contre, une image qui contient peu de couleurs perd à être enregistrée en JPG car son poids sera équivalent ou même plus élevé que si elle avait été enregistrée en GIF ou en PNG, et ce avec une qualité ammoindrie.

Voici un exemple pourra vous permettre de vous rendre compte de cette perte de qualité.

Voici donc une image que, compte tenu du fait qu'elle ne contient que deux couleurs, j'ai enregistrée en PNG.

Voici maintenant la même, enregistrée en JPG avec une qualité de 60% selon l'échelle que donne GIMP, et qui est à peu près la qualité que l'on obtient en enregistrant une image en JPG dans Microsoft Paint.Le rouge est moins profond et les contours ne sont plus très nets.

Détail agrandi trois fois du PNG :

et du JPG :

On voit moins cette compression dans une photographie enregistrée avec une qualité raisonnable, car on a rarement de contrastes aussi marqués et le bruit se fond dans les autres couleurs.

Le format PNG

Le format PNG est une version plus récente et beaucoup améliorée du format GIF. Elle ne permet pas l'animation. En revanche, il peut gérer autant de couleurs que le JPEG, la même image en PNG sera plus légère qu'en GIF, et il gère plusieurs niveaux de transparence. Le tout sans altérer la qualité de l'image. Les images contenant des bords nets, du texte, restent lisibles et sans défaut.

Les niveaux de transparence permettent d'éviter les escaliers sur le contour de l'objet dont on aura enlevé le fond, d'avoir des ombres et des objets transparents, etc... Malheureusement, Internet Explorer 6 ne sait pas gérer les niveaux de transparence, il les affiche comme des rectangles pleins. Heureusement, il est possible de choisir la couleur de fond de l'image qu'affichera IE6. Par contre, convertir un GIF transparent en PNG ne pose pas ce problème, si l'on prend garde que le PNG que l'on enregistre est bien en mode 256 couleurs, les zones transparentes le resteront.

Voici un exemple d'image PNG transparente
Si vous utilisez Internet Explorer 6 vous ne verrez donc pas la transparence du PNG, pour les autres, vous pouvez jouer avec l'ascenseur pour superposer l'image PNG avec l'image de fond du blog pour l'observer.

Et le meilleur équivalent en GIF que j'aie pu faire.

Récapitulatif :

Votre image est :

• animée > on l'enregistre en GIF
• une photographie simple > on l'enregistre en JPEG
• transparente > on l'enregistre en PNG
• réalisée par ordinateur >  on l'enregistre en PNG
• avec du texte > on l'enregistre en PNG.

Voilà le résultat !