I can't drag my image properly?

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);
  }

Answers

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

  • 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.

  • 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);
    //}
    
  • edited October 2013

    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

Sign In or Register to comment.