{"action":"closed","issue":{"url":"https://api.github.com/repos/greensock/GreenSock-JS/issues/121","labels_url":"https://api.github.com/repos/greensock/GreenSock-JS/issues/121/labels{/name}","comments_url":"https://api.github.com/repos/greensock/GreenSock-JS/issues/121/comments","events_url":"https://api.github.com/repos/greensock/GreenSock-JS/issues/121/events","html_url":"https://github.com/greensock/GreenSock-JS/issues/121","id":109807527,"number":121,"title":"Greensock MorphSVG plugin (beta) is implementing the morphing algorithm wrong","user":{"login":"Emasoft","id":713559,"avatar_url":"https://avatars.githubusercontent.com/u/713559?v=3","gravatar_id":"","url":"https://api.github.com/users/Emasoft","html_url":"https://github.com/Emasoft","followers_url":"https://api.github.com/users/Emasoft/followers","following_url":"https://api.github.com/users/Emasoft/following{/other_user}","gists_url":"https://api.github.com/users/Emasoft/gists{/gist_id}","starred_url":"https://api.github.com/users/Emasoft/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Emasoft/subscriptions","organizations_url":"https://api.github.com/users/Emasoft/orgs","repos_url":"https://api.github.com/users/Emasoft/repos","events_url":"https://api.github.com/users/Emasoft/events{/privacy}","received_events_url":"https://api.github.com/users/Emasoft/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":2,"created_at":"2015-10-05T14:24:51Z","updated_at":"2015-10-06T05:24:53Z","closed_at":"2015-10-06T05:24:53Z","body":"As I can see from this video:\r\nhttps://www.youtube.com/watch?v=Uxa9sdaeyKM \r\nthe Greensock MorphSVG plugin (beta) 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.\r\nYou 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. \r\nThen 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.\r\nAn example of triangulation implementation can be seen here: https://github.com/mattdesl/svg-mesh-3d and here: https://github.com/mattdesl/svg-path-contours .\r\nOnce 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.\r\nA good paper on the subject is this: “Intersection-Free Morphing of Planar Graphs” ( http://ftp.cs.arizona.edu/~kobourov/gmorph.pdf ).\r\nAnother 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 ).\r\nHere are some videos of the latter morphing algorithm at work: \r\nhttp://youtu.be/EHBdTD5EA6M\r\nhttp://youtu.be/0DDC3fbwtIw\r\nIf you decide to do morphing, please do it correctly. Thanks!\r\n"}}