From iLab Cookbook

Toolkits: HTPHighLevel


High Level Concepts

The high level allows users to rapidly create widgets that simplify most common operations when using the API. In this case, a user can create a shape or an image and quickly associate behaviors to them, so that when any HTP goes on top, such behaviors get passed on to the shapes.

Haptic Widgets

The high level is composed of haptic widgets, mainly shapes and images. Regardless of the widget one is programming with, the procedure to create them remains the same: one must first create the widget, then register it and finally associate behaviors to them.

Another aspect to have in mind is that changing the opacity levels of the widgets (or the mappings, which will be introduced later in this section) allows people to change the weights of the behaviors associated to them.

Haptic Shapes

Haptic shapes follow a very simple pattern: you create a physical shape and then associate behaviors to them. As soon as a hit test is associated to the shape, all those behaviors are passed on to the HTP that is on top of that shape. The other nice thing about haptic shapes is that it can take in just about any kind of shape, including paths. Also, a shape may have a transparent brush fill, which allows the user to have behaviors in certain areas without necessarily having a visual connection.

Here's a walkthrough that will allow you to create and use a haptic shape.

We first create a shape in XAML or C# and add it to the HTP canvas, we'll call it rectangle. Then, we create a haptic shape object:

  1. HTPShape hapticShape = new HTPShape(rectangle);

Next, we proceed to register the widget we just created:

  1. this.manager.RegisterWidget(hapticShape);

Finally, we can add any behaviors we may wish to:

  1. hapticShape.AddFrictionBehavior(new OscillationBehavior(0.5));
  2. hapticShape.AddFrictionBehavior(new SoftnessBehavior(1.0));

Haptic Images

Programming haptic images is simple, although slightly more challenging than working with shapes. The idea behind programming haptic images is that you associate a particular behavior to the image and then map that to a grayscale image. The API will automatically look at the current pixel and determine the intensity value and map it from 0 to 1 to the corresponding parameter.

The walkthrough is still easy to follow, we create an image in xaml or C#, we'll call it image. We also have another image (called mapping) which is the image we use to map to a particular behavior. We create a haptic image and then register it.

  1. HTPImage hapticImage = new HTPImage(image);
  2. this.manager.RegisterWidget(hapticImage);

Next we create a haptic behavior that we want to map, and set the image mapping to mapping.

  1. IntensityBehavior behavior = new IntensityBehavior();
  2.             behavior.IntensityMapping = new SpatialBehaviorMapping(mapping);
  3.             image.AddHeightMapping(behavior, behavior.IntensityMapping);

An image may have multiple behaviors and mappings associated to them. Mappings represent each of the corresponding parameters to the individual behaviors.

Retrieved from
Page last modified on May 24, 2011, at 03:32 PM