RE: moving nodes of a mesh

Someone from the group here can give a more direct (and accurate) answer, I'm sure though the forum for discussion of "how-to" would probably be svg-developers at Yahoo, or Stack Exchange (though you may need the pocket guide to SE-dialect before your question will be understood there). But I worked with some folks at CERN a few years ago on a related issue for systems of Partial Differential Equations -- trying to keep the gradient normals at edges of grids continuously differentiable) and have tried to keep afoot of goings on from a declarative perspective. 

a) you might try something sorta like this (what's done with the mouse could probably be done declaratively) http://srufaculty.sru.edu/david.dailey/svg/clipdrag12.svg 
b) I'd suggest looking into D3.js -- I think Mike Bostock and friends probably have a mesh-deformer already working there. I would be surprised if they don't. It does require scripting, though, and it seems like you sorta need to build the mesh from data, rather than from existing SVG, as I recall. -- may be wrong about that. I know they have code for Voronoi diagrams, and the Delauney triangulation is the graph theoretic dual of a Voronoi diagram.
c) each of the triangles could be warped declaratively by animating the d attribute of the paths. That each coordinate in the grid is shared by numerous triangles would make for a lot of redundancy. Jean Claude Moissinac of Institut Paris Telecom has been proposing a solution for <superpath> that would, I think, tremendously reduce the redundancy here, by allowing regions which share partial borders to be composed of unions of various border segments (properly oriented, of course).
d) There are some proposals coming forth from Canon (Nikos Andronikos) and Inkscape (Tavmjong Bah) which would allow for control points to be inserted (meshlike, or otherwise) into gradients that are neither radial nor linear, but more shape-comformant. Such non-linear gradient could then be used to deform the mesh via a feDisplacement filter.(which isn't working too well when animated in Chrome last I looked)
e) SMIL has had a rocky life within SVG. Some have viewed it as heretical, threatening the financial stability of programmers, perhaps, and some have viewed it as unpopular, hence vulnerable like a weak antelope in the herd. Others have argued that it is redundant with CSS, and that behavior, after all, is really just appearance. At any rate, SMIL seems to have an uncertain future within the recommendations coming forth these days. However, it remains to be determined how paths might be reshaped declaratively using CSS -- I understand it is actively being discussed, so while it might break for a while in certain browsers, some other approach might emerge in some misty future. I usually like my stuff to live for a decade or more, but so many web sites (the ones standards seem to be written for) are disposable within a year. I'll bet that the folks at Boeing are not so interested in that approach -- just a guess.
f) so the way I'd approach the problem, if not using script (though D3 would probably be the way to go nowadays) would be to write a bunch of <animate> tags -- one per triangle that simply aligns the endpoints of triangles which share points. -- a lot of hand work. 
g) given that some of your mesh's pathways are linear -- you might get a kick out of the software described here: http://cs.sru.edu/~ddailey/Parisien.html it takes a bunch of lines and decomposes the space between lines into polygons, such that those polygons can thence be filled with web content: pictures and text and the like. It was surprisingly difficult to do!

Cheers
David

-----Original Message-----
From: olivier.pantz@gmail.com [mailto:olivier.pantz@gmail.com] On Behalf Of olivier pantz
Sent: Monday, September 21, 2015 4:51 PM
To: www-svg@w3.org
Subject: 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 12:47:19 UTC