I am trying to do an interactive game where you can drag pieces of my sketches together and create a character.  There is a scroll bar for each piece which one can change the tint separately.  The only problem is that when I click and drag it drags all of my images together instead of separately.  Please help me on what should I do exactly to make each individual image be able to be moved with mouseDrag separately.   I am confused on how to create a class for each piece or doing continuous if else statments on the draw function.  I went to the reference and tried to add th their code and drag more than one object separately but was unsuccessful.  I'm new at this and need help.  Please help.  Thanks.

Below is my code:



Scrollbar bar1, bar2, bar3;
int dragX, dragY, moveX, moveY;
PFont font;
PImage hair, hairInvert, face, faceInvert, shirt, shirtInvert;
int colorSetter = 41;



void setup() {
size(1500, 900);  // document size
 colorMode(HSB, 360, 100, 100);
 

 bar1 = new Scrollbar(10, 35, 80, 10, 0.0, 360.0); //first scroll
 font = loadFont("SansSerif-30.vlw");
 textFont(font);
 textAlign(RIGHT);
 
 hair = loadImage("hair.png"); //oringinal hair image
 hairInvert = loadImage("hairInvert.png"); //original hair image inverted

 
 bar2 = new Scrollbar (10, 100, 80, 10, 0.0, 360.0); //second scroll
 font = loadFont("Serif-20.vlw");
 textFont(font);
 textAlign(RIGHT);  
 
 face = loadImage("face.png"); //original face image
   faceInvert = loadImage ("faceInvert.png");  //original face image inverted
 //image(hairInvert, 1000, 0);
 
 bar3 = new Scrollbar (10, 160, 80, 10, 0.0, 360.0); //third scroll
 font = loadFont("Serif-20.vlw");
 textFont(font);
 textAlign(RIGHT);
 
 shirt = loadImage ("shirt.png"); //original shirt image
 shirtInvert = loadImage ("shirtInvert.png");  //original shirt image inverted
}

void draw() {
 background(255);
 
 noFill();
 
 rect(600, 0, 600, height);
 fill(255);   //first scroll fill
 int pos1 = int(bar1.getPos());
 color sepia = color(pos1, 100, 100);
 tint(sepia);
 

 //image (hair, 1175, 0);
 image(hair, moveX, moveY);
 
 fill(255);
 int pos2 = int(bar2.getPos());     //second scroll fill
 color blue2 = color(pos2, 200, 100);
 tint(blue2);

 
 //image(face, 1250, 300);
 image(face, moveX, moveY);
 
 fill(255);
 int pos3 = int(bar3.getPos());     //third scroll fill
 color blue3 = color(pos3, 300, 100);
 tint(blue3);
 
 //image(shirt, 1325, 500);
 image(shirt, dragX, dragY);


 text(nf(pos1, 2), 50, 75);
 bar1.update(mouseX, mouseY);  //first scroll text
 bar1.display();  
 
   text(nf(pos2, 2), 50, 75);  //second scroll text
 bar2.update(mouseX, mouseY);
 bar2.display();
 
   text(nf(pos3, 2), 50, 75);  //thrid scroll text
 bar3.update(mouseX, mouseY);
 bar3.display();
 
}



void mousePressed() {
 bar1.press(mouseX, mouseY);
 bar2.press(mouseX, mouseY);
 bar3.press(mouseX, mouseY);
}

void mouseReleased() {
 bar1.release();
 bar2.release();
 bar3.release();
}


void mouseDragged() { // Move Image
 dragX = mouseX;
 dragY = mouseY;
 moveX = mouseX;
 moveX = mouseY;
 
}

--------------------------------------------------------------------------------
-
Below is Class for scroll bar:

class Scrollbar {
 int x, y; // The x- and y-coordinates
 float sw, sh; // Width and height of scrollbar
 float pos; // Position of thumb
 float posMin, posMax; // Max and min values of thumb
 boolean rollover; // True when the mouse is over
 boolean locked; // True when its the active scrollbar
 float minVal, maxVal; // Min and max values for the thumb
 Scrollbar(int xp, int yp, int w, int h, float miv, float mav) {
   x = xp;
   y = yp;
   sw = w;
   sh = h;
   minVal = miv;
   maxVal = mav;
   pos = x + sw / 2 - sh / 2;
   posMin = x;
   posMax = x + sw - sh;
 }

 // Updates the over boolean and the position of the thumb
 void update(int mx, int my) {
   if (over(mx, my) == true) {
     rollover = true;
   } else {
     rollover = false;
   }
   if (locked == true) {
     pos = constrain(mx - sh / 2, posMin, posMax);
   }
 }

 // Locks the thumb so the mouse can move off and still update
 void press(int mx, int my) {
   if (rollover == true) {
     locked = true;
   } else {
     locked = false;
   }
 }

 // Resets the scrollbar to neutral
 void release() {
   locked = false;
 }
 
 // Returns true if the cursor is over the scrollbar
 boolean over(int mx, int my) {
   if ((mx > x) && (mx < x + sw) && (my > y) && (my < y + sh)) {
     return true;
   } else {
     return false;
   }
 }

 // Draws the scrollbar to the screen
 void display() {
   fill(255);
   rect(x, y, sw, sh);
   if ((rollover == true) || (locked == true)) {
     fill(0);
   } else {
     fill(102);
   }
   rect(pos, y, sh, sh);
 }

 // Returns the current value of the thumb
 float getPos() {
   float scalar = sw / (sw - sh);
   float ratio = (pos - x) * scalar;
   float offset = minVal + (ratio / sw * (maxVal - minVal));
   return offset;
 }
}

I apologize for posting twice.  I had both codes and was unsure which to post and in which category so I posted twice.  But I am sorry this was my first time ever posting on this site.  I understand the rules now and I promise it will never happen again.

Thanks you for your help.  I just had a quick question about the example code you gave me.  I hope you don't think it's not a stupid question like I said before I am very new to this.

Since they are images are they still objects?  In myObjects would I make an array of all my images since they are considered my objects within this project?  And where does the boolean fit in because I see it can declare one but not in the code.  I'm not sure of how to place it inside of my code and add my images in place of it.  Can you please help me once again.  Thank you.