Annonce

>>> Bienvenue sur codelab! >>> Première visite ? >>> quelques mots sur codelab //// partage de liens //// une carte des membres//// (apéros) codelab


#1 2017-02-06 05:47:17 Javascript rotation html5

langellier
nouveau membre
Lieu: Alençon
Date d'inscription: 2017-02-06
Messages: 2
Site web

Javascript rotation html5



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)


Retraité javascripteur normand

Hors ligne

 

#2 2017-02-06 15:29:51 Re : Javascript rotation html5

jojolaglaise
membre
Lieu: Basse Normandie
Date d'inscription: 2014-04-20
Messages: 96
Site web

Re: Javascript rotation html5



citation :

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).
[...]
Dans l'exemple sur ma page j'ai volontairement programmé des vitesses différentes, sinonça ne tourne pas ; je ne sais pas pourquoi.

Salute,

Je ne suis pas sur de bien comprendre: si deux espaces (dont l'un est inclus dans l'autre) tournent dans des sens opposés et à la même vitesse, c'est normal que l'image ne tourne pas, non? Les deux vitesses s'annulent?

La composée des deux fonctions de rotation symétriques entre elles d'éléments du même groupe s'annulent où je dis une bêtise?  :-o

Hors ligne

 

#3 2017-02-06 23:47:12 Re : Javascript rotation html5

langellier
nouveau membre
Lieu: Alençon
Date d'inscription: 2017-02-06
Messages: 2
Site web

Re: Javascript rotation html5



Si on regarde bien cette animation :
http://demonstrations.wolfram.com/ARota … xTriangle/
ou encore celle-ci en gif animé :
http://static.blogs.sciencesetavenir.fr … eaux.2.gif
il y a deux mouvements de rotation :
Le triangle tourne sur lui-même dans un sens, mais le centre du triangle se déplace sur un cercle dans l'autre sens... comme "terre-lune" qui tourne sur elle-même mais qui tourne aussi autour du soleil.
http://bernard.langellier.pagesperso-or … olaire.htm
Voici un autre exemple :
http://bernard.langellier.pagesperso-or … lusion.htm
Ici pas de problème, car un vitesse angulaire est le double mais inverse de l'autre.
Si je programme deux vitesses angulaires égales mais inverses, une des rotations est supprimée.

Réaliser ces rotations en javascript est bien plus intéressante que les gifs animés, pour au-moins deux raisons :
1) ces animations js sont bien plus légères (10Ko au lieu de 100);
2) on peut les arrêter et les relancer ou encore les modifier de façon dynamique.


Retraité javascripteur normand

Hors ligne

 

fil rss de cette discussion : rss

Pied de page des forums

Powered by FluxBB

codelab, graphisme & code : emoc / 2008-2017