Mouse position relative to transformations?

EagleEye7777777

Hello,

I have used rotate() and translate() to move around the canvas, however, the mouseX and mouseY properties are still relative to the top left of the canvas. Is there any way to get them relative to the translated and rotated position?

Thanks, Joseph.

P.S. let me know if you need any code samples.

Lord_of_the_Galaxy

Look at screenX and screenY. Use screenX(mouseX, mouseY) and screenY(mouseX, mouseY) to get the coordinates you want. I'm not entirely sure this is what you want, but try it.

EagleEye7777777

Doesn't look like what I am after. Say for example I did translate(100, 100) and rotate(PI) and put my mouse at (100, 10) relative to the top left of the canvas. MouseY would be 10 whereas I would like to know the location relative to the translated and rotated point i.e. 90 in this case. Thanks, I hope this is more clear.

Lord_of_the_Galaxy

Did you try it? You wouldn't know if it works unless you do. If I'm understanding your,problem right, you want to get the position mouse would be if you were to transform it too. Or are you looking at reverse transformations, i.e. the location of mouse relative to the new frame of reference?

Chrisir

screenX and screenY is the way to go

It calculates the translated and rotated matrix to the normal matrix (absolute position that is also used by the mouse)

But you don't modify the mouse position but instead get the absolute position of your translated and rotated points

Compare the value of the result of screenX and screenY to the mouse position

Chrisir

See reference

Lord_of_the_Galaxy

So that is what you were trying to do?

Why don't you just ask exactly what your goal is?

EagleEye7777777

I have looked in the reference and cannot see anything about it, also when I try to use it the program just seems to crash. Are you sure it is in p5.js not just processing? Sorry if I am being stupid.

Lord_of_the_Galaxy

Uh oh. My mistake. I thought you're using Processing. Sorry.

EagleEye7777777

Here is the code:

var elecrons1440 = [{"x": 200, "y": 300, "dist": 75, "rotLoc": 0, "rotVol": 3, "r": 0, "g": 0, "b": 255},
    {"x": 200, "y": 300, "dist": 75, "rotLoc": 180, "rotVol": 3, "r": 0, "g": 0, "b": 255},
    {"x": 200, "y": 300, "dist": 125, "rotLoc": 0, "rotVol": -3, "r": 0, "g": 0, "b": 255},
    {"x": 200, "y": 300, "dist": 125, "rotLoc": 45, "rotVol": -3, "r": 0, "g": 0, "b": 255},
    {"x": 200, "y": 300, "dist": 125, "rotLoc": 90, "rotVol": -3, "r": 0, "g": 0, "b": 255},
    {"x": 200, "y": 300, "dist": 125, "rotLoc": 135, "rotVol": -3, "r": 0, "g": 0, "b": 255},
    {"x": 200, "y": 300, "dist": 125, "rotLoc": 180, "rotVol": -3, "r": 0, "g": 0, "b": 255},
    {"x": 200, "y": 300, "dist": 125, "rotLoc": 225, "rotVol": -3, "r": 0, "g": 0, "b": 255},
    {"x": 200, "y": 300, "dist": 125, "rotLoc": 270, "rotVol": -3, "r": 0, "g": 0, "b": 255},
    {"x": 200, "y": 300, "dist": 125, "rotLoc": 315, "rotVol": -3, "r": 0, "g": 0, "b": 255},
    {"x": 200, "y": 300, "dist": 175, "rotLoc": 0, "rotVol": 3, "r": 0, "g": 0, "b": 255},
    {"x": 600, "y": 300, "dist": 75, "rotLoc": 0, "rotVol": 3, "r": 0, "g": 255, "b": 0},
    {"x": 600, "y": 300, "dist": 75, "rotLoc": 180, "rotVol": 3, "r": 0, "g": 255, "b": 0},
    {"x": 600, "y": 300, "dist": 125, "rotLoc": 0, "rotVol": -3, "r": 0, "g": 255, "b": 0},
    {"x": 600, "y": 300, "dist": 125, "rotLoc": 45, "rotVol": -3, "r": 0, "g": 255, "b": 0},
    {"x": 600, "y": 300, "dist": 125, "rotLoc": 90, "rotVol": -3, "r": 0, "g": 255, "b": 0},
    {"x": 600, "y": 300, "dist": 125, "rotLoc": 135, "rotVol": -3, "r": 0, "g": 255, "b": 0},
    {"x": 600, "y": 300, "dist": 125, "rotLoc": 180, "rotVol": -3, "r": 0, "g": 255, "b": 0},
    {"x": 600, "y": 300, "dist": 125, "rotLoc": 225, "rotVol": -3, "r": 0, "g": 255, "b": 0},
    {"x": 600, "y": 300, "dist": 125, "rotLoc": 270, "rotVol": -3, "r": 0, "g": 255, "b": 0},
    {"x": 600, "y": 300, "dist": 125, "rotLoc": 315, "rotVol": -3, "r": 0, "g": 255, "b": 0},
    {"x": 600, "y": 300, "dist": 175, "rotLoc": 45, "rotVol": 3, "r": 0, "g": 255, "b": 0},
    {"x": 600, "y": 300, "dist": 175, "rotLoc": 90, "rotVol": 3, "r": 0, "g": 255, "b": 0},
    {"x": 600, "y": 300, "dist": 175, "rotLoc": 135, "rotVol": 3, "r": 0, "g": 255, "b": 0},
    {"x": 600, "y": 300, "dist": 175, "rotLoc": 180, "rotVol": 3, "r": 0, "g": 255, "b": 0},
    {"x": 600, "y": 300, "dist": 175, "rotLoc": 225, "rotVol": 3, "r": 0, "g": 255, "b": 0},
    {"x": 600, "y": 300, "dist": 175, "rotLoc": 270, "rotVol": 3, "r": 0, "g": 255, "b": 0},
    {"x": 600, "y": 300, "dist": 175, "rotLoc": 315, "rotVol": 3, "r": 0, "g": 255, "b": 0}];

function setup() {
    createCanvas(800, 600);
    frameRate(24)
}

function draw() {
    elecrons1440.forEach(function (value) {
    push();
    translate(value["x"], value["y"]);
    rotate(radians(value["rotLoc"]));
    if (mouseIsPressed && dist(0, value["dist"], screenX(mouseX, mouseY), screenY(mouseX, mouseY)) 

EagleEye7777777

Dont worry, thanks.

GoToLoop

https://GitHub.com/processing/p5.js/issues/1553

EagleEye7777777

So is there any work around until it gets implimented?

GoToLoop

That's all I could find out. Better join in the discontent chorus there too. :(|)

EagleEye7777777

:( It is part of a science project, oh well I will just have to skip that part.

GoToLoop

You can write it in Java Mode, then convert it to Pjs library. ~O)
http://ProcessingJS.org/reference/screenX_/

If you dunno Java at all, you can still write it straight in JS, but for Pjs library instead: ;;)
http://ProcessingJS.org/articles/jsQuickStart.html

EagleEye7777777

Thanks but I have already done a lot in p5.js for it already so a total rewrite is not an option, Again, thanks for your help :).