Created
April 10, 2015 00:22
-
-
Save shenningsgard/90b48d2dd4ba7ca1323f to your computer and use it in GitHub Desktop.
My first experiment with the Paper.js library. Draw stuff, hit the space bar, and have fun!
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
| <html> | |
| <head> | |
| <title>Steve Henningsgard's Projects</title> | |
| <style type="text/css">body{background-color: #040404}</style> | |
| <!--<script src="http://reset5.googlecode.com/hg/reset.min.css"></script>--> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> | |
| <script src="../js/libraries/paper.js"></script> | |
| <script type="text/javascript"> | |
| var rotate = false; | |
| function rotateMyStuff(paths) { | |
| var i = 0, | |
| red = 0, | |
| green = 0, | |
| blue = 0; | |
| if (rotate) { | |
| for (i = 0; i < paths.length; i++) { | |
| red = ((1 + (Math.sin(Math.PI * (paths[i].getRotation()/180))))/2); | |
| green = ((1 + (Math.sin(Math.PI * (paths[i].getRotation()/60))))/2); | |
| blue = ((1 + (Math.sin(Math.PI * (paths[i].getRotation()/270))))/2); | |
| paths[i].setRotation((paths[i].getRotation() + 0.5) % 360 ); | |
| paths[i].strokeColor.red = red; | |
| paths[i].strokeColor.green = green; | |
| paths[i].strokeColor.blue = blue; | |
| paths[i].strokeWidth = red * 10; | |
| } | |
| } | |
| } | |
| function spaceKey(event) { | |
| if (event.key == 'space') { | |
| rotate ? rotate = false : rotate = true; | |
| } | |
| } | |
| </script> | |
| <script type="text/paperscript" canvas="myCanvas"> | |
| var paths = []; | |
| var path = new Path(); | |
| var i = 0; | |
| var rotate = false; | |
| function onMouseDrag(event) { | |
| path.strokeColor = new Color(0,1,0); | |
| path.add(event.point); | |
| path.smooth(); | |
| //path.fullySelected = true; | |
| } | |
| function onMouseUp() { | |
| path.simplify(); | |
| paths[paths.length]=path; | |
| path = new Path(); | |
| } | |
| function onKeyDown(event) { | |
| spaceKey(event); | |
| } | |
| function onFrame() { | |
| rotateMyStuff(paths); | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <canvas id="myCanvas" resize></canvas> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment