How can I stop the jumping over?

Dracore

I have this code, sorry I don't know how to format it,

String[] images = {"life1.png", "life2.png", "life3.png"};
PImage Background; 
float[] positions =new float [images.length*2] ;
float bx;
float by;
int bs = 37;
int bz = 37;
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);
  fullScreen();
  Background = loadImage("Background.png");
  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), 75, 75) ;
  } 
  for (int j=0; j < images.length*2; j+=2) {
    positions[j]= random(width);
    positions[j+1]= random(height);
  }
}

void draw() 
{ 
  background(Background);
  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;
    }
  }
  for (int j=0; j < images.length; j++) {
    image (image1[j], positions[j*2], positions[j*2+1], 75, 75) ;
  }
}
void mousePressed() {
  if (bover) { 
    locked = true;
  } 
  else {
    locked = false;
  }
}

void mouseReleased() {
  locked = false;
}

void mouseDragged() {
  if (locked) {
    newx = mouseX; 
    newy = mouseY;
  }
  positions [whichImage*2] = newx;
  positions [(whichImage*2)+1] = newy;
}

It is working well, you can drag and drop the pictures around, but the problem is that If you are holding one picture and drag it over another, it drops that piece and picks up the one that you were moving over. Why does this happen, and how can I fix it?

jeremydouglass

it drops that piece and picks up the one that you were moving over. Why does this happen

Because inside your if statement where you check if you are over a piece, you immediately set whichImage=i (that is, you grab whatever you just noticed).

println ("mouseover image: "+i);
whichImage=i;

Perhaps, after noticing you are over a piece, you should first check whether you are already holding something. Then update whichImage if you aren't.

Dracore

How would I best add that to the code?

jeremydouglass

Probably add an if() statement at line 41, and only update whichImage if it is true. What does locked do? How does your code know if it is holding an image?

Dracore

Further weirdness ensues:

Dracore

Locked is if you are hovering over an image and click down, it is true, if you aren't over an image and click down, it is false.

Dracore

Current Code:

    String[] images = {"life1.png", "life2.png", "life3.png", "life4.png"};
    PImage Background;
    float[] positions =new float [images.length*2] ;
    float bx;
    float by;
    int bs = 37;
    int bz = 37;
    boolean hover = 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);
  fullScreen();
  Background = loadImage("Background.png");
  bx = width/2.0;
  by = height/2.0;
  for (int i=0; i < images.length; i++) {
    image1 [i]= loadImage(images[i]); 
  } 
  for (int j=0; j < images.length*2; j+=2) {
    positions[j]= random(384,985);
    positions[j+1]= random(85,685);
  }
}

void draw() 
{ 
  background(Background);
  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) 
    {
      whichImage=i;
      hover = true;  
      if (!locked) 
      { 
        fill(153);
      }
      break;
    } 
    else
    {
      fill(153);
      hover = false;
    }
  }
  for (int j=0; j < images.length; j++) {
    image (image1[j], positions[j*2], positions[j*2+1], 75, 75) ;
  }
}
void mousePressed() {
  if (hover) { 
    locked = true;
  } 
  else {
    locked = false;
  }
}

void mouseReleased() {
  locked = false;
}

void mouseDragged() {
  if (locked) {
    newx = mouseX; 
    newy = mouseY;
  }
  positions [whichImage*2] = newx;
  positions [(whichImage*2)+1] = newy;
}

kfrajer

The problem in your first post is a flaw in your design. You are better off investing some time to think about the problem and to come up with an alternative solution. I have done some modification using your latest code. REMARK: code is untested so use at your discretion. Also, in this modified version I removed all your fill function calls so if they are relevant to you, you will need to introduce them again. This just shows a possible solution. another way would be working with classes. refer to the following link to an example of hovering/click action on a button object: https://forum.processing.org/two/discussion/19086/using-boolean-functions-in-object-oriented-programming#latest

I hope this helps,

Kf

String[] images = {"life1.png", "life2.png", "life3.png", "life4.png"};
PImage Background;
float[] positions =new float [images.length*2] ;
float bx;
float by;
int bs = 37;
int bz = 37;
boolean hover = 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);
  fullScreen();
  Background = loadImage("Background.png");
  bx = width/2.0;
  by = height/2.0;
  for (int i=0; i < images.length; i++) {
    image1 [i]= loadImage(images[i]);
  } 
  for (int j=0; j < images.length*2; j+=2) {
    positions[j]= random(384, 985);
    positions[j+1]= random(85, 685);
  }
}

void draw() 
{ 
  background(Background);

  //UPDATES position of imaged being dragged
  if(whichImage>=0){
    positions[whichImage*2]=mouseX;
    positions[whichImage*2+1]=mouseY;
  }

  //DRAWS all images
  for (int j=0; j < images.length; j++) {
    image (image1[j], positions[j*2], positions[j*2+1], 75, 75) ;
  }
}

//If pressed over iamge, select image
void mousePressed() {

  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) 
    {
      whichImage=i;      
    }
  }  

}

//Release image indicator by setting to negative value
void mouseReleased() {
  whichImage=-1;  //This means there is no image selected as an index of -1 in an array is meaningless
}

jeremydouglass

@Dracore -- look carefully at the video, and notice the pattern. 3 swaps with 2, 2 swaps with 1, but 1 never swaps with anything. So where could the bug be? I'm guessing lines 51 and 55.

kfrajer

@jeremydouglass

yes, that is the flaw in the design I was referring to in my post. The flaw you describe happens because Dracore is checking for images in the draw() function using a for loop, line 35 and 36. Re-designing the concept would be cheaper than trying to sort out the current code (in my opinion).

Kf