Jump to content
Search Community

Fmuaddib

Members
  • Posts

    2
  • Joined

  • Last visited

Everything posted by Fmuaddib

  1. As I can see from this video: https://www.youtube.com/watch?v=Uxa9sdaeyKM the Greensock MorphSVG plugin is implementing the morphing algorithm wrong. If you interpolate the curves only, it will give rise to unwanted intersections and produce an unintuitive tween, especially for closed shapes. At the moment the plugin produces ugly self-intersections during the tween morphing animations. A correct approach is to find a correspondence between the interiors of the shapes and interpolate that. If you consider the two shapes as piecewise linear, you can triangulate both and find a correspondence b/w the triangles and eventually interpolate the triangles. You can add points at close intervals on the curve to make it 'almost' piecewise linear. The you do the same with the destination curve, until both origin and destination have the same number of points. Then any standard triangulation algorithm can be applied to the enhanced set of points. For best results you can use “Constrained Delaunay Triangulation”, or “Sorted Ear Clipping” (details can be found here: http://www.cosy.sbg.ac.at/~held/projects/triang/triang.html and here: http://www.geom.uiuc.edu/~samuelp/del_project.html ). The latter is faster and easier to implement. An example of triangulation implementation can be seen here: https://github.com/mattdesl/svg-mesh-3d and here: https://github.com/mattdesl/svg-path-contours . Once you have the triangulated curve, then you need to choose the best possible triangle (the one whose angles are not differing much) at each step to interpolate between the points. A good paper on the subject is this: “Intersection-Free Morphing of Planar Graphs” ( http://ftp.cs.arizona.edu/~kobourov/gmorph.pdf ). Another paper, more advanced algorithm because it can morph even self-overlapping curves, is this one: “Tweening Boundary Curves of Non-simple Immersions of a Disk” ( http://www.ics.uci.edu/~gopi/SamplePubs/Tweening.pdf ). Here are some videos of the latter morphing algorithm at work: http://youtu.be/EHBdTD5EA6M http://youtu.be/0DDC3fbwtIw If you decide to do morphing, please do it correctly. Thanks!
  2. I'm using Dart ( www.dartlang.org ) for my websites, and it's awesome. I'd like to use GSAP in my projects. Is there a wrapper or a port of GSAP for Dart? Specifically I need to apply GSAP tweening animations to PolymerDart elements. Thank you in advance.
×
×
  • Create New...