SOURCE CODE: Curve Explorer
VIEW EXAMPLE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Curve Explorer | JavaScript Tools | UIZE JavaScript Framework</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="keywords" content="animation featured tool Uize.Curve"/>
  <meta name="description" content="Add pizazz to JavaScript animations - bounce, easing, elasticity, and more. Visualize and experiment with preset curve functions. Or create your own!"/>
  <link rel="alternate" type="application/rss+xml" title="UIZE JavaScript Framework - Latest News" href="http://www.uize.com/latest-news.rss"/>
  <link rel="stylesheet" href="../css/page.css"/>
  <link rel="stylesheet" href="../css/page.example.css"/>
  <link rel="stylesheet" href="../css/widget.tabs.css"/>
  <link rel="stylesheet" href="../examples/css/selector-links.css"/>
  <link rel="stylesheet" href="../examples/css/params-table.css"/>
  <link rel="stylesheet" href="../examples/css/params-inspector.css"/>
  <style type="text/css">
    .main {
      padding-bottom: 4px;
    }
    #page-paramsInspector .tabShell {
      width: 480px;
    }
    #page_paramsInspector_curve {
      width: 400px;
      height: 251px;
      font-size: 12px;
    }
    #page_paramsInspector_preview {
      width: 466px;
    }
  </style>
</head>

<body>

<script type="text/javascript" src="../js/Uize.js"></script>

<h1 class="header">
  <a id="page-homeLink" href="../index.html" title="UIZE JavaScript Framework home"></a>
  <a href="../index.html" class="homeLinkText" title="UIZE JavaScript Framework home">UIZE JavaScript Framework</a>
</h1>

<div class="main">
  <h1 class="document-title">
    <a href="../javascript-examples.html" class="breadcrumb breadcrumbWithArrow">JAVASCRIPT EXAMPLES</a>
    Curve Explorer
    <div class="pageActionsShell">
      <div id="page-actions" class="pageActions"><a href="source-code/curve-explorer.html" class="buttonLink">SOURCE</a></div>
    </div>
  </h1>

  <!-- explanation copy -->

  <div class="explanation">
    <p>The <b>Curve Explorer</b> tool (which makes use of the <a href="../reference/Uize.Curve.html"><code>Uize.Curve</code></a>, <a href="../reference/Uize.Curve.Rubber.html"><code>Uize.Curve.Rubber</code></a>, and <a href="../reference/Uize.Curve.Mod.html"><code>Uize.Curve.Mod</code></a> modules, among others) provides a UI for visualizing and experimenting with curve functions. Select a curve in the <b>"PRESETS"</b> tab. The preview on the left will update, and the silver sphere will animate, using your curve to control its motion. The curve graph includes a color fade in which <code>0</code> is dark blue and <code>1</code> is light blue. To tweak the curve expression for a preset, use the <b>"PARAMS"</b> tab. Play around with the parameters in a curve expression - if present - to see how they affect the curve, or add more complexity by using the curve modifiers defined in the <code>Uize.Curve.Mod</code> package. Use the <b>"PREVIEW CURVE"</b> button to preview the changes you make. For some more complex presets, scroll to the bottom of the <b>"PRESETS"</b> tab.</p>
  </div>

  <!-- page layout's "wireframe" with slots for curve preview and params inspector -->

  <table border="0" cellspacing="0" cellpadding="4" style="margin:auto;">
    <tr valign="top">
      <td>
        <div style="position:relative; width:200px; height:350px; border:1px solid #555;">
          <div id="page-curveGradient" style="position:absolute; width:200px; height:350px; left:0; bottom:0;"></div>
          <div style="position:absolute; width:200px; height:200px; left:0; top:65px; border-top:1px dotted #888; border-bottom:1px dotted #888; background:#000; opacity:.5; filter:alpha(opacity=50);"></div>
          <div id="page-curveGraph" style="position:absolute; width:200px; height:200px; left:0; top:66px;"></div>
          <img id="page-sphere" src="images/silver-sphere.png" style="position:absolute; width:25px; height:25px; left:-28px; bottom:59px;" alt=""/>
        </div>
      </td>
      <td id="page-paramsInspector"></td>
    </tr>
  </table>
</div>

<!-- JavaScript code to make the static HTML "come alive" -->

