SVG: Animer un doigt robotique

La représentation du doigt d'un robot répond aux commandes de l'utilisateur.

Explications...

1) On charge l'image en mémoire

<div style="display:none">
  <iframe id="ifinger" width="600" height="400" src="code/finger.svg"></iframe>
</div>

Pour pouvoir plier soit le bout du doigt, soit les deux dernières phalanges, on regroupe les phalanges dans une balise <g>:

<g id="finger" stroke-width="2" stroke="#000000" fill="url(#metal)">
  <rect id="three" x="340" y="2" width="160" height="100" />
  <g id="onetwo"> 
    <rect id="two" x="180" y="2" width="140" height="100" />
      <g id="one">  
        <path id="svg_2" d="m160,102c-300,-100 20,-100 0,-100"/>   
        <line y2="0" x2="160" y1="100" x1="160"  />
      </g>
    <circle cx="170" cy="50" r="30" />
  </g>
  <circle cx="330" cy="50" r="30" />  
</g>

Le premier groupe correspond au doigt entier. On fait référence a cette balise <g> pour faire bouger le doigt entier.

On aurait aimer conserver la définition des gradients (qui se fait hors du groupe) dans l'animation, mais pour ce faire on devrait référencer l'image svg entière: cela fonctionne avec Firefox, mais pas avec Chrome ou IE. On se contentera donc d'un dessin linéaire.

Le second groupe d'ID "onetwo" regroupe les deux dernières phalanges.

Ce second groupe comprend un autre groupe, d'ID "one" qui représente le bout du doigt.

2) On définit une surface de dessin

<svg id="anim" width="600" height="400"></svg>

2) On place le doigt dans la surface

L'attribut transform avec la propriété translate le positionne en x=50 et y=50.

var ifinger;
var one;
var two;
var three;

function start()
{
  var anim = document.getElementById("anim");
  var ifr = document.getElementById("ifinger");
  var graphics = ifr.contentWindow || ifr.contentDocument;
  ifinger = graphics.document.getElementById("finger");
  ifinger.setAttribute("transform", "translate(50, 50)");
  anim.appendChild(ifinger);
  one = document.getElementById("one");
  two = document.getElementById("onetwo");
}

window.onload=start;

4) On définit en JavaScript les actions possibles

Se sont:

function slant() {
  ifinger.setAttribute("transform", "translate(50, 50) rotate(-40,500,0)");
}

function unslant() {
  ifinger.setAttribute("transform", "translate(50, 50)");
}

function slantOne() {
  one.setAttribute("transform", "rotate(-40, 160, 0)")
}

function slantTwo() {
  two.setAttribute("transform", " rotate(-40, 320, 0)")
}

function restart() {
  ifinger.setAttribute("transform", "translate(50, 50)");
  one.setAttribute("transform", "rotate(0, 0, 0)");	
  two.setAttribute("transform", "rotate(0, 0, 0)");	
}

Ces fonctions sont associées aux boutons de l'interface.

Elles sont identiques à celle que l'on utiliserait dans un montage électronique. Des paramètres supplémentaires peuvent être ajoutés comme le degré de pression, la vitesse. On pourra aussi les représenter en développant le présent code.

Pour télécharger le code source et le fichier SVG, cliquez ci-dessous:

Le fichier finger.html est généré à partir du fichier finger.sol avec la commande: solj -w finger. Mais on n'utilise pas le langage Scriptol dans cette démo.

La prochaine étape consistera à réunir plusieurs doigts pour former une main entière, puis les animer, et faire accomplir à la main une tâche, comme écrire par exemple.