Animated Switch of Elevation Grids
Exercise

Description

In this exercise you will create a new kind of interpolator: an integer interpolator. Your new interpolator will be used to animate the whichChoice field of a Switch node to cause the switch to cycle among different elevation grids. Your new interpolator will be implemented by using a short program script within a Script node.

In visualization, computation often produces multiple independent versions of the same shape. You might, for instance, compute multiple isosurfaces, multiple electron density clouds, or multiple 3D elevation grid plots. You can use the switch animation technique illustrated in this exercise to animate between different shapes.

This exercise focuses upon use of Inline, and Script, and Switch nodes.

VRML Concepts

This exercise requires you to understand and make use of the following VRML features and concepts:
• Basics
  • VRML file structure
  • Comments
  • DEF and USE
  • VRML Data types
  • PROTO
  • EXTERNPROTO
• Shapes and appearance
  • Shape node
  • Appearance node
  • Material node
  • Box node
  • Sphere node
• Grouping
  • Inline node
  • Switch node
• Scripting
  • Script use
  • Writing JavaScript program scripts

Files

Here are the files you may use to get started with this exercise:
• terrain_00.wrl thru terrain_09.wrl
  These files each contain an elevation grid. You can use these files as objects to animate between.

Tasks

1. Create and edit a new VRML file named "animgrd1.wrl". In "animgrd1.wrl", add the following:
   • A Switch node containing two shapes: a box and a sphere. Use any size and color you like for these shapes.

   • A TimeSensor node with fields that insure that it starts immediately when the world is loaded and that make it loop forever. Use any cycle interval you like.

   • A Script node with the following fields, inputs, and outputs:
     • A field that holds a 32-bit integer and is named numberOfChoices. The field value should be two.

     • An eventIn that receives a floating point number and is named set_fraction.

     • An eventOut that sends a 32-bit integer and is named choice_changed.

     For the url field in the Script node, write a program script in VRMLscript (a.k.a. JavaScript) that contains a function for the eventIn. The function should have two incoming arguments: a floating point fractional time and a time stamp. The script should multiply the fractional time by the value in the numberOfChoices field and send the result out the choice_changed eventOut.

   • Finally, route the TimeSensor node's fraction_changed eventOut into the Script node's set_fraction eventIn, and route the Script node's choice_changed eventOut into the Switch node's set_whichChoice eventIn.

   When you load your world, the timer will repeatedly poke the program script, which will generate integer choice values for the switch. This will cause the switch to animate and cycle between your box and sphere shapes.

   HINT: Each field, eventIn, and eventOut for your Script node must have a data type. The data types you'll need are SFInt32 and SFFloat.

   HINT: In the Script node's url field, start with the word vrmlscript:.

   HINT: The function in the program script should be named the same as your eventIn: set_fraction.

   SOLUTION: animgrd1.wrl

   ---

2. Copy your "animgrd1.wrl" file to "animgrd2.wrl" and edit it. In "animgrd2.wrl", delete your box and sphere shapes and replace them with ten Inline nodes to inline ten different elevation grids, like this:

   Inline { url "terrain_00.wrl" }
   Inline { url "terrain_01.wrl" }
   Inline { url "terrain_02.wrl" }
   Inline { url "terrain_03.wrl" }
   Inline { url "terrain_04.wrl" }
   Inline { url "terrain_05.wrl" }
   Inline { url "terrain_06.wrl" }
   Inline { url "terrain_07.wrl" }
   Inline { url "terrain_08.wrl" }
   Inline { url "terrain_09.wrl" }
   	

   Change the Script node's numberOfChoices field value to 10 instead of 2.

   Load the world into your VRML browser and watch as your program script animates the Switch node to cause it to cycle between the ten elevation grids. The first pass or two may stutter along as your browser reads in the grids.

   SOLUTION: animgrd2.wrl