61 lines
1.5 KiB
Plaintext
61 lines
1.5 KiB
Plaintext
---
|
|
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)
|
|
|