UKOnline

Dessin

Terminons ce chapitre en examinant brièvement comment réaliser des dessins et animations à l'aide de Kivy. Cette librairie permet de réaliser des dessins sophistiqués statiques ou animés en exploitant les capacités d'OpenGL et de SDL.

OpenGL est une collection de fonctions permettant de réaliser des calculs d'images 2D et 3D comme de la géométrie d'objets et du calcul de projection à l'écran, par exemple. SDL est une bibliothèque que l'on utilise pour créer des jeux 2D permettant notamment de gérer l'affichage vidéo, l'audio numérique et les périphériques tels que la souris et le clavier, par exemple.

Composant canvas

On peut dessiner dans un composant en utilisant sa propriété canvas. Il suffit d'y définir une séquence d'opérations graphiques à réaliser, comme dessiner un rectangle ou changer la couleur du pinceau. Pour que le résultat soit intéressant, il vaut évidemment mieux utiliser un conteneur pour avoir une zone de dessin vierge au départ.

La figure 12 montre un exemple d'une fenêtre avec un conteneur de type BoxLayout sur lequel on a dessiné différents éléments. Pour ce faire, on a défini un nouveau composant de type BoxLayout, dans lequel on fera les dessins. Voici le code Python du programme :

On définit donc un nouveau composant DrawForm qui est un conteneur de type BoxLayout. C'est dans ce dernier que le dessin sera réalisé, à l'aide de la propriété canvas.

Vient ensuite le fichier KV qui contient la description du dessin à réaliser. Dans ce dernier, on définit la séquence des opérations de dessin à faire grâce à la propriété canvas. Ces opérations seront réalisées dans l'ordre dans lequel elles sont définies :

Quatre opérations graphiques seront donc réalisées au moment où le programme est lancé et que l'interface graphique s'affiche :

1. La première opération change la couleur qui est utilisée à blanc.
2. La deuxième dessine un rectangle dont le coin inférieur gauche est en $(0, 0)$, c'est-à-dire le coin inférieur gauche de la zone de dessin, et dont la taille est la même que celle du composant. En gros, on peint l'arrière fond du composant intégralement en blanc.
3. On change ensuite de nouveau la couleur de dessin, en la fixant à un rouge composé de $70%$ de rouge et $20%$ de bleu.
4. On termine en dessinant un plus petit rectangle, qui sera donc en rouge, dont le coin inférieur droit est en $(50, 200)$ et de $400$ pixels de largeur et $150$ pixels de hauteur.

Transformation

Il est possible d'appliquer trois différentes transformations aux dessins réalisés. Une rotation d'un certain angle peut se faire autour d'un axe donné par rapport à un point d'origine. Une translation peut se faire suivant un certain vecteur. Enfin, une mise à l'échelle selon les différents axes peut se faire par rapport à un point d'origine.

Voici une modification de l'exemple précédent qui utilise les trois transformations pour dessiner un nouveau rectangle bleu :

On repart donc du rectangle rouge qu'on va redessiner à la dernière étape, après avoir changé la couleur en bleu, mais surtout après avoir défini une séquence de transformations à appliquer. Sans rentrer dans les détails mathématiques, il faut savoir que les opérations de transformations sont appliquées dans l'ordre inverse de leur apparition. Dans cet exemple, on en définit trois qui vont donc s'appliquer dans l'ordre suivant :

1. on commence avec une mise à l'échelle diminuant de moitié les dimensions de l'objet selon les deux axes ($x$ et $y$), grâce au facteur $0.5$, et par rapport au point d'origine $(450, 200)$ qui correspond au coin inférieur droit du rectangle rouge ;
2. on enchaine ensuite avec une rotation, autour du même point d'origine, de $45$ degrés dans le sens anti-horloger, selon l'axe $z$ (la rotation se fait donc uniquement dans le plan $xy$) ;
3. on termine enfin avec une translation de $200$ pixels vers la droite (axe $x$) et de $0$ en hauteur (axe $y$) ;

Les transformations, une fois définies, s'appliquent à tous les objets qui seront dessinés par après. La figure 13 montre le résultat produit par l'exécution de l'exemple. L'ordre des transformations est très important et on n'obtient, en général, pas le même résultat final lorsqu'on modifie l'ordre des transformations. Il faut également faire attention à l'origine qui est utilisée pour les rotations et mises à l'échelle.

• Précédent
• Suivant