Vector Field
Exercise

Description

In this exercise you will build a 3D volume filled with vectors (arrows). Each vector will point in a different direction and have a different color. Next you will animate the vector field to show several time steps in a simulation.

In visualization, vector fields are often used to indicate the flow of a fluid through a volume. Each arrow indicates the direction and magnitude of the flow at a point in the volume. To show changes in the fluid flow, the vector field is animated, causing the vectors to change direction, length, and color.

This exercise focuses upon use of IndexedFaceSet, Coordinate, Switch, Inline, and Script nodes. This exercise also introduces the PROTO and EXTERNPROTO syntax.

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
  • IndexedFaceSet geometry node
  • Coordinate node
• Grouping
  • Transform node
  • Inline node
  • Switch node
• Animation and touch
  • TimeSensor node
  • PositionInterpolator node
  • ROUTE statement
  • TouchSensor node

Files

Here are the files you may use to get started with this exercise:
• vecfield.c
  This is the source code file for a C program which generates a vector field. However, you will be building the vector shape that the vector field references.

• Makefile
  This is the make file which contains instructions for the make program. This will enable you to easily build the applications you will create throughout this exercise.

Tasks

1. Create and edit a new VRML file:
   % vi vector1.wrl

   In the file, build an arrow-shape using an IndexedFaceSet geometry node. Make the arrow conform to the following specifications:

   • Build the arrow in the X/Y plane.

   • Build the arrow pointing in the direction of the positive Y axis.

   • Construct the arrow with the following dimensions:

     Parameter	Dimension
     total vector height	1.0
     body width	0.2
     body height	0.75
     tip width	0.5
     tip height	0.25
     origin	center base of arrow body

     HINT: Sketch your arrow on a piece of paper first. Then write the 3D coordinates for each corner, and number each corner. This will give you the data you need to type in as coordinates and coordinate indexes for the IndexedFaceSet node.

     HINT: Build the tip with one triangle and the base with one rectangle.

     HINT: Remember, use a "-1" index value to delimit faces.

   • Make the material appearance of your arrow shape as follows:

     Field	Value
     emissiveColor	0.0 0.0 0.0
     diffuseColor	0.8 0.8 0.8
     ambientIntensity	0.0

   • Enable the faces to be viewed from both sides.
     HINT: Add the solid field with a FALSE value.

     HINT: Once you have constructed one arrow in the X/Y plane, USE another instance of it rotated 90 degrees around the Y axis. This will produce a copy in the Z/Y plane to add apparent depth to the otherwise flat geometry.

   SOLUTION: vector1.wrl

   ---

2. Make a copy of the "vector1.wrl" file:
   % cp vector1.wrl vector2.wrl

   To build a vector field you're going to need dozens of arrows, all with approximately the same shape. Wouldn't it be nice if there was a Vector node? Your task is to modify the vector2.wrl file to create a Vector node. Add a PROTO wrapper around the vector shape. Make sure that it conforms to the following specifications:

   • The PROTO name should be Vector (with a capitol "V")

   • Your Vector prototype should contain four fields with the following definitions:

     Data Type	Field Name	Default Value
     SFVec3f	translation	0.0 0.0 0.0
     SFVec3f	scale	1.0 1.0 1.0
     SFRotation	rotation	0.0 1.0 0.0 0.0
     SFColor	color	0.8 0.8 0.8

     HINT: Connect the translation, rotation, scale, and color fields of the PROTO interface to your vector shape using the IS syntax.

   You can test your new Vector node by temporarily adding a line to the end of your file, like this:

   Vector { }

   Try adding translation, scale, rotation, and color fields and values to your Vector node test. Remember to get rid of this test node before you move on to the next task.

   SOLUTION: vector2.wrl

   ---

3. Compile and run the vecfield program, and view the resulting VRML scene (call it vecfield.wrl).
   % make vecfield
   % vecfield > vecfield.wrl

   The program generates a volume of vectors, each one positioned, oriented, scaled, and colored based upon a function the program computes. Each vector is rendered by using your Vector node! The program's "vecfield.wrl" output uses your Vector node by using an EXTERNPROTO statement at the top of the file. That statement tells the browser to get your Vector PROTO from your file "vector2.wrl".

   SOLUTION: vecfield.c, vecfield.wrl

   ---

4. Extra credit: Run the vecfield program 10 times providing a phase argument, redirecting the output into corresponding VRML files:
   % vecfield 0.0 > vecfld1.wrl
   % vecfield 0.2 > vecfld2.wrl
   % vecfield 0.4 > vecfld3.wrl
   % vecfield 0.6 > vecfld4.wrl
   % vecfield 0.8 > vecfld5.wrl
   % vecfield 1.0 > vecfld6.wrl
   % vecfield 1.2 > vecfld7.wrl
   % vecfield 1.4 > vecfld8.wrl
   % vecfield 1.6 > vecfld9.wrl
   % vecfield 1.8 > vecfld10.wrl
   

   INTERMEDIATE SOLUTION: vecfld1.wrl, vecfld2.wrl, vecfld3.wrl, vecfld4.wrl, vecfld5.wrl, vecfld6.wrl, vecfld7.wrl, vecfld8.wrl, vecfld9.wrl, vecfld10.wrl

   Don't bother viewing each of the individual VRML files. Your task is to build an animation that automatically cycles between these 10 files, treating each one like a "frame" in an animation sequence.

   Create and edit a new VRML file:

   % vi multivec.wrl

   In this new VRML file, use a grouping node to switch between the 10 vector fields, each one inlined from its own file.

   HINT: Use a Switch node to enable switching between vector fields.

   HINT: Use Inline nodes to incorporate each of the 10 vector fields.

   To animate the switch you'll need to build a new interpolator using your own script. You'll need a Script node and the usual TimeSensor node. For the script, you'll need a fractional time input and an SFInt32 output. On each fractional time input event (varying from 0.0 to 1.0), generate an integer output event (varying from 0 to 10). Route that integer event into the whichChoice field of the switch.

   HINT: The VRML browser you are using understands a variant of JavaScript called "VRMLScript". To use this variant, put "vrmlscript:" at the start of the URL for the Script node.

   HINT: You can use 3 "tricks" to compute the conversion value:
   1) The fractional values run from 0.0 to 1.0
   2) The whichChoice values run from 1 to 10
   3) JavaScript can round a fractional value to an integer value

   function set_fraction( frac, tm ) {
   
   value_changed = frac * 10.0;
   
   }

   View the resulting "multivec.wrl" VRML scene. Be patient: it takes a while to load.

   SOLUTION: multivec.wrl