Problem interacting with p5js by iOS devices

[WhiteSte]

trafficstars

Details about the bug:

• p5.js version: 1.4
• Web browser and version: any
• Operating System: Last iOS
• Steps to reproduce this: I tested with iPhone and iPad with safari and chrome. https://p5js.org/examples/interaction-kaleidoscope.html

You can check here in the official site

[welcome[bot]]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[ameybh]

Hey @WhiteSte, can you describe the exact problem you are facing?

[WhiteSte]

Hi, I have problems interacting with iPhone/iPad. If you try the official example that i linked, it should not work. It seems like the touch is not recognized by p5js

[stemcoding]

On my iPad when you try to draw on the kaleidoscope, touching the sketch just keeps moving the sketch around. It never draws anything because mousePressed never gets run because it's a touch screen.

I think this is more of a request to improve the example documentation.

[billyjacobson]

Hey I noticed this issue too, but only when working with the fullscreen preview.

This works https://editor.p5js.org/theannalytical/sketches/O5YXBtzC3 But this doesn't (same code) https://editor.p5js.org/theannalytical/full/O5YXBtzC3

Just using simple touch code here too

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background(220);

  fill(255, 0, 0);
  rectMode(CENTER);
  rect(mouseX, mouseY, 200, 100);
  let display = touches.length + " touches";

  text(display, 5, 10);
  for (var i = 0; i < touches.length; i++) {
    ellipse(touches[i].x, touches[i].y, 100, 50);
  }
}

/* prevents the mobile browser from processing some default
 * touch events, like swiping left for "back" or scrolling
 * the page.
 */
function touchStarted(){
  return false;
}

function touchMoved(){
  return false;
}

function touchEnded(){
  return false;
}

Was doing this on an iPhone. Also, I tried this with some older versions of p5 and it seemed to work. Like 0.7.2 and it works which was odd. (I found that out because I was looking for examples of how to do this)

[tobias-wilfert]

Stumbled upon this today and with the help of this answer Touch events within iFrame are not working on iOS I was able to get the above code to work with one small change. However, I must admit that I am not good enough at web development to asses how good of a fix this is.

So now: This works: https://editor.p5js.org/tobias-wilfert/sketches/mcXLiIOt1 This works: https://editor.p5js.org/tobias-wilfert/full/mcXLiIOt1 This works: https://tobias-wilfert.github.io/touch-test/

// This fixed it, preferably this would be hidden away though
document.addEventListener('touchstart', {});

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background(220);

  fill(255, 0, 0);
  rectMode(CENTER);
  rect(mouseX, mouseY, 200, 100);
  let display = touches.length + " touches";

  text(display, 5, 10);
  for (var i = 0; i < touches.length; i++) {
    ellipse(touches[i].x, touches[i].y, 100, 50);
  }
}

/* prevents the mobile browser from processing some default
 * touch events, like swiping left for "back" or scrolling
 * the page.
 */
function touchStarted(){
  return false;
}

function touchMoved(){
  return false;
}

function touchEnded(){
  return false;
}

[stemcoding]

Nice work! I just wanted to confirm that the fix works on my 2017 iPad Pro.

I feel like there could still be some work to do to make sure that iPad touch screens still work properly even if the program is written to use mousePressed instead of touch (which would make life quite a bit easier in terms of cross device compatibility), but maybe that is for another day.