Multi-Touch Examples

[b]NOTE: Use the Palette component “multiTouch” in TouchDesigner 088 build 57000 or later.

And see MultiPinch.44.toe in a post below for 2-finger scale and rotate.[/b]

It works with any Windows 7 or 8 multi-touch device (and the mouse as well, since the Multi Touch In DAT merges both sets of events together, though, thanks to Windows 7 and 8, you can’t perfectly use both kinds of devices at the same time).

The essence of the examples is not the dynamics, which is simple collision-less motion, but the workflow of rendering 3D scenes and grabbing objects in the scenes and moving them around, one finger per object.

The flow is like this, which you will see when you press Esc and go into the network:

You create a Multi Touch In DAT and point it to a container panel (in this case it’s the parent component, “…”).That gathers the touch events in a table where u=v=0 is the bottom left of the container panel, and u=v=1 is the top-right. It only gets events of finger presses for that container.

The background image of the container panel should be the output of a Render TOP (or any TOP that follows the Render that doesn’t crop the image).

You feed the Multi Touch In DAT into a Render Pick DAT, and you point the Render Pick DAT to the Render TOP.

The Render Pick DAT is then ready and it outputs a table that indicates all the objects that are under your fingers (one object per finger at most), including their names, u, v values and other attributes.

A DAT Execute DAT points to the Render Pick DAT. The DAT Execute DAT is called every time a row in the table changes. It stuffs information into a “states” table that has one row for every object in your scene that is responsive to multi-touch.

In the network, click the Show Interface button to bring up the panel so you can watch the tables while you operate the interface.

With that “states” table you drive your 3D objects. In this case, it passes each row of the states table to a “dynamics” component, which uses CHOPs to drive the objects’ x and y position etc.

There is another “Spin” tab in the UI of this example file that does a spinning rotation on the 5 objects. This just shows another type of a dynamics model. I’ll explain the dynamics component some other time.

The “Finger Timers” panel at the top-right is a 2D non-interactive panel that indicates the number of seconds each finger is pressed. This panel is placed over the background (naturally) and its flag is turned on to not respond to any clicks - clicks go straight through to the background underneath it.

A third tab “Textures” just generates 5 textures in a non-intuitive way, but is there to show that for Panel Components that contain only 2D interactive gadgets like the Slider component and Button component, you don’t need to do anything special to get them to operate multi-touch, and you do not need to render anything.

And speaking of tabs, I hope you all are using Layouts in TouchDesigner, which are like browser tabs. At the top of the network UI you will see 5 tabs for key components to jump to as you explore this file - “spinners”, “pucks”, “textures” …

That should be enough to get you going, and I hope you have fun making derivatives of it.

NOTE: Use the Palette component “multiTouch” in TouchDesigner 088 build 57000 or later. It has more recent techniques than this .toe.
MultiTouch.1.toe (210 KB)

1 Like

Thanks sooo much, this is a huge help. :smiley:

This is great. I’d really get a lot out of the dynamics component explanation.

seems like a useful review here of curent (at early 2014) touchscreen monitors. finally there are some relatively inexpensive projective capacitive screens with 10 point of contact etc.

[url]http://touchscreen-monitors-review.toptenreviews.com/[/url]

MultiPinch.44.toe lets you simultaneously move/rotate/scale 3D objects in a 2D plane. You can move each with 1 or 2 fingers, and rotate/scale with 2 fingers.

Each object can be constrained to only scale or only rotate with finger interaction. This is done through parameters on geo1 and its clones. The butterfly is constrained to rotate only, the sky image can only be scaled. The scale can be constrained to a minimum and maximum value.

Each object can collide/bounce off a rectangular boundary determined by boxBound.

You can feed any SOP into geo1 and its clones.

Components cloned from geo1 contain the dynamics/behavior in a component dynamicsXY.

The template setup (master clone) is in geo1. It has a tag “toss2d”.

You can see a method of getting proper shadows of objects that are textured images containing alpha=0 (like the banana). It does a trace to get a polygon around the shape.

In this example, you can use a mouse to do 2-finger rotates / scales – see the DAT fakeTwoFingers.

You can bring up “probe” using Ctrl-p.

Some things need to be refined, and disclaimers:

  • will get sluggish at 10 or 20 oblects.
  • dynamics networks should be dormant when objects not moving.
  • the translates don’t exactly follow your finger because we’re using screen UV displacements to correspond to XY world space displacements, which are perspective-distorted. The parameter “Delta Pos per Delta UV” co-relates the two.
  • pivots are around the center of objects, not where you touch the objects.

This file will be merged in with the palette where the translate-only multiTouch is located.
MultiPinch.44.toe (83 KB)

Thanks Greg, looks great.
I’m scratching my head looking at the “dynamicsxy” custom component for each object, wondering how I can re-use it in other projects(I like the inertia effect). There seems to be some moving parts outside of that component, do you have a modular version of this component that we could use in our own projects? Would be much appreciated, thanks.

On the outside of “dynamicsxy” is the “state” table that drives it with select, u, v. dynamicsxy has its custom parameters to reset and set some scaling parameters. Inside it’s a basic Newton force = mass*acceleration integral, with manual override and handling the bouncing off the sides. The DAT Execute DAT on the outside manages 2-finger rotate/scale. The resulting xy translates are exported to the parent Geo component parameters.

It’s a CHOP network per-object, so it won’t scale to 100x without some work integrating multi-objects into one solver.