Bonjour, je suis nouveau sur le forum et autodidacte en javascript.
J'ai créé quelques pages en html5 avec canvas. J'arrive à gérer des animations avec déplacements ou rotations simples.
Je me suis récemment intéressé au triangle de Reuleaux à l'origine du moteur rotatif :
http://bernard.langellier.pagesperso-or … uleaux.htm
Je n'ai pas de problème pour construire le triangle avec canvas.
Par contre je n'ai pas réussi à l'animer convenablement :
http://bernard.langellier.pagesperso-or … tation.htm
Je voudrais que le lieu géométrique des 3 sommets soit en quasi carré, comme expliqué sur le lien en bas de page.
Pour cela je dois réaliser une rotation dans le sens horaire d'une image elle-même en rotation dans le sens anti-horaire ou inversement, peu importe).
Les deux rotations doivent se faire à la même vitesse angulaire (mais inversées donc).
C'est là que ça bloque.
Dans l'exemple sur ma page j'ai volontairement programmé des vitesses différentes, sinonça ne tourne pas ; je ne sais pas pourquoi.

Voici le code qui devrait fonctionner :

function animation() {
ctx.clearRect(-canvas.width, -canvas.height, 2*canvas.width, 2*canvas.height); // efface le canevas
ctx.save();
// Rotation du triangle de Reteaux sur lui-même
var time = new Date();
ctx.rotate( ((2*Math.PI)/10)*time.getSeconds() + ((2*Math.PI)/10000)*time.getMilliseconds() );
// Axe de rotation décentré du triangle sur lui-même
ctx.save();
ctx.translate(0,y);
ctx.rotate( ((-2*Math.PI)/10)*time.getSeconds() + ((-2*Math.PI)/10000)*time.getMilliseconds() );
arcs();
ctx.restore();
ctx.restore();
t=setTimeout("animation()",100);
ctx.beginPath();
ctx.strokeStyle='black'; 
ctx.arc(0, 0,y, 0, 2*Math.PI); // Centre
ctx.stroke();
}

Voilà la question : comment faire pour programmer la rotation sur un cercle d'une figure elle même en rotation inverse ?
Merci à ceux qui prendront le temps de se plonger dans mon problème.

Dernière modification par langellier (2017-02-06 05:52:05)