Hysteresis is a Funny Name

October 23, 2001
by Daniel Cummings

Hysteresis as a word may sound funny, but it is a valuable concept in programming. I'll start with a general introduction to hysteresis and then get into why it is an important technique for intermediate and advanced Lingoists to have in their bag of tricks.

Introduction

In the world of physics, hysteresis is studied as a phenomena of physical systems. The term describes the time lag involved after a force is applied to a system to the time its result is seen. The time lag is due to friction and/or other physical elements. It is a phenomena in which the output lags the input.

In programming, the term hysteresis is used to refer to a software design technique that helps us avoid "jittery" interfaces. When programmers talk about hysteresis they are talking about a solution that uses a kind of "friction" to help avoid feedback loops - feedback loops that can result in "jitters" in multimedia display systems. The technique may involve adding time lags or spatial buffering to the data input/processing code. A technique is generally called "hysteresis" because it involves keeping the data away from threshold zones by moving the thresholds themselves.

You may want to re-read the last paragraph. The important words are italicized: software design technique, solution, moving the thresholds themselves.

The definition we will use for this Lingo article is:

Hysteresis is a programming technique to avoid feedback loops and the "jitters" when dynamic user input modifies dynamic multimedia elements.

Lobster Traps

Ok, let's get to a "real-life" example. Suppose that we want to control the movements of a multimedia element (sprite) using some kind of dynamic user input (the mouse). For example, we want to change the size of a sprite when the mouse enters the sprite boundaries and then change it back once the mouse leaves. This is a pretty simple task if we use behaviors. The tricky part is deciding how to use knowledge of hysteresis in the design.

In the example below we see one design that uses knowledge of hysteresis as a technique to create a smoothly functioning interface. Try it out. Then, once you are convinced that it is working, modify the design to break it.

Check out this Director 7 demo movie which is available for download in Mac and Windows formats.

Pretty neat, huh? Now did you try to break it. C'mon, it's easy. Just Alt-click (or option-click for the Mac) the image in the center and then move the mouse r e a l l y s l o w into the sprite and then slowly change the direction and move it out of the sprite, but keep the mouse moving slowly. You should see lots of instability and jumping back and forth at the borderlines when the size of the sprite changes. This is not so noticeable when you move the mouse fast, but it looks like crap when you move the mouse slowly.

The "Hysteresis" version of the behavior shows a smoothly functioning mouse-sprite interface. This better design takes advantage of a spatial hysteresis technique: The sprite grows when the mouse enters so that the threshold for its exit from the sprite is greater. It is kind of like a lobster trap. Lobsters can get in because the entrance is funnel shaped to lure them into the trap, but they can't get out because they can't find the tiny door they used to get in. The same thing is happening here: the mouse goes in and then must move about 10 pixels toward the outside of the sprite to get out because the sprite gets bigger and encompasses more screen space.

The "Jittery" version shows code that goes into a feedback loop when the mouse is in the threshold zone. The jittery design gets caught in a feedback loop because mouseLeave events are sent by the Lingo engine to the sprite's behavior each time the mouse leaves the sprite. This is not a very good lobster trap. In this flawed, jittery design the behavior shrinks the sprite when the mouse enters and enlarges the sprite when the mouse leaves. When the sprite shrinks the behavior attached to it gets a mouseLeave message. As soon as the mouse leaves, the sprite grows, then the mouse is encompassed in the sprite and the sprite gets a mouseEnter event. Why? Because even though the mouse isn't moving, the sprite changes size and the mouse location which was previously outside is now inside. This means Jitters.

Whenever the mouse enters or leaves the sprite slowly we've got a feedback loop: mouseLeave - spriteGrow - mouseEnter - spriteShrink - mouseLeave - repeat until mouse moves out of threshold zone. This is clearly something we want to avoid. A knowledge of spatial hysteresis will help us analyze and fix this problem.

Extra Credit

There is another technique we can use to deal with these dynamic events feedback loops. Time hysteresis. You get extra credit if you can make this work. And then you'll be sure that you have knowledge of hysteresis.

This technique is not as effective in this sprite scenario because we are dealing with spatial events (sprite grows and shrinks). In addition, it involves extra code, and extra code means extra debugging and extra debugging means less time playing around. In any case, you may be faced with a problem that is better solved by a time hysteresis technique. This is a way to put a stop to the feedback loop: create a time condition that must be fulfilled before the behavior lets another mouse event affect the sprite size. That is, if the mouse event (mouseLeave or mouseEnter) is received within, say, 100 milliseconds of the last event then ignore it. This "time buffer" gives the behavior the time it needs to change the sprite size and ignore the events that are generated as a result of the sprite size change. This event stop is only valid for enough time so they do not trigger another opposite mouse event. You could update this behavior to give it a time property and then test the property on each mouse event. I've left that for you to explore.

There are three other techniques in the behavior that is included in the demo movie that you might want to check out:

adding the behavior to a sprite on-the-fly using the scriptInstancelist sprite property,
registering callbacks to be issued on Lingo mouse events which allow behaviors to be more generic,
using the pass command in behavior mouseUp and mouseDown events.

These are techniques you can study and use to make your behaviors more reusable and more robust.

Summary

There are many other places where knowledge of hysteresis can help you create better, smoother interfaces to your dynamic multimedia applications. Keep your eyes peeled for this kind of feedback loop that happens at thresholds because that's the place where you can apply what you've learned here about hysteresis.

Daniel Cummings is the founder and Chief Technologist at Polysense -- a media research and prototyping design firm in San Francisco -- where he investigates Augmented Reality and Polysensory media. Polysense provides device consulting and prototyping services to the technology industry.