Overlap between images

seelysassage

Hi, I have a sketch that draws multiple images. I have an array of custom type, the type contains the parameters (image, x, y, width, height). I want to check for overlap between all images drawn (already done) but I want it to be so that if there is an overlap, draw the image last selected on top. How do I incorporate the output of the overlap checking function with the draw() function?

KevinWorkman

Either sort the array based on the order they were sorted, or include a Z index that you use with a 3D renderer. Try something out, post some code, and we'll go from there.

seelysassage

Thank you for your reply. I'm having a hard time deciding which of these methods helps; the sorting would have to happen everytime an image is clicked. The I'm attaching the code

Window[] windowArray;
PImage img0, img1, img2;

boolean shrinking = false; 

//PGraphics for alpha blending
PGraphics pg;
int anchorX=0;
int anchorY=0;
float widgetScale = 0.25;

class Window {
  PImage image;
  int xpos;
  int ypos;
  int heights;
  int widths;
  Window(PImage img, int x, int y, int w, int h) {
    xpos=x;
    ypos=y;
    heights=h;
    widths=w;
    image=img;
  }

  int getX() {
    return xpos;
  }
  int getY() {
    return ypos;
  }
  PImage getImg() {
    return image;
  }

  void setImg(PImage imag) {
    image=imag;
  }
  int getWidth() {
    return widths;
  }
  int getHeight() {
    return heights;
  }
  void setX(int x) {
    xpos = x;
  }
  void setY(int y) {
    ypos = y;
  }
  void setWidth(int a) {
    widths=a;
  }
  void setHeight(int b) {
    heights=b;
  }  

  //I would add method to test mouse click
  boolean isHit(int x, int y) {
    if ( xpos < x  && x < (xpos + widths) && ypos < y && y < (ypos + heights) )
      return true;
    else
      return false;  
  }

  // draw image rect
  void draw() {

    pg.image(image, xpos, ypos, widths, heights);
  }

}

void setup() {
  windowArray = new Window[3];

  size(1000, 1000);

  //use PGraphis for alpha blending
  pg = createGraphics(width, height);

  img0=loadImage("0.jpg");
  img1=loadImage("1.jpg");
  img2=loadImage("2.jpg");

  //initial positions
  windowArray[0]=new Window(img0, 100, 50, 100, 100);
  windowArray[1]=new Window(img1, 200, 100, 100, 100);
  windowArray[2]=new Window(img2, 10, 300, 100, 100);
}

void draw() {

  //modify all drawing related method/function to use pg object
  pg.beginDraw();
  pg.background(0, 255);

  windowArray[0].draw();
  windowArray[1].draw();
  windowArray[2].draw();


  if (shrinking) {

    // darken desktop: draw transparent rect covering entire screen
    // for color tinting effect call pg.fill(r, g, b, alpha)
    pg.fill(0, 150);
    pg.rect(0,0,width,height);
    pg.noFill();

    // draw shrinked version of windows
    // first apply offset based of anchor point, then scale factor
    pg.pushMatrix();                 // push transform matrix: will only affect widget part
    pg.translate(anchorX, anchorY);  // apply anchor point coordinate as translation offset
    pg.scale(widgetScale);                  // 25% of real size

    // would be better to show some representation of desktop area (widget area)
    pg.fill(200, 100);
    pg.rect(0,0,width,height);
    pg.noFill();

    // draw windows
    windowArray[0].draw();
    windowArray[1].draw();
    windowArray[2].draw();

    // pop out transform matrix so that transform does not apply to outside widget drawing part
    pg.popMatrix(); 

  }

  //
  pg.endDraw();
  image(pg, 0, 0);
}

void keyPressed() {

  // widget mode?
  if (key == 's') {
    // set anchor position
    anchorX = mouseX - int(width*widgetScale*0.5);
    anchorY = mouseY - int(height*widgetScale*0.5);

    // set widget mode
    shrinking = true;
  }
}

// mouse click
void mouseClicked() {

  // widget mode?
  if (shrinking) {
    // transform mouse click point within widget coordinate space to global space
    int x = int( (mouseX - anchorX)/widgetScale );
    int y = int( (mouseY - anchorY)/widgetScale );

    // check hit for windows
    for (int i=0; i<windowArray.length; i++) {
      if ( windowArray[i].isHit(x, y) ) {
        shrinking = false;
        windowArray[i].setX(mouseX-windowArray[i].getWidth()/2);
        windowArray[i].setY(mouseY-windowArray[i].getWidth()/2);
        return;
      }
    }
    //none hit? just exit widget mode
    shrinking = false;

  } else {
    //otherwise what to do?  

  }
}

KevinWorkman

Right, the sorting would have to happen every time an image is clicked.

Rather, you'd simply move the image that was most recently clicked to the front of the array.

There are also data structures in Java that would help maintain this order.

So it's not really a matter of sorting every single time, but rather maintaining the sort order.