drag & drop images in Processing

edited June 2018 in Questions about Code

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

Answers

  • 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
      //
    }
    // 
    
  • Also note that there is a new forum

    https://discourse.processing.org/categories

  • 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.

  • Yeah just an array or ArrayList of Images

  • edited June 2018

    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;
        }
      }
    
  • edited June 2018

    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

  • edited June 2018 Answer ✓

    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

  • Good to now. Huge thanks. :)

  • Can you please post your new version as full code?

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

  • What?! It’s not so hard

  • edited June 2018

    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 
    // 
    
Sign In or Register to comment.