View on GitHub

Sketchy.js

Shape matching for mere mortals.

Download this project as a .zip file Download this project as a tar.gz file

Welcome to Sketchy.js.

Sketchy.js is a javscript library that can be used to do simple shape matching.

Our goal is to compare two shapes and assign a value based on their similarity. Are they exactly the same? 100%. Perfectly different? 0%. Vaguely-put, we consider a shape to be a 2D image made up of contours. Think of outlines, silhouettes, sketches, et cetera. This means that in most cases, texture, color, and even gray values are not relevant.

Currently, two algorithms have been implemented:
-Hausdorff Distance
-Shape Context Matching

Check out these demos below:

Compare Two Sketches
Learn the Alphabet
Solve the Equation
Character Recognition

Draw a letter in the box below and we'll tell you what it is!

Select an algorithm:

Draw here:
Best Result:   
Similarity:   

Next Best Result:   
Similarity:   
Clear
Submit

Sketchy.js can be used to help people practice drawing letters. This example could pair well with a pen-based tablet.

Select an algorithm:

Draw the letter: Q
New Letter
Clear
Submit
Accuracy:   

In this example, the user must simply complete the equation. Equations are randomly gererated and then validated to ensure there's no ambiguity and that the equation is easy to solve.

Select an algorithm:

Complete the equation:

1
+
2
=
_
New Equation
Submit
Clear

This demo can be used to show off the power of both algorithms. Simply draw something in each box and Sketchy.js will compute how similar the two drawings are.

Select an algorithm:

Similarity:
Compare
Clear Both