How to detect trackpad actions like pinch, scroll, three finger actions etc

p5.js Coding Questions
1

Hi all,

I recently had a need to detect a two-finger “pinch” action, on a Mac in p5.js, and had some trouble finding info.

I found this …

https://medium.com/@auchenberg/detecting-multi-touch-trackpad-gestures-in-javascript-a2505babb10e

… which alerted me to the fact that a “wheel” event might have event.ctrlKey set to flag a pinch action, which indeed it does in p5.js callback mouseWheel(event). So that was ok, my immediate problem was solved.

But I’m wondering if there is good doco in p5.js about all the events that could come from trackpads, and touch gestures on iPads etc. I can only see some pretty sparse info at https://p5js.org/reference/#group-Events and the Touch secton.

Just for info for others …

  1. The mouseWheel() CB seems to deliver a minimum event.delta of +/- 4 for an actual mouse wheel scroll action.

  2. A two-finger scroll action on the Mac trackpad delivers a minimum event.delta of +/- 1, and can be smoother with typical simple programming.

  3. The pitch action on trackpad also delivers a minimum delta of +/- 1.

  4. Event.ctrlKey is true for a mouseWheel event generated by a trackpad pinch or stretch action. You may need to reverse the sense of delta, to get the same effect as action 2. above

  5. Be aware of the dreaded Mac “natural scrolling” control, in System Preferences / Trackpad (or Mouse) / Scroll & Zoom. More info … https://www.howtogeek.com/283729/how-to-disable-apples-backwards-natural-scrolling-on-your-mac

Ciao, G.

2

Hi @grege2,

As these things are specific to the Apple platform, their documentation for GestureEvent may contain something of value. But it, too, is pretty sparse. :pensive:

3

@Sven, thanks, I will take a look.