# applyMatrix to mouseX and mouseY

**URL:** <https://discourse.processing.org/t/applymatrix-to-mousex-and-mousey/14242>\
**Category:** Beginners\
**Created:** [September 27, 2019, 4:46pm UTC](https://discourse.processing.org/t/applymatrix-to-mousex-and-mousey/14242 "2019-09-27T16:46:04Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jithin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jithin/32/122_2.png) [@Jithin](https://discourse.processing.org/u/Jithin)\
**Post date:** [September 27, 2019, 4:46pm UTC](https://discourse.processing.org/t/applymatrix-to-mousex-and-mousey/14242/1 "2019-09-27T16:46:04Z")

</div>

When I use applyMatrix in a sketch to transform the coordinates, the mouseX and mouseY is not transformed accordingly.

The sketch explains the problem.  
[https://editor.p5js.org/jithunni.ks/sketches/p9Q0JnE\_l](https://editor.p5js.org/jithunni.ks/sketches/p9Q0JnE_l)

Is there any function that lets us apply the same matrix to mouseX and mouseY also?

---

<div class="post-metadata">

**Author:** ![tony](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tony/32/949_2.png) [@tony](https://discourse.processing.org/u/tony)\
**Post date:** [September 27, 2019, 10:02pm UTC](https://discourse.processing.org/t/applymatrix-to-mousex-and-mousey/14242/2 "2019-09-27T22:02:07Z")

</div>

Hello!

It looks like you’re example is working fine. I think you might be misunderstanding how the applyMatrix() function works. In effect, you’re calling [translate(width/2, height/2)](https://p5js.org/reference/#/p5/translate).

Once it’s called, any drawing functions, like `ellipse()`, or in your case, `line()`, has the matrix applied to it.

```auto
  // translating origin to the sketch center
  applyMatrix(1,0,0,1,width/2,height/2)
  
  stroke(0)
  // This should actually draw a line from center to mouse, but it doesn't
  // as showed by the black line
  line(0,0,mouseX,mouseY)

```

`line()` only knows this: take 4 numbers, apply the matrix to them, draw the line. `mouseX` and `mouseY` are any other numbers.

---

<div class="post-metadata">

**Author:** ![Jithin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jithin/32/122_2.png) [@Jithin](https://discourse.processing.org/u/Jithin)\
**Post date:** [September 28, 2019, 5:00am UTC](https://discourse.processing.org/t/applymatrix-to-mousex-and-mousey/14242/3 "2019-09-28T05:00:43Z")

</div>

After I applied the matrix. what I really needed to draw is -

`line(0,0,mouseX-width/2,mouseY-height/2)`

This is something that I should automatically get. I should not be again trying to figure out how I can draw the line by comparing the changes that I made by applying the matrix.

So it should be like

`applyMatrix(...params)`  
`applyMatrixToMouse(...params)`  
`line(0,0,mouseX,mouseY)`

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [September 28, 2019, 7:39am UTC](https://discourse.processing.org/t/applymatrix-to-mousex-and-mousey/14242/4 "2019-09-28T07:39:36Z")

</div>

mouseX and mouseY do not get effected by the matrix

With good reasons

Instead you have to add the values

---

<div class="post-metadata">

**Author:** ![Jithin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jithin/32/122_2.png) [@Jithin](https://discourse.processing.org/u/Jithin)\
**Post date:** [September 28, 2019, 8:25am UTC](https://discourse.processing.org/t/applymatrix-to-mousex-and-mousey/14242/5 "2019-09-28T08:25:29Z")

</div>

Wouldn’t it be helpful if we have a function applyMatrixToMouse because I’m ready to implement that by contributing.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [September 28, 2019, 10:00am UTC](https://discourse.processing.org/t/applymatrix-to-mousex-and-mousey/14242/6 "2019-09-28T10:00:40Z")

</div>

You can search for the library Robot which has means to move the mouse cursor

---

<div class="post-metadata">

**Author:** ![Tiemen](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tiemen/32/5477_2.png) [@Tiemen](https://discourse.processing.org/u/Tiemen)\
**Post date:** [September 28, 2019, 10:55am UTC](https://discourse.processing.org/t/applymatrix-to-mousex-and-mousey/14242/7 "2019-09-28T10:55:21Z")

</div>

Have you considered to write a small function which translates the canvas _and_ the mouse coordinates? That way you only have to mention the translate values once:

```auto
let mX, mY;

function setup() {
  // code
}

function draw() {
  translateMore(width/2, height/2);  
  // code
}

function translateMore(_x, _y) {
  mX = mouseX - _x;
  mY = mouseY - _y;
  translate(_x, _y);
}

```

---

<div class="post-metadata">

**Author:** ![Jithin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jithin/32/122_2.png) [@Jithin](https://discourse.processing.org/u/Jithin)\
**Post date:** [September 28, 2019, 12:02pm UTC](https://discourse.processing.org/t/applymatrix-to-mousex-and-mousey/14242/8 "2019-09-28T12:02:47Z")

</div>

That seems to be a very good idea indeed. Probably I can also write functions like if I’m using scaling and rotation as well.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [October 1, 2019, 6:01pm UTC](https://discourse.processing.org/t/applymatrix-to-mousex-and-mousey/14242/9 "2019-10-01T18:01:45Z")

</div>

Note that in WEBGL there isn’t actually a unique solution for this problem. That is because applyMatrix is 3D, and the mouse is 2D. So the question “after rotation, where can I draw a line such that it intersects ends visually intersecting with the mouse?” has a set of answers that form a ray cast from the mouse into 2D space. You would need to further constrain those answers based on something – the plane z=0, or perpendicular to point A with respect to the camera, etc. You can however ask the question the other way – for a given 3D point, what is the 2D screen position (screenX): see the library [https://github.com/bohnacker/p5js-screenPosition](https://github.com/bohnacker/p5js-screenPosition)

There _is_ a unique solution in 2D – it is just that this is a special case for matrices.

You may also be interested in this past issue, and the links in it:

> <https://github.com/processing/p5.js/issues/377>

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 2, 2019, 6:54am UTC](https://discourse.processing.org/t/applymatrix-to-mousex-and-mousey/14242/10 "2019-10-02T06:54:04Z")

</div>

> [@jeremydouglass](#):
>
> has a set of answers that form a ray cast from the mouse into 2D space. You would need to further constrain those answers based on something – the plane z=0

what would be the answer for z=-200; ?

I struggle with that. It’s kind of inverse screenX