Search In
• More options...
Find results that contain...
Find results in...

# Path comparison with MorphSVGPlugin?

## Recommended Posts

First, I want to say thanks for all the hard work put into the greensock tools. It's fantastic.

It might be a stretch, but I was wondering if the MorphSVGPlugin might have some method for calculating the difference between 2 svg paths.

Essentially, I want to calculate how closely 2 shapes match. Say for example I have a 200x200 square, 300x200 rectangle, and 300x300 star.

Comparing the square and rectangle would return a higher accuracy value than comparing the square and star, since the square and rectangle paths match more closely, so to speak. Currently, im just comparing the area of the shapes, but it can only get me so far and I feel a path comparison would be more accurate.

Perhaps there are methods in the precompiler that I can utilize? Any way to measure the total offset of the path after it morphs?

Any pointers are much appreciated!

##### Share on other sites

Hm, I can't think of an easy way, no. Technically there's a pathFilter() method that'd spit back the two shapes with matching numbers of anchors in a cubic bezier-based string which I suppose you could loop through and try to compare stuff, but I don't see a simple way to deliver what you're asking for. Maybe figuring out the total distance that each corresponding point must travel between the two shapes, but even that isn't a perfect way to do this (in my opinion). You'd have to figure out the center point for each shape and offset all the measurements accordingly (otherwise, if one shape is in the upper left corner and the other is in the lower right, the distances are artificially far because I assume you just want to know the overall shape differences, not the absolute distance that each anchor travels).

I wish I had an easy answer for ya. Maybe someone else has an idea.

• 1
##### Share on other sites

I'm repositioning/scaling the shapes so that shouldn't be a problem, however, finding the correct shapeindex could be a headache since I'm actually comparing randomly drawn paths. Still,  looping through and comparing anchor points sounds like its on the right track. I appreciate the insight.

Here's my current codepen.

Right now its just copying the svg to a canvas and doing an imagedata comparison. Again, not ideal, but maybe itll come in handy for someone else.

• 2
##### Share on other sites

To calculate the difference between two shapes, Clipper might work better than comparing pixel data. Well, it should at least be faster, and work in IE.

If you want to take that to the next level, gesture recognition might be another possibility. \$1 recognition is probably the most basic/common.

Then you have machine learning, like with Google's Quick Draw game. I think that is using Paper.js, which can also do boolean operations like Clipper.

• 5
##### Share on other sites

I'll definitely look into those. Now that you mention it, I do recall seeing the machine learning demos generate those weighted scores for its guesses. Never occurred to me that I could go that route. Thanks a ton OSUblake.

• 1
##### Share on other sites

This issue reminded me of

Basically you draw a simple shape (using your mouse) and it will get matched to similar shapes.

Try drawing a house or a car.

If you click on the ? in footer you will see that it mentions google's QuickDraw which Blake referenced above.

• 3
##### Share on other sites

That's really neat! I haven't seen that experiment.