En réalité, canvas n'a pas de cercles! Cependant il a des arcs de cercle, et pour tracer un cercle, il suffit de tracer un arc allant de 0 radians à 2π radians. La méthode arc de l'objet canvas accepte 6 arguments

L'abscisse du centre
L'ordonnée du centre
Le rayon
L'angle de départ (0 pour un cercle complet)
L'angle d'arrivée (2*Math.PI pour un cercle complet)
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 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 le chapitre 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 cercles de Ford, une des plus simples parmi les fractales basées sur des cercles (en réalité ce sont des horocycles mais on ne va pas chipoter).

Cercles de Ford

Fractions

Les fonctions sur les fractions (fille et fils) sont les mêmes que dans le 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

pinceau.strokeStyle="rgb(200,0,0)";
pinceau.fillStyle="Orange";

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:

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();
	}
}

On remarque que chaque cercle est tracé de -π/2 à 3π/2 (au lieu des classiques 0 et 2π); 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é

<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>

Arcs de cercle

Pavages du plan hyperbolique

Les droites et segments hyperboliques sont représentés dans le disque de Poincaré par des arcs de cercle. La balise canvas est donc particulièrement adaptée à leur tracé. Par exemple des pavages hyperboliques...

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 prochain chapitre.

Programmation objet et géométrie/Les cercles de canvas

Sections