{ "X3D": {
    "encoding":"UTF-8",
    "@profile":"Immersive",
    "@version":"3.0",
    "@xsd:noNamespaceSchemaLocation":"https://www.web3d.org/specifications/x3d-3.0.xsd",
    "JSON schema":"https://www.web3d.org/specifications/x3d-4.0-JSONSchema.autogenerated.json",
    "head": {
        "meta": [
          {
            "@name":"title",
            "@content":"ColorSequencerExample.x3d"
          },
          {
            "@name":"description",
            "@content":"This example shows how to use the ColorSequencer prototype in an animated scenario. ColorSequencer outputs an individual SFColor without interpolation, in response to selecting an array value or simply sequencing next/previous."
          },
          {
            "@name":"creator",
            "@content":"Don Brutzman"
          },
          {
            "@name":"created",
            "@content":"25 May 2003"
          },
          {
            "@name":"modified",
            "@content":"28 November 2019"
          },
          {
            "@name":"reference",
            "@content":"https://www.web3d.org/technicalinfo/specifications/vrml97/part1/nodesRef.html#ScalarInterpolator"
          },
          {
            "@name":"reference",
            "@content":"https://www.web3d.org/x3d/content/examples/Basic/development/BooleanSequencerExample.x3d"
          },
          {
            "@name":"reference",
            "@content":"ColorSequencerPrototype.x3d"
          },
          {
            "@name":"subject",
            "@content":"color sequencer"
          },
          {
            "@name":"identifier",
            "@content":"https://www.web3d.org/x3d/content/examples/Savage/Tools/Animation/ColorSequencerExample.x3d"
          },
          {
            "@name":"generator",
            "@content":"X3D-Edit 3.2, https://www.web3d.org/x3d/tools/X3D-Edit"
          },
          {
            "@name":"license",
            "@content":"../../license.html"
          },
          {
            "@name":"translated",
            "@content":"26 March 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":"ColorSequencerExample.x3d"
            }
          },
          { "ExternProtoDeclare":
            {
              "@name":"ColorSequencer",
              "@appinfo":"ColorSequencer outputs a single color value by selecting an array index or simply sequencing next/previous",
              "@url":["../../../Savage/Tools/Animation/ColorSequencerPrototype.x3d#ColorSequencer","https://www.web3d.org/x3d/content/examples/Savage/Tools/Animation/ColorSequencerPrototype.x3d#ColorSequencer","../../../Savage/Tools/Animation/ColorSequencerPrototype.wrl#ColorSequencer","https://www.web3d.org/x3d/content/examples/Savage/Tools/Animation/ColorSequencerPrototype.wrl#ColorSequencer"],
              "field": [
                {
                  "@name":"enabled",
                  "@accessType":"inputOutput",
                  "@appinfo":"Whether or not this sequencer is active",
                  "@type":"SFBool"
                },
                {
                  "@name":"index",
                  "@accessType":"inputOutput",
                  "@appinfo":"Initial index is array element 0. Setting index past colors[max] uses final color value setting, while index less than 0 uses colors[0] value.",
                  "@type":"SFInt32"
                },
                {
                  "@name":"colors",
                  "@accessType":"inputOutput",
                  "@appinfo":"Array of color values that are each the outputs of the sequencer. No interpolation occurs between values.",
                  "@type":"MFColor"
                },
                {
                  "@name":"color_changed",
                  "@accessType":"outputOnly",
                  "@appinfo":"Current output color value of the sequencer corresponding to colors[index] value.",
                  "@type":"SFColor"
                },
                {
                  "@name":"previous",
                  "@accessType":"inputOnly",
                  "@appinfo":"Trigger previous color value. Wrap around from zeroth color to final color if necessary. Only respond to true inputs.",
                  "@type":"SFBool"
                },
                {
                  "@name":"next",
                  "@accessType":"inputOnly",
                  "@appinfo":"Trigger next color value. Wrap around from final color to zeroth color if necessary. Only respond to true inputs.",
                  "@type":"SFBool"
                },
                {
                  "@name":"traceEnabled",
                  "@accessType":"initializeOnly",
                  "@appinfo":"Enable tracing of node operation on browser console",
                  "@type":"SFBool"
                }
              ],
              "-children":[
                {
                  "#comment":"<field accessType='inputOnly' appinfo='Change colors array' name='set_colors' type='MFColor'/>"
                },
                {
                  "#comment":"<field accessType='inputOnly' appinfo='Change current colors index must be in range [0 .. colors.length-1]' name='set_index' type='SFInt32'/>"
                }
              ]
            }
          },
          { "Viewpoint":
            {
              "@description":"ColorSequencer demo"
            }
          },
          { "Background":
            {
              "@skyAngle":[0.5,0.5,0.5],
              "@skyColor":[0.5,0.5,0.5]
            }
          },
          { "ProtoInstance":
            {
              "@name":"ColorSequencer",
              "@DEF":"ColorSequencerInstance",
              "-children":[
                {
                  "#comment":"ROY G BIV = red orange yellow green blue indigo violet"
                }
              ],
              "fieldValue": [
                {
                  "@name":"colors",
                  "@value":[1,0,0,1,0.5,0,1,1,0,0,1,0,0,0,1,0.2,0.2,0.2,0.4,0,0.4]
                },
                {
                  "@name":"enabled",
                  "@value":true
                },
                {
                  "@name":"index",
                  "@value":2
                },
                {
                  "@name":"traceEnabled",
                  "@value":true
                }
              ]
            }
          },
          { "Transform":
            {
              "@translation":[0,1.5,0],
              "-children":[
                { "Shape":
                  {
                    "-geometry":
                      { "Text":
                        {
                          "@string":["ColorSequencer","Example"],
                          "-fontStyle":
                            { "FontStyle":
                              {
                                "@justify":["MIDDLE","MIDDLE"],
                                "@size":1.3
                              }
                            }
                        }
                      },
                    "-appearance":
                      { "Appearance":
                        {
                          "-material":
                            { "Material":
                              {
                                "@DEF":"MessageMaterial",
                                "@diffuseColor":[0,1,1]
                              }
                            }
                        }
                      }
                  }
                },
                { "Transform":
                  {
                    "@translation":[0,-0.25,0],
                    "-children":[
                      { "Shape":
                        {
                          "-geometry":
                            { "Box":
                              {
                                "@size":[10.0,4.0,0.1]
                              }
                            },
                          "-appearance":
                            { "Appearance":
                              {
                                "-material":
                                  { "Material":
                                    {
                                      "@DEF":"MessageBackgroundMaterial",
                                      "@transparency":0.8
                                    }
                                  }
                              }
                            }
                        }
                      }
                    ]
                  }
                },
                { "ROUTE":
                  {
                    "@fromField":"color_changed",
                    "@fromNode":"ColorSequencerInstance",
                    "@toField":"diffuseColor",
                    "@toNode":"MessageMaterial"
                  }
                },
                { "ROUTE":
                  {
                    "@fromField":"color_changed",
                    "@fromNode":"ColorSequencerInstance",
                    "@toField":"diffuseColor",
                    "@toNode":"MessageBackgroundMaterial"
                  }
                }
              ]
            }
          },
          { "Transform":
            {
              "@translation":[-2.4,-2,0],
              "-children":[
                { "Shape":
                  {
                    "-appearance":
                      { "Appearance":
                        {
                          "-material":
                            { "Material":
                              {
                                "@diffuseColor":[1,0,0]
                              }
                            }
                        }
                      },
                    "-geometry":
                      { "Text":
                        {
                          "@string":["previous"],
                          "-fontStyle":
                            { "FontStyle":
                              {
                                "@justify":["MIDDLE","MIDDLE"],
                                "@style":"BOLD"
                              }
                            }
                        }
                      }
                  }
                },
                { "TouchSensor":
                  {
                    "@DEF":"TouchPrevious",
                    "@description":"Select this text to see previous color"
                  }
                },
                { "ROUTE":
                  {
                    "@fromField":"isActive",
                    "@fromNode":"TouchPrevious",
                    "@toField":"previous",
                    "@toNode":"ColorSequencerInstance"
                  }
                },
                { "Shape":
                  {
                    "-geometry":
                      { "Box":
                        {
                          "@size":[3.4,0.8,0.1]
                        }
                      },
                    "-appearance":
                      { "Appearance":
                        {
                          "@DEF":"AppearanceTransparent",
                          "-material":
                            { "Material":
                              {
                                "@transparency":1
                              }
                            }
                        }
                      }
                  }
                }
              ]
            }
          },
          { "Transform":
            {
              "@translation":[0.8,-2,0],
              "-children":[
                { "Shape":
                  {
                    "-appearance":
                      { "Appearance":
                        {
                          "-material":
                            { "Material":
                              {
                                "@diffuseColor":[1,1,0]
                              }
                            }
                        }
                      },
                    "-geometry":
                      { "Text":
                        {
                          "@string":["cycle"],
                          "-fontStyle":
                            { "FontStyle":
                              {
                                "@justify":["MIDDLE","MIDDLE"]
                              }
                            }
                        }
                      }
                  }
                },
                { "Shape":
                  {
                    "-geometry":
                      { "Box":
                        {
                          "@size":[2,0.8,0.1]
                        }
                      },
                    "-appearance":
                      { "Appearance":
                        {
                          "@USE":"AppearanceTransparent"
                        }
                      }
                  }
                },
                { "TouchSensor":
                  {
                    "@DEF":"TouchCycle",
                    "@description":"Select this text to cycle through all colors"
                  }
                }
              ]
            }
          },
          { "Transform":
            {
              "@translation":[3.2,-2,0],
              "-children":[
                { "Shape":
                  {
                    "-appearance":
                      { "Appearance":
                        {
                          "-material":
                            { "Material":
                              {
                                "@diffuseColor":[0,1,0]
                              }
                            }
                        }
                      },
                    "-geometry":
                      { "Text":
                        {
                          "@string":["next"],
                          "-fontStyle":
                            { "FontStyle":
                              {
                                "@justify":["MIDDLE","MIDDLE"]
                              }
                            }
                        }
                      }
                  }
                },
                { "Shape":
                  {
                    "-geometry":
                      { "Box":
                        {
                          "@size":[1.8,0.8,0.1]
                        }
                      },
                    "-appearance":
                      { "Appearance":
                        {
                          "@USE":"AppearanceTransparent"
                        }
                      }
                  }
                },
                { "TouchSensor":
                  {
                    "@DEF":"TouchNext",
                    "@description":"Select this text to see next color"
                  }
                },
                { "ROUTE":
                  {
                    "@fromField":"isActive",
                    "@fromNode":"TouchNext",
                    "@toField":"next",
                    "@toNode":"ColorSequencerInstance"
                  }
                }
              ]
            }
          },
          {
            "#comment":"cycle toggler logic"
          },
          { "IntegerSequencer":
            {
              "@DEF":"Ticker",
              "@key":[0,0.125,0.25,0.375,0.5,0.625,0.75],
              "@keyValue":[0,1,2,3,4,5,6]
            }
          },
          { "TimeSensor":
            {
              "@DEF":"Clock",
              "@cycleInterval":8,
              "@enabled":false,
              "@loop":true
            }
          },
          { "BooleanToggle":
            {
              "@DEF":"Toggler"
            }
          },
          { "ROUTE":
            {
              "@fromField":"value_changed",
              "@fromNode":"Ticker",
              "@toField":"index",
              "@toNode":"ColorSequencerInstance"
            }
          },
          { "ROUTE":
            {
              "@fromField":"fraction_changed",
              "@fromNode":"Clock",
              "@toField":"set_fraction",
              "@toNode":"Ticker"
            }
          },
          { "ROUTE":
            {
              "@fromField":"toggle_changed",
              "@fromNode":"Toggler",
              "@toField":"enabled",
              "@toNode":"Clock"
            }
          },
          { "ROUTE":
            {
              "@fromField":"isActive",
              "@fromNode":"TouchCycle",
              "@toField":"set_boolean",
              "@toNode":"Toggler"
            }
          },
          {
            "#comment":"Ensure that next, previous selection events also turn off the color cycle"
          },
          { "BooleanFilter":
            {
              "@DEF":"TogglerStop"
            }
          },
          { "ROUTE":
            {
              "@fromField":"inputFalse",
              "@fromNode":"TogglerStop",
              "@toField":"toggle",
              "@toNode":"Toggler"
            }
          },
          { "ROUTE":
            {
              "@fromField":"isActive",
              "@fromNode":"TouchPrevious",
              "@toField":"set_boolean",
              "@toNode":"TogglerStop"
            }
          },
          { "ROUTE":
            {
              "@fromField":"isActive",
              "@fromNode":"TouchNext",
              "@toField":"set_boolean",
              "@toNode":"TogglerStop"
            }
          }
        ]
    }
  }
}