5
votes

I'm facing a problem with a game in Flash and I don't know if what I want to make it's possible or not.

I'm trying to make a game for kids in Flash, using AS3, where the kid must draw a similar shape to the one currently on stage. For example, there is an "a" letter and the kid must draw something similar to it.

My question is if there is a way to check if the shape drawn by the kid is similar to the shape on stage and how can I accomplish this.

2
See first pattern recognition theory at en.wikipedia.org/wiki/Pattern_recognitionLunik

2 Answers

2
votes

I would take the two images and scale them down to much lower resolution... like a grid of 16 x 16, or so. Mark each point in the grid as on or off (drawn in or not drawn in).

Then overlay over each other, and see how many of the points are set in one and not in another. If that is over a threshold, flag it as not a match.

You could improve the algorithm by scaling the drawn image. Find the topmost and bottom-most drawn pixels in both, and scale the drawn image to match the first image. You could do the same with width. This way a player wouldn't be penalized for drawing a good, but smaller, version of the picture.

Another improvement would be to do multiple comparisons, shifting the drawn image left to right, up and down, taking the 'best' match. That way you won't get penalized for drawing something offset from the center.

It's all a bit hacky, but I think it is probably more helpful to go this route than to try to incorporate the logic to parse strokes and other OCR- or gesture-based algorithms.

0
votes

Yes, it is possible.

You probably want to track the x,y coordinates of the mouse (if mouse is being used to draw), then translate the values to the shape that it's being matched to.

Then have some sort of error checking. For example compare the area size of the shape drawn by player to the shape given and other things.

Another could be angles between the lines drawn and average of them. How many lines were drawn, etc would be nice I think.

You can achieve this just by checking the pixel colors and define where there was a drawing and where there is not (i.e. white background).

Hope this helps.