I can't drag my image properly?

pleurespam

My image just keeps snapping back to its original position after I drag it a little. How can I be able to drag the image freely around the canvas?

  float[] sx = new float[100];
  float[] sy = new float[100];
  float[] speed = new float[100];
  PImage[] img = new PImage[10];
  int imgIndex = 0;
  float x = 0;
  float y = 0;
  float sz = 100;

  void setup() {

    size(500, 500);
    background(0, 60, 150);
    frameRate(25);
    // Load images here
    for ( int i = 0; i< img.length; i++ ) {
      img[i] = loadImage( i + ".jpg" );
    }

    //snow
    for (int i = 0; i < 100; i++) {
      sx[i] = random(0, width);
      sy[i] = random(0, height);
      speed[i] = random(1, 5);
    }
  }
  //end snow
  void draw() {

    background(0, 60, 150);
    gradient();
    //snow
    fill(255);
    for (int i = 0; i < 100; i++) {
      ellipse(sx[i], sy[i], speed[i], speed[i]);
      sy[i] = sy[i] + speed[i];
      if (sy[i] > height) {
        sy[i] = 0;
      }
    }
    //end snow
    monument(img[imgIndex], x, y, 200);
  }

  void gradient() {
    int g = 0;
    noStroke();

    while (g<100) {
      fill(g*2.55, 100);
      rect(0, g*5, height, 5);
      g++;
    }
  }

  void monument(PImage pimg, float x, float y, float sz) {
    if (dist(x, y, mouseX, mouseY) < sz) {
      if (mousePressed) {
        cursor(MOVE);
        x = lerp(x, mouseX, 0.2);
        y = lerp(y, mouseY, 0.2);
      } 
      else {
        cursor(HAND);
      }
    } 
    else {
      cursor(ARROW);
    } 
    image(pimg, x, y, sz, sz);
    print(x);
  }

TfGuy44

Edit your post. Select your code. Hit Ctrl + k or click the C button in the formatting options.

PhiLho

Why do you use lerp()? Just put the shape where mouseX / mouseY are, once you found out you are dragging.

There is a Processing example showing how to handle drag, although it uses classes (might be a good idea, anyway), but you can get some ideas.

pleurespam

Can this code be simplified? Like by using array? If so how? float[] sx = new float[100]; float[] sy = new float[100]; float[] speed = new float[100];

float x1=random(100), x2=random(150), x3=random(200), x4=random(250), x5=random(300);
float y1=random(100), y2=random(200), y3=random(250), y4=random(300), y5=random(400);
float sz = 100;
boolean overImg1 = false;
boolean locked1 = false;
float xOffset1 = 0.0; 
float yOffset1 = 0.0; 
boolean overImg2 = false;
boolean locked2 = false;
float xOffset2 = 0.0; 
float yOffset2 = 0.0;
boolean overImg3 = false;
boolean locked3 = false;
float xOffset3 = 0.0; 
float yOffset3 = 0.0;
boolean overImg4 = false;
boolean locked4 = false;
float xOffset4 = 0.0; 
float yOffset4 = 0.0;
boolean overImg5 = false;
boolean locked5 = false;
float xOffset5 = 0.0; 
float yOffset5 = 0.0;

PImage img1, img2, img3, img4, img5;



