How to work with multitouch?

laurage

Hello,

I am developing a sketch for a multitouch touch screen.

I don't understand how to use the variable touches[]. Could someone give me an example? Is it created automatically when touching the screen? Do I have to fill it manually with touchX, touchY? How do you access its elements and its elements coordinates?

My sketch (at the moment emulated with mouse + keypress) has two classes (Blop and Being). Every time a user touches the screen, a blop is generated. Blops are generated in the array created in a Being. This goes on until the user takes off all their fingers from the screen. At that point the first being with its associated blops gets a life of its own, and a new being is created, and stored in an array in the main sketch. I am not sure where I should insert the touches[] variable. Should it replace one of my existing array? (Happy to post the code if needs be, but I think it's more a question of understanding what touches[] is and how it integrates in my architecture)

Thanks!

blindfish

What have you tried? I haven't read any docs but I would assume touches[] would be an array containing the x/y coords (actually it also includes an id - see touches). You could also have done print(touches[]) to see the output in the console and figured out its contents ;)

Also see touchStarted(): that looks like a suitable event listener to capture touches... Note however that the suggestion to return false to avoid built in browser behaviour looks to me like an example of bad practice :(|)

laurage

Hi,

Yes, touches[] is indeed what I was refering to. I have used print on it, which returns an error. If there wasn't a dedicated page for it on p5 doc I would obviously think that I should generate an array myself to store touches, but since there is some doc I assume it can be used one way or another. Hence my question.

Cheers, L.

blindfish

Where did you try and access touches? Amending the touchStarted example with a console.log outputs an empty array on my laptop:

var value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function touchStarted() {
  if (value == 0) {
    value = 255;
  } else {
    value = 0;
  }
  console.info(touches);
}

Firing up the dev tools in chrome and simulating a touch event I get an array containing an object as described in the docs... (I am also seeing some additional empty arrays returned; but they may be artefacts of using the dev tools.)