Canvas' shape recognition into function

Question

First of all ; sorry if this is the wrong place to ask such a question.
Feel free to thumb down or close the topic if i've made this mistake.

I've recently started to "play" with html5, jquery and canvas.

I wanted to create a little mobile website game which is simply a fast "pair the shape" :

The website show 3 shapes (i.e. : square, circle, square) and the player has to guess what shape comes next. To do so, the player has to simply draw the shape on his mobile phone.

ex : the shapes are square, circle, square. The player simply "draw" a circle with his thumb on his iPhone screen, it's the good one -> next level !

The problem is that i don't really know how to check if the player has created a circle, a square or another shape.

At first i've thought of a handwriting recognition and found a usefull link : http://brenoferreira.wordpress.com/2012/03/14/handwriting-recognition-com-html5-canvas/ (i don't speak portuguese either but the code says it all)

He used an ASP.NET MVC 4 + JSON code on the server side, my question is ; since the author wrote this in march 2012, is there another solution ?

I don't really want to use ASP.NET, is it possible to create something similar using other code ? (i assume that PHP won't be able to do such thing).

I've also found this http://home.comcast.net/~urbanjost/canvas/graffiti/graffiti.html which is also relevant.

I'm pretty sure that it may be possible to do. Thanks in advance for the tips/ressources/help.

Answer 1

For simple shapes as these you can use angle difference and knee values to get at a good guess of the shape.

For all shapes you record all the points in a stroke (or merge all strokes into a path for one session).

For a square you go line by line (previous point and current point) to calculate the angle between them. If an angle is above a threshold (f.ex. 50 degrees) then you have a corner. If you end up with three corners and the end point close to the start point then you likely have a square. Also consider to weight position in relation to the whole drawing area.

For circles you weight the average angle of all lines. They would all go in one direction +/- some degrees. And as with squares check the end point if it is in the "area" of the start point.

The current version of the post states: "the shapes are square, circle, square." - If I assume the last should be triangle, the process is the same as with squares, just count 2 corners at a more steep angle.

You can use smoothing algorithms, moving average, point reduction algorithms and so forth to deal with simpler data. It's in the end all about statistics and probability.

(it's a broad topic so I am a bit reluctant to produce code for this, but I hope the theory contributes to understanding).

Code for calculating angles (x1, y1 being current point, x2 and y2 previous point):

var ang = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;

(and you can do all these calculations in vanilla JavaScript btw).