---
title: Coffee Paper
date: 2014-09-23
tags: paper.js, coffeescript
---
.row
  .col-sm-12
    - if is_blog_article?
      %h2 Coffee Paper

    %p
      I need to get more failure with coffee script, but don't personally write a lot of javascript, which is
      why I never really took the time to learn coffeescript. I decided there would be no better way than to
      explore some fun library, and found paper.js. This just might rekindle (replace) my povray noodles and
      get me working in more js.
      = link_to 'This gist', 'https://gist.github.com/mnmly/1164446#file-coffee-stained-paper-js'
      helped me get a basic tutorial script working with coffeescript; off to a new thing.


- content_for :head do
  = javascript_include_tag "vendor/paper-full.min"
.row
  .col-sm-12
    %canvas#myCanvas
    :css
      #myCanvas {
        width: 530px;
        height: 200px;
        background-color: #F7F7F7;
      }

:coffee
  window.stainedPaper = (func) ->
    canvas = document.getElementById('myCanvas')
    paper.setup canvas
    func.call paper
    return

  stainedPaper ->
    rect = new @Path.Rectangle([40, 75], [50, 50])
    rect.strokeColor = '#000'
    rect.fillColor = '#999'

    path = new @Path()
    path.strokeColor = '#000'
    start = new @Point(65, 100)
    path.moveTo(start)
    path.lineTo start.add([ 400, 0])

    rect2 = new @Path.Rectangle([440, 75], [50, 50])
    rect2.strokeColor = '#000'
    rect2.fillColor = '#999'

    @view.draw()
    @view.onFrame = (event) ->
      rect.rotate(2)
      rect2.rotate(2)