Skip to content

Instantly share code, notes, and snippets.

@pespes

pespes/coffee-stained-paper.js

Forked from mnmly/coffee-stained-paper.js
Created September 9, 2011 13:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pespes/1206249 to your computer and use it in GitHub Desktop.
Save pespes/1206249 to your computer and use it in GitHub Desktop.
Download ZIP
A tiny shim for Paper.js/CoffeeScript prototyping
Raw
coffee-stained-paper.js
window.stainedPaper = function (func) {
var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
paper.setup(canvas);
func.call(paper);
};
Raw
example.html
<!DOCTYPE html>
<title>CoffeeScript/Paper.js</title>
<script src="https://raw.github.com/paperjs/paper.js/master/dist/paper.js"></script>
<script src="https://raw.github.com/jashkenas/coffee-script/master/extras/coffee-script.js"></script>
<script src="https://raw.github.com/gist/1164446/coffee-stained-paper.js"></script>
<script type="text/coffeescript">
stainedPaper ->
    path = new @Path()
    # Give the stroke a color
    path.strokeColor = 'black'
    start = new @Point(100, 100)
    # Move to start and draw a line from there
    path.moveTo(start)
    # Note that the plus operator on Point objects does not work
    # in JavaScript. Instead, we need to call the add() function:
    path.lineTo start.add([ 200, -50 ])
    # Draw the view now:
    @view.draw()
rect = new @Path.Rectangle([100, 50], [10, 100])
rect.strokeColor = 'black'
@view.onFrame = (event) ->
# On each frame, rotate the path by 3 degrees:
rect.rotate(3)
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment