Overlap between images

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?

Tagged:

Answers

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

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

Sign In or Register to comment.