<script type="text/javascript">

Uize.require (
  [
    'UizeSite.Page.Example.library',
    'UizeSite.Page.Example',
    'UizeSite.ParamsInspector',
    'Uize.Fade',
    'Uize.Curve',
    'Uize.Curve.Rubber',
    'Uize.Curve.Mod',
    'Uize.Curve.Examples',
    'Uize.Fx',
    'Uize.Color',
    'Uize.Color.xUtil',
    'Uize.Dom.Basics',
    'Uize.Dom.Pos'
  ],
  function () {
    'use strict';

    /*** create the example page widget ***/
      var page = window.page = UizeSite.Page.Example ();

    /*** configurable values ***/
      var
        totalSegments = 200,
        gradientStartColor = Uize.Color ('hsl(0,0,20)'),
        gradientEndColor = Uize.Color ('hsl(0,0,80)')
      ;

    /*** generate preview UI HTML ***/
      function buildSegmentsHtml (rootNodeName,segmentHtmlTemplate) {
        var
          htmlChunks = [],
          rootNode = page.getNode (rootNodeName),
          rootNodeWidth = Uize.Dom.Pos.getDimensions (rootNode).width,
          segmentWidth = rootNodeWidth / totalSegments,
          currentPos = 0,
          newPos
        ;
        for (var segmentNo = -1; ++segmentNo < totalSegments;) {
          newPos = Math.round (segmentWidth * (segmentNo + 1));
          htmlChunks.push (segmentHtmlTemplate.replace ('LEFT',currentPos).replace ('WIDTH',newPos - currentPos));
          currentPos = newPos;
        }
        page.setNodeInnerHtml (rootNode,htmlChunks.join (''));
        return Uize.Dom.Basics.find ({root:rootNode,tagName:'div'})
      }

      var
        gradientNodes = buildSegmentsHtml (
          'curveGradient',
          '<div style="position:absolute; left:LEFTpx; width:WIDTHpx; height:100%;"></div>'
        ),
        graphNodes = buildSegmentsHtml (
          'curveGraph',
          '<div style="position:absolute; left:LEFTpx; width:1px; height:1px; background:#ffa200; border-top:solid 1px #ff0;"></div>'
        )
      ;

    /*** create the params inspector widget ***/
      var lastPreviewedCurve;
      page.addChild (
        'paramsInspector',
        UizeSite.ParamsInspector,
        {
          params:{curve:'string-multiline',duration:'integer'},
          previewButtonText:'PREVIEW CURVE',
          presets:Uize.Curve.Examples ()
        }
      ).wire (
        'Preset Selected',
        function () {
          var
            values = page.children.paramsInspector.getValues (),
            curve = values.curve,
            curveFunction = Uize.eval (curve),
            curveIsCurrent = curve == lastPreviewedCurve
          ;
          if (!curveIsCurrent) {
            lastPreviewedCurve = curve;
            var
              graphRootNodeHeight = Uize.Dom.Pos.getDimensions (page.getNode ('curveGraph')).height - 3,
              previousCurveValue
            ;
            for (var segmentNo = -1; ++segmentNo < totalSegments;) {
              var curveValue = curveFunction (segmentNo / totalSegments);
              gradientNodes [segmentNo].style.background =
                Uize.Color.blend (gradientStartColor,gradientEndColor,curveValue,'#hex')
              ;
              if (previousCurveValue == null) previousCurveValue = curveValue;
              Uize.Dom.Basics.setStyle (
                graphNodes [segmentNo],
                {
                  bottom:Math.min (curveValue,previousCurveValue) * graphRootNodeHeight,
                  height:Math.max (Math.abs (curveValue - previousCurveValue) * graphRootNodeHeight,1)
                }
              );
              previousCurveValue = curveValue;
            }
          }
          page.setNodeStyle ('sphere',{bottom:59});
          setTimeout (
            function () {
              Uize.Fx.fadeStyle (
                page.getNode ('sphere'),
                {bottom:59},
                {bottom:259},
                +values.duration,
                {curve:curveFunction}
              );
            },
            curveIsCurrent ? 200 : 500
          );
        }
      );

    /*** wire up the page widget ***/
      page.wireUi ();
  }
);

</script>

</body>
</html>