---
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 familiar with coffee script but don't personally write a lot of javascript. This is
      why I never really took the time to learn coffeescript.
    %p
      I realize there is no better way than to explore some fun library. Then I found paper.js and it just 
      might rekindle (replace) my povray noodles and get me working in more js.
    %p
      = 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)