$HIDE_POST_ON_HOMEPAGE$

Overview

In this blog post, we will explore how to recognize shapes in a web application using JavaScript, with the help of the Phaser.js framework. We will dive into the architecture of the solution and explain how the recognition algorithm is used to efficiently recognize drawn shapes.

Architecture

How It Works

In the above approach, we employ the Observer Pattern to manage the interaction between the components. The Draw (subject) emits events when user input is detected, such as pointer down, move, and up events. The MainScene (observer) listens for these events and interacts with the InputRecognizer to recognize the shapes.

Here’s a brief description of each component:

  • Draw: Handles user input, drawing graphics to the screen and emits events (Ideally input and drawing would be separate but this is a small example).
  • MainScene: Listens to the events from Draw and calls the InputRecognizer.
  • InputRecognizer: Uses the Dollar $Q algorithm to recognize the shapes drawn by the user.

The recognizer takes advantage of the Dollar $Q algorithm, which uses a combination of geometric matching and template-based approaches to recognize gestures. It compares the input gesture to a set of predefined templates and calculates the similarity between them. The recognition process involves translating the gesture to a common origin, scaling it to a standard size, and then comparing the resulting points to the templates.

In simplified terms, the recognizer identifies shapes by simplifying the input provided and comparing them against a set of stored examples (These can be custom shapes for example). Here’s how it works step-by-step:

  1. Adjusting the Drawing: The recognizer adjusts your drawing by:
    • Repositioning: Moving your drawing to the center of a standard area.
    • Resizing: Scaling your drawing to a common size so that the comparison isn’t affected by the size.
  2. Point Comparison: Comparing the key points of your drawing to those of the example shapes to find the closest match.
  3. Template Matching: It looks at a collection of example shapes (in our case lines, a circle, a heart, etc.). When a shape is drawn, it tries to find the best match from this collection.

This process ensures that the recognizer can quickly and accurately identify the shapes you intended to draw, making it particularly useful for touch-based interfaces on mobile devices.

The pattern above allows us to easily move this solution to another framework or library since all the core logic remains in JavaScript and Phaser is only handling the drawing portion.