Processing 1.0 - Processing Discourse - Multiple Draggable Objects

Sunday

Multiple Draggable Objects
Jun 7^th, 2009, 4:50am

I'm having trouble making multiple objects which you can drag separately, using mouseDragged. I'm working with an example of one draggable object and trying to duplicate it. Can someone please help me out? Thanks!

The example code I am trying to use (two different tabs):

Code:


Tab1:

DraggableObject draggable;

void setup() {
  size(400, 400);
  smooth();
  draggable = new DraggableObject(width/2, height/2);
}

void draw() {
  background(0);
  noFill();
  stroke(255);
  strokeWeight(3);
  draggable.draw();
}

void mousePressed() {
  draggable.mousePressed();
}

void mouseDragged() {
  draggable.mouseDragged();
}

void mouseReleased() {
  draggable.mouseReleased();
}



DraggableObject tab:

class DraggableObject {
  float x, y;
  float radius;
  boolean drag;
  float dragX, dragY;
  
  DraggableObject(float _x, float _y) {
    x = _x; y = _y;
    radius = 30;
    drag = false;
    dragX = 0;
    dragY = 0;
  }

  boolean inside(float ix, float iy) {
    return (dist(x, y, ix, iy) < radius);
  }

  void draw() {
    ellipseMode(CENTER);
    ellipse(x, y, 2*radius, 2*radius);
  }

  void mousePressed() {
    drag = inside(mouseX, mouseY);
    if (drag) {
	dragX = mouseX - x;
	dragY = mouseY - y;
    }
  }

  void mouseDragged() {
    if (drag) {
	x = mouseX - dragX;
	y = mouseY - dragY;
    }
  }

  void mouseReleased() {
    drag = false;
  }
}

sw01

Re: Multiple Draggable Objects
Reply #1 - Jun 7^th, 2009, 7:06am

This may be a partial implementation of what you described to get you started:

Draggable draggable;
NullDraggableObject nullDraggableObject;
ArrayList draggables;

void setup() {
size(400, 400);
smooth();
nullDraggableObject = new NullDraggableObject();
draggables = new ArrayList();
for(int i = 0; i < 10; i++)
draggables.add(new DraggableObject(random(width), random(height/2)));
}

void draw() {
background(0);
noFill();
stroke(255);
strokeWeight(3);
draggable = nullDraggableObject;
for(int i = 0; i < draggables.size(); i++)
{
Draggable d = (Draggable)draggables.get(i);
d.draw();
if(d.isBeingMouseHovered())
draggable = d;
}
}

void mousePressed() {
draggable.mousePressed();
}

void mouseDragged() {
draggable.mouseDragged();
}

void mouseReleased() {
draggable.mouseReleased();
}

interface Draggable{
boolean isBeingMouseHovered();
boolean inside(float ix, float iy);
void draw();
void mousePressed();
void mouseDragged();
void mouseReleased();
}

class NullDraggableObject implements Draggable{
boolean isBeingMouseHovered(){ return false;}
boolean inside(float ix, float iy){return false;}
void draw(){}
void mousePressed(){}
void mouseDragged(){}
void mouseReleased(){}
}
class DraggableObject implements Draggable {
float x, y;
float radius;
boolean drag;
float dragX, dragY;

DraggableObject(float _x, float _y) {
x = _x; y = _y;
radius = 30;
drag = false;
dragX = 0;
dragY = 0;
}

boolean isBeingMouseHovered()
{
return inside(mouseX, mouseY);
}

boolean inside(float ix, float iy) {
return (dist(x, y, ix, iy) < radius);
}

void draw() {
ellipseMode(CENTER);
ellipse(x, y, 2*radius, 2*radius);
}

void mousePressed() {
drag = inside(mouseX, mouseY);
if (drag) {
dragX = mouseX - x;
dragY = mouseY - y;
}
}

void mouseDragged() {
if (drag) {
x = mouseX - dragX;
y = mouseY - dragY;
}
}

void mouseReleased() {
drag = false;
}
}

Sunday YaBB Newbies Offline Posts: 5	Re: Multiple Draggable Objects Reply #2 - Jun 7^th, 2009, 7:48am Ohhh, thank you sooo much!!!

Sunday YaBB Newbies Offline Posts: 5	Re: Multiple Draggable Objects Reply #3 - Jun 7^th, 2009, 9:20pm Hmm, sorry for asking another question. but how would I be able to replace the objects with external images? Possibly using arrays too.. =/ Just so confused.

