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