Accueil | Tutoriaux

Tutoriaux : Dessiner une portion de disque
 

Introduction
 
Il s'agit d'apprendre dans ce tutoriel à tracer un secteur angulaire défini par un angle et un rayon. Pour cela nous détaillerons un prototype nommé intelligemment tracerUnSecteurAngulaire (y en a la dedans...). Dans un second temps, nous utiliserons ce prototype pour tracer une couronne. Malgré mes explications je ne suis pas certain d'avoir été clair : pour comprendre le sujet de ce tutoriel je vous conseille de regarder les animations ci-dessous... A quoi ces animations peuvent-elles bien servir ? En étudiant ce tutoriel vous saurez tracer des secteurs angulaires ce qui peut être utile pour tracer des diagrammes circulaires (les fameux "camemberts" du chapitre "statistiques" de troisième)... On voit également de nombreux sites qui utilisent des secteurs angulaires pour représenter l'avancement du chargement des actifs : photos, sons et animations...
 
Animation n°1 : tracer un secteur angulaire
 
Utilisez les glissières de cette animation pour faire varier l'angle et le rayon du secteur angulaire.
 
 
Animation n°2 : tracer une couronne
 
Pour tracer une couronne, il suffit de tracer deux secteurs angulaires de différents rayons et de différentes couleurs : le secteur de plus grand rayon en rouge et le secteur de plus petit rayon en blanc (au premier plan). Utilisez les glissières de cette animation pour faire varier l'angle, le rayon du grand secteur, le rapport entre les rayons des deux secteurs et l'opacité du petit secteur (en blanc).
 
 
Dans la bibliothèque et sur la scène
 

- Ouvrez flash et créez un nouveau document de 400 pixels de largeur et de 300 pixels de hauteur.
- Définissez la cadence de l'animation à 25 images par seconde.
- Il n'y a rien dans la bibliothèque de l'animation et la scène principale et vide.
 
Le code n°1
 
Pour tracer un secteur angulaire de 237° et de 80 pixels de rayon, placez le code ci-dessous dans la première image clé de la scène principale :
  
MovieClip.prototype.tracerUnSecteurAngulaire = function(a, r, n, c, t) {
this.clear();
this.lineStyle(0, 0, 0);
this.beginFill(c, t);
this.moveTo(0, 0);
this.lineTo(rayon, 0);
var teta = 0;
var dteta = 2*Math.PI/n;
while(teta < a) {
var x = r*Math.cos(teta);
var y = - r*Math.sin(teta);
this.lineTo(x, y);
teta += dteta;
}
x = r*Math.cos(a);
y = - r*Math.sin(a);
this.lineTo(x, y);
this.lineTo(0, 0);
this.endFill();
}
 
angleEnDegres = 237;
rayon0 = 80; 
 
this.createEmptyMovieClip("secteur0", 0);
secteur0._x = 200;
secteur0._y = 150; 
 
angleEnRadians = Math.PI*angleEnDegres/180;
secteur0.tracerUnSecteurAngulaire(angleEnRadians, rayon0, 50, "0xCC3300", 100);
 
 
Commentaires du code n°1
 
Nous allons créer une fonction qui prendra 5 arguments : a est la mesure (en radians) du secteur angulaire, r est le rayon du secteur angulaire, n représente le nombre de points utilisés pour tracer un cercle complet, c est la couleur au format hexadécimal et t est la transparence autrement dit la valeur alpha de la teinte utilisée.
MovieClip.prototype.tracerUnSecteurAngulaire = function(a, r, n, c, t) {
 
Nous effaçons toutes les lignes tracées précédemment dans notre clip.
this.clear();
 
Nous définissons un style de trait : la dernière valeur correspondant à la valeur alpha est nulle, par conséquent ce trait est totalement transparent donc invisible.
this.lineStyle(0, 0, 0);
 
Nous définissons la couleur et la transparence des surfaces que nous allons représenter.
this.beginFill(c, t);
 
La fonction moveTo permet simplement de déplacer "la pointe" du stylo avec lequel nous allons dessiner : nous plaçons cette pointe au point de coordonnées (0, 0).
this.moveTo(0, 0);
 
Nous relions par un trait les deux points de coordonnées respectives (0, 0) et (rayon, 0). Ce trait est le premier rayon de notre secteur.
this.lineTo(rayon, 0);
 
Nous définissons une variable teta dont la valeur initiale est nulle. Cette variable représente un angle de rotation et nous permettra de placer des points sur le périmètre de notre secteur angulaire.
var teta = 0;
 
Une habitude que je dois à mes quelques connaissances en sciences physiques : si x représente une variable alors dx représente une petite variation de x. Donc ici dteta représente une variation élémentaire de teta. Par conséquent dteta représente une vitesse angulaire : pour tracer un cercle complet (soit un angle égal à 2PI radians) nous utiliserons n points. Plus n est grand plus le tracé du secteur angulaire sera précis mais plus les calculs seront nombreux. Il faut donc trouver un juste équilibre entre précision et rapidité des calculs...
var dteta = 2*Math.PI/n;
 
Nous utilisons une boucle while : tant que teta est plus petit que a...
while(teta < a) {
 
Nous calculons l'abscisse du prochain point qui se trouve sur le périmètre du secteur angulaire.
var x = r*Math.cos(teta);
 
Nous calculons l'ordonnée du prochain point qui se trouve sur le périmètre du secteur angulaire. Le signe moins en début de calcul provient du fait que dans flash les nombres négatifs de l'axe des ordonnées sont au dessus de l'axe des abscisses !
var y = - r*Math.sin(teta);
 
Nous traçons le segment reliant deux points successifs du périmètre du secteur angulaire.
this.lineTo(x, y);
 
Nous ajoutons la valeur de dteta à la variable teta : teta = teta + dteta.
teta += dteta;
 
fin de la boucle while.
}
 
Nous calculons l'abscisse et l'ordonnée du dernier point appartenant au périmètre du secteur angulaire.
x = r*Math.cos(a);
y = - r*Math.sin(a);
 
Nous traçons le dernier segment définissant le périmètre du secteur angulaire.
this.lineTo(x, y);
 
Nous traçons le deuxième rayon du secteur angulaire.
this.lineTo(0, 0);
 
La boucle est bouclée, la "pointe" du stylo est à nouveau au point de coordonnées (0, 0) : nous avons donc défini une zone fermée qui sera remplie par la couleur c. Ici se termine le remplissage de cette surface.
this.endFill();
 
fin du prototype.
}
 
