Documentation

Les fichiers

C’est une extension de type serveur et voici ses principaux fichiers :

• le fichier Turtle.py : C'est une classe Python qui contient toutes les méthodes possibles de la tortue. Ces méthodes vont passer les données et les actions de la tortue écrites sur le code python au JavaScript. Il faut une synchronisation entre les deux scripts : le tableau d’action et les autres données du python sont envoyés au fichier JavaScript par le code suivant :

_view_module = Unicode("nbextensions/turtleIutvjs/turtlewidget")
.tag(sync=True)
_view_name = Unicode('TurtleView').tag(sync=True)

Par exemple pour les actions la synchronisation se fait par actions = List(sync=True).

• le fichier __init__.py : c’est un script python qui sera appelé lors de l’exécution du code d’une cellule sur le notebook. Ce fichier initialise la tortue avec une variable globale, il utilise la classe Turtle pour faire de la programmation procédurale et éviter la programmation objet, car les débutants ne sont pas familiarisés avec l'objet. Il s'agit simplement de réécrire les fonctions de la classe Turtle. Pour comprendre ces fonctions, il suffit de regarder la classe Turtle.

• le fichier drawers.js : est une classe JavaScript, elle permet de gérer les actions à effectuer pour dessiner et réaliser des animations. Cette classe Drawer.js utilise le fichier paper-full.js de la librairie Paper.js pour les dessins et animations.

Paper.js est un framework de script de graphiques vectoriels open source qui s'exécute sur le canevas HTML5. Il offre un modèle d'objet de document et de nombreuses fonctionnalités puissantes pour créer et utiliser des graphiques vectoriels dans une interface de programmation objet.

• le fichier turtlewidget.js : est un fichier JavaScript qui reprend les actions de l’utilisateur et utilise Drawer.js pour faire de l’animation. Une donnée data est reçue par le bout de code suivant :

 this.turtledrawing.data = this.model.get('data');

Les animations sont faites dans un évènement onFrame qui est une boucle.

paper.view.on('frame', function(event){});

Animation

Lors de l’animation il faut créer un chemin (path). Un chemin est un ensemble de point à placer dont deux qui se suivent sont reliés par un trait.

Pour animer un segment du chemin, il faut 3 points :

• le point de départ ajouté au chemin lastPoint,
• le point d’arrivé à placer arrivalPoint,
• un point courant qui est ajouté au chemin aussi currentSegment. Ce dernier prend la valeur du point de départ au début de l’animation. Une variation dépendant de la vitesse de la tortue est ajoutée au point courant à chaque tour de boucle de l'évènement OnFrame jusqu’à ce que ses coordonnées atteignent celles du point d’arrivé. Voir la fonction doDeplacement() de la classe drawer pour plus de détails.

Pour colorier une figure (une partie du chemin ou path ) après l’appel de la fonction begin_fill(), il faut qu'elle soit fermée à un moment de l’animation. C’est-à-dire il doit y avoir un point d’intersection entre le segment en cours de traçage et le chemin déjà tracé. Si ce point d’intersection est présent, il faut créer un nouveau chemin (path) qui sera colorié avec une couleur passé en paramètre ou par défaut en noir. Ce chemin part du point d’intersection et récupère l’ensemble des points du chemin déjà tracé jusqu’à l’extrémité (un point) le plus récent du segment d’intersection et le nouveau chemin se termine par le point d’intersection : la figure est fermée, on peut la remplir avec une couleur.