Choc Triangle Fan with Timeline Demo

by eigenjoy

HTML

<html class='no-js' lang='en'>
  <head>
      <link href='http://www.fullstack.io/choc/components/normalize-css/normalize.css' rel='stylesheet'>
    <link href='http://www.fullstack.io/choc/components/codemirror/lib/codemirror.css' rel='stylesheet'>
    <link href='http://www.fullstack.io/choc/components/components-foundation/css/foundation.min.css' rel='stylesheet'>
    <link href='http://www.fullstack.io/choc/components/jquery-ui/themes/ui-lightness/jquery-ui.min.css' rel='stylesheet'>
    <link href='http://www.fullstack.io/choc/styles/choc.css' rel='stylesheet'>
    <link href='http://www.fullstack.io/choc/styles/choc-editor.css' rel='stylesheet'>
    <script src='http://www.fullstack.io/choc/components/jquery/jquery.min.js'></script>
    <script src='http://www.fullstack.io/choc/components/spin.js/dist/spin.min.js'></script>
    <script src='http://www.fullstack.io/choc/components/components-foundation/js/foundation.min.js'></script>
    <script src='http://www.fullstack.io/choc/components/codemirror/lib/codemirror.js'></script>
    <script src='http://www.fullstack.io/choc/components/codemirror/mode/javascript/javascript.js'></script>
    <script src='http://www.fullstack.io/choc/components/codemirror-interactive-numbers/dist/codemirror-interactive-numbers.browser.js'></script>
    <script src='http://www.fullstack.io/choc/scripts/vendor/custom.modernizr.js'></script>
    <script src='http://www.fullstack.io/choc/scripts/vendor/jquery-ui-1.10.3.custom.js'></script>
    <script src='http://www.fullstack.io/choc/scripts/vendor/jquery.ui.touch-punch.min.js'></script>
    <script src='http://www.fullstack.io/choc/scripts/vendor/two.js'></script>

    <script src='http://www.fullstack.io/choc/components/choc/dist/choc.browser.js'></script>
  </head>
  <body>
    <script src='http://www.fullstack.io/choc/scripts/choc/two-annotations.js'></script>
      
    <div class='choc-wrapper'>
      <div class='canvas-container'>
        <div...

CSS

.choc-wrapper {
  padding: 2em;
}

JavaScript

(function() {
  $(document).ready(function() {
    var code, editor, pad;
    code = "var i = 0;\n\
while (i <= 20) {\n\
  var scaleFactor = 1 + (20 - i)/20;\n\
  var triangle = pad.makePolygon(0, 0, 200, -20, 195, 40, false);\n\
  triangle.fill(\"rgb(\" + i * 30 + \", \" + i * 18 + \", 0)\");\n\
  triangle.scale(scaleFactor);\n\
  triangle.rotation(i * 0.07);\n\
  triangle.translation.set(-20, 40);\n\
  i += 1;\n\
}";
    pad = new Two({
      width: 200,
      height: 200,
      type: Two.Types.canvas
    }).appendTo(document.getElementById('triangle-fan-2-canvas'));
    editor = new window.choc.Editor({
      $: $,
      id: "#choc-editor-for-triangle-fan-2",
      timeline: true,
      code: code,
      beforeScrub: function() {
        return pad.clear();
      },
      afterScrub: function() {
        return pad.update();
      },
      locals: {
        pad: pad
      }
    });
    return editor.start();
  });

}).call(this);