Choc Parabola Demo

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 id='parabola-canvas'></div>
  ...

CSS

.choc-wrapper {
  padding: 2em;
}

JavaScript

(function() {
  $(document).ready(function() {
    var canvas, choc, editor, pad, parabola;
    choc = window.choc;
    parabola = "var shift = 0;\n\
while (shift <= 300) {\n\
pad.makeLine(shift, 0, 200, shift);\n\
shift += 14;\n\
}";
    pad = new Two({
      width: 200,
      height: 200,
      type: Two.Types.canvas
    }).appendTo(document.getElementById('parabola-canvas'));
    if (window.devicePixelRatio === 2) {
      canvas = pad.renderer.domElement;
      canvas.setAttribute('width', canvas.width * 3);
      canvas.setAttribute('height', canvas.height * 3);
      pad.renderer.ctx.scale(3, 3);
    }
    editor = new choc.Editor({
      $: $,
      id: "#choc-editor-for-parabola",
      code: parabola,
      beforeScrub: function() {
        return pad.clear();
      },
      afterScrub: function() {
        return pad.update();
      },
      locals: {
        pad: pad
      }
    });
    editor.start();
    return window.parabolaEditor = editor;
  });

}).call(this);