drag & drop images in Processing

komats

Hi, I am trying to make a window where it is possible to drag and drop different images and to make them overlap with a mouse click. Found a perfect example for it in openprocessing: https://www.openprocessing.org/sketch/540720 but I guess it would only work in p5.js

In processing library there are some examples of dragging the pictures, but they do so without mouse click and it is not possible to drop them. So I am wondering, is there any advanced example of drag & drop img that can run in Processing, or I better have to download this p5.js?

Cheers, tija

Chrisir

DraggingPic dragging;

void setup() {
  size(600, 600);
  background(255);   
  noStroke(); 
  dragging = new DraggingPic(50, 50, "g2.JPG");
}

void draw() { 
  background(255);   
  dragging.display();
  dragging.mouseDragged();
}

// ------------------------------------------

void mousePressed() {
  dragging.draggingpicMousePressed();
}

void mouseReleased() {
  dragging.draggingpicMouseReleased();
}

// ===========================================

class DraggingPic {

  int x;
  int y;
  PImage sample;

  // controls whether we are dragging (holding the mouse)
  boolean hold; 

  // constructor
  DraggingPic(int posx, int posy, 
    String imageNameAsString)
  { 
    x=posx;
    y=posy;
    sample = loadImage(imageNameAsString);
    sample.resize(55, 0);
  }// constructor

  void display() {
    image(sample, x, y);
  }

  void draggingpicMousePressed() {
    if (mouseX>x&&
      mouseY>y&&
      mouseX<x+sample.width && 
      mouseY<y+sample.height) {
      hold=true;
    }
  }

  void draggingpicMouseReleased() {
    hold=false;
  }

  void mouseDragged() 
  {
    if (hold) {
      x=mouseX; 
      y=mouseY;
    }
  }//method
  //
}
// 

Chrisir

Also note that there is a new forum

https://discourse.processing.org/categories

komats

Now I am trying to add more than one img to this code. Thanks for the fast reply and letting me know about the new forum.

Chrisir

Yeah just an array or ArrayList of Images

komats

This is where I am now. Trying to stick more pictures by implementing some lines as I learn about arrays from tutorials. Yep, it doesn't work (shows that expecting {, found 'for'),but hope I am on the right path.

DraggingPic dragging, dragging1, dragging2, dragging3;
PImage [] picArray = new PImage [4];

void setup() {
  size(800, 800);
  background(255);   
  noStroke(); 
  dragging = new DraggingPic(50, 50, "0.JPG");
  dragging1 = new DraggingPic(50, 50, "1.JPG");
  dragging2 = new DraggingPic(50, 50, "2.JPG");
  dragging3 = new DraggingPic(50, 50, "3.JPG");
}

void draw() { 
  background(255);   
  dragging.display();
  dragging.mouseDragged();
}

void mousePressed() {
  dragging.draggingpicMousePressed();
}

void mouseReleased() {
  dragging.draggingpicMouseReleased();
}

class DraggingPic {

  int x;
  int y;
  PImage p0, p1, p2, p3;

  boolean hold;

for(int i=0; i < picArray.length; i ++){
  picArray [i]= loadImage(i + ".jpg");  
  DraggingPic(int posx, int posy, String (i + ".jpg"));
      { 
      x=posx;
      y=posy;
      sample [i] = loadImage(i + ".jpg");
      sample[i].resize(300, 0);
      }
   }
}
void display() {
    image(sample[i], x, y);
  }

void draggingpicMousePressed() {
    if (mouseX>x&&
      mouseY>y&&
      mouseX<x+sample.width && 
      mouseY<y+sample.height) {
      hold=true;
    }
  }

void draggingpicMouseReleased() {
    hold=false;
  }

void mouseDragged() 
  {
    if (hold) {
      x=mouseX; 
      y=mouseY;
    }
  }

Chrisir

Definitely wrong. Very wrong.

Please do the tutorial on arrays and really run one of the examples from the tutorial!!!

The image is inside the class!!! So kill line 1 and 2!!!

What you want is

DraggingPic[] dragImages = new DraggingPic[4];

or so

Chrisir

Line 8 to 11

dragImages[0] = new.....

dragImages[1] = new.....

Later in the code use for loops: in draw, in mousePressed and mouseReleased —— but NOT inside the class obviously

komats

Good to now. Huge thanks. :)

Chrisir

;-)

Chrisir

Can you please post your new version as full code?

komats

I tried to make it work, but because of lack of knowledge, I totally lost myself in code & gave up for this.

Chrisir

What?! It’s not so hard

Chrisir

here it is.

Please note that I didn't make any changes inside the class (almost no changes, but not related to our question of going from one image to multiple images).

Just outside of the class an array of class DraggingPic over which I for loop then in several places (for example in draw()) outside the class.

This

for (DraggingPic currentDraggingPic : dragImages) {
     ...
}

is just a for loop saying loop over all elements in dragImages and provide each element one after another as currentDraggingPic (which is of type DraggingPic) so I can use it inside the { } part of the for-loop.

The old fashioned way of saying the same is:

for (int i=0; i<dragImages.length(); i++) {
      ....dragImages[i]....
}

Chrisir ;-)

DraggingPic[] dragImages = new DraggingPic[4];

void setup() {
  size(1200, 600);
  background(255);   
  noStroke(); 

  dragImages[0] = new  DraggingPic(50, 50, "g2.JPG"); // change file names here! 
  dragImages[1] = new  DraggingPic(150, 50, "g2.JPG");
  dragImages[2] = new  DraggingPic(250, 150, "g2.JPG");
  dragImages[3] = new  DraggingPic(350, 150, "g2.JPG");
}

void draw() { 
  background(255);   
  for (DraggingPic currentDraggingPic : dragImages) {
    currentDraggingPic.display();
    currentDraggingPic.mouseDragged();
  }//for
}

// ------------------------------------------

void mousePressed() {
  for (DraggingPic currentDraggingPic : dragImages) {
    currentDraggingPic.draggingpicMousePressed();
  }//for
}

void mouseReleased() {
  for (DraggingPic currentDraggingPic : dragImages) {
    currentDraggingPic.draggingpicMouseReleased();
  }//for
}

// ==================================================

class DraggingPic {

  int x;
  int y;
  PImage sample;

  // controls whether we are dragging (holding the mouse)
  boolean hold; 

  // constructor
  DraggingPic(int posx, int posy, 
    String imageNameAsString) { 
    x=posx;
    y=posy;
    sample = loadImage(imageNameAsString);
    sample.resize(80, 0); // optional
  }// constructor

  void display() {
    image(sample, x, y);
  }

  void draggingpicMousePressed() {
    if (mouseX>x&&
      mouseY>y&&
      mouseX<x+sample.width && 
      mouseY<y+sample.height) {
      hold=true;
    }
  }

  void draggingpicMouseReleased() {
    hold=false;
  }

  void mouseDragged() {
    if (hold) {
      x=mouseX; 
      y=mouseY;
    }
  }//method
  //
}//class 
//