sw01

Re: Multiple Draggable Objects
Reply #4 - Jun 7^th, 2009, 9:45pm

Just add another class that implements draggable. Here's an example (you need to import an image file named "someImage.jpg" in your pde):

Draggable draggable;
NullDraggableObject nullDraggableObject;
ArrayList draggables;

void setup() {
size(400, 400);
smooth();
nullDraggableObject = new NullDraggableObject();
draggables = new ArrayList();
for(int i = 0; i < 10; i++)
draggables.add(new DraggableObject(random(width), random(height/2)));
for(int i = 0; i < 10; i++)
draggables.add(new DraggableImage(random(width), random(height/2), loadImage("someImage.jpg")));
}

// *snip*

class DraggableImage implements Draggable {
float x, y;
float radius;
boolean drag;
float dragX, dragY;
PImage anImage;

DraggableImage(float _x, float _y, PImage _anImage) {
anImage = _anImage;
x = _x; y = _y;
//radius = 30;
drag = false;
dragX = 0;
dragY = 0;

}

boolean isBeingMouseHovered()
{
return inside(mouseX, mouseY);
}

boolean inside(float ix, float iy) {
boolean answer = true;
if(ix < x)
answer = false;
if(ix > (x + anImage.width))
answer = false;
if(iy < y)
answer = false;
if(iy > (y + anImage.height))
answer = false;

return answer;
}

void draw() {
image(anImage, x, y);
}

void mousePressed() {
drag = inside(mouseX, mouseY);
if (drag) {
dragX = mouseX - x;
dragY = mouseY - y;
}
}

void mouseDragged() {
if (drag) {
x = mouseX - dragX;
y = mouseY - dragY;
}
}

void mouseReleased() {
drag = false;
}
}

Sunday

Re: Multiple Draggable Objects
Reply #5 - Jun 7^th, 2009, 10:19pm

Thanks a lot for the reply!
I keep getting an error 'Cannot find a class or type named "NullDraggableObject" '. Did I do something wrong? Undecided

Here's what I have so far (just added the image and such):

Code:


Tab 1:

Draggable draggable;
NullDraggableObject nullDraggableObject;
ArrayList draggables;

void setup() {
size(400, 400);
smooth();
nullDraggableObject = new NullDraggableObject();
draggables = new ArrayList();
for(int i = 0; i < 10; i++)
  draggables.add(new DraggableObject(random(width), random(height/2)));
for(int i = 0; i < 10; i++)
  draggables.add(new DraggableImage(random(width), random(height/2), loadImage("leaf.jpg")));
}

void draw() {
 background(0);
 noFill();
 stroke(255);
 strokeWeight(3);
 draggable = nullDraggableObject;
 for(int i = 0; i < draggables.size(); i++)
 {
    Draggable d = (Draggable)draggables.get(i);
    d.draw();
    if(d.isBeingMouseHovered())
	draggable = d;
 }
}

void mousePressed() {
 draggable.mousePressed();
}

void mouseDragged() {
 draggable.mouseDragged();
}

void mouseReleased() {
 draggable.mouseReleased();
}

interface Draggable{
 boolean isBeingMouseHovered();
 boolean inside(float ix, float iy);
 void draw();
 void mousePressed();
 void mouseDragged();
 void mouseReleased();
}


NullDraggableObject tab:

class DraggableImage implements Draggable {
float x, y;
float radius;
boolean drag;
float dragX, dragY;
PImage leaf;

DraggableImage(float _x, float _y, PImage _leaf) {
  leaf = _leaf;
  x = _x; y = _y;
  //radius = 30;
  drag = false;
  dragX = 0;
  dragY = 0;
  
}

boolean isBeingMouseHovered()
{
  return inside(mouseX, mouseY);
}

boolean inside(float ix, float iy) {
  boolean answer = true;
  if(ix < x)
    answer = false;
  if(ix > (x + leaf.width))
    answer = false;
  if(iy < y)
    answer = false;
  if(iy > (y + leaf.height))
    answer = false;
    
  return answer;
}

void draw() {
  image(leaf, x, y);
}

void mousePressed() {
  drag = inside(mouseX, mouseY);
  if (drag) {
    dragX = mouseX - x;
    dragY = mouseY - y;
  }
}

void mouseDragged() {
  if (drag) {
    x = mouseX - dragX;
    y = mouseY - dragY;
  }
}

void mouseReleased() {
  drag = false;
}
}

