Widget Wednesdays #17

I’ve been working on a graphics project that involves letting people make freehand drawings and then turning those drawings into various shapes. In order to test the core algorithm and explain it to my students, I implemented a very simple stand-along version of it.

The goal was to make the simplest possible version of the algorithm, so that the whole thing consists of only a few hundred lines of Javascript code. That way the students can easily look through the code to understand the algorithm without wading through thousands of lines of code within some larger software program.

The algorithm doesn’t care what set of drawings it recognizes, but this evening, for simplicity, I decided to make a little test case that consists of only the capital English letters.

One cool thing is that it recognizes your letter whether you draw it forward, backward, upside down or mirror flipped, and it will morph even a crude drawing into a nice looking letter.

You can try it for yourself here.

2 Responses to “Widget Wednesdays #17”

  1. J. Peterson says:

    Playing with this is remarkably entertaining. I love the morph from your drawing to the the official character.

    Landing a W is pretty challenging though; it tends to go for (upside-down) M’s or flattens it to a horizontal I, or sometimes a U. Without peeking at the code, I suspect it’s searching patterns A – Z, and finding a plausible matches before it gets to W?

  2. admin says:

    Thanks! The morph is my favorite part too. 🙂

    Actually it’s just that M and W are very similar in shape, and the recognizer is looking for the nearest match, and I allow each character to be rotated in increments of PI/2 and/or mirror flipped. The algorithm is independent of the order of the characters.

    If you draw a shape that is more like a W than like anything else, then it will morph to W. I concur that this can be challenging, given that both M and W are allowed to be upside down.

Leave a Reply