moving nodes of a mesh

Hello all,

I couldn't found a really satisfying solution to my problem. I would
like to display, animate and color (I save this one for later) meshes
like the one attached to this email  (the svg script is not very
pretty... it is just to illustrate what I mean by mesh).

It is made of several triangles. Each triangle  have either one point,
one edge or nothing in common with another one. I follows that one
point of the mesh is shared by several triangles.

Its is not difficult to create the mesh.svg file (once you have the
list of triangles and there coordinates). But it is very redundant
(because the coordinates of one point  appears at several instances).
It is not a big issue for a static svg file (even if it makes it
weight more than necessary). But if you want to animate the svg file,
it became more tricky: Each time   a node of the mesh is moved, you
have to animate the corresponding coordinates in the path of every
triangles it belongs to. It is not impossible, but still challenging
and rather not clean.

I would like to define the nodes (for instance as circles) then to
define each edge as a line going from the center of one node to the
other. So I would like to do something like this
<svg>
<circle id="node1" cx="0" cy="0" r="0"/>
<circle id="node2" cx="10" cy="0" r="0"/>
<circle id="node3" cx="10" cy="10" r="0"/>
<circle id="node4" cx="0" cy="10" r="0"/>
<path id="triangle1" d="M #node1.cx #node1.cy L #node2.cx #node2.cy L
#node3cx node3.cy L #node1.cx #node1.cy"/>
<path id="triangle2" d="M #node4.cx #node4.cy L #node2.cx #node2.cy L
#node3cx node3.cy L #node4.cx #node4.cy"/>
</svg>

Assuming it was working (it doesn't),  animating node2  would animate
both triangles...
Is it possible to do something in the same spirit ?
(I know that using javascript could probably solve the issue... but if
someone has a svg/smil solution... it would be perfect).

Thanks,

Olivier.

Received on Tuesday, 22 September 2015 09:56:50 UTC