Absolute mouse positions during processing

Question

This is to copy a copy of the message that I made on the processing forum (where I have no answer yet), I thought that I could try here.

Processing is a very cool way to draw material, especially for web pages. Just like the link http://processing.org

Hey, I'm new to processing, I use it to create a hassle-free website, so I draw quite a bit on canvas.

I have a problem with the position of the mouse, although the coordinates, when drawing, consider the upper left corner as the position 0,0; the actual coordinates of the mouse believe that 0.0 is the upper left corner of the browser window.

So my problem is that the canvas works on a centered webpage when the browser changes size, just like the mouse coordinates inside the canvas.

Is there a way to make the coordinates of the mouse relative to the canvas? So can I resize my browser window, and the top left corner will always be 0.0 for mouse coordinates?

So, that is the problem, I don’t know how many ppl here in stackoverflow are experiencing with this, but I hope someone can help me :)

thanks to the community in advance.

Answer 1

I am not familiar with the processing, but can't you just calculate the difference between the upper left corner of the browser window and the upper left corner of the canvas?
i.e. (using jquery)

$(window).onresize = function() { //offset return position realive to the document. var offset = $('#canvas').offset(); window.canvasLeft = offset.left; window.canvasTop = offset.top; } 

Then you can do something like:

  relativeMouseLeftPosition = mouseLeftPosition() - window.canvasLeft; 

You should replace #canvas with a css selector for the area of ​​your canvas.

Also note that the window is a global object, I use it here to solve possible problems with the area.

Answer 2

Processing is really not designed to create web pages. This is worse than Flash for sites (thumbnail processing is Java applets - Java is less common, much more resource-intensive and slow loading).

However, processing.js , the Javascript processing port for processing.

an example of a snake refers to a mouse. Since this is Javascript and the canvas is a div , the coordinates should be a little more robust than Java (which lives in it’s own VM world), but I could be wrong.

Answer 3

You can ask the user to calibrate the system before using it. This is not a complete answer to the question, but a solution to the problem.

Just draw a red dot in the center of the screen, top left and bottom. Ask the user to click on them and get the coordinates. Then you know where the corners of the screen are located.