Tech things and such
Article / Note
2016/01/20

Engrenages interactifs

Simulation mécanique en canvas HTML. Cliquez un engrenage pour modifier ses caractéristiques. J'en avais fait un avec Quartz Composer il y a longtemps. Développer de tels mécanismes en code est définitivement plus concis et plus clair que manipuler des patchs et tirer des fils ! Particulièrement si on veut avoir la possibilité d'ajouter ou de retrancher des engrenages dynamiquement.

Nombre de dents

Angle

On pourrait potentiellement ajouter et retrancher des engrenages sur l'arbre. J'ai un objet Gear qui possède une info sur son Gear parent :

var gear031 = {parentGear:gear03, ndents:9, angle:gear03.angle + Math.PI * 60, selected:false, ox:0, oy:0, radius:10, offset:0};

Chaque changement sur un engrenage oblige de recalculer l'arbre. Il suffit de recalculer les éventuels engrenages fils. Dans la démo ci-dessous tout est recalculé.

Le calcul des vitesses de rotation est assez facile mais celui des offsets de rotation (de la phase en fait) l'est un peu moins. Les offsets doivent être propagés le long de chaque branche de l'arbre en étant alternativement ajoutés ou retranchés à chaque changement de sens de rotation. Ceci est nécessaire pour garder les dents bien alignées.

>> Réagir à cet article