{ "X3D": {
    "encoding":"UTF-8",
    "@profile":"Immersive",
    "@version":"3.3",
    "@xsd:noNamespaceSchemaLocation":"https://www.web3d.org/specifications/x3d-3.3.xsd",
    "JSON schema":"https://www.web3d.org/specifications/x3d-4.0-JSONSchema.autogenerated.json",
    "head": {
        "meta": [
          {
            "@name":"title",
            "@content":"ColorInterpolatorExample.x3d"
          },
          {
            "@name":"description",
            "@content":"Demonstrate basic design pattern for animating a node."
          },
          {
            "@name":"creator",
            "@content":"Don Brutzman"
          },
          {
            "@name":"created",
            "@content":"17 April 2005"
          },
          {
            "@name":"modified",
            "@content":"20 October 2019"
          },
          {
            "@name":"drawing",
            "@content":"ColorInterpolatorExampleSceneGraphWithRoutes.png"
          },
          {
            "@name":"Image",
            "@content":"ColorInterpolatorExample4Colors.png"
          },
          {
            "@name":"subject",
            "@content":"Animation ColorInterpolator"
          },
          {
            "@name":"identifier",
            "@content":"https://www.web3d.org/x3d/content/examples/X3dForWebAuthors/Chapter07EventAnimationInterpolation/ColorInterpolatorExample.x3d"
          },
          {
            "@name":"generator",
            "@content":"X3D-Edit 3.3, https://www.web3d.org/x3d/tools/X3D-Edit"
          },
          {
            "@name":"license",
            "@content":"../license.html"
          },
          {
            "@name":"translated",
            "@content":"17 April 2026"
          },
          {
            "@name":"generator",
            "@content":"X3dToJson.xslt, https://www.web3d.org/x3d/stylesheets/X3dToJson.html"
          },
          {
            "@name":"reference",
            "@content":"X3D JSON encoding: https://www.web3d.org/wiki/index.php/X3D_JSON_Encoding"
          }
        ]
    },
    "Scene": {
        "-children":[
          { "WorldInfo":
            {
              "@title":"ColorInterpolatorExample.x3d"
            }
          },
          { "Group":
            {
              "-children":[
                {
                  "#comment":"Place triggering text above sphere of interest"
                },
                { "Transform":
                  {
                    "@translation":[0,2,0],
                    "-children":[
                      { "Shape":
                        {
                          "-geometry":
                            { "Text":
                              {
                                "@string":["Touch text to","start animation..."],
                                "-fontStyle":
                                  { "FontStyle":
                                    {
                                      "@justify":["MIDDLE","MIDDLE"]
                                    }
                                  }
                              }
                            },
                          "-appearance":
                            { "Appearance":
                              {
                                "-material":
                                  { "Material":
                                    {
                                    }
                                  }
                              }
                            }
                        }
                      },
                      {
                        "#comment":"Selectable Text design pattern has transparent Box and TouchSensor description as a tooltip"
                      },
                      { "Shape":
                        {
                          "-geometry":
                            { "Box":
                              {
                                "@size":[6.2,2,0.001]
                              }
                            },
                          "-appearance":
                            { "Appearance":
                              {
                                "-material":
                                  { "Material":
                                    {
                                      "@transparency":1
                                    }
                                  }
                              }
                            }
                        }
                      },
                      {
                        "#comment":"This TouchSensor only reacts to user clicking on the sibling Shape and Text, because it is under a parent Transform grouping node"
                      },
                      { "TouchSensor":
                        {
                          "@DEF":"TextTriggerTouchSensor",
                          "@description":"Touch text to start..."
                        }
                      }
                    ]
                  }
                },
                {
                  "#comment":"Here is Sphere with accompanying Material that will get animated"
                },
                { "Transform":
                  {
                    "@translation":[0,-1,0],
                    "-children":[
                      { "Shape":
                        {
                          "-geometry":
                            { "Sphere":
                              {
                              }
                            },
                          "-appearance":
                            { "Appearance":
                              {
                                "-children":[
                                  {
                                    "#comment":"SphereMaterial diffuseColor gets overridden by interpolator output"
                                  }
                                ],
                                "-material":
                                  { "Material":
                                    {
                                      "@DEF":"SphereMaterial",
                                      "@diffuseColor":[0.5,0.5,0.5]
                                    }
                                  }
                              }
                            }
                        }
                      }
                    ]
                  }
                },
                {
                  "#comment":"TimeSensor is triggered to start by TouchSensor, then sends animating values to Interpolator"
                },
                { "TimeSensor":
                  {
                    "@DEF":"AnimationClock",
                    "@cycleInterval":6
                  }
                },
                {
                  "#comment":"ROUTE 1: TouchSensor trigger to TimeSensor clock"
                },
                { "ROUTE":
                  {
                    "@fromField":"touchTime",
                    "@fromNode":"TextTriggerTouchSensor",
                    "@toField":"startTime",
                    "@toNode":"AnimationClock"
                  }
                },
                {
                  "#comment":"Interpolator: ColorChanger interpolates evenly between red, green, blue and then back to red"
                },
                { "ColorInterpolator":
                  {
                    "@DEF":"ColorChanger",
                    "@key":[0,0.3333,0.6666,1],
                    "@keyValue":[1,0,0,0,1,0,0,0,1,1,0,0]
                  }
                },
                {
                  "#comment":"ROUTE 2: the ColorChanger interpolator gets stimulated by AnimationClock TimeSensor fraction to compute a color value"
                },
                { "ROUTE":
                  {
                    "@fromField":"fraction_changed",
                    "@fromNode":"AnimationClock",
                    "@toField":"set_fraction",
                    "@toNode":"ColorChanger"
                  }
                },
                {
                  "#comment":"ROUTE 3: Interpolator output is sent to target node of interest. Changed color value is routed to SphereMaterial color."
                },
                { "ROUTE":
                  {
                    "@fromField":"value_changed",
                    "@fromNode":"ColorChanger",
                    "@toField":"diffuseColor",
                    "@toNode":"SphereMaterial"
                  }
                }
              ]
            }
          }
        ]
    }
  }
}