« Programmation objet et géométrie/Les cercles de canvas » : différence entre les versions

Contenu supprimé Contenu ajouté
Aucun résumé des modifications
Aucun résumé des modifications
Ligne 9 :
#Un booléen pour choisir entre les arcs rentrant et saillant (''true'' pour le sens trigonométrique, ''false'' pour le sens des aiguilles d'une montre).
 
Les arcs de cercle sont utiles pour faire des diagrammes circulaires ou semi-circulaires en statistiques, mais aussi pour la [[w:Géométrie hyperbolique|géométrie hyperbolique]]. Mais dans cet article on va plutôt réinvestir ce qui a été fait avec l'arbre de Stern-Brocot dans l'le [[Programmation objet et géométrie/Les lignes droites de canvas|articlechapitre précédent]]. En effet, la version ''tassée'' de l'arbre (avec division par le double du carré du dénominateur) a une propriété unique: Les cercles centrés sur les fractions et tangents à l'axe des abscisses, sont également tangents entre eux: L'étude de cas portera donc sur les [[w:Cercle de Ford|cercles de Ford]], une des plus simples parmi les fractales basées sur des cercles (en réalité ce sont des [[w:Cercle unité#Cercle unité comme bord du plan hyperbolique|horocycles]] mais on ne va pas chipoter).
 
=Cercles de Ford=
 
[[Fichier:Ford_Circles_and_Fractions_1.svg]]
 
==Fractions==
 
Les fonctions sur les fractions (fille et fils) sont les mêmes que dans le [[Programmation objet et géométrie/Les lignes droites de canvas|chapitre précédent]]. Et la méthode générale aussi: On va juste dessiner récursivement des cercles au lieu de segments.
 
==Cercles et disques==
 
Le dessin d'un cercle devient effectif avec ''stroke()'' (et il peut être intéressant de le précéder d'un ''moveTo()'' pour éviter les segments parasites). Mais pour mieux voir les cercles, on va utiliser la méthode ''fill()'' du ''canvas'', qui rajoute les disques (donc remplit les cercles).
 
===Couleurs===
 
On remplit les disques de couleur orange et on trace les cercles en rouge foncé avec
 
<source lang="javascript">
pinceau.strokeStyle="rgb(200,0,0)";
pinceau.fillStyle="Orange";
</source>
 
===Cercles===
 
Pour mieux voir le cercle (le bord), il vaut mieux le placer par-dessus le disque (l'intérieur), ce qu'on fait en traçant le cercle après le disque:
 
<source lang="javascript">
function cercles(f){
if (f[1]<20){
pinceau.moveTo(800*f[0]/f[1],0);
pinceau.arc(800*f[0]/f[1],400/f[1]/f[1],400/f[1]/f[1],-Math.PI/2,3/2*Math.PI,true);
pinceau.stroke();
cercles(fils(f));
cercles(fille(f));
pinceau.fill();
}
}
</source>
 
On remarque que chaque cercle est tracé de -&pi;/2 à 3&pi;/2 (au lieu des classiques 0 et 2&pi;); c'est parce que le point de départ du tracé de l'arc de cercle est plus facile à calculer ainsi.
 
Comme précédemment, il suffit d'appeler la fonction ''cercles([1,2])'' suivie d'un ''stroke()'' pour voir apparaître les cercles de Ford:
 
===Tracé===
 
<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="rgb(200,0,0)";
pinceau.fillStyle="Orange";
pinceau.beginPath();
function cercles(f){
if (f[1]<20){
pinceau.moveTo(800*f[0]/f[1],0);
pinceau.arc(800*f[0]/f[1],400/f[1]/f[1],400/f[1]/f[1],-Math.PI/2,3/2*Math.PI,true);
pinceau.stroke();
cercles(fils(f));
cercles(fille(f));
pinceau.fill();
}
}
cercles([1,2]);
pinceau.stroke();
</script>
 
</canvas>
<br/>
</body>
</html>
</source>
 
=Arcs de cercle=
 
==Pavages du plan hyperbolique==
 
Les droites et segments hyperboliques sont représentés dans le [[w:Disque de Poincaré|disque de Poincaré]] par des arcs de cercle. La balise ''canvas'' est donc particulièrement adaptée à leur tracé. Ce qui est laissé ici en exercice.
 
==Spirale de Fibonacci==
 
Avec des arcs de cercle, on peut faire des dessins assez réguliers comme des rosaces ou la ''spirale de Fibonacci''. Celle-ci fera son apparition dans le [[Programmation objet et géométrie/Les rectangles de canvas|prochain chapitre]].