curve-matcher
Advanced tools
Curve matching using Fréchet distance and Procrustes analysis in JS
Weekly downloads
Changelog
Readme
A Javascript library for doing curve matching with Fréchet distance and Procrustes analysis.
Curve matcher can be installed via NPM or Yarn
yarn add curve-matcher
or
npm install curve-matcher
The core of curve-matcher
is a function called shapeSimilarity
which estimates how similar the shapes of 2 curves are to each other, returning a value between 0
and 1
.
Curves are defined as arrays of points of x
and y
like below:
const curve = [{x: 2, y: 1.5}, {x: 4, y: 3}, ... ];
calculating similarity between 2 curves is as simple as calling:
import { shapeSimilarity } from 'curve-matcher';
// 1 means identical shape, 0 means very different shapes
const similarity = shapeSimilarity(curve1, curve2);
shapeSimilarity
automatically adjusts for rotation, scale, and translation differences between so it doesn't matter if the curves are different sizes or in different locations on the screen - as long as they have the same shape the similarity score will be close to 1
.
You can further customize the accuracy of the shapeSimilarity
function by changing estimationPoints
(default 50) and rotations
(default 10). Increasing these will improve accuracy, but the function will take longer to run.
// higher accuracy, but slower
shapeSimilarity(curve1, curve2, { estimationPoints: 200, rotations: 30 });
// lower accuracy, but faster
shapeSimilarity(curve1, curve2, { estimationPoints: 10, rotations: 0 });
You can also restrict the range of rotations that are checked using the restrictRotationAngle
option. This option means the shapeSimilarity function will only check rotations within +- restrictRotationAngle
radians. If you'd like to disable rotation correction entirely, you can set checkRotations: false
. These are shown below:
// Only check rotations between -0.1 π to 0.1 π
shapeSimilarity(curve1, curve2, { restrictRotationAngle: 0.1 * Math.PI });
// disable rotation correction entirely
shapeSimilarity(curve1, curve2, { checkRotations: false });
Internally, shapeSimilarity
works by first normalizing the curves using Procrustes analysis and then calculating Fréchet distance between the curves.
Procrustes analysis attempts to translate both the curves to the origin and adjust their scale so they're the same size. Then, it rotates the curves so their rotations are as close as possible.
In practice, Procrustes analysis has 2 issues which curve-matcher works to address.
First, it's very dependent on how the points of the curve are spaced apart from each other. To account for this, shapeSimilarity
first redraws each curve using 50 (by default) points equally spaced out along the length of the curve. In addition, Procrustes analysis sometimes doesn't choose the best rotation if curves are not that similar to each other, so shapeSimilarity
also tries 10 (by default) equally spaced rotations to make sure it picks the best possible rotation normalization. You can adjust these parameters via the estimationPoints
and rotations
options to shapeSimilarity
.
If you'd like to implement your own version of shapeSimilarity
there's a number of helper methods that are exported by curve-matcher
which you can use as well, discussed below:
Curve matcher includes an implemention of a discreet Fréchet distance algorithm from the paper Computing Discrete Fréchet Distance. You can use this function by passing in 2 curves, as below:
import { frechetDistance } from 'curve-matcher';
const dist = frechetDistance(curve1, curve2);
As with shapeSimilarity
, curves are in the format [{x: 2, y: 1.5}, {x: 4, y: 3}, ... ]
.
A caveat of discreet Fréchet distance is that the calculation is only as accurate as the length of the line segments of the curves. That means, if curves have long distances between each of the points in the curve, or if there's not many points in the curve, the calculation may be inaccurate. To help alleviate this, Curve matcher provides a helper method called subdivideCurve
which takes a curve and splits up line segments in the curve to improve the accuracy of the Fréchet distance calculation. This can be used as below:
import { frechetDistance, subdivideCurve } from 'curve-matcher';
// subdivide the curves so each segment is at most length 0.5
const dividedCurve1 = subdivideCurve(curve1, { maxLen: 0.5 });
const dividedCurve2 = subdivideCurve(curve2, { maxLen: 0.5 });
// now, the frechet distance is guaranteed to be at most off by 0.5
const dist = frechetDistance(dividedCurve1, dividedCurve2);
Curve matcher also exports a few methods to help with Procrustes analysis. However, before running these it's recommended that curves be rebalanced so that the points of the curve are all equally spaced along its length. This can be done with a function called rebalanceCurve
as below:
import { rebalanceCurve } from 'curve-matcher';
// redraw the curve using 50 equally spaced points
const balancedCurve = rebalanceCurve(curve, { numPoints: 50 });
Then, to normalize scale and translation, pass the curve into procrustesNormalizeCurve
as below:
import { procrustesNormalizeCurve, rebalanceCurve } from 'curve-matcher';
const balancedCurve = rebalanceCurve(curve);
const scaledAndTranslatedCurve = procrustesNormalizeCurve(balancedCurve);
There's also a function provided called procrustesNormalizeRotation
to help normalize rotation using Procrustes analysis. It should be noted that this may give odd results if the 2 curves don't have a relatively similar shape to each other. Make sure that the curves are already rebalanced and have scale and translation normalized before using this function. This function can be used as below:
import {
procrustesNormalizeCurve,
procrustesNormalizeRotation,
rebalanceCurve
} from 'curve-matcher';
// first rebalance and normalize scale and translation of the curves
const normalizedCurve1 = procrustesNormalizeCurve(rebalanceCurve(curve1));
const normalizedCurve2 = procrustesNormalizeCurve(rebalanceCurve(curve2));
// rotate normalizedCurve1 to match normalizedCurve2
const rotatedCurve1 = procrustesNormalizeRotation(
normalizedCurve1,
normalizedCurve2
);
You can read more about these algorithms here: https://en.wikipedia.org/wiki/Procrustes_analysis
You can find the full API and docs at https://chanind.github.io/curve-matcher
Curve matcher is released under a MIT License.
Contributions are welcome! These steps will guide you through contributing to this project:
Fork the repo
Clone it and install dependencies
git clone https://github.com/chanind/curve-matcher yarn install
Make and commit your changes. Make sure the commands yarn run build and yarn run test:prod are working.
Finally send a GitHub Pull Request with a clear list of what you've done. Make sure all of your commits are atomic (one feature per commit). Please add tests for any features that you add or change.
Curve matcher was extracted from stroke matching code in Hanzi Writer.
Procrustes analysis algorithms are from https://en.wikipedia.org/wiki/Procrustes_analysis
Discrete Fréchet distance algorithm is from Computing Discrete Fréchet Distance
Happy curve matching!