Hello everyone,
Usually for image recognition, machine learning models are used that are capable of abstracting common characteristics, but for simple shapes or strokes the ShapeRec class may be valid in some cases.
Repository: https://github.com/jjcapellan/phaser-shape-recognition
Demo: https://jjcapellan.github.io/phaser-shape-recognition/
How it works:
- The makeMatrix method, generates the matrix
from an image or an array of points. The generated matrix could be used to feed a neural network (I haven’t tried it yet). - The test method, compares two matrix and returns the match ratio.
Usage example:
// In create function ...
const shapeRec = new ShapeRec(this);
// Makes an array of 10x10 of booleans from the image.
const imageMatrix = shapeRec.makeMatrix('textureKey', 'textureFrame', 10);
// Hardcoded array of points
const points =[{x: 2, y: 4}, {x: 4, y: 14}, { ... } ...];
// Makes an array of 10x10 of booleans from the points array
const pointsMatrix = shapeRec.makeMatrix(points, null, 10)
// Test the similitude between the image and the shape represented in the points array
// shapeRec.test() returns a number between 0 and 1. 1 means the two shapes are identical and 0 the opposite.
let similitude = shapeRec.test(imageMatrix, pointsMatrix);
Important:
- About images: makeMatrix() only use the alpha values, so the image should have transparent background.
- test() only can compare matrix of the same size. Ex: you can’t compare 10x10 vs 12x12.
Demo screenshot:
For more info visit the repository
Greetings.