Mouse click position when I resize fullscreen with command scale

dfnogueira

Hi everyone. I resized a draw section using command "scale". It's work well. However, the local where I have press a button doesn't move. It stays in the "fullscreen" position. Could someone help me?

dfnogueira

    int rectX, rectY;      // Position of square button
    int circleX, circleY;  // Position of circle button
    int rectSize = 90;     // Diameter of rect
    int circleSize = 93;   // Diameter of circle
    color rectColor, circleColor, baseColor;
    color rectHighlight, circleHighlight;
    color currentColor;
    boolean rectOver = false;
    boolean circleOver = false;

    void setup() {
      fullScreen();
      rectColor = color(0);
      rectHighlight = color(51);
      circleColor = color(255);
      circleHighlight = color(204);
      baseColor = color(102);
      currentColor = baseColor;
      circleX = width/2+circleSize/2+10;
      circleY = height/2;
      rectX = width/2-rectSize-10;
      rectY = height/2-rectSize/2;
      ellipseMode(CENTER);
    }

    void draw() {
      scale(0.7); // <----- I scaled here
      update(mouseX, mouseY);
      background(currentColor);

      if (rectOver) {
        fill(rectHighlight);
      } else {
        fill(rectColor);
      }
      stroke(255);
      rect(rectX, rectY, rectSize, rectSize);

      if (circleOver) {
        fill(circleHighlight);
      } else {
        fill(circleColor);
      }
      stroke(0);
      ellipse(circleX, circleY, circleSize, circleSize);
    }

    void update(int x, int y) {
      if ( overCircle(circleX, circleY, circleSize) ) {
        circleOver = true;
        rectOver = false;
      } else if ( overRect(rectX, rectY, rectSize, rectSize) ) {
        rectOver = true;
        circleOver = false;
      } else {
        circleOver = rectOver = false;
      }
    }

    void mousePressed() {
      if (circleOver) {
        currentColor = circleColor;
      }
      if (rectOver) {
        currentColor = rectColor;
      }
    }

    boolean overRect(int x, int y, int width, int height)  {
      if (mouseX >= x && mouseX <= x+width && 
          mouseY >= y && mouseY <= y+height) {
        return true;
      } else {
        return false;
      }
    }

    boolean overCircle(int x, int y, int diameter) {
      float disX = x - mouseX;
      float disY = y - mouseY;
      if (sqrt(sq(disX) + sq(disY)) < diameter/2 ) {
        return true;
      } else {
    return false;
  }
}

kfrajer

Please format your code. Edit your post (gear on top right side of any of your posts), select your code and hit ctrl+o. Leave an empty line above and below your block of code. Details here: https://forum.processing.org/two/discussion/15473/readme-how-to-format-code-and-text

Kf

dfnogueira

Code formated

kfrajer

If you remove your scale() function call - line 27, everything works fine. If you execute your sketch scaled, you will see that your drawing buffer is scaled but your mouse pointer doesn't know about this change. This is because Processing doesn't scale your mouse pointer. You have to do it yourself.

So below is an example implementing some changes in your code. In a nutshell, you need to use mX and mY instead of mouseX and mouseY. An alternative is to use the Mouse2DTransformations library. You can install it through the Processing PDE and then check the provided examples. A final alternative is to check previous posts related to panning.

https://forum.processing.org/two/discussion/1364/constraining-an-image-while-panning-and-zooming

https://forum.processing.org/two/discussion/20853/scale-translate-ab-comparission#latest

https://forum.processing.org/two/discussion/20813/zooming-and-panning-headache#latest

Kf

final float scaleFactor=0.7;

float mX;
float mY;

int rectX, rectY;      // Position of square button
int circleX, circleY;  // Position of circle button
int rectSize = 90;     // Diameter of rect
int circleSize = 93;   // Diameter of circle
color rectColor, circleColor, baseColor;
color rectHighlight, circleHighlight;
color currentColor;
boolean rectOver = false;
boolean circleOver = false;

void setup() {
  //fullScreen();
  size(500, 500);
  ellipseMode(CENTER);
  rectColor = color(0);
  rectHighlight = color(51);
  circleColor = color(255);
  circleHighlight = color(204);
  baseColor = color(102);
  currentColor = baseColor;
  circleX = width/2+circleSize/2+10;
  circleY = height/2;
  rectX = width/2-rectSize-10;
  rectY = height/2-rectSize/2;
}

void draw() {
  background(currentColor);

  fill(0, 255, 0);
  ellipse(mouseX, mouseY, 50, 50);
  text("mouseX, mouseY B4", mouseX+50, mouseY);

  scale(scaleFactor); // <----- I scaled here
  mX=mouseX/scaleFactor;
  mY=mouseY/scaleFactor;


  fill(255, 0, 0);
  ellipse(0, 0, 50, 50);


  fill(255, 0, 0);
  ellipse(mX, mY, 50, 50);
  text("mx,my", mX+50, mY);

  fill(255, 255, 0);
  ellipse(mouseX, mouseY, 5, 5);
  text("mouseX, mouseY after", mouseX+50, mouseY);

  update(mX, mY);


  if (rectOver) {
    fill(rectHighlight);
  } else {
    fill(rectColor);
  }
  stroke(255);
  rect(rectX, rectY, rectSize, rectSize);

  if (circleOver) {
    fill(circleHighlight);
  } else {
    fill(circleColor);
  }
  stroke(0);
  ellipse(circleX, circleY, circleSize, circleSize);
}

void update(float x, float y) {
  if ( overCircle(circleX, circleY, circleSize) ) {
    circleOver = true;
    rectOver = false;
  } else if ( overRect(rectX, rectY, rectSize, rectSize) ) {
    rectOver = true;
    circleOver = false;
  } else {
    circleOver = rectOver = false;
  }
}

void mousePressed() {
  if (circleOver) {
    currentColor = circleColor;
  } else  if (rectOver) {
    currentColor = rectColor;
  } else 
  currentColor=baseColor;
}

boolean overRect(int x, int y, int width, int height) {
  if (mX >= x && mX <= x+width && 
    mY >= y && mY <= y+height) {
    return true;
  } else {
    return false;
  }
}

boolean overCircle(float x, float y, int diameter) {
  float disX = x - mX;
  float disY = y - mY;
  if (sqrt(sq(disX) + sq(disY)) < diameter/2 ) {
    return true;
  } else {
    return false;
  }
}

dfnogueira

Thank you so much. Nice.