Processing - how to add a drag facility to the graphics - processing

Question

I am new to Processing so this question might be ...
I want to add drag and drop facility to the graphics I generate.
I found Processing - Mouse Functions which explains how to add dragging to a specific object yet I am looking for a general solution in which i dont have to add the dragging methods for each object i want to be able to drag around.
thanks

Answer 1

One option is to encapsulate the functionality into a class you can extend.
If your graphics extend such a class, then they also become "draggable".
Here's a minimal example where the graphics are simply boxes, but extending the "draggable behaviour":
int nb = 3;
Box[] boxes = new Box[nb];//a list of draggable graphics, currently empty
void setup(){
size(400,400);
for(int i = 0 ; i < nb; i++){
boxes[i] = new Box();//populate the list with actual objects
boxes[i].x = 10+110*i;//and setup their coordinates
boxes[i].y = 100;//and dimenensions
boxes[i].w = boxes[i].h = 100;
}
}
void draw(){
background(0);//clear
for(int i = 0 ; i < nb; i++){
boxes[i].update(mouseX,mouseY);//update the internal state(if it's over or not, calculate drag offset, etc.)
boxes[i].draw();//render each graphics element on screen
}
}
void mouseDragged(){//if the mouse is dragged
for(int i = 0 ; i < nb; i++){//for each graphics element
if(boxes[i].isOver) {//if it's over
boxes[i].x = mouseX-boxes[i].offx;//than drag based on the mouse position
boxes[i].y = mouseY-boxes[i].offy;//but take te mouse offset in relation to each object into account
}
}
}
class Draggable{//a generic draggable template with no graphics to display
float x,y,w,h,offx,offy;//position, dimensions and x,y offset to drag
boolean isOver;//is the cursor over the bounding box of this object ?
void update(int mx,int my){//let's work that out based on the mouse x and y coordinates
isOver = ((mx >= x && mx <= x+w) && (my >= y && my <= y+h));//if it's within bounds on x and y axis, then we're in the over state
if(isOver){//if we're in the over state we can also update the mouse drag offsets
offx = mx-x;
offy = my-y;
}
}
}
class Box extends Draggable{
void draw(){
fill(isOver ? 127 : 255);
rect(x,y,w,h);
}
}
This would be a fun little opportunity to test an OOP concept: polymorphism
int nb = 6;
Draggable[] boxes = new Draggable[nb];//a list of draggable graphics, currently empty
void setup(){
size(400,400);
for(int i = 0 ; i < nb; i++){
boxes[i] = (random(1.0) > .5) ? new Box() : new Blob();//populate the list with actual objects
boxes[i].x = 10+110*i;//and setup their coordinates
boxes[i].y = 100;//and dimenensions
boxes[i].w = boxes[i].h = 100;
}
}
void draw(){
background(0);//clear
for(int i = 0 ; i < nb; i++){
boxes[i].update(mouseX,mouseY);//update the internal state(if it's over or not, calculate drag offset, etc.)
boxes[i].draw();//render each graphics element on screen
}
}
void mouseDragged(){//if the mouse is dragged
for(int i = 0 ; i < nb; i++){//for each graphics element
if(boxes[i].isOver) {//if it's over
boxes[i].x = mouseX-boxes[i].offx;//than drag based on the mouse position
boxes[i].y = mouseY-boxes[i].offy;//but take te mouse offset in relation to each object into account
}
}
}
class Draggable{//a generic draggable template with no graphics to display
float x,y,w,h,offx,offy;//position, dimensions and x,y offset to drag
boolean isOver;//is the cursor over the bounding box of this object ?
void update(int mx,int my){//let's work that out based on the mouse x and y coordinates
isOver = ((mx >= x && mx <= x+w) && (my >= y && my <= y+h));//if it's within bounds on x and y axis, then we're in the over state
if(isOver){//if we're in the over state we can also update the mouse drag offsets
offx = mx-x;
offy = my-y;
}
}
void draw(){}//empty implementation to be overwritten by a subclass
}
class Box extends Draggable{
void draw(){
fill(isOver ? 127 : 255);
rect(x,y,w,h);
}
}
class Blob extends Draggable{
void draw(){
fill(isOver ? 127 : 255);
ellipse(x,y,w,h);
}
}
This is an idea of how implement this, but there are multiple ways of achieving this.
Have a look at the Processing OOP tutorial or the more in depth Java OOP one
For example the above could be achieved using Interfaces or an AbstractClass.
It's up to your goals and restrictions what the best solution will be.