sw01

Re: Multiple Draggable Objects
Reply #6 - Jun 7^th, 2009, 10:34pm

I'm not sure why it's not working. One thing different is that I have it in one tab.

but here is the full code:

Draggable draggable;
NullDraggableObject nullDraggableObject;
ArrayList draggables;

void setup() {
size(400, 400);
smooth();
nullDraggableObject = new NullDraggableObject();
draggables = new ArrayList();
for(int i = 0; i < 10; i++)
draggables.add(new DraggableObject(random(width), random(height/2)));
for(int i = 0; i < 10; i++)
draggables.add(new DraggableImage(random(width), random(height/2), loadImage("someImage.jpg")));
}

void draw() {
background(0);
noFill();
stroke(255);
strokeWeight(3);
draggable = nullDraggableObject;
for(int i = 0; i < draggables.size(); i++)
{
Draggable d = (Draggable)draggables.get(i);
d.draw();
if(d.isBeingMouseHovered())
draggable = d;
}
}

void mousePressed() {
draggable.mousePressed();
}

void mouseDragged() {
draggable.mouseDragged();
}

void mouseReleased() {
draggable.mouseReleased();
}

interface Draggable{
boolean isBeingMouseHovered();
boolean inside(float ix, float iy);
void draw();
void mousePressed();
void mouseDragged();
void mouseReleased();
}

class NullDraggableObject implements Draggable{
boolean isBeingMouseHovered(){ return false;}
boolean inside(float ix, float iy){return false;}
void draw(){}
void mousePressed(){}
void mouseDragged(){}
void mouseReleased(){}
}

class DraggableObject implements Draggable {
float x, y;
float radius;
boolean drag;
float dragX, dragY;

DraggableObject(float _x, float _y) {
x = _x; y = _y;
radius = 30;
drag = false;
dragX = 0;
dragY = 0;
}

boolean isBeingMouseHovered()
{
return inside(mouseX, mouseY);
}

boolean inside(float ix, float iy) {
return (dist(x, y, ix, iy) < radius);
}

void draw() {
ellipseMode(CENTER);
ellipse(x, y, 2*radius, 2*radius);
}

void mousePressed() {
drag = inside(mouseX, mouseY);
if (drag) {
dragX = mouseX - x;
dragY = mouseY - y;
}
}

void mouseDragged() {
if (drag) {
x = mouseX - dragX;
y = mouseY - dragY;
}
}

void mouseReleased() {
drag = false;
}
}

class DraggableImage implements Draggable {
float x, y;
float radius;
boolean drag;
float dragX, dragY;
PImage anImage;

DraggableImage(float _x, float _y, PImage _anImage) {
anImage = _anImage;
x = _x; y = _y;
//radius = 30;
drag = false;
dragX = 0;
dragY = 0;

}

boolean isBeingMouseHovered()
{
return inside(mouseX, mouseY);
}

boolean inside(float ix, float iy) {
boolean answer = true;
if(ix < x)
answer = false;
if(ix > (x + anImage.width))
answer = false;
if(iy < y)
answer = false;
if(iy > (y + anImage.height))
answer = false;

return answer;
}

void draw() {
image(anImage, x, y);
}

void mousePressed() {
drag = inside(mouseX, mouseY);
if (drag) {
dragX = mouseX - x;
dragY = mouseY - y;
}
}

void mouseDragged() {
if (drag) {
x = mouseX - dragX;
y = mouseY - dragY;
}
}

void mouseReleased() {
drag = false;
}
}

Sunday YaBB Newbies Offline Posts: 5	Re: Multiple Draggable Objects Reply #7 - Jun 7^th, 2009, 10:46pm Wow, yeah, I'm quite new to Processing. But, thanks so much. You've helped me out a lot!

sw01 Full Member Offline Posts: 175	Re: Multiple Draggable Objects Reply #8 - Jun 7^th, 2009, 10:48pm You're very welcome. I had lots of fun.

bernielomax991 YaBB Newbies Offline Posts: 7	Re: Multiple Draggable Objects Reply #9 - Jul 6^th, 2009, 5:38pm hi i am using your example to collect some pixel information under the ellipses but i am stuck on this how can i write to a file each of the ellipses (draggable) X position and Y position. i dont know how to acess such information. please reply soon newbie bernardo