Permalink
Browse files

Paper.js Playground

This is an initial push to give us a place to start.  Specifically, it
is intended as a quick and easy way to get started with something
functional to play with so we can get up and running right away.
  • Loading branch information...
1 parent 917052d commit dd683a9fa44095953f2f00e349297ab40ef310bd @mmorri77 committed Sep 1, 2012
Showing with 8,463 additions and 0 deletions.
  1. +1 −0 .gitignore
  2. +13 −0 index.html
  3. +65 −0 js/drunken-octo-hipster.js
  4. +147 −0 js/new.paper.js
  5. +8,237 −0 js/paper.js
View
@@ -0,0 +1 @@
+.DS_Store
View
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Roadrunner Platforming</title>
+</head>
+<body>
+ <canvas id="myCanvas" resize></canvas>
+ <!-- Load the Paper.js library -->
+ <script type="text/javascript" src="js/paper.js"></script>
+ <!-- Define inlined PaperScript associate it with myCanvas -->
+ <script type="text/paperscript" src="js/drunken-octo-hipster.js" canvas="myCanvas" resize=”true”></script>
+</body>
+</html>
@@ -0,0 +1,65 @@
+/*
+ README!
+ I'm writing this as a quick and dirty way to get us going. Often, when learning a new language or technique,
+ it can be helpful to play around with something working. Making changes, seeing what happens, breaking things and
+ then fixing them, and otherwise tinkering can be an effective way to understand new material.
+
+ Toward that end, I decided it might be useful to set up a simple project base for us to hack on while we're finding
+ our legs for this project.
+
+ I chose Paper.js because it is relatively easy to get started with, it is the JS graphics library I personally have
+ the most experience with (so I can be of more help), and because it seems to meet our needs pretty well. This does
+ not mean we have to stick with Paper as the framework of choice for this project, but it should provide us with a
+ good way to get our feet wet.
+
+ INSTRUCTIONS!
+ To get started, simply load the accompanying index.html file into a modern (read: standards compliant) browser, and you
+ should see a colored circle in the center of the screen. The html file itself is merely the container that provides us
+ with a structure to use when building our program. The logic of the program is contained within this file, while the
+ functionality of Paper is contained within the paper.js file. The index.html file creates the DOM (Document Object Model)
+ that will be manipulated by our code (this file) and links to the appropriate js files (this and paper.js).
+
+ Clear as mud?
+ */
+
+/*
+ * Declarations
+ */
+ var circle;
+
+/*
+ * init()
+ * This function acts as an initialization routine for our game.
+ */
+function init() {
+
+ //Let's begin with a couple of simple shapes to play with.
+ /*
+ First, we'll make a simple red circle. In Paper.js, we have an object prototype
+ called 'Path' to use to draw with. Paths in Paper are just like paths you might've
+ seen in drawing programs, such as Illustrator. A path is a collection of points connected
+ by curves. (Note: a 'curve' might have a curvature of zero--i.e. a straight line.)
+
+ The path object comes with some handy built-in constructors for common shapes. Here, we're
+ going to use the Path.Circle(c,r) function, where c is the center and r is the radius.
+ */
+ circle = new Path.Circle(view.center, 33);
+ circle.fillColor = 'red'; // fill is the area encapsulated by a closed path
+ circle.strokeColor = 'black'; // stroke is the border area of the path
+ circle.strokeWidth = 3; // thickness of stroke
+}
+
+/*
+ * onFrame(event)
+ * This function is a Paper.js built-in to assist with animation. onFrame() is simply
+ * a continuous loop that will update up to sixty times/frames per second.
+ */
+function onFrame(event) {
+ circle.fillColor.hue += 3;
+}
+
+/*
+ * Calling init() will kick off the execution of our primary logic.
+ * (Compare to main() in a C/Java program...)
+ */
+init(); // begin
View
@@ -0,0 +1,147 @@
+/*!
+ * Paper.js v*#=* options.version
+ *
+ * This file is part of Paper.js, a JavaScript Vector Graphics Library,
+ * based on Scriptographer.org and designed to be largely API compatible.
+ * http://paperjs.org/
+ * http://scriptographer.org/
+ *
+ * Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
+ * http://lehni.org/ & http://jonathanpuckey.com/
+ *
+ * Distributed under the MIT license. See LICENSE file for details.
+ *
+ * All rights reserved.
+ *
+ * Date: *#=* options.date
+ *
+ ***
+ *
+ * Bootstrap.js JavaScript Framework.
+ * http://bootstrapjs.org/
+ *
+ * Copyright (c) 2006 - 2011 Juerg Lehni
+ * http://lehni.org/
+ *
+ * Distributed under the MIT license.
+ *
+ ***
+ *
+ * Parse-js
+ *
+ * A JavaScript tokenizer / parser / generator, originally written in Lisp.
+ * Copyright (c) Marijn Haverbeke <marijnh@gmail.com>
+ * http://marijn.haverbeke.nl/parse-js/
+ *
+ * Ported by to JavaScript by Mihai Bazon
+ * Copyright (c) 2010, Mihai Bazon <mihai.bazon@gmail.com>
+ * http://mihai.bazon.net/blog/
+ *
+ * Modifications and adaptions to browser (c) 2011, Juerg Lehni
+ * http://lehni.org/
+ *
+ * Distributed under the BSD license.
+ */
+
+var paper = new function() {
+// Inline Bootstrap core (the Base class) inside the paper scope first:
+/*#*/ include('../lib/bootstrap.js');
+
+/*#*/ if (options.stats) {
+/*#*/ include('../lib/stats.js');
+/*#*/ } // options.stats
+
+/*#*/ include('core/Base.js');
+/*#*/ include('core/PaperScope.js');
+/*#*/ include('core/PaperScopeItem.js');
+/*#*/ include('core/Callback.js');
+
+// Include Paper classes, which are later injected into PaperScope by setting
+// them on the 'this' object, e.g.:
+// var Point = this.Point = Base.extend(...);
+
+/*#*/ include('basic/Point.js');
+/*#*/ include('basic/Size.js');
+/*#*/ include('basic/Rectangle.js');
+/*#*/ include('basic/Matrix.js');
+/*#*/ include('basic/Line.js');
+
+/*#*/ include('project/Project.js');
+/*#*/ include('project/Symbol.js');
+
+/*#*/ include('item/ChangeFlag.js');
+/*#*/ include('item/Item.js');
+/*#*/ include('item/Group.js');
+/*#*/ include('item/Layer.js');
+/*#*/ include('item/PlacedItem.js');
+/*#*/ include('item/Raster.js');
+/*#*/ include('item/PlacedSymbol.js');
+/*#*/ include('item/HitResult.js');
+
+/*#*/ include('path/Segment.js');
+/*#*/ include('path/SegmentPoint.js');
+/*#*/ include('path/SelectionState.js');
+/*#*/ include('path/Curve.js');
+/*#*/ include('path/CurveLocation.js');
+/*#*/ include('path/PathItem.js');
+/*#*/ include('path/Path.js');
+/*#*/ include('path/Path.Constructors.js');
+/*#*/ include('path/CompoundPath.js');
+/*#*/ include('path/PathFlattener.js');
+/*#*/ include('path/PathFitter.js');
+
+/*#*/ include('text/TextItem.js');
+/*#*/ include('text/PointText.js');
+
+/*#*/ include('style/Style.js');
+/*#*/ include('style/PathStyle.js');
+/*#*/ include('style/ParagraphStyle.js');
+/*#*/ include('style/CharacterStyle.js');
+
+/*#*/ include('color/Color.js');
+/*#*/ include('color/GradientColor.js');
+/*#*/ include('color/Gradient.js');
+/*#*/ include('color/GradientStop.js');
+
+/*#*/ if (options.browser) {
+/*#*/ include('browser/DomElement.js');
+/*#*/ include('browser/DomEvent.js');
+/*#*/ } // options.browser
+
+/*#*/ include('ui/View.js');
+/*#*/ include('ui/CanvasView.js');
+
+/*#*/ if (options.browser) {
+/*#*/ include('ui/Event.js');
+/*#*/ include('ui/KeyEvent.js');
+/*#*/ include('ui/Key.js');
+/*#*/ include('ui/MouseEvent.js');
+
+/*#*/ include('tool/ToolEvent.js');
+/*#*/ include('tool/Tool.js');
+/*#*/ } // options.browser
+
+/*#*/ include('util/CanvasProvider.js');
+/*#*/ include('util/Numerical.js');
+/*#*/ include('util/BlendMode.js');
+/*#*/ if (options.version == 'dev') {
+/*#*/ include('util/ProxyContext.js');
+/*#*/ } // options.browser
+
+/*#*/ include('core/PaperScript.js');
+
+/*#*/ if (options.browser) {
+/*#*/ include('core/initialize.js');
+/*#*/ } // options.browser
+
+/*#*/ if (options.version != 'dev') {
+// Finally inject the classes set on 'this' into the PaperScope class and create
+// the first PaperScope and return it, all in one statement.
+// The version for 'dev' of this happens in core/initialize.js, since it depends
+// on sequentiality of include() loading.
+// Mark this object as enumerable, so all the injected classes can be enumerated
+// again in PaperScope#install().
+this.enumerable = true;
+return new (PaperScope.inject(this));
+/*#*/ } // options.version != 'dev'
+};
Oops, something went wrong.

0 comments on commit dd683a9

Please sign in to comment.