# Question about mouse2DTransformations library

**URL:** <https://discourse.processing.org/t/question-about-mouse2dtransformations-library/5363>\
**Category:** Libraries\
**Created:** [November 9, 2018, 2:06am UTC](https://discourse.processing.org/t/question-about-mouse2dtransformations-library/5363 "2018-11-09T02:06:46Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![ddownn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ddownn/32/2731_2.png) [@ddownn](https://discourse.processing.org/u/ddownn)\
**Post date:** [November 9, 2018, 2:06am UTC](https://discourse.processing.org/t/question-about-mouse2dtransformations-library/5363/1 "2018-11-09T02:06:47Z")

</div>

I was hoping to use this library, but I must be doing something wrong. Can someone let me know what I am not doing right?

The idea is that clicking on the slider bar changes its color, but it only works when clicking on the rectangle’s pre-pushMatrix() position. (it starts out horizontal and is simply rotated 90 degrees.)

```auto
// mouseOnPathPositionAsPercent
import mouse.transformed2D.*;
MouseTransformed mouse = new MouseTransformed(this);

Slider slider;
PVector m;
void setup() {
  size(800, 480);
  slider = new Slider();
}

void draw() {
  background(0, 0, 255);
  m = new PVector(mouseX, mouseY);
  slider.display();
}
void mousePressed() {
  if (slider.isOver() == true) {
    slider.fillColor = 50;
  }
}
void mouseReleased() {
  slider.fillColor = 255;
}
class Slider {
  PVector loc, dims, xyMin, xyMax;
  float angle;
  int fillColor;
  Slider() {
    loc = new PVector(width/2, height/2);
    dims = new PVector(300, 75);
    xyMin = new PVector(loc.x - dims.x/2, loc.y - dims.y/2);
    xyMax = new PVector(loc.x + dims.x/2, loc.y + dims.y/2);
    angle = 90;
    fillColor = 255;
  }
  boolean isOver() {
    if (mouse.mouseX() > xyMin.x && mouse.mouseY() > xyMin.y && 
      mouse.mouseX() < xyMax.x && mouse.mouseY() < xyMax.y) {
      return true;
    } else {
      return false;
    }
  }
  void display() {
    mouse.pushMatrix();
    mouse.translate(loc.x, loc.y);
    mouse.rotate(radians(angle));
    fill(fillColor);
    rectMode(CENTER);
    rect(0, 0, dims.x, dims.y);
    mouse.popMatrix();
  }
}

```

---

<div class="post-metadata">

**Author:** ![Lexyth](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lexyth/32/7403_2.png) [@Lexyth](https://discourse.processing.org/u/Lexyth)\
**Post date:** [November 9, 2018, 8:40am UTC](https://discourse.processing.org/t/question-about-mouse2dtransformations-library/5363/2 "2018-11-09T08:40:02Z")

</div>

Well, i‘m not really sure what should exactly be different, But you could try adding println(„“) before and after and Printing the Position of the Rect and the mouse and See if they are where they should really be, or if something goes wrong. And if, then where? You can find that by just println(„position1“,mX,mY,rectX,rectY) or 2 and so on for each println you have.

---

<div class="post-metadata">

**Author:** ![ddownn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ddownn/32/2731_2.png) [@ddownn](https://discourse.processing.org/u/ddownn)\
**Post date:** [November 9, 2018, 6:03pm UTC](https://discourse.processing.org/t/question-about-mouse2dtransformations-library/5363/3 "2018-11-09T18:03:30Z")

</div>

Thanks. It looks like maybe reason this isn’t working is because the `xyMin xyMax` values I’m using in `isOver()` aren’t updated along with the translation. I’m not sure how to make that happen.

---

<div class="post-metadata">

**Author:** ![Lexyth](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lexyth/32/7403_2.png) [@Lexyth](https://discourse.processing.org/u/Lexyth)\
**Post date:** [November 9, 2018, 8:00pm UTC](https://discourse.processing.org/t/question-about-mouse2dtransformations-library/5363/4 "2018-11-09T20:00:36Z")

</div>

Ah yes… Thats definetly it 😅 I can‘t Seen to find where the angle of the Slider actually is changed, But in there you should also rotate and translate the xyMin and xyMax values 😅

---

<div class="post-metadata">

**Author:** ![ddownn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ddownn/32/2731_2.png) [@ddownn](https://discourse.processing.org/u/ddownn)\
**Post date:** [November 9, 2018, 8:17pm UTC](https://discourse.processing.org/t/question-about-mouse2dtransformations-library/5363/5 "2018-11-09T20:17:37Z")

</div>

I came across this library in a post on the old forum when I was having trouble making a slider that could be rotated, so that what that is for. I was having so much trouble with it that I disabled the rotation until I could get it working with just a basic translation.

---

<div class="post-metadata">

**Author:** ![ddownn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ddownn/32/2731_2.png) [@ddownn](https://discourse.processing.org/u/ddownn)\
**Post date:** [November 15, 2018, 2:14am UTC](https://discourse.processing.org/t/question-about-mouse2dtransformations-library/5363/6 "2018-11-15T02:14:33Z")

</div>

I was able to get this to work, thanks for the advice.