SOURCE CODE: Curve Explorer

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
  <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=""/>
  <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;


<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>

<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>

  <!-- 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>

  <!-- 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">
        <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=""/>
      <td id="page-paramsInspector"></td>

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

<script type="text/javascript">

Uize.require (
  function () {
    'use strict';

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

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

    /*** generate preview UI HTML ***/
      function buildSegmentsHtml (rootNodeName,segmentHtmlTemplate) {
          htmlChunks = [],
          rootNode = page.getNode (rootNodeName),
          rootNodeWidth = Uize.Dom.Pos.getDimensions (rootNode).width,
          segmentWidth = rootNodeWidth / totalSegments,
          currentPos = 0,
        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'})

        gradientNodes = buildSegmentsHtml (
          '<div style="position:absolute; left:LEFTpx; width:WIDTHpx; height:100%;"></div>'
        graphNodes = buildSegmentsHtml (
          '<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 (
          previewButtonText:'PREVIEW CURVE',
          presets:Uize.Curve.Examples ()
      ).wire (
        'Preset Selected',
        function () {
            values = page.children.paramsInspector.getValues (),
            curve = values.curve,
            curveFunction = Uize.eval (curve),
            curveIsCurrent = curve == lastPreviewedCurve
          if (!curveIsCurrent) {
            lastPreviewedCurve = curve;
              graphRootNodeHeight = Uize.Dom.Pos.getDimensions (page.getNode ('curveGraph')).height - 3,
            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'),
            curveIsCurrent ? 200 : 500

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