Morphing shapes in canvas without having the svg

[shy_seagull]

Hi there,

I finally decided to shift to canvas based development for one of my project since the morphing of large inline-SVGs had a pretty nifty impact on performance.

Trying to follow the documentation I just couldn’t get it working. In the examples like this one 

See the Pen WYWZab by GreenSock (@GreenSock) on CodePen

 the author is using the path data of the SVG that is being rendered in the HTML. I however only want to use canvas and have the path data of the shapes stored as strings in the JavaScript file. 
 

I have taken the draw function from this example but am puzzled how my gsap.to() function should look like, since I don’t have an html path element on the page that I can reference. I realize the code in my codepen is utterly wrong, it’s just to demonstrate what I would like to do.

 

Then I also found this 

See the Pen EZNMEZ by osublake (@osublake) on CodePen

 which looks a lot easier but doesn’t work the same with GSAP 3 anymore.

 

Thank you!

 

 

 

See the Pen ZEBjLZq by lkssmnt-the-lessful (@lkssmnt-the-lessful) on CodePen

[ZachSaucier]

28 minutes ago, shy_seagull said:

doesn’t work the same with GSAP 3 anymore

What do you mean? Switching out the files it works great for me

See the Pen BaQPRNv?editors=0010 by GreenSock (@GreenSock) on CodePen

[shy_seagull]

Oh god, I guess you are right. Something else must’ve gone wrong the first time I tried. It works now!!
I guess this is still the cleanest way to do it?

[ZachSaucier]

13 minutes ago, shy_seagull said:

I guess this is still the cleanest way to do it?

As far as I know  

[Shrug ¯\_(ツ)_/¯]

@ZachSaucier I don't find pathFilter in the docs or blog? I find convertToPath.

 

I was looking at this thread earlier and started to get a bit confused on that, can you please clarify.  😆

[ZachSaucier]

@GreenSock should pathFilter be in the docs?

[Shrug ¯\_(ツ)_/¯]

This was really bugging me. 😂

 

I finally found something regarding the pathFilter method which has been used across countless examples by many users including myself. Though when this conversion thread came up my mind went into a complete brain fog trying to find information on it. Was starting to think it was from v2 since not found in v3. Then confused altogether when I could not find it in either, aside from examples.

 

But then @OSUblake solved the mystery.

 

 

He also mentions elsewhere about the phenomenon.

On 10/24/2017 at 6:10 AM, OSUblake said:

If you ever look through the source code or inspect GSAP objects in your console, you'll find lots of undocumented stuff. Jack likes to keep stuff hidden until he sees people have a need for it.

 

@GreenSock also mentions here the basic logic behind why some things are not being openly revealed. Still this really seems useful enough to get a mention or call out somewhere. Makes me dream about how many more undocumented power gems of GSAP are lurking out there.

 

[OSUblake]

The pathFilter method is kind of confusing as it mutates the data, and requires extra work to morph between more than 2 shapes.

 

var morphData = [shape1, shape2];

// mutates `morphData` array... very confusing
MorphSVGPlugin.pathFilter(morphData);

 

I think most people should just use this method. Longer, yes, but it gets the job done, and works in every browser. Path2D won't work in IE and non-chromium Edge.

 

function draw(rawPath, target) {
  var l, segment, j, i;
  ctx.clearRect(0, 0, size, size);
  ctx.fillStyle = target.style.fill;
  ctx.beginPath();
  for (j = 0; j < rawPath.length; j++) {
    segment = rawPath[j];
    l = segment.length;
    ctx.moveTo(segment[0], segment[1]);
    for (i = 2; i < l; i+=6) {
      ctx.bezierCurveTo(segment[i], segment[i+1], segment[i+2], segment[i+3], segment[i+4], segment[i+5]);
    }
    if (segment.closed) {
      ctx.closePath();
    }
  }
  ctx.fill("evenodd");
}

 

[GreenSock]

@OSUblake I'm not sure I follow - don't those methods do totally different things? 

 

The purpose of MorphSVGPlugin.pathFilter() is to take two strings of path data and match the number of points between them so that they can be animated smoothly. You're right - it does mutate the Array that's passed in, but there were some internal reasons for that and I never really intended to expose that method publicly (hence it's not in the docs). 

 

Frankly, I'm on the fence about whether or not to add it to the docs. Maybe I'll reroute things to create a wrapper that doesn't mutate the Array for the public-facing version. I'm open to suggestions. 

[OSUblake]

SVG does not need to be in the HTML. You can make a proxy element. 

 

See the Pen 7b5407838dbe9e9afa56bde07a782c26 by osublake (@osublake) on CodePen

 

 

 

 

[OSUblake]

5 minutes ago, GreenSock said:

Frankly, I'm on the fence about whether or not to add it to the docs. Maybe I'll reroute things to create a wrapper that doesn't mutate the Array for the public-facing version. I'm open to suggestions. 

 

I think a wrapper that returns a new array would be nice. 

 

[GreenSock]

22 hours ago, OSUblake said:

I think a wrapper that returns a new array would be nice. 

What do you think of something like:

MorphSVGPlugin.normalizeStrings(pathData1, pathData2); // returns Array [newPathData1, newPathData2]

? 

 

Any better ideas for the name? 

[OSUblake]

Looks good, but I don't like the name Strings. And maybe have an options object for 3rd parameter?

 

MorphSVGPlugin.normalizeShapes(pathData1, pathData2, {
  shapeIndex: 3,
  map: "complexity"
});

 

 

[GreenSock]

13 hours ago, OSUblake said:

Looks good, but I don't like the name Strings.

Yeah, but the goal was to be consistent with other methods like .stringToRawPath() and rawPathToString() and also to give a clue about the data type that it works with. I wouldn't want people assuming they could pass in a RawPath, for example. See what I mean? In general, I do like the word "shapes" more - I just worry it's not as consistent.