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

m (→‎Conversion en fraction : correction lien interne)
}
</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):
 
==Dessin de l'arbre==
 
Pour simplifier les fonctions JavaScript ci-dessus, on se limite à la partie de l'arbre de Stern-Brocot qui se trouve entre 0 et 1 (ça évite de s'encombrer de parties entières). L'arbre sera donc tracé à partir de la fraction 1/2. Mais la fonction le définissant doit être plus générale, et admettre en entrée une fraction, pour permettre une définition récursive.
 
===Définition récursive===
 
Pour dessiner l'arbre d'une fraction,
 
:#On effectue un ''moveTo'' jusqu'à la fraction (abscisse: La fraction; ordonnée: La même, mais en remplaçant son numérateur par 1)
:#On trace un trait jusqu'à son fils, et on y ajoute l'abre de son fils.
:#On retourne à la fraction de départ
:#On trace à trait jusqu'à sa fille;
:#On ajoute l'arbre de la fille
 
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).
 
<source lang="javascript">
function arbre(f){
if (f[1]<400){
pinceau.moveTo(400*f[0]/f[1],400/f[1]);
var f1=fils(f);
pinceau.lineTo(400*f1[0]/f1[1],400/f1[1]);
var f2=fille(f);
pinceau.moveTo(400*f[0]/f[1],400/f[1]);
pinceau.lineTo(400*f2[0]/f2[1],400/f2[1]);
arbre(f1);
arbre(f2);
}
}
</source>
 
Après ça, il suffit d'appeler la fonction ''arbre([1,2])'' puis un ''stroke()'' fait le dessin:
 
===Arbre de Stern-Brocot===
 
<source lang="html5">
<html>
<head>
<script>
function cont2frac(c){
//suite des numérateurs et des dénominateurs
var num=[0,1];
var den=[1,0];
for(n in c){
num=[c[n]*num[0]+num[1],num[0]];
den=[c[n]*den[0]+den[1],den[0]];
}
return [num[0],den[0]];
}
function frac2cont(f){
var cont=[Math.floor(f[1]/f[0])];
for(var n=0;f[1]>1;n++){
f=[f[1],f[0]];
f[0]-=cont[n]*f[1];
cont[n+1]=Math.floor(f[1]/f[0]);
}
cont.pop();
return cont;
}
function fils(f){
var cont=frac2cont(f);
cont[cont.length-1]++;
return cont2frac(cont);
}
function fille(f){
var cont=frac2cont(f);
cont[cont.length-1]--;
cont[cont.length]=2;
return cont2frac(cont);
}
</script>
</head>
<style type="text/css">
canvas { border: 4px solid brown; background: #FFFFFF }
</style>
<body>
<canvas id="cadre" width="400" height="200">
<script>
var chevalet=document.getElementById('cadre');
var pinceau=chevalet.getContext('2d');
pinceau.strokeStyle="Green";
pinceau.beginPath();
function arbre(f){
if (f[1]<400){
pinceau.moveTo(400*f[0]/f[1],400/f[1]);
var f1=fils(f);
pinceau.lineTo(400*f1[0]/f1[1],400/f1[1]);
var f2=fille(f);
pinceau.moveTo(400*f[0]/f[1],400/f[1]);
pinceau.lineTo(400*f2[0]/f2[1],400/f2[1]);
arbre(f1);
arbre(f2);
}
}
arbre([1,2]);
pinceau.stroke();
</script>
 
</canvas>
<br/>
</body>
</html>
</source>
1 277

modifications