Multiple draggable images (drags once and locks)

Processing Libraries
1

Hello!

I’ve got many images—over 30—and want to drag each one of them independently across the canvas. Once you move one of the images, by releasing it becomes locked at current mouseX and Y coordinates and can’t be moved anymore (tried noloop but that locks the rest of the images as well).
I know I might need to use a class + arraylist, but can’t quite understand those concepts fully yet.

Does anyone know how that could be done?

Thank you so much :revolving_hearts:

2

Please paste your code here and we’ll be happy to help =)

2 Likes
3

Agreed - show us your code! Be sure to format it with the </> button.

Without your code, we have to put the effort in to write an entire sketch just to help you.
With your code, we might be able to make the simple changes needed!

1 Like
4 
float xos, yos;
int x = 100;
int y = 100;
int sz = 100;
PImage imga;
PImage imgb;
PImage imgc;
PImage imgd;

//tamanho da tela e cor de fundo;
void setup() {
  fullScreen();
  background(0);
  noFill();
  
  //images
  imga = loadImage("1.png");
  imgb = loadImage("2.png");
  imgc = loadImage("3.png");
  imgd = loadImage("4.png");
}

//some fancy stuuuufff here
void draw() {
  background(0);
  translate(-xos, -yos);
  
  image(imga, x, y, sz, sz);
  image(imgb, x, sz+y, sz, sz);
  image(imgc, x, sz+sz+y, sz, sz);
  image(imgd, x, sz+sz+sz+y, sz, sz);



// x,y -> centre of the circle; when distance is half the diameter, then mouse is inside circle
 if(dist(x, y, mouseX, mouseY) < sz / 2){ //sz -> diametro; sz / 2 = raio!
   //inside image
   cursor(HAND);
   stroke(255);
   if(mousePressed){
     x = mouseX; //moving circle to wherever the mouse is!
     y = mouseY;
     strokeWeight(5);
   } else{
     strokeWeight(2);
   }
   //outside image
  } else{
   noStroke();
   cursor(ARROW);
  }
}


void mouseDragged() {
  xos += pmouseX - mouseX;
  yos += pmouseY - mouseY;
  xos = constrain(xos,0,3000);
  yos = constrain(yos,0,3000);

}

here it is! the work in progress :blush:
only 4 images are listed at the moment… I’m worried Processing might have a hard time running when it has more than that;
also :^) whatever you do, can you try to explain the process/names of things? not needed, but I’d like to actually learn the method.
any advice is welcome!
thank you!

5

Were you able to resolve this, or are you still working on this problem? It looks like you want to know how to move from a series of img variables to an array of images.

PImage[] imgs = new PImage[30];

You might be interested in some of the array reference pages, tutorials, and examples:

6

Hi!

I was able to resolve this, yes :blush: I did an array of images like you said!
My problem now is that I can’t come up with an array for sound files… I don’t know what the equivalent of loadImage is for sound :\

7

There isn’t an equivalent, because PImage / loadimage is built in to Processing core, while for sound you must use an external library – either Sound or Minim, depending on what you are trying to do. Are you trying to play lots of very short sounds? Will some of them play simultaneously? Then you probably want Minim and to load a sampler