Re: moving nodes of a mesh

Thanks Juergen (and David one more time),

It is indeed exactly what I was seeking for. I hope reference points
(or something similar) would one day be included in SVG.

Thanks you one more time for all those precisions.

Olivier.

PS: Unfortunately, I'm not near Pittsburgh at all. Let both of you
have a nice conference.

On Wed, Sep 23, 2015 at 12:28 AM, Juergen Roethig
<roethig@dhbw-karlsruhe.de> wrote:
> Hello Olivier, hello all,
>
> Am 21.09.15 um 22:51 schrieb olivier pantz:
>
>>
>> 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).
>
>
> The solution to your problem would be "reference points" in SVG. Such things
> had been discussed few times in the context of "connectors" on the SVG list,
> but unfortunately, connectors (or just reference points - one would not need
> special connectors at all) are neither part of the existing SVG 1.1 standard
> nor (actually) planned to be included in the upcoming SVG 2, although there
> were some statements that some proposal would be prepared for that.
>
> You might read more about one proposal for "connectors" (which is indeed a
> proposal for reference points) on
>  http://jroethig.de/geolog/connector.html
> The page also includes links to some messages made on the mailing list as
> well as other proposals (which are more like proposals for "connectors").
>
> And if you would like to see some working example made with the help of that
> syntax extension and a very rudimentary prototypical implementation (via
> XSLT and JavaScript), you might have a look at
>  http://jroethig.de/geolog/testmesh.xml
> Then, your example reads like
>
> <?xml version="1.0" encoding="UTF-8" ?>
> <?xml-stylesheet type="text/xsl" href="connector2svg-js.xsl" ?>
> <jr:svg xmlns="http://www.w3.org/2000/svg"
> xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:jr="http://jroethig.de/svg"
> version="1.1" width="800" height="800" viewBox="-100 -100 200 200">
> <title>Example for using reference points in a mesh</title>
> <defs>
> <jr:script />
> <script type="text/javascript">
> <![CDATA[
> var i=0;
> function animate() {
>  i=i+1;
>  var thiselement = document.getElementById("node2group");
>  thiselement.setAttributeNS(null, "transform",
> "translate("+50*Math.sin(0.1*i)+","+25*Math.cos(0.1*i)+")" );
>  setTimeout( function() { needcorrection(true); correctcoordinates(); }, 5
> );
>  setTimeout( function() { animate(); }, 100 );
> }
> ]]>
> </script>
> </defs>
> <g transform="scale(1)" style="stroke: red; stroke-width: 1px; fill: blue;">
> <jr:point refid="node1" point="0,0" />
> <g id="node2group" transform="translate(0,0)"><jr:point refid="node2"
> point="10,0" /></g>
> <jr:point refid="node3" point="10,10" />
> <jr:point refid="node4" point="0,10" />
> <path id="triangle1" jr:d="M refpoint(node1) L refpoint(node2) L
> refpoint(node3) L refpoint(node1)" onclick="animate();" />
> <path id="triangle2" jr:d="M refpoint(node4) L refpoint(node2) L
> refpoint(node3) L refpoint(node4)" />
> </g>
> </jr:svg>
>
> The JavaScipt part above is the animation (don't know whether my prototype
> would cope with SVG declarative animation - probably not). And that's done
> via a transform of a group containing the relevant point - at the time the
> JavaScript is performed, the <jr:point> object representing the reference
> point is no longer existant, because it is replaced via XSLT with some
> <use>, so I can no longer change its coordinates directly. But nevermind,
> the principle is shown, and if reference points would get included in SVG
> some time, you would not need to mind such details ...
>
> BTW, if you are accidentally near Pittsburgh, you might attend the Graphical
> Web Conference 2015 and listen to my talk about reference points which takes
> place tomorrow (Wednesday) at 14:30 ... see
>  https://www.graphicalweb.org/2015/#presentation_19
> I don't know why David Dailey did not mention "reference points" in his
> reply to your answer, since he should be pretty familiar with that
> conference and the topics/talks to take place, then ;-)
>
> Best regards,
>
> Juergen Roethig
>

Received on Wednesday, 23 September 2015 04:04:04 UTC