-
-
Save mnmly/1164446 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
Here's Basic Demo at jsbin.com
Paper.js Path Tutorial using this shim.
Forked from A tiny shim for Processing/Coffeescript prototyping | gist: 1114064