-
-
Save pespes/1206249 to your computer and use it in GitHub Desktop.
A tiny shim for Paper.js/CoffeeScript prototyping
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
window.stainedPaper = function (func) { | |
var canvas = document.createElement('canvas'); | |
document.body.appendChild(canvas); | |
paper.setup(canvas); | |
func.call(paper); | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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