Choc Bouncing Ball Demo - JSFiddle

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='frameCanvas'></div>
      ...

CSS

.choc-wrapper {
  padding: 2em;
}

CoffeeScript

$(document).ready () ->
  choc = window.choc
  geval = eval

  code = """
   var draw, ball, x = 0, y = 50, dy = 0;
   draw = function() {
     x += 3;
     y += dy; 
     if (y > 185) {
       dy = -dy;
       ball = pad.makeEllipse(x, 190, 36, 25); 
     } else {
       dy = dy * 0.94 + 3;
       ball = pad.makeEllipse(x, y, 30, 30); 
     }
     // ball.fill = "green"; // uncomment to set the color, then play the animation
   }

  """
  twoOptions = 
    width: 200
    height: 300
    type: Two.Types.canvas

  framePad   = new Two(twoOptions).appendTo(document.getElementById('frameCanvas'))
  previewPad = new Two(twoOptions).appendTo(document.getElementById('previewCanvas'))

  $("#fader").width(twoOptions.width).height(twoOptions.height)


  maxAnimationFrames = 100

  editor = new choc.AnimationEditor({
    $: $
    id: "#choc-editor-for-bouncing-ball"
    code: code
    beforeGeneratePreview: () -> previewPad.clear()
    afterGeneratePreview:  () -> previewPad.update()

    animate: "draw"
    play: () ->
      draw = geval("draw")
      framePad.frameCount = 0

      editor.start()
      previewPad.clear()

      updateFn = (frameCount, timeDelta) ->
        if frameCount > maxAnimationFrames
          editor.onPause()
        else
          editor.onFrame(frameCount, timeDelta)
          _.defer () ->
            framePad.clear()
            draw()

      framePad.unbind(Two.Events.update)
      framePad.bind('update', updateFn)
      framePad.play()
    pause: () ->
      framePad.pause()
      framePad.unbind(Two.Events.update)

    maxAnimationFrames: maxAnimationFrames
    locals: { pad: [framePad, previewPad] }
    })

  editor.start()