Help with dragging and dropping multiple images in an array

edited November 2016 in Questions about Code

Hello,

My goal in this code is to have multiple images (eventually, the total will be around 70) appear on screen and for the user to be able to drag and drop each one.

Right now, my code registers when the mouse is above each image, but only drags a single one, even when clicked on a different image! I use println at different points to see which parts are working. The code detects when each image is being rolled over, and clicked, but will still only drag one.

Here is my code:

String[] images = {
  "life.png", "life.png", "life.png"
};

float[] positions =new float [images.length*2] ;

// 0,1,2,3,4,5
// 4,5,6,7,8,9
float bx;
float by;
int bs = 40;
int bz = 30;
boolean bover = false;
boolean locked = false;
float bdifx = 0.0; 
float bdify = 0.0; 
PImage image; 
float newx, newy;
int whichImage;

void setup() 
{
  imageMode (CENTER);
  size(600, 400);
  bx = width/2.0;
  by = height/2.0;

  for (int i=0; i < images.length; i++) {
    image= loadImage(images[i]); 
    image (image, random(width), random(height), 50, 50) ;
  } 

  for (int j=0; j < images.length*2; j+=2) {
    positions[j]= random(width);
    positions[j+1]= random(height);
  }
}

void draw() 
{ 
  background(0);
  // Test if the cursor is over the box 

  for (int i=0; i < images.length; i++) {
    if (mouseX > positions[i*2]-bs && mouseX < positions[i*2]+bs && 
      mouseY > positions[i*2+1]-bs && mouseY < positions[i*2+1]+bs) 
    {
      println ("mouseover image: "+i);

      bover = true;  
      if (!locked) 
      { 
        stroke(255); 
        fill(153); 
      }
    } 
    else 
    {
      stroke(153);
      fill(153);
      bover = false;
    }
  }

  // Draw the box
  //rect(bx, by, bs, bs);

  for (int j=0; j < images.length; j++) {
    image= loadImage(images[j]); 
    image (image, positions[j*2], positions[j*2+1], 50, 50) ;
    newx = positions[j*2];
    newy = positions[j*2+1];
    whichImage = j;
    //image(image, bx, by, bs, bz);
  }
}
void mousePressed() {
  if (bover) { 
    locked = true;
  } 
  else {
    locked = false;
  }
//  bdifx = mouseX-bx; 
 // bdify = mouseY-by;
}

void mouseReleased() {
  locked = false;
}

void mouseDragged() {
  if (locked) {
    newx = mouseX; 
    newy = mouseY;
  }

  println ("whichImage= "+whichImage);
  positions [whichImage*2] = newx;
  positions [(whichImage*2)+1] = newy;
}