void setup() {

  size(500, 500);
  background(0, 60, 150);
  frameRate(25);

  img1 = loadImage("1.jpg");
  img2 = loadImage("2.jpg");
  img3 = loadImage("3.jpg");
  img4 = loadImage("4.jpg");
  img5 = loadImage("5.jpg");


  //snow
  for (int i = 0; i < 100; i++) {
    sx[i] = random(0, width);
    sy[i] = random(0, height);
    speed[i] = random(1, 5);
  }
}
//end snow
void draw() {

  background(0, 60, 150);
  gradient();
  //snow
  fill(255);
  for (int i = 0; i < 100; i++) {
    ellipse(sx[i], sy[i], speed[i], speed[i]);
    sy[i] = sy[i] + speed[i];
    if (sy[i] > height) {
      sy[i] = 0;
    }
  }
  //end snow
  // Test if the cursor is over the image 
  if (mouseX > x1-sz && mouseX < x1+sz && 
    mouseY > y1-sz && mouseY < y1+sz) {
    overImg1 = true;
  } 
  else {
    overImg1 = false;
  }
  // Draw the img
  image(img1, x1, y1, sz, sz);
    if (mouseX > x1-sz && mouseX < x1+sz && 
    mouseY > y1-sz && mouseY < y1+sz) {
    overImg1 = true;
  } 
  else {
    overImg1 = false;
  }
  // Draw the img
  image(img2, x2, y2, sz, sz);
    if (mouseX > x2-sz && mouseX < x2+sz && 
    mouseY > y2-sz && mouseY < y2+sz) {
    overImg2 = true;
  } 
  else {
    overImg2 = false;
  }
  // Draw the img
  image(img3, x3, y3, sz, sz);
    if (mouseX > x3-sz && mouseX < x3+sz && 
    mouseY > y3-sz && mouseY < y3+sz) {
    overImg3 = true;
  } 
  else {
    overImg3 = false;
  }
  // Draw the img
  image(img4, x4, y4, sz, sz);
    if (mouseX > x4-sz && mouseX < x4+sz && 
    mouseY > y4-sz && mouseY < y4+sz) {
    overImg4 = true;
  } 
  else {
    overImg4 = false;
  }
  // Draw the img
  image(img5, x5, y5, sz, sz);
}

void gradient() {
  int g = 0;
  noStroke();

  while (g<100) {
    fill(g*2.55, 100);
    rect(0, g*5, height, 5);
    g++;
  }
}
void mousePressed() {

  if (overImg1) { 
    locked1 = true;
  } 
  else {
    locked1 = false;
  }
  xOffset1 = mouseX-x1; 
  yOffset1 = mouseY-y1;

  if (overImg2) { 
    locked2 = true;
  } 
  else {
    locked2 = false;
  }
  xOffset2 = mouseX-x2; 
  yOffset2 = mouseY-y2;

  if (overImg3) { 
    locked3 = true;
  } 
  else {
    locked3 = false;
  }
  xOffset3 = mouseX-x3; 
  yOffset3 = mouseY-y3;

  if (overImg4) { 
    locked4 = true;
  } 
  else {
    locked4 = false;
  }
  xOffset4 = mouseX-x4; 
  yOffset4 = mouseY-y4;

  if (overImg5) { 
    locked5 = true;
  } 
  else {
    locked5 = false;
  }
  xOffset5 = mouseX-x5; 
  yOffset5 = mouseY-y5;
}



void mouseDragged() {

  if (locked1) {
    x1 = mouseX-xOffset1; 
    y1 = mouseY-yOffset1;
  }

  if (locked2) {
    x2 = mouseX-xOffset2; 
    y2 = mouseY-yOffset2;
  }

  if (locked3) {
    x3 = mouseX-xOffset3; 
    y3 = mouseY-yOffset3;
  }

  if (locked4) {
    x4 = mouseX-xOffset4; 
    y4 = mouseY-yOffset4;
  }

  if (locked5) {
    x5 = mouseX-xOffset5; 
    y5 = mouseY-yOffset5;
  }
}

void mouseReleased() {
  locked1 = false;
  locked2 = false;
  locked3 = false;
  locked4 = false;
  locked5 = false;
}



//void monument(PImage pimg, float x, float y, float sz) {
// 
//  image(pimg, x, y, sz, sz);
//  print(x);
//}

GoToLoop

Instead of PImage img1, img2, img3, img4, img5;, use something like this:

final static int NUM = 5;
final PImage[] imgs = new PImage[NUM];

Also, take a look at the tutorial below: :(|)
http://wiki.processing.org/w/From_several_variables_to_arrays