Processing.js mouseX and mouseY not working on mobile

Question

I published a simple processing sketch to my website using processing.js but when I opened it on my iPhone and iPad it didn't work at all. I found a bit of javacript to make it work and it helped, but still mouseX gets the position of the finger in relation to the whole page and not to the canvas area, so it doesn't quite get the position right. What can I do?

The code is live here: http://mqvlm.github.io/blog/rect.html

Here's the javascript i'm using:

<canvas ontouchstart="touchStart(event);"
ontouchmove="touchMove(event);"
ontouchend="touchEnd(event);"
ontouchcancel="touchCancel(event);"
id="sketch" width="300" height="300" data-processing-sources="/code/rect.pde"> </canvas>

<script type="text/javascript">

var processingInstance;


function setProcessingMouse(event){
  if (!processingInstance) {  
    processingInstance = Processing.getInstanceById('sketch');  
    }  

  var x = event.touches[0].pageX;
  var y = event.touches[0].pageY;

  processingInstance.mouseX = x;
  processingInstance.mouseY = y;
};

function touchStart(event) {
event.preventDefault();
setProcessingMouse(event);
processingInstance.mousePressed();
};

function touchMove(event) {
event.preventDefault();
setProcessingMouse(event);
processingInstance.mouseDragged();
};

function touchEnd(event) {
event.preventDefault();
setProcessingMouse(event);
processingInstance.mouseReleased();
};

function touchCancel(event) {
event.preventDefault();
setProcessingMouse(event);
processingInstance.mouseReleased();
};

</script>

What exactly do you mean when you say it didn't work at all? Can you post a minimal example that just uses Processing code instead of that extra JavaScript code (which shouldn't be necessary)? — Kevin Workman
What I meant to sat is that mouseX and mouseY don't work on mobile at all, here, I posted the minimal example without the javascript you suggested, try it on your mobile: mqvlm.github.io/prueba.html — mqvlm
Can you post the code for that minimal example in your question? — Kevin Workman
Also, when I run that on my phone, it seems to work okay. Except the sketch shows up twice for some reason. — Kevin Workman
Are you running it on Android? I'm running it on safari iOS 7.2.1. The piece of code I used for the minimal example is just the regular <canvas id="sketch" width="300" height="300" data-processing-sources="/code/rect.pde"> </canvas> — mqvlm

taxicala taxicala · Accepted Answer · 2015-11-03T23:18:28

Instead of pageX and pageY, you should use screenX and screenY to get the position relative to the users screen:

var x = event.touches[0].screenX;
var y = event.touches[0].screenY;

Or if you want the position relative to the viewport, you can use clientX and clientY:

var x = event.touches[0].clientX;
var y = event.touches[0].clientY;

You can check the full list of properties and more info here

Processing.js mouseX and mouseY not working on mobile

1 Answers