orbitControl() only works after a double tap (mobile)

p5.js Coding Questions
1

I have a sketch with a rotating cube that uses the orbitControl() to allow it to be moved on its X axis, however, orbit controls only work if I double tap the screen.

As far as I’m aware this is not expected behaviour for orbitControl() and it should work as soon as I first touch the screen. There are no errors in my console and everything with my sketch works fine.

My draw function is as follows:

p5.draw = function(){

  p5.background(0,0);
  p5.ambientLight(220);
  p5.angleMode(p5.DEGREES)
  p5.noStroke();
  p5.normalMaterial();
  p5.orbitControl(5, 0, 0);
  
  cube.drawCube();

};

Unfortunately, I’m unable to post the full code as it’s for a client at work but I was wondering if anyone else has encountered this issue?

Many thanks,

Andy

2

Hi! even if you cannot release the whole code, you can make a small sketch to demonstrate the issue:

https://editor.p5js.org/micuat/sketches/sESdEBWfm

but I’m confused that the orbit control doesn’t run completely in my example (on iOS, old SE). Nevertheless, the example on the reference page seems to work, but as you mentioned I need to tap it once

https://p5js.org/reference/#/p5/orbitControl

2 Likes
3

Hi, thanks for your reply - I will in future post an example sketch to illustrate the issue as you suggest.

In terms of the examples that you have shared, with your own sketch orbitControl doesn’t work at all on iPhone8 iOS14 Safari and will only initiate after a tap on Android 10 Chrome v90.

The p5.js reference sketch works on both the above devices but requires a tap to initiate orbitControl which I don’t believe is the expected behaviour.

4

I can only say that webgl on p5.js is still under development and “not the expected behavior” is not surprising to me. Unless someone else here can help you, I suggest opening an issue on github which perhaps is a better way to move the discussion forward as I’m no familiar with the code base of webgl.

The other thing is that I usually don’t recommend to use p5.js for production use - not saying that p5.js is not good, but it’s not made for production and I see these issues occur once in a while (plus not to mention performance issues). For 3D, three.js and a-frame are always good options :slight_smile:

1 Like
5

Thanks for your feedback, it’s much appreciated. I’ll open an issue on Github as you’ve suggested.

It’s good to know that p5 is not necessarily recommended for production use. I have managed to achieve the desired effect using three.js so I’m not completely stuck and will migrate to that if I can’t find a solution for p5.

Thanks again for your help! :slight_smile:

6

just to clarify - production use is usually not “supported” by any open source projects. But what I mean is the population of the users - tools like openFrameworks or this case three.js are used by quite a lot of designers/programmers who use them for production, so these tools are more polished in terms of testing on different platforms, durability etc. However, p5.js is more oriented to education and sometimes these points are missed out.

1 Like
7

Someone has already opened an issue for this on this on Github and they have posted a temporary solution that resolves the issue on mobile.

Hopefully, a long term fix will come in the next version.

1 Like