Multitouch

xna

Here is my first p5.js project, it's an on-screen keyboard that plays samples: https://github.com/mxa/tinykeys The sound is crackling on some browsers, while it plays fine in others. I have a couple of questions, but maybe it's better to ask them one at a time. How can I make this multitouch? i am looking at the reference of touch(), but is there an example of its usage somewhere?

xna

Any leads?

GoToLoop

Dunno much about multitouch. This is p5.js' event section:
https://p5js.org/reference/#group-Events

xna

Note to self and others finding this thread: here is a little but more about the subject: https://github.com/processing/p5.js/wiki/p5.js-overview#mouse-and-touch-interaction

jeremydouglass

@xna -- to search the forum for example code and discussion relating to p5.js multitouch, search for the touches[] array, which contains an updated list of multiple touch points.

• https://forum.processing.org/two/search?Search=touches[]
• https://p5js.org/reference/#/p5/touches

xna

still struggling to find a basic example. Drawing some circles where the fingers are maybe? how to read the touches[] array?

jeremydouglass

@xna -- did you look at this one?

- https://forum.processing.org/two/discussion/comment/98375/#Comment_98375

Can you give a concise code example of what you are trying to do? If you loop through the touches array (which has a changing length) and draw circles, that should be fairly straightforward....

var w = 80;
for (var i = 0; i < touches.length; i ++) {
  ellipse(touches[i].x, touches[i].y, w)
}

xna

ah, perfect, thank you. I didn't know my phone can track 10 (maybe even more???) fingers!