Titania X3D Editor

Bring Colours to Your Life.

Titania v4.3.5

Bring Colours to Your Life.

X3D Reference

Animating transforms

Motivation

An animation changes something over time:

  • position - a car driving
  • orientation - an airplane banking
  • color - seasons changing

Animation requires control over time:

  • When to start and stop
  • How fast to go

Controlling time

  • A TimeSensor node is similar to a stop watch
    • You control the start and stop time
  • The sensor generates time events while it is running
  • To animate, route time events into other nodes

Using absolute time

  • A TimeSensor node generates absolute and fractional time events
  • Absolute time events give the wall-clock time
    • Absolute time is measured in seconds since 12:00am January 1, 1970!
    • Useful for triggering events at specific dates and times

Using fractional time

  • Fractional time events give a number from 0.0 to 1.0
    • When the sensor starts, it outputs a 0.0
    • At the end of a cycle, it outputs a 1.0
    • The number of seconds between 0.0 and 1.0 is controlled by the cycle interval
  • The sensor can loop forever, or run through only one cycle and stop

Syntax: TimeSensor

  • A TimeSensor node generates events based upon time
    • startTime and stopTime - when to run
    • cycleInterval - how long a cycle is
    • loop - whether or not to repeat cycles

XML Encoding

Classic Encoding

Using timers

To create a continuously running timer:

  • loop TRUE
  • stopTime <= startTime

When stop time <= start time, stop time is ignored

To run until the stop time:

  • loop TRUE
  • stopTime > startTime

To run one cycle then stop:

  • loop FALSE
  • stopTime <= startTime

The set_startTime input event:

  • Sets when the timer should start

The set_stopTime input event:

  • Sets when the timer should stop

Using timer outputs

The isActive output event:

  • Outputs TRUE at timer start
  • Outputs FALSE at timer stop

The time output event:

  • Outputs the absolute time

The fraction_changed output event:

  • Outputs values from 0.0 to 1.0 during a cycle
  • Resets to 0.0 at the start of each cycle

A sample time sensor

XML Encoding

Classic Encoding

Converting time to position

To animate the position of a shape you provide:

  • A list of key positions for a movement path
  • A time at which to be at each position

An interpolator node converts an input time to an output position

  • When a time is in between two key positions, the interpolator computes an intermediate position

Interpolating positions

Each key position along a path has:

  • A key value (such as a position)
  • A key fractional time

Interpolation fills in values between your key values:

Fractional Time Position
0.0 0.0 0.0 0.0
0.1 0.4 0.1 0.0
0.2 0.8 0.2 0.0
... ...
0.5 4.0 1.0 0.0
... ...

Syntax: PositionInterpolator

A PositionInterpolator node describes a position path

  • key - key fractional times
  • keyValue - key positions

XML Encoding

Classic Encoding

Typically route into a Transform node's set_translation input

Using position interpolator inputs and outputs

The set_fraction input:

  • Sets the current fractional time along the key path

The value_changed output:

  • Outputs the position along the path each time the fraction is set

A sample using position interpolators

XML Encoding

Classic Encoding

Using other types of interpolators

Animate position PositionInterpolator
Animate rotation OrientationInterpolator
Animate scale PositionInterpolator
Animate color ColorInterpolator
Animate transparency ScalarInterpolator

Syntax: OrientationInterpolator

A OrientationInterpolator node describes an orientation path

  • key - key fractional times
  • keyValue - key rotations (axis and angle)

XML Encoding

Classic Encoding

Typically route into a Transform node's set_rotation input

Syntax: ColorInterpolator

ColorInterpolator node describes a color path

  • key - key fractional times
  • keyValue - key colors (red, green, blue)

XML Encoding

Classic Encoding

Typically route into a Material node's set_diffuseColor or set_emissiveColor inputs

Syntax: ScalarInterpolator

ScalarInterpolator node describes a scalar path

  • key - key fractional times
  • keyValue - key scalars (used for anything)

XML Encoding

Classic Encoding

Often route into a Material node's set_transparency input

Summary

The TimeSensor node's fields control:

  • Timer start and stop times
  • The cycle interval
  • Whether the timer loops or not

The sensor outputs:

  • true/false on isActive at start and stop
  • absolute time on time while running
  • fractional time on fraction_changed while running

Interpolators use key times and values and compute intermediate values

All interpolators have:

  • a set_fraction input to set the fractional time
  • a value_changed output to send new values

Some interpolators are:

Cookies and other Technologies

By clicking »Accept« or continuing to use the site, you agree to the use of CREATE3000 and third-party cookies and other similar technologies to enhance your browsing experience, analyze and measure your engagement with our content, and provide more relevant ads on CREATE3000 websites and others. Learn more about cookies. You can withdraw your consent at any time.