Triangle équilatéral et triangle de Reuleaux

programmé en javascript - canvas - html5

Canvas n'est pas compatible avec votre navigateur - Your browser does not support HTML5 canvas

Qu'est-ce que le triangle courbe de Reuleaux

Code javascript

// Copyright Bernard Langellier 14-02-2017
var canvas = document.getElementById('reuleauxJS');
if (canvas.getContext) {

var ctx=canvas.getContext('2d');
var h = Math.sin(Math.PI/3)*canvas.height;// Valeur de la hauteur

// Coordonnées  x y à partir du centre de gravité.
La rotation se fera à partir de ce point situé 
à mi-largeur du canvas et au 2/3 de la hauteur du triangle :
ctx.translate(canvas.width/2,2*h/3);

// Je dessine arc et côté :
function arcCote(){

// 1) Je dessine un côté du triangle classique
ctx.beginPath();
ctx.lineWidth="1"; // Épaisseur du trait
ctx.moveTo(-canvas.width/2,h/3); // Départ du trait
ctx.lineTo(canvas.width,h/3); // Arrivée du  trait
ctx.stroke();
ctx.closePath();

// 2) Je dessine un côté courbe du triangle de Reuleaux
ctx.beginPath();
ctx.strokeStyle="black"; // Couleur de l'arc
ctx.lineWidth="2"; // Épaisseur du trait
ctx.arc(0, -2*h/3, canvas.width, Math.PI/3, 2*Math.PI/3);
ctx.stroke();
ctx.closePath();
}

// J'opère une rotation de 120° 2 fois :
function reuleaux(){
arcCote();
ctx.rotate(2*Math.PI/3);
arcCote();
ctx.rotate(2*Math.PI/3);
arcCote();
}
}

Pour faire ce programme le plus court possible...

... il faut savoir :
1) que le centre de gravité d'un triangle équilatéral est situé au 2/3 de la hauteur ;
2) que cette hauteur a pour valeur sinus(60°) x côté ;
3) que le triangle équilatéral a une symétrie d'ordre 3 dont l'axe est le centre de gravité.
En conséquence, il suffit de programmer un côté du triangle équilatéral et d'opérer 2 fois une rotation de 120°.
Ce qui vaut pour le triangle équilatéral classique vaut aussi pour le triangle courbe de Reuleaux.

Coin technique