PROTOs for Dummies III
Adding Interaction
 More of this Feature
• Part 1: Intro to Prototypes
• Part 2: Creating Modular Prototypes
• Part 4: Speak to Me
 Join The Discussion
"Have certain sites increased revenue because of 3D features?"
 Related Resources
• VRML Repository
• VRML PROTO Repository

Dateline: 4/13/98
Now that we have some PROTOs for eye balls, clearly we have to start poking it! To review from the previous features, still available as Dummies I, and Dummies II there several PROTOs that we now have. PROTOs for single and multiple eyeballs.

I'm going to change gears a little bit and not continue to build up these silly PROTOs. While somewhat instructive they are let's face it stupid. Rather than reinvent the PROTO wheel let's look at how to take an existing intelligent PROTO and apply it to our eyeballs. One interesting technique in the development of your own PROTOs is to follow the style and structure of an existing node, but to add some functionality to it. This is exactly the method used by Braden McDaniel (also known as Prismatic Booger) with his HotShape PROTO (used with Braden's gracious permission).

HotShape is a PROTO which can be used in place of an existing Shape node, but it switches between two different Appearance nodes depending on whether the cursor is or is not on top of the geometry in the Shape.
The complete PROTO in gory detail follows. I have also added and changed comments.

#VRML V2.0 utf8
# hotshapePr.wrl
#  Like the Shape node, but it changes appearance when the mouse is moved over it.
# author: Braden N. McDaniel
# e-mail:
Begin the Interface Section
PROTO HotShape [
 eventIn   SFNode set_notOverAppearance
 eventIn   SFNode set_overAppearance
 # a geometry node; the geometry of the switch
 exposedField SFNode geometry    NULL
 # an Appearance node; the normal appearance of the geometry
 field   SFNode notOverAppearance  NULL
 # an Appearance node; the appearance of the geometry when the mouse is over it
 field   SFNode overAppearance   NULL
 eventOut  SFNode notOverAppearance_changed
 eventOut  SFNode overAppearance_changed
] {
Group {
        children [ DEF HOTSENSOR TouchSensor {},
    DEF SHAPE Shape {
     appearance IS notOverAppearance
     geometry IS geometry
} #end Group
Begin the Script
 eventIn  SFBool isOver
 eventIn  SFNode set_overAppearance   IS set_overAppearance
 eventIn  SFNode set_notOverAppearance  IS set_notOverAppearance
 field  SFNode notOverAppearance   IS notOverAppearance
 field  SFNode overAppearance    IS overAppearance
 eventOut SFNode appearance_changed
 eventOut SFNode overAppearance_changed  IS overAppearance_changed
 eventOut SFNode notOverAppearance_changed IS notOverAppearance_changed
 url [ "javascript:
   function initialize() { appearance_changed = notOverAppearance; }
   function isOver(over) {
    if (over) {
     appearance_changed = overAppearance;
    } else {
     appearance_changed = notOverAppearance;
   } #end of isOver
    function set_overAppearance(appearance) {
    overAppearance = appearance;
    overAppearance_changed = overAppearance;
   function set_notOverAppearance(appearance) {
    notOverAppearance = appearance;
    notOverAppearance_changed = notOverAppearance;
#Note the actual PROTO can/should contain scripts in multiple languages i.e. vrmlscript and ECMAscript to support more browsers (I have removed these for clarity of the article.)
 } #end of Script
 ROUTE HOTSCRIPT.appearance_changed TO SHAPE.appearance
} #end of PROTO

Obviously the creation of the script is the trickiest part of the whole PROTO. The isOver state (TRUE or FALSE) from HOTSENSOR comes from the boolean isOver field defined as part of the TouchSensor. HOTSENSOR is DEF'd as a TouchSensor. The isOver event generated by the TouchSensor is ROUTEd to the isOver input (eventIn) of the script called HOTSCRIPT. The state of the isOver field is used by the script to set the appropriate appearance. The result of the appearance state change is sent via the second ROUTE from the script HOTSCRIPT to the actual Appearance node used by the SHAPE Shape node DEFd in the PROTO. Is that clear :-) ?  It can all get quite confusing but a little time looking over the code should clarify the matter.

A regular Shape node is defined as:
Shape {
    exposedField SFNode appearance NULL
    exposedField SFNode geometry NULL

The use of HotShape is a straightforward replacement of a Shape node (with of course the additional Appearance node definitions)

The before and after VRML code fragments of HotShape in use are:
Transform {
            translation 0 0 1
            scale IS squashFactor
            children [
                Shape {
                    appearance Appearance {
                        material Material {
                            diffuseColor 1.0 1.0 1.0 #color of the whites
                    geometry Sphere { }
Replacing Shape with HotShape
Transform {
            translation 0 0 1
            scale IS squashFactor
            children [
                HotShape {
                    notOverAppearance Appearance {
                        material Material {
                            diffuseColor 1.0 1.0 1.0 #color of the whites
                    overAppearance Appearance {
                        material Material {
                            diffuseColor 1.0 0 0 #poke color
                    geometry Sphere { }

We can easily turn the original PROTO into an EXTERNPROTO and it's use doesn't muck up the file.

Select the image to see the pokeEyes.wrl in action, the PROTO is called hotshapePr.wrl.
Even better go to Braden's VRML97 PROTO collection located in the Prototype page on this site.

In our next installation of this series we will look at the addition of sounds.

Got any PROTO thoughts or actual thoughts, post it on the board.

Previous Features