Motivation
A program script implements the Script node using values from the interface:
- The script responds to inputs and sends outputs
A program script can be written in JavaScript, ECMAScript, and other languages
- JavaScript is easier to program
- ECMAScript is essentially JavaScript
Declaring a program script interface
For a JavaScript program script, typically give the script in the Script node's url fiel:
|
1 2 3 4 5 6 7 8 9 |
DEF Bouncer Script { initializeOnly SFFloat bounceHeight 3.0 inputOnly SFFloat set_fraction outputOnly SFVec3f value_changed inputOutput SFBool enabled TRUE url "ecmascript: ..." #or... url "javascript: ..." } |
Initializing a program script
The optional initialize function is called when the script is loaded:
|
1 2 3 4 |
function initialize () { ... } |
Initialization occurs when:
- the Script node is created (typically when the browser loads the world)
Shutting down a program script
The optional shutdown function is called when the script is unloaded:
|
1 2 3 4 |
function shutdown () { ... } |
Shutdown occurs when:
- the Script node is deleted
- the browser loads a new world
Accessing outputs from ECMAScript
Each interface output field is a ECMAScript variable
- Read a variable to access the last output field value
- Write a variable to send an event on the output field
|
1 2 3 4 5 |
if (!enabled) return; lastval = value_changed[0]; // get last event value_changed[0] = newval; // send new event |
A sample JavaScript script
Create a Bouncing ball interpolator that computes a gravity-like vertical bouncing motion from a fractional time input.
Nodes needed:
|
1 2 3 4 5 6 7 8 9 10 11 |
DEF Ball Transform { children [ ... ] } DEF Clock TimeSensor { ... } DEF Bouncer Script { ... } |
Script fields needed:
- Bounce height
|
1 2 3 4 |
DEF Bouncer Script { initializeOnly SFFloat bounceHeight 3.0 ... } |
Inputs and outputs needed:
- Fractional time input
- Position value output
- Enabled input/output
|
1 2 3 4 5 6 7 |
DEF Bouncer Script { ... inputOnly SFFloat set_fraction outputOnly SFVec3f value_changed inputOutput SBool enabled TRUE ... } |
Initialization and shutdown actions needed:
- None - all work done in input function
Event processing actions needed:
- set_fraction input function
- No need for eventsProcessed function
|
1 2 3 4 5 6 7 8 9 |
DEF Bouncer Script { ... url "ecmascript: function set_fraction (fraction, time) { ... } " } |
Calculations needed:
- Compute new ball position
- Send new position event
Use a ball position equation roughly based upon Physics:
- See comments in the X3D file for the derivation of the equation
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
DEF Bouncer Script { initializeOnly SFFloat bounceHeight 3 inputOnly SFFloat set_fraction outputOnly SFVec3f value_changed inputOutput SFBool enabled TRUE url "ecmascript: function set_fraction (fraction, time) { if (!enabled) return; y = 4.0 * bounceHeight * fraction * (1.0 - fraction); value_changed [0] = 0.0; value_changed [1] = y; value_changed [2] = 0.0; } " } |
Routes needed:
- Clock into script's set_fraction
- Script's value_changed into transform
|
1 2 |
ROUTE Clock.fraction_changed TO Bouncer.set_fraction ROUTE Bouncer.value_changed TO Ball.set_translation |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
DEF Ball Transform { children [ Shape { appearance Appearance { material Material { ambientIntensity 0.5 diffuseColor 1.0 1.0 1.0 specularColor 0.7 0.7 0.7 shininess 0.4 } texture ImageTexture { url "beach.jpg" } textureTransform TextureTransform { scale 2.0 1.0 } } geometry Sphere { } } ] } DEF Clock TimeSensor { cycleInterval 2.0 startTime 1.0 stopTime 0.0 loop TRUE } DEF Bouncer Script { field SFFloat bounceHeight 3.0 eventIn SFFloat set_fraction eventOut SFVec3f value_changed url "ecmascript: function set_fraction (fraction, time) { if (!enabled) return; y = 4.0 * bounceHeight * fraction * (1.0 - fraction); value_changed [0] = 0.0; value_changed [1] = y; value_changed [2] = 0.0; } " } ROUTE Clock.fraction_changed TO Bouncer.set_fraction ROUTE Bouncer.value_changed TO Ball.set_translation |
Building a toggle switch
A toggle script turns on at 1st touch, off at 2nd:
- A TouchSensor node can supply touch events
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
DEF Toggle Script { inputOutput SFBool on TRUE inputOnly SFBool set_active outputOnly SFBool on_changed url "ecmascript: function set_active (value, time) { if (value == false) return; if (on == TRUE) on = FALSE; else on = TRUE; on_changed = on; } " } |
Using a toggle switch
Use the toggle switch to make a lamp turn on and off
|
1 2 3 4 5 6 7 |
DEF LightSwitch TouchSensor { } DEF LampLight SpotLight { ... } DEF Toggle Script { ... } ROUTE LightSwitch.isActive TO Toggle.set_active ROUTE Toggle.on_changed TO LampLight.set_on |
Building a color selector
The lamp on and off, but the light bulb doesn't change color!
A color selector script sends an on color on a TRUE input, and an off color on a FALSE input.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
DEF ColorSelector Script { initializeOnly SFColor onColor 1.0 1.0 1.0 initializeOnly SFColor offColor 0.0 0.0 0.0 inputOnly SFBool set_selection outputOnly SFColor color_changed url "ecmascript: function set_selection (value, time) { if (value == true) color_changed = onColor; else color_changed = offColor; } " } |
Using a color selector
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
DEF LightSwitch TouchSensor { } DEF LampLight SpotLight { ... } DEF BulbMaterial Material { ... } DEF Toggle Script { ... } DEF ColorSelector Script { ... } ROUTE LightSwitch.isActive TO Toggle.set_active ROUTE Toggle.on_changed TO LampLight.set_on ROUTE Toggle.on_changed TO ColorSelector.set_selection ROUTE ColorSelector.color_changed TO BulbMaterial.set_emissiveColor |