Answers

  • Answer ✓

    How to post code

    when you post your code:

    • in the editor hit ctrl-t to auto format

    • copy it

    • paste it in the browser

    • leave 2 empty lines before it

    • mark the code (without the 2 empty lines)

    • press C in the small command bar.

  • sorry! I just fixed it.

  • how is the intended workflow?

    you click on the images you want to drag and when done you drag them?

    and you drag only the selected ones or all of them?

    thx

  • don't accept an answer that doesn't answer your question... the thread looks finished then... ;-)

  • You click and drag one image at a time. Then when you let it go you can click and drag another image, and so on.

  • also oops! I just joined!

  • shouldn't you say

    whichImage=i;

    after line 50 ?

  • I wouldn't load the images in line 69, you already loaded them in line 29

    you don't need line 30 though

  • no problem!

    Welcome !

  • I define whichImage later as j

  • edited April 2014

    I understand that you have float[] positions =new float [images.length*2] ;

    with x,y then x,y and so forth thus even (like 0,2 etc.) = x, odd = y.

    very complicate!

    but never mind,

    we'll come to that later

  • Ok I did those things~ and thanks

  • you wrote

    I define whichImage later as j

    yes, but you want to define it where the mouse is, and that is in line 50, right?

    where you check whether the mouse is over: When the mouse is over the image, set

    whichImage = i; 
    
  • ok I put whichImage = I in the mouse over part

  • edited April 2014

    ???

    also your images should have different names??

    String[] images = {
      "life.png", "life.png", "life.png"
    };
    

    better

    String[] images = {
      "life1.png", "life2.png", "life3.png"
    };
    
  • Do you think that's the problem? I was being lazy and just putting all of the same for now. Let me fix that.

    The final thing will be a whole bunch of ripped magazine words that the user can drag and drop to make ransom notes/letters.

    Ok interesting. Now that I put in three different images, the ones on the screen all appear as the same one.

  • edited April 2014

    yeah, you have a list of names but when you load them you always

    say image and overwrite it (in your old line 29)

    better have a list of images as well

    here...

    String[] images = {
      "life1.png", "life2.png", "life3.png"
    };
    
    float[] positions =new float [images.length*2] ;
    
    // 0,1,2,3,4,5
    // 4,5,6,7,8,9
    float bx;
    float by;
    int bs = 40;
    int bz = 30;
    boolean bover = false;
    boolean locked = false;
    float bdifx = 0.0; 
    float bdify = 0.0; 
    PImage[] image1 = new PImage [images.length]; 
    float newx, newy;
    int whichImage;
    
    void setup() 
    {
      imageMode (CENTER);
      size(600, 400);
      bx = width/2.0;
      by = height/2.0;
    
      for (int i=0; i < images.length; i++) {
        image1 [i]= loadImage(images[i]); 
        image (image1[i], random(width), random(height), 50, 50) ;
      } 
    
      for (int j=0; j < images.length*2; j+=2) {
        positions[j]= random(width);
        positions[j+1]= random(height);
      }
    }
    
    void draw() 
    { 
      background(0);
      // Test if the cursor is over the box 
    
      for (int i=0; i < images.length; i++) {
        if (mouseX > positions[i*2]-bs && mouseX < positions[i*2]+bs && 
          mouseY > positions[i*2+1]-bs && mouseY < positions[i*2+1]+bs) 
        {
          println ("mouseover image: "+i);
          whichImage=i;
    
          bover = true;  
          if (!locked) 
          { 
            stroke(255); 
            fill(153);
          }
          break;
        } 
        else
        {
          stroke(153);
          fill(153);
          bover = false;
        }
      }
    
      // Draw the box
      //rect(bx, by, bs, bs);
    
      for (int j=0; j < images.length; j++) {
        // image= loadImage(images[j]); 
        image (image1[j], positions[j*2], positions[j*2+1], 50, 50) ;
        //  newx = positions[j*2];
        //  newy = positions[j*2+1];
        //whichImage = j;
        //image(image, bx, by, bs, bz);
      }
    }
    void mousePressed() {
      if (bover) { 
        locked = true;
      } 
      else {
        locked = false;
      }
      //  bdifx = mouseX-bx; 
      // bdify = mouseY-by;
    }
    
    void mouseReleased() {
      locked = false;
    }
    
    void mouseDragged() {
      if (locked) {
        newx = mouseX; 
        newy = mouseY;
      }
    
      // println ("whichImage = "+whichImage);
      positions [whichImage*2] = newx;
      positions [(whichImage*2)+1] = newy;
    }
    
  • I inserted line 57

    and changed 70 following

    and line 17 / 29

  • You are the best person that has ever existed. Thank you so much! It works!

  • edited April 2014

    thx!

    I understand that you have float[] positions =new float [images.length*2] ;

    with x,y then x,y and so forth thus even (like 0,2 etc.) = x, odd = y .

    very complicate!

    Instead

    try two parallel arrays:

     float[] positionsX =new float [images.length] ;
     float[] positionsY =new float [images.length] ;
    

    and instead of

    e.g.

    image (image1[j], positions[j*2], positions[j*2+1], 50, 50) ;
    

    say

    image (image1[j], positionsX[j], positionsY[j], 50, 50) ;
    

    Greetings, Chrisir ;-)

  • Please take your time and read and understand the working code. Try to understand the flow and functions of it. E.g. Whichimage or the for-loop at the end of draw.

Sign In or Register to comment.