The VRML code from the previous lesson reads as follows:

DEF MovingBox Transform {
  children  [
    Shape  {
      geometry Box {}
      appearance  Appearance {
        material Material { diffuseColor 1 0 0 }
      }
    }
  ]
}# end of MovingBox Transform


DEF Timer TimeSensor {
  cycleInterval 10
  loop TRUE
}# end of Timer

DEF Translator PositionInterpolator {
  key [0, 1]
  keyValue [0 0 0, 5 0 0]
}# end of Translator  

ROUTE Timer.fraction_changed TO Translator.set_fraction
ROUTE Translator.value_changed TO MovingBox.set_translation

CLICK HERE to view example if you have a VRML browser.

Once you've refreshed yourself as to the meaning of this animation, remember that it simply begins to play as soon as the file is read into the browser. Now we'll take the next step and make it interactive.

To do this, we add a TouchSensor. The TimeSensor generates events by the passage of time--it's a clock. The TouchSensor generates events when the cursor is passed over the object, and especially when the user clicks the mouse over the object. This kind of "event-handling" is basic to all graphical interface programming--the most obvious example is the loading of a new URL when you click on a link in a web page. Here we will simply add a default TouchSensor named Click, and add a ROUTE statement that starts the Timer when the object is clicked on.

#VRML V2.0 utf8

DEF MovingBox Transform {
  translation 0 0 0
  children  [
    Shape  {
      geometry Box {}
      appearance  Appearance {
        material Material { diffuseColor 1 0 0 }
      }
    }
  ]
}# end of MovingBox Transform

DEF Click TouchSensor {}

DEF Timer TimeSensor {
  cycleInterval 10
}# end of Timer

DEF Translator PositionInterpolator {
  key [0, 1]
  keyValue [0 0 0, 5 0 0]
}# end of Translator  

ROUTE Click.touchTime TO Timer.startTime
ROUTE Timer.fraction_changed TO Translator.set_fraction
ROUTE Translator.value_changed TO MovingBox.set_translation

When you run this example on the new Cosmo browser you'll note that, unlike the previous example, the cursor changes as it passes over the box. Clicking will start the animation. Click again when the animation stops to start it again.

CLICK HERE to example if you have a VRML browser.

Notice that the Loop has been eliminated in Timer (the Time Sensor). The default value for the Loop field of the TimeSensor is FALSE, and thus eliminating the field name here effectively sets the value to FALSE. In order to get started in the simplest way possible, we've ignored the full definitions of our nodes. Let's fill in the gaps now so that our ROUTE statements will begin to make more sense.