Ce paramètre est la mesure en degrés du secteur angulaire que nous voulons tracer. Le degré est une unité de mesure d'angle souvent beaucoup plus parlante que le radian... Cependant, si vous voulez programmer avec flash, il est impératif de savoir faire les conversions d'une unité à l'autre !
angleEnDegres = 237;
 
On définit le rayon de notre secteur angulaire (en pixels). J'ai indexé ce rayon en utilisant un zéro car dans la deuxième animation qui nous permettra de tracer une couronne, nous ferons appel à un deuxième secteur angulaire de rayon différent.
rayon0 = 80;
 
Nous plaçons sur la scène principale un clip vide nommé "secteur0". C'est à l'intérieur de ce clip que nous tracerons le secteur angulaire.
this.createEmptyMovieClip("secteur0", 0);
 
Nous définissons les coordonnées du clip "secteur0". Celui-ci se retrouve au centre de notre animation.
secteur0._x = 200;
secteur0._y = 150;
 
Le prototype exige comme argument un angle a exprimé en radians. Nous faisons donc la conversion entre degrés et radians.
angleEnRadians = Math.PI*angleEnDegres/180;
 
Nous traçons le secteur angulaire dans le clip vide nommé "secteur0".
secteur0.tracerUnSecteurAngulaire(angleEnRadians, rayon0, 50, "0xCC3300", 100);
 
Le code n°2
 
Pour tracer une couronne de 237° et de 80 pixels de rayon, placez le code ci-dessous dans la première image clé de la scène principale :
  
MovieClip.prototype.tracerUnSecteurAngulaire = function(a, r, n, c, t) {
this.clear();
this.lineStyle(0, 0, 0);
this.beginFill(c, t);
this.moveTo(0, 0);
this.lineTo(rayon, 0);
var teta = 0;
var dteta = 2*Math.PI/n;
while(teta < a) {
var x = r*Math.cos(teta);
var y = - r*Math.sin(teta);
this.lineTo(x, y);
teta += dteta;
}
x = r*Math.cos(a);
y = - r*Math.sin(a);
this.lineTo(x, y);
this.lineTo(0, 0);
this.endFill();
}
 
angleEnDegres = 237
rayon0 = 80;
rapport = 0.5;
rayon1 = rapport*rayon0;
transparence = 100;
 
for(var i = 0; i < 2; i++) {
var secteur = this.createEmptyMovieClip("secteur" + i, i);
secteur._x = 200;
secteur._y = 150;
}
 
angleEnRadians = Math.PI*angleEnDegres/180;
secteur0.tracerUnSecteurAngulaire(angleEnRadians, rayon0, 50, "0xCC3300", 100);
secteur1.tracerUnSecteurAngulaire(angleEnRadians, rayon1, 50, "0xFFFFFF", transparence);
 
 
Commentaires du code n°2
 
Le prototype est le même que celui de la première animation !

MovieClip.prototype.tracerUnSecteurAngulaire = function(a, r, n, c, t) {
//instructions
}
 
On définit la mesure en degrés du secteur angulaire ainsi que le rayon du plus grand secteur (en rouge).
angleEnDegres = 237
rayon0 = 80;
 
On définit le rapport entre le petit rayon du secteur blanc et le grand rayon du secteur rouge. Ainsi, le petit rayon est égal à la moitié du grand.
rapport = 0.5;
rayon1 = rapport*rayon0;
 
On définit la transparence du secteur de petit rayon. En prenant une transparence égale à 100, on s'assure d'avoir un secteur blanc totalement opaque.
transparence = 100;
 
A l'aide d'une boucle for on place deux clips vides qui se nomment respectivement secteur0 et secteur1. Les deux clips sont placés au centre de l'animation et secteur1 se trouve au-dessus de secteur0 dans la pile des calques.
for(var i = 0; i < 2; i++) {
var secteur = this.createEmptyMovieClip("secteur" + i, i);
secteur._x = 200;
secteur._y = 150;
}
 
Dans le clip vide "secteur0" on trace un secteur angulaire dont le rayon est égal à rayon0, de couleur rouge.
secteur0.tracerUnSecteurAngulaire(angleEnRadians, rayon0, 50, "0xCC3300", 100);
 
Dans le clip vide "secteur1" on trace un secteur angulaire de rayon égal à rayon1 (inférieur à rayon0), totalement opaque et blanc. Visuellement, on ne voit alors qu'une couronne... En fait nous avons tracé un secteur angulaire rouge partiellement caché par un secteur angulaire de même angle mais opaque, blanc et de rayon inférieur au précédent.
secteur1.tracerUnSecteurAngulaire(angleEnRadians, rayon1, 50, "0xFFFFFF", transparence);
 
 
Accueil | Tutoriaux