Help with dragging images!

Processing Coding Questions
2

this will work better when you

  • keep your images in an array (instead of single)
  • keep your positions of the images stored as variable (also in 2 arrays). Otherwise you cannot change the position when dragging, you need to store and change the position

You have 3 parallel arrays: data

  • for image 0 are in slot 0 of farm_images, x, and y array
  • for image 1 are in slot 1 of farm_images, x, and y array
  • and so on

What’s going on

Then the dragging is easy (and changing of images):

  • dragging starts with mousePressed: we search the clicked image and store its number in selected . We set a marker hold to true so we know, we drag the mouse.
    During hold is true, a red corner is shown (in draw()). Also the position of the selected image is changed (in draw()).

  • dragging ends with mouseReleased(). We set hold to false.

  • The function mouseClicked is called when we release the mouse immediately. We swap an image. Not sure what you want to happen here.

Tricks used

  • A trick is to use return to leave a function immediately.
  • This for (PImage pg : farm_images) { is a short form of a for-loop. It loops over all images in the array and in each loop one image is loaded in to pg, then the next and so on.

Welcome to the forum!

Great to have you here!

Warm regards,

Chrisir

boolean hold=false; 
int selected = -1; 

PImage bg;
PImage shoe;

PImage[] farm_images = new PImage[4];
float[] x =  {  100, 
  300, 
  600, 
  800
};

float[] y = { 100, 
  200, 
  300, 
  400
};

void setup() {
  size(1366, 768);

  // bg = loadImage("Farm animation.png");
  // shoe = loadImage("Shoe.png");
  farm_images[0] = loadImage("Plant top1.jpg");
  farm_images[1] = loadImage("Plant top2.jpg");
  farm_images[2] = loadImage("Plant top3.jpg");
  farm_images[3] = loadImage("Plant top4.jpg");

  //background (bg);
}

void draw() {
  background (0); // background (bg);

  // display 
  int i=0; 
  for (PImage pg : farm_images) {
    // selected image gets a red corner 
    if (i==selected && hold) {
      fill(255, 0, 0); 
      rect(x[i]-5, y[i]-5, 100, 100);
    }//if 
    //display image
    image (pg, x[i], y[i]);
    i++;
  }

  // drag: 
  if (hold) {
    // drag 
    if (selected<0)return; 
    x[selected]+=(mouseX-pmouseX);
    y[selected]+=(mouseY-pmouseY);
  }
}

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

void mouseClicked() {
  // replace image with another
  hold=false;

  int i=0; 
  for (PImage pg : farm_images) {
    if (mouseX > x[i] && 
      mouseX < x[i] + pg.width &&
      mouseY > y[i] && 
      mouseY < y[i]+pg.height) {
      //
      farm_images[i] = farm_images[0]; // eg 0 OR loadImage  
      return;
    }//if 
    i++;
  }//for
}

void mousePressed() {
  // search image for drag and drop (start drag)
  int i=0; 
  for (PImage pg : farm_images) {
    if (mouseX > x[i] && 
      mouseX < x[i] + pg.width &&
      mouseY > y[i] && 
      mouseY < y[i]+pg.height) {
      //
      selected = i;
      hold=true;
      return;
    }//if 
    i++;
  }//for
}

void mouseReleased() {
  // stop drag
  hold=false;
}
//
1 Like