p5.drag

p5.drag.js is a p5.js library that allows user to drag and move the primitive p5 shapes. It uses p5.recognize.js for detecting the shapes and thus has to be used alongside this library.

Getting Started

Dependencies

• p5.recognize.js library --> can be obtained from here : https://github.com/Arun-N/p5.recognize

Installing

• Get both p5.drag.js and p5.recognize.js and add them to your library folder
• Link both the libraries in your HTML file as shown in this page

Functions

• drag ( object, mouseX, mouseY ) --> Main function that enables drag and move. Should be called inside mouseReleased() function.
• shadow ( object ) --> Optional. Call this function inside draw() if you want a shadow image of the shape under your cursor while dragging.

Flags

• isDragging --> A boolean variable used to check if the shape is currently being dragged

Example

• The createEllipse(), createRect(), createTriangle() and findShapeType() functions belong to p5.recognize.js. Information about them can be found here

Live Example on Plunker

sketch.js :

var  shape;
function  setup() {
	createCanvas(windowWidth, windowHeight);
	createEllipse(300, 300, 100, 100, "rgb(255, 0, 0)");
	createRect(150, 100, 130, 130, "rgb(0, 255, 0)");
	createEllipse(400, 700, 100, 50, "rgb(23, 125, 255)");
	createTriangle(30, 75, 58, 20, 86, 75, "rgb(0, 255, 0)");
}
function  draw() {
	background("rgb(255, 255, 255)");
	display();
	if(isDragging){
		shadow(shape);
	}
}
function  mousePressed() {
	isDragging  =  true;
	shape  =  findShapeType(mouseX, mouseY);
}
function  mouseReleased() {
	drag(shape, mouseX, mouseY);
}

License

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