p5.recognize

p5.recognize is a library for p5.js which allows mouse click event to be detected when inside the bounds of a primitive p5 shape. It returns an array containing the obect as well as a string indicating the name of the shape on which the mouse click event was registered.

Currently supported shapes:

• Square

• Rectangle

• Triangle

• Circle

• Ellipse

Getting Started

Get the p5.recognize.js file from the library folder and add it to your project by linking it with the HTML file as shown here

If you want to run an example implementation, use the provided sketch.js and index.html files along with libraries folder OR run the example in plunker

Usage

p5.recognize.js provides the following functions:

* createEllipse(x, y, width, height, color)
* createRect(x, y, width, height, color)
* createTriangle(x1, y1, x2, y2, x3, y3, color)
* display()
* findShapeType(mouseX, mouseY)

The createEllipse(), createRect() and createTriangle() are to be used in the setup() function of p5. The color parameter should be a string in RGB format.

The display() function is used inside draw() function of p5 to render the above shapes.

The findShapeType() function is to be used inside mousePressed() event function of p5. It has to be supplied with the mouseX and mouseY coordinates and it returns a string value.

Example code:

var  shapeType;

function  setup() {
	createCanvas(windowWidth, windowHeight);
	createEllipse(100, 100, 40, 40, "rgb(66, 134, 244)");
	createRect(300, 300, 100, 200, "rgb(66, 134, 244)");
	createEllipse(200, 500, 100, 75, "rgb(255, 0, 0)");
	createTriangle(30, 100, 58, 20, 86, 75, "rgb(0, 255, 0)");
}

function  draw() {
	display();
}

function  mousePressed() {
	shapeType  =  findShapeType(mouseX, mouseY);
	console.log("type: " + shapeType[0]);
	console.log("obj: " + shapeType[1]);
	alert(shapeType[0]);
}

License

This project is licensed under the MIT License - see the LICENSE file for details