Share Posted January 18, 2017 Carl brought up this canvas morphing demo I made... See the Pen RWeOWX by osublake (@osublake) on CodePen But it's kind of old, so I told him I would make an updated version because doing canvas morphing is much easier now. You no longer have to use an actual SVG path as a proxy to get the transformed path strings. There's an undocumented method that the precompile option uses (pathFilter), so you a can tap into that to get the transformed path strings. // Path strings var path1 = "M300,25l86.6,150H213.4Z" var path2 = "M500,23.92L524.72,74,580,82l-40,39,9.44,55.05-49.44-26-49.44,26L460,121,420,82l55.28-8Z"; // Data for the start and end paths var pathData = [path1, path2]; // Run it through the MorphSVGPlugin MorphSVGPlugin.pathFilter(pathData); Using the pathFilter method might seem awkward at first because it doesn't return anything. It mutates the array you pass into it with the transformed path strings... See the Pen 1754cdf8805e7061094036125958200d?editors=0011 by osublake (@osublake) on CodePen There are also some other things you can pass in the pathFilter method, like a shapeIndex and map type... MorphSVGPlugin.pathFilter(pathData, 6, "complexity"); The next step is to decide on how you want to tween the pathData. In the past I would convert the pathData strings into a bunch of arrays of numbers, and tween the arrays using the EndArrayPlugin, kind of like in this demo I made before the MorphSVGPlugin came out... See the Pen RPKdQz?editors=0010 by osublake (@osublake) on CodePen But that can get messy, and there's a much better solution with modern browsers, the Path2D object. It will allow you to use SVG paths directly inside of canvas. var path = new Path2D("M10 10 h 80 v 80 h -80 Z"); context.fill(path); And since GSAP can tween complex strings, we now have a pretty straightforward way to do morphing inside canvas! See the Pen EZNMEZ by osublake (@osublake) on CodePen However, there is one issue. There won't be any IE support for this, and the SVG constructor feature is currently broken in Edge. Hopefully that will get resolved soon.https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8438884/ So there you go. High-performance morphing using GSAP and canvas. Morphing 50 different shapes while using a blend mode. . See the Pen pRNYRM by osublake (@osublake) on CodePen 9 Link to comment Share on other sites More sharing options...
Share Posted January 18, 2017 Nice write up Blake, Thanks for sharing this goodness Link to comment Share on other sites More sharing options...
Share Posted January 18, 2017 That last demo is super sweet. Ran admirably on my phone. Link to comment Share on other sites More sharing options...
Author Share Posted April 25, 2017 Pixi particle emitter!!! See the Pen oWzVvb by osublake (@osublake) on CodePen Kinda hacked the plugin to draw on a canvas element. Probably not a good idea for production as that could easily break with future updates to the plugin. . 3 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now