Created
April 11, 2012 18:41
-
-
Save fjenett/2361285 to your computer and use it in GitHub Desktop.
Using Paper.js inside Processing.js
This file contains hidden or 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
| // More complex example | |
| // Adapted from the following Processing example: | |
| // http://processing.org/learning/topics/follow3.html | |
| var path, segSize, segments, segStart, withBlur = true; | |
| void setup () | |
| { | |
| size( 500, 300 ); | |
| paper.project = new paper.Project(); | |
| path = new paper.Path(); | |
| path.strokeColor = "#E4141B"; | |
| path.strokeWidth = 20; | |
| path.strokeCap = "round"; | |
| segSize = 25; | |
| segments = path.segments; | |
| segStart = new paper.Point(width/20, height/2); | |
| for (var i = 0; i < segSize; i++) | |
| { | |
| path.add( segStart.add(new paper.Point(i * 100, 0)) ); | |
| } | |
| } | |
| void draw () | |
| { | |
| background( 255 ); | |
| paper.project.draw( externals.context ); | |
| if ( withBlur ) | |
| filter( BLUR, 5 ); | |
| } | |
| void mouseMoved () | |
| { | |
| segments[0].point = new paper.Point(mouseX,mouseY); | |
| for (var i = 0; i < segSize - 1; i++) { | |
| var nextSegment = segments[i + 1]; | |
| var position = path.segments[i].point; | |
| var angle = (position.subtract(nextSegment.point)).angle; | |
| var vector = new paper.Point(); | |
| vector.angle = angle; | |
| vector.length = 35; | |
| nextSegment.point = position.subtract(vector); | |
| } | |
| path.smooth(); | |
| } | |
| void mousePressed () | |
| { | |
| path.fullySelected = true; | |
| //path.strokeColor = "#e08285"; | |
| withBlur = false; | |
| } | |
| void mouseReleased () | |
| { | |
| path.selected = false; | |
| //path.strokeColor = "#e4141b"; | |
| withBlur = true; | |
| } |
This file contains hidden or 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
| // Simple example | |
| Object path, star; | |
| void setup () | |
| { | |
| size( 200, 200 ); | |
| paper.project = new paper.Project(); | |
| path = new paper.Path(); | |
| path.strokeColor = "black"; | |
| path.moveTo( 20, 20 ); | |
| path.lineTo( 40, 40 ); | |
| path.lineTo( 40, 20 ); | |
| path.lineTo( 20, 40 ); | |
| var p = new paper.Point(width/2, height/2); | |
| star = paper.Path.Star( p, 12, 30, 70 ); | |
| star.strokeColor = "red"; | |
| star.selected = true; | |
| } | |
| void draw () | |
| { | |
| background( 255 ); | |
| paper.project.draw( externals.context ); | |
| filter( BLUR, 3 ); | |
| } |
This file contains hidden or 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> | |
| <!-- Template file for Processing 2.0 (alpha5), in JavaScript mode see "Start Template" --> | |
| <head> | |
| <meta http-equiv="content-type" content="text/html; charset=utf-8" /> | |
| <title>@@sketch@@ : Built with Processing and Processing.js</title> | |
| <link rel="icon" type="image/x-icon" href="data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAQAAVzABAEAjBQAaDwYAWjUGAGE6CQBrQQ0ATS8PAFhAJwBUQC8AbFI6AHVXPACBZk4A4NrWAPb19QAAAAAAAMmZmZmZmgAJIwAAAAAAcMIjPjA+PjAKpxIuMDMzMAm0Ii4zMzMACaIiLt3dMAAJtyIuIzPQAAm0Un5yM+IzKLRkfncy4iIotRF+dyLkIiq0QX53F+EiGrQUTkd34iIatEVu7u5iIVrBVVRBRFRVbAtGZGZla2uwAMu7u7u8vADAAwAAgAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIABAADAAwAA" /> | |
| <meta name="Generator" content="Processing" /> | |
| <!-- - - - - - - - - - - - - - - - - - - - - | |
| + | |
| + Wondering how this works? | |
| + | |
| + Go to: http://processing.org/ | |
| + and: http://processingjs.org/ | |
| + | |
| + - - - - - - - - - - - - - - - - - - - - --> | |
| <style type="text/css"> | |
| body { | |
| background-color: #333; color: #bbb; line-height: normal; | |
| font-family: Lucida Grande, Lucida Sans, Arial, Helvetica Neue, Verdana, Geneva, sans-serif; | |
| font-size: 11px; font-weight: normal; text-decoration: none; | |
| line-height: 1.5em; | |
| } | |
| a img { | |
| border: 0px solid transparent; | |
| } | |
| a, a:link, a:visited, a:active, a:hover { | |
| color: #cdcdcd; text-decoration: underline; | |
| } | |
| h1 { | |
| font-family: Arial, Helvetica Neue, Verdana, Geneva, sans-serif; | |
| width: 100%; letter-spacing: 0.1em; | |
| margin-bottom: 1em; font-size: 1.65em; | |
| } | |
| canvas { | |
| display: block; | |
| outline: 0px; | |
| margin-bottom: 1.5em; | |
| } | |
| #content { | |
| margin: 50px auto 0px auto; padding: 25px 25px 15px 25px; | |
| width: @@width@@px; min-width: 300px; overflow: auto; | |
| border-left: 1px solid #444; border-top: 1px solid #444; | |
| border-right: 1px solid #333; border-bottom: 1px solid #333; | |
| background-color: #3d3d3d; | |
| } | |
| </style> | |
| <!--[if lt IE 9]> | |
| <script type="text/javascript">alert("Your browser does not support the canvas tag.");</script> | |
| <![endif]--> | |
| <script src="processing.js" type="text/javascript"></script> | |
| <script src="paper.js" type="text/javascript"></script> | |
| @@scripts@@ | |
| </head> | |
| <body> | |
| <div id="content"> | |
| <div> | |
| <canvas id="@@id@@" data-processing-sources="@@sketch@@.pde" | |
| width="@@width@@" height="@@height@@"> | |
| <p>Your browser does not support the canvas tag.</p> | |
| <!-- Note: you can put any alternative content here. --> | |
| </canvas> | |
| <noscript> | |
| <p>JavaScript is required to view the contents of this page.</p> | |
| </noscript> | |
| </div> | |
| <h1>@@sketch@@</h1> | |
| <p id="description">@@description@@</p> | |
| <p id="sources">Source code: @@source@@</p> | |
| <p> | |
| Built with <a href="http://processing.org" title="Processing">Processing</a> | |
| and <a href="http://processingjs.org" title="Processing.js">Processing.js</a> | |
| </p> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment