How can I mask graphics to a resizable rectangle?

Processing Coding Questions
8

Ok, usually one should not post too much solutions :slight_smile: 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)

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:

//--------------------------------------------------------------
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

1 Like