# How can I mask graphics to a resizable rectangle?

**URL:** <https://discourse.processing.org/t/how-can-i-mask-graphics-to-a-resizable-rectangle/23632>\
**Category:** Coding Questions\
**Created:** [September 2, 2020, 12:49pm UTC](https://discourse.processing.org/t/how-can-i-mask-graphics-to-a-resizable-rectangle/23632 "2020-09-02T12:49:04Z")\
**Posts on this page:** 1\
**Showing post:** 8

<div class="post-metadata">

**Author:** ![Hyperion65](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hyperion65/32/10569_2.png) [@Hyperion65](https://discourse.processing.org/u/Hyperion65)\
**Post date:** [September 7, 2020, 3:11pm UTC](https://discourse.processing.org/t/how-can-i-mask-graphics-to-a-resizable-rectangle/23632/8 "2020-09-07T15:11:29Z")

</div>

Ok, usually one should not post too much solutions 🙂 but I got carried away.

maybe this helps…  
you need to resize the window to find the image. +/- lets you move it around, the window can be moved or resized.

(maybe there is a little overweight, because I used parts from a button class I made)

```auto
Window w;
//--------------------------------------------------------------
void setup() {
  size(1920, 1080, P2D);
  w = new Window();
}
//--------------------------------------------------------------
void draw () {
  background (255);
  w.updateWindow();
  w.renderWindow();
  
  if(keyPressed && key == '+')w.offsetY += 10;
  if(keyPressed && key == '-')w.offsetY -= 10;
}
//--------------------------------------------------------------
void mouseDragged() {
  if (pmouseY > mouseY) w.offsetY += 1;
  if (pmouseY < mouseY) w.offsetY -= 1;
}
//--------------------------------------------------------------

```

and:

```auto
//--------------------------------------------------------------
class Window {
  //-------------------------------------------------------------- variables
  PGraphics myCanvas;
  PImage img;
  int wWidth = 200;
  int wHeight = 100;
  float wX = 0;
  float wY = 0;
  int lowerRightCornerRange = 10;
//---------------
  float startX, startY; // starting coordinates when a drag begins
  float endX, endY; // coordinates when a drag ends
//---------------
  boolean isInside = false;
  boolean isInsideCorner = false;
  boolean isPressed; // is the mouse pressed
  boolean hasBeenPressed; // has the mouse been pressed before
  boolean isReleased;
  boolean isClicked;
  int pressedTime; // record time when the button is pressed to detect mouseReleased
  int mouseReleasedLimit = 250; // define the time how long after a mousePress a mouseCLick will be accepted
//---------------
  boolean pressedInsideWindow = false;
  boolean pressedInsideCorner = false;
//---------------
  float offsetY = 0; // move the image around -> or use translate and leave the x,y values be
  //-------------------------------------------------------------- constructor
  Window () {
    initializeWindow(wWidth, wHeight);
    img = loadImage("https://occ-0-1068-92.1.nflxso.net/dnm/api/v6/E8vDc_W8CLv7-yMQu8KMEC7Rrr8/AAAABceL_FxRrEg1Jm2LyiYugCJwBkJ2v4GmCBWQ_JNLBXCu1tpO1CMoOxGk9R74PCzrCR0FLIrjdgZlyIHnZEuiHArY6C9G.jpg?r=a82");
  }
  //-------------------------------------------------------------- methods
  void initializeWindow (int w, int h) {
    myCanvas = createGraphics(w, h, P2D);
    myCanvas.beginDraw();
    myCanvas.clear();
    myCanvas.fill(0);
    myCanvas.noStroke();
    myCanvas.endDraw();
  }
  //--------------------------------------------------------------
  void updateWindow() {
    checkCollision();
  }
  //--------------------------------------------------------------
  void renderWindow() {
    myCanvas.beginDraw();
    myCanvas.clear();
    myCanvas.fill(0);
    myCanvas.rect(0, 0, wWidth, wHeight);
    myCanvas.image(img, 200, 200+offsetY);
    if (isInsideCorner) {
      myCanvas.fill(255, 0, 0);
      myCanvas.rect(wX+wWidth-lowerRightCornerRange, wY+wHeight-lowerRightCornerRange, lowerRightCornerRange, lowerRightCornerRange);
    }
    myCanvas.endDraw();
    image(myCanvas, wX, wY);
  }
  //--------------------------------------------------------------
  void checkCollision() {
    if (mouseX > wX && mouseX < wX + wWidth && mouseY > wY && mouseY < wY + wHeight) { // is the mouse inside
      isInside = true;       
      if (mouseX > wX+wWidth-lowerRightCornerRange && mouseX < wX+wWidth && mouseY > wY+wHeight-lowerRightCornerRange && mouseY < wY+wHeight) { // is the mouse inside the corner area
        isInsideCorner = true;
      } else {
        isInsideCorner = false;
      }
    } else {
      isInside = false; 
      isInsideCorner = false;
    }
    //----------------------------------
    if (mousePressed && isInside && !isInsideCorner) {     
      isPressed = true;      
      if (!hasBeenPressed) {
        pressedTime = millis();
        hasBeenPressed = true;
        pressedInsideWindow = true;
        pressedInsideCorner = false;
        println ("Pressed Inside Window");
        startX = mouseX-wX;
        startY = mouseY-wY;
        println ("Start at: "+ startX + " " + startY);
      }
    } else {
      isPressed = false;
    }
    //----------------------------------
    if (mousePressed && isInsideCorner) {
      isPressed = true;      
      if (!hasBeenPressed) {
        pressedTime = millis();
        hasBeenPressed = true; 
        pressedInsideWindow = false;
        pressedInsideCorner = true;
        println ("Pressed Inside Corner");
        startX = mouseX-wWidth;
        startY = mouseY-wHeight;
        println ("Start at: "+ startX + " " + startY);
      }
    } else {
      isPressed = false;
    }
    //----------------------------------
    if (hasBeenPressed) {
      endX = mouseX;
      endY = mouseY;
      if (pressedInsideWindow) {
        wX = endX-startX;
        wY = endY-startY;
      }
      if (pressedInsideCorner) {
        wWidth = int(endX-startX);
        wHeight = int(endY-startY);
        fill(255, 0, 0);
        rect(wX, wY, wWidth, wHeight);
      }
    }
    if (!mousePressed && hasBeenPressed) {
      println ("End at: "+ endX + " " + endY);
      hasBeenPressed = false;
      initializeWindow(wWidth, wHeight);
    }
    //----------------------------------
  }
  //--------------------------------------------------------------
}

```

cheers

---

_[View the full topic](https://discourse.processing.org/t/how-can-i-mask-graphics-to-a-resizable-rectangle/23632)._