« Programmation objet et géométrie/Les lignes droites de canvas » : différence entre les versions
Contenu supprimé Contenu ajouté
Aucun résumé des modifications |
m <source> -> <syntaxhighlight> (phab:T237267) |
||
Ligne 16 :
Voici un exemple:
<
<html>
<style type="text/css">
Ligne 35 :
</body>
</html>
</syntaxhighlight>
===Segment en pointillés===
Ligne 43 :
On peut faire un segment en pointillés avec une boucle, en alternant les traits tracés (avec ''lineTo()'') et les traits non tracés (avec ''moveTo()''):
<
<html>
<style type="text/css">
Ligne 65 :
</body>
</html>
</syntaxhighlight>
Une variante permet d'ajouter des graduations (en faisant des pointillés perpendiculaires au segment).
Ligne 71 :
====Avec un dégradé====
<
<html>
<style type="text/css">
Ligne 98 :
</body>
</html>
</syntaxhighlight>
Cette variante, qui nécessite aussi une boucle (pour fabriquer le dégradé), présente l'avantage de s'appliquer aussi à des courbes.
Ligne 106 :
Pour tracer un polygone, il faut faire un ''lineTo()'' pour chaque côté (en n'oubliant pas de revenir au point de départ):
<
<html>
<style type="text/css">
Ligne 127 :
</body>
</html>
</syntaxhighlight>
Une variante consiste à remplir le triangle au lieu de seulement dessiner ses côtés, et dans ce cas le dernier côté n'est pas nécessaire:
<
<html>
<style type="text/css">
Ligne 150 :
</body>
</html>
</syntaxhighlight>
==Fonction==
Ligne 156 :
Pour représenter graphiquement une fonction, il suffit de dessiner un polygone ayant beaucoup de côtés assez petits pour donner l'illusion d'une courbe. Par exemple, pour dessiner une parabole on peut faire comme ceci:
<
<html>
<style type="text/css">
Ligne 178 :
</body>
</html>
</syntaxhighlight>
On peut ajouter des axes gradués avec d'autres boucles:
<
pinceau.strokeStyle="Blue";
pinceau.beginPath();
Ligne 192 :
}
pinceau.stroke();
</syntaxhighlight>
Et quelque chose d'analogue pour l'axe des ordonnées (attention à ne pas oublier qu'il est ''à l'envers'').
Ligne 233 :
:*Enfin, la liste des réduites est construite au fur et à mesure: Initialisée comme tableau à une seule entrée avec ''var cont'', chaque tentative d'écriture sur l'indice ''n+1'' qui ne contient encore rien, allonge le tableau:
<
function frac2cont(f){
var cont=[Math.floor(f[1]/f[0])];
Ligne 244 :
return cont;
}
</syntaxhighlight>
L'instruction ''pop'' vers la fin est dûe à ce que la boucle est parcourue une fois de trop, et donc le dernier élément du tableau contient ∞ à cause d'une division par zéro. JavaScript possède une sorte d'esprit d'initiative, préférant anticiper sur ce que voulait le programmeur, plutôt que tout bloquer avec un message d'erreur (ce qui n'est pas surprenant, on souhaite rarement que l'internaute voie une page bloquée parce que le webmestre a fait n'importe quoi).
Ligne 252 :
On peut obtenir les [[w:Fraction_continue#Réduites_d'une_fraction_continue|réduites d'une fraction continue]] avec deux suites doublement récurrentes (façon [[w:Nombres de Fibonacci|Fibonacci]]) dont les coefficients sont ceux de la fraction continue. Comme cette fonction JavaScript réalise l'inverse de la précédente, elle est nommée ''cont2frac'' (pour l'anglais ''continued to fraction''):
<
function cont2frac(c){
//suite des numérateurs et des dénominateurs
Ligne 263 :
return [num[0],den[0]];
}
</
L'usage de ces deux fonctions est typique de pratiquement toutes les [[w:Mathématiques|maths]]: On commence (avec ''frac2cont'') par transporter tout le problème dans un espace (celui des fractions continues) où il est plus facile à résoudre; on en profite pour le résoudre, puis on transporte sa solution (par ''cont2frac'') dans l'espace de départ où on peut exploiter sa solution. Ce procédé est si répandu qu'il porte un nom: La [[w:Conjugaison (algèbre)|conjugaison]] (exemples connus: Changement de bases en [[w:Matrice (mathématiques)|calcul matriciel]], transformées de [[w:Transformée de Fourier|Fourier]] et de [[w:Transformée de Laplace|Laplace]] etc.). Le mot ''conjugaison'' semble dù à [[w:Évariste Galois|Galois]].
Ligne 269 :
===Fils d'une fraction===
<
function fils(f){
var cont=frac2cont(f);
Ligne 275 :
return cont2frac(cont);
}
</syntaxhighlight>
===Fille d'une fraction===
<
function fille(f){
var cont=frac2cont(f);
Ligne 287 :
return cont2frac(cont);
}
</syntaxhighlight>
Les fonctions précédentes sont à mettre dans l'entête (''head'') du document, celles du dessin de l'arbre pouvant être placées dans le corps (''body''), entre les deux balises qui ouvrent et ferment le ''canvas'' (et même en ajoutant des balises ''script'' puisque c'est encore du JavaScript):
Ligne 307 :
Ainsi, la définition de l'arbre fait appel à la notion d'arbre, pourtant en cours de définition: [[w:Récursivité|Récursivité!]]. Cette définition récursive est courte et ne nécessite pas de savoir où se trouvent le fils et la fille (l'un d'eux à à gauche, mais on n'a pas besoin de savoir lequel).
<
function arbre(f){
if (f[1]<400){
Ligne 320 :
}
}
</syntaxhighlight>
Après ça, il suffit d'appeler la fonction ''arbre([1,2])'' puis un ''stroke()'' fait le dessin:
Ligne 326 :
===Arbre de Stern-Brocot===
<
<html>
<head>
Ligne 393 :
</body>
</html>
</syntaxhighlight>
L'arbre se calcule presque instantanément mais il est long à afficher. Par contre, en s'arrêtant à l'ordre 40 (au lieu de 400), on a déjà quelque chose qui ressemble à un arbre (sauf qu'on voit moins bien l'alignement de la canopée):
| |||