Mouse position relative to transformations?

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.

Tagged:

Answers

  • 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.

  • 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.

  • edited February 2017

    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?

  • 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

  • See reference

  • So that is what you were trying to do?

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

  • 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.

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

  • 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)) 
  • edited February 2017

    Dont worry, thanks.

  • So is there any work around until it gets implimented?

  • edited April 2017

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

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

  • 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

  • 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 :).

Sign In or Register to comment.