paper js noodles

source/blog/coffee_paper.html.haml

@@ -0,0 +1,58 @@
+---
+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)
+