Help with dragging images!

Processing Coding Questions
1

Hello all! I am very very new to coding and am attempting to create a code in which I can click on an image, have it change into a different image, then be able to click and drag the new image. I want this to be able to happen with four separate images. To further specify what I am trying to do, I hope to have a kind of garden with 4 plant sprouts that once clicked turn into various objects and can be moved around the screen.
This is the code that I have made so far with what I have been able to learn on my own.

PImage bg;
PImage farm_image;
PImage farm_image2;
PImage farm_image3;
PImage farm_image4;
PImage shoe;
void setup() {
size(1366, 768);
bg = loadImage(“Farm animation.png”);
farm_image = loadImage(“Plant top.png”);
farm_image2 = loadImage(“Plant top.png”);
farm_image3 = loadImage(“Plant top.png”);
farm_image4 = loadImage(“Plant top.png”);
shoe = loadImage(“Shoe.png”);
background (bg);
image(farm_image, 100, 550);
image (farm_image2, 350, 550);
image(farm_image3, 650, 550);
image(farm_image4, 1000, 550);
}
void draw() {
}
void mousePressed(){
if (mouseX > 50 && mouseY < 150 && mouseY >500 && mouseY < 600)
background (bg) ;
image (shoe, 50, 525);
image (farm_image2, 350, 550);
image(farm_image3, 650, 550);
image(farm_image4, 1000, 550);
}

Unfortunately, I am barely at the point where I can get the plant sprout images (I have called them farm_image# in the code) to change to the object image when clicked. It changed no matter where I click on the screen, not only on the image, and the old image is still appearing even though I re-added the background. I also don’t have any idea where to start in terms of dragging the images around the screen. In short, I am quite lost and would really appreciate any help!

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
3

Hello @quixotic,

Here is an example of dragging a single item:
Mouse Functions / Examples / Processing.org

I worked through this with a beginner and was able to modify it for multiple items using simple arrays. Object arrays are next!

The rectangle can be replaced with images.

Have fun!

:)

2 Likes
4

Thank you so much for your response and help! :slight_smile: I really appreciate it!

1 Like