Différences entre les versions de « Programmation objet et géométrie/Les lignes droites de canvas »

m
<source> -> <syntaxhighlight> (phab:T237267)
m (<source> -> <syntaxhighlight> (phab:T237267))
 
Voici un exemple:
 
<sourcesyntaxhighlight lang="html5">
<html>
<style type="text/css">
</body>
</html>
</syntaxhighlight>
</source>
 
===Segment en pointillés===
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()''):
 
<sourcesyntaxhighlight lang="html5">
<html>
<style type="text/css">
</body>
</html>
</syntaxhighlight>
</source>
 
Une variante permet d'ajouter des graduations (en faisant des pointillés perpendiculaires au segment).
====Avec un dégradé====
 
<sourcesyntaxhighlight lang="html5">
<html>
<style type="text/css">
</body>
</html>
</syntaxhighlight>
</source>
 
Cette variante, qui nécessite aussi une boucle (pour fabriquer le dégradé), présente l'avantage de s'appliquer aussi à des courbes.
Pour tracer un polygone, il faut faire un ''lineTo()'' pour chaque côté (en n'oubliant pas de revenir au point de départ):
 
<sourcesyntaxhighlight lang="html5">
<html>
<style type="text/css">
</body>
</html>
</syntaxhighlight>
</source>
 
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:
 
<sourcesyntaxhighlight lang="html5">
<html>
<style type="text/css">
</body>
</html>
</syntaxhighlight>
</source>
 
==Fonction==
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:
 
<sourcesyntaxhighlight lang="html5">
<html>
<style type="text/css">
</body>
</html>
</syntaxhighlight>
</source>
 
On peut ajouter des axes gradués avec d'autres boucles:
 
<sourcesyntaxhighlight lang="javascript">
pinceau.strokeStyle="Blue";
pinceau.beginPath();
}
pinceau.stroke();
</syntaxhighlight>
</source>
 
Et quelque chose d'analogue pour l'axe des ordonnées (attention à ne pas oublier qu'il est ''à l'envers'').
:*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:
 
<sourcesyntaxhighlight lang="javascript">
function frac2cont(f){
var cont=[Math.floor(f[1]/f[0])];
return cont;
}
</syntaxhighlight>
</source>
 
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 &infin; à 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).
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''):
 
<sourcesyntaxhighlight lang="javascript">
function cont2frac(c){
//suite des numérateurs et des dénominateurs
return [num[0],den[0]];
}
</sourcesyntaxhighlight>
 
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]].
===Fils d'une fraction===
 
<sourcesyntaxhighlight lang="javascript">
function fils(f){
var cont=frac2cont(f);
return cont2frac(cont);
}
</syntaxhighlight>
</source>
 
 
===Fille d'une fraction===
 
<sourcesyntaxhighlight lang="javascript">
function fille(f){
var cont=frac2cont(f);
return cont2frac(cont);
}
</syntaxhighlight>
</source>
 
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):
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).
 
<sourcesyntaxhighlight lang="javascript">
function arbre(f){
if (f[1]<400){
}
}
</syntaxhighlight>
</source>
 
Après ça, il suffit d'appeler la fonction ''arbre([1,2])'' puis un ''stroke()'' fait le dessin:
===Arbre de Stern-Brocot===
 
<sourcesyntaxhighlight lang="html5">
<html>
<head>
</body>
</html>
</syntaxhighlight>
</source>
 
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):
1 535

modifications