npm - @turbowarp/paper - Versions diffs - 0.12.202407161743 - Mend

@turbowarp/paper 0.12.202407161743

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (139) hide show

package/AUTHORS.md +18 -0
package/CHANGELOG.md +701 -0
package/LICENSE.txt +23 -0
package/README.md +381 -0
package/dist/node/canvas.js +66 -0
package/dist/node/extend.js +156 -0
package/dist/node/self.js +58 -0
package/dist/node/xml.js +40 -0
package/dist/paper-core.js +15805 -0
package/dist/paper-full.js +17574 -0
package/examples/Animated/AnimatedStar.html +53 -0
package/examples/Animated/BooleanOperations.html +115 -0
package/examples/Animated/CandyCrash.html +151 -0
package/examples/Animated/Extruded.html +50 -0
package/examples/Animated/Lines.html +53 -0
package/examples/Animated/Smoothing.html +70 -0
package/examples/Animated/Space.html +86 -0
package/examples/Animated/SpaceUsingShapes.html +79 -0
package/examples/Games/Paperoids.html +569 -0
package/examples/JSON/Circle Testing.html +34 -0
package/examples/JSON/Compound Path.html +25 -0
package/examples/JSON/Empty Path Testing.html +31 -0
package/examples/JSON/Gradients.html +34 -0
package/examples/JSON/Group Transform.html +28 -0
package/examples/JSON/Line Testing.html +44 -0
package/examples/JSON/Random Path Testing.html +42 -0
package/examples/JSON/Raster.html +29 -0
package/examples/JSON/Rect and Attribute Testing.html +56 -0
package/examples/JSON/Rotated Primitives.html +55 -0
package/examples/JSON/Selection.html +43 -0
package/examples/JSON/Shapes.html +54 -0
package/examples/JSON/Symbols.html +30 -0
package/examples/JSON/Text Testing.html +38 -0
package/examples/JSON/Tiger.html +19 -0
package/examples/JSON/Transform Test 1.html +32 -0
package/examples/JSON/Transform Test 2.html +30 -0
package/examples/Node.js/AnimatedStar.js +52 -0
package/examples/Node.js/BooleanOperations.js +36 -0
package/examples/Node.js/JSONtoPDF.js +20 -0
package/examples/Node.js/Raster.js +32 -0
package/examples/Node.js/RasterRemote.js +33 -0
package/examples/Node.js/SvgExport.js +52 -0
package/examples/Node.js/SvgImport.js +23 -0
package/examples/Node.js/Tadpoles.js +16 -0
package/examples/Node.js/Tadpoles.pjs +278 -0
package/examples/Node.js/in.json +1 -0
package/examples/Node.js/in.svg +16 -0
package/examples/Paperjs.org/BooleanOperattions.html +115 -0
package/examples/Paperjs.org/BouncingBalls.html +103 -0
package/examples/Paperjs.org/Chain.html +54 -0
package/examples/Paperjs.org/DivisionRaster.html +72 -0
package/examples/Paperjs.org/FutureSplash.html +122 -0
package/examples/Paperjs.org/HitTesting.html +103 -0
package/examples/Paperjs.org/InteractiveTiger.html +777 -0
package/examples/Paperjs.org/MetaBalls.html +132 -0
package/examples/Paperjs.org/NyanRainbow.html +202 -0
package/examples/Paperjs.org/PathIntersections.html +76 -0
package/examples/Paperjs.org/Qbertify.html +146 -0
package/examples/Paperjs.org/RadialRainbows.html +80 -0
package/examples/Paperjs.org/RoundedRectangles.html +41 -0
package/examples/Paperjs.org/SatieLikedToDraw.html +140 -0
package/examples/Paperjs.org/Simplify.html +63 -0
package/examples/Paperjs.org/SpiralRaster.html +120 -0
package/examples/Paperjs.org/Tadpoles.html +283 -0
package/examples/Paperjs.org/Voronoi.html +134 -0
package/examples/Rasters/PhyllotaxisRaster.html +96 -0
package/examples/Rasters/Raster.html +34 -0
package/examples/Rasters/RotationRaster.html +44 -0
package/examples/Rasters/Smoothing.html +48 -0
package/examples/SVG Export/Circle Testing.html +32 -0
package/examples/SVG Export/Clipping.html +17 -0
package/examples/SVG Export/Compound Path.html +22 -0
package/examples/SVG Export/Empty Path Testing.html +28 -0
package/examples/SVG Export/Gradients.html +52 -0
package/examples/SVG Export/Group Transform.html +25 -0
package/examples/SVG Export/Line Testing.html +41 -0
package/examples/SVG Export/Random Path Testing.html +39 -0
package/examples/SVG Export/Raster.html +21 -0
package/examples/SVG Export/Rect and Attribute Testing.html +53 -0
package/examples/SVG Export/Rotated Primitives.html +80 -0
package/examples/SVG Export/Shapes.html +58 -0
package/examples/SVG Export/Symbols.html +27 -0
package/examples/SVG Export/Text Testing.html +45 -0
package/examples/SVG Export/Tiger.html +23 -0
package/examples/SVG Export/Transform Test 1.html +29 -0
package/examples/SVG Export/Transform Test 2.html +27 -0
package/examples/SVG Import/Arcs.html +78 -0
package/examples/SVG Import/Butterfly.html +223 -0
package/examples/SVG Import/Circle and Ellipse Testing.html +26 -0
package/examples/SVG Import/Clipping.html +100 -0
package/examples/SVG Import/From File.html +30 -0
package/examples/SVG Import/Gradient.html +138 -0
package/examples/SVG Import/Gradients.html +30 -0
package/examples/SVG Import/Inkscape Pivot.html +52 -0
package/examples/SVG Import/Inkscape.html +88 -0
package/examples/SVG Import/Line Testing.html +24 -0
package/examples/SVG Import/MoreGradients.html +107 -0
package/examples/SVG Import/Multiple Paths Test 1.html +42 -0
package/examples/SVG Import/Multiple Paths Test 2.html +33 -0
package/examples/SVG Import/Nested Groups Test.html +78 -0
package/examples/SVG Import/Polybezier.html +43 -0
package/examples/SVG Import/Rect Testing.html +25 -0
package/examples/SVG Import/Symbols.html +24 -0
package/examples/SVG Import/Testing.html +40 -0
package/examples/SVG Import/Text Testing.html +19 -0
package/examples/SVG Import/Tiger.html +742 -0
package/examples/SVG Import/Transform Testing.html +22 -0
package/examples/SVG Import/Viewbox.html +38 -0
package/examples/Scripts/Arcs.html +39 -0
package/examples/Scripts/BlendModes.html +77 -0
package/examples/Scripts/BooleanOperations.html +937 -0
package/examples/Scripts/CompoundPath.html +19 -0
package/examples/Scripts/CurveTimeParameterization.html +61 -0
package/examples/Scripts/HslColor.html +53 -0
package/examples/Scripts/PathStructure.html +82 -0
package/examples/Scripts/PathTangents.html +73 -0
package/examples/Scripts/Resize.html +42 -0
package/examples/Scripts/RoundRectangle.html +28 -0
package/examples/Scripts/Shapes.html +54 -0
package/examples/Scripts/StrokeBounds.html +101 -0
package/examples/Scripts/StrokeScaling.html +65 -0
package/examples/Tools/BezierTool.html +90 -0
package/examples/Tools/Circles.html +28 -0
package/examples/Tools/Clouds.html +35 -0
package/examples/Tools/DrippingBrush.html +73 -0
package/examples/Tools/FancyBrush.html +82 -0
package/examples/Tools/Grid.html +44 -0
package/examples/Tools/MultiLines.html +44 -0
package/examples/Tools/MultipleTools.html +44 -0
package/examples/Tools/PathEditing.html +95 -0
package/examples/Tools/SquareRounded.html +76 -0
package/examples/Tools/Stars.html +38 -0
package/examples/Tools/Vektor.html +200 -0
package/examples/Tools/Wave.html +50 -0
package/examples/Tools/WormFarm.html +88 -0
package/examples/Worker/Main.html +53 -0
package/examples/Worker/Worker.js +14 -0
package/examples/css/style.css +12 -0
package/package.json +109 -0

package/examples/Games/Paperoids.html ADDED Viewed

@@ -0,0 +1,569 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+    <title>Paperoids</title>
+    <script type="text/javascript" src="../../dist/paper-full.js"></script>
+    <script type="text/paperscript" canvas="canvas">
+    //
+    //
+    // Paperoids - an Asteroids clone for paper.js
+    //
+    // Sorry nerds, no enemy ships or sound just yet.
+    //
+    // Version: 1.2.1
+    // Author:  David Hirmes (@hirmes)
+    // Date:    2011-08-09
+    //
+    // Revision History:
+    // 1.0  - 2011-07-13 - Initial release
+    // 1.1  - 2011-07-13 - Optimizations by Jonathan Puckey (@jonathanpuckey)
+    // 1.2  - 2011-07-16 - Refactored with closures (@jonathanpuckey)
+    // 1.2.1- 2011-08-09 - bug fixes
+    //
+    var presets = {
+        speed: 0.2,
+        maxRockSpeed: 4.5,
+        rockCount: 6,
+        lives: 3,
+        freeShipScore: 10000,
+        freeShipIncrement: 10000
+    };
+    function initialize() {
+        Rocks.add(presets.rockCount);
+        Score.update();
+        Lives.initialize();
+    }
+    function onKeyUp(event) {
+        if (event.key == 'space') {
+            Ship.moveTo(Point.random() * view.size);
+            Ship.stop();
+        }
+        if (event.key == 'z') {
+            Ship.fire();
+        }
+        // Show stats:
+        if (event.key == 'f') {
+            var stats = document.getElementById('stats');
+            if (stats) {
+                stats.style.display = (stats.style.display == 'block')
+                        ? 'none' : 'block';
+            }
+        }
+    }
+    function onFrame() {
+        Bullets.move();
+        Rocks.iterateExplosions();
+        Ship.checkCollisions();
+        if (Key.isDown('left')) {
+            Ship.turnLeft();
+        }
+        if (Key.isDown('right')) {
+            Ship.turnRight();
+        }
+        if (Key.isDown('up')) {
+            Ship.thrust();
+        } else {
+            Ship.coast();
+        }
+        Ship.move();
+    }
+    project.currentStyle.strokeColor = 'white';
+    var Game = {
+        roundDelay: false,
+        over: function() {
+            document.getElementById('gameover').style.display = 'block';
+        },
+        newRound: function() {
+            Game.roundDelay = false;
+            Rocks.add(presets.rockCount);
+        },
+        // Stats.js by Mr. Doob - https://github.com/mrdoob/stats.js
+    };
+    var assets = {
+        destroyedShip: new function() {
+            var group = new Group(
+                new Path([-10, -8], [10, 0]),
+                new Path([10, 0], [-10, 8]),
+                new Path([-8, 4], [-8, -4])
+            );
+            group.visible = false;
+            return group;
+        },
+        explosion: new function() {
+            var explosionPath = new Path.Circle(new Point(), 1);
+            explosionPath.fillColor = 'white';
+            explosionPath.strokeColor = null;
+            return new SymbolDefinition(explosionPath);
+        }
+    };
+    var Ship = new function() {
+        var path = new Path([-10, -8], [10, 0], [-10, 8], [-8, 4], [-8, -4]);
+        path.closed = true;
+        var thrust = new Path([-8, -4], [-14, 0], [-8, 4]);
+        var group = new Group(path, thrust);
+        group.position = view.bounds.center;
+        return {
+            item: group,
+            angle: 0,
+            vector: new Point({
+                angle: 0.2,
+                length: 1
+            }),
+            turnLeft: function() {
+                group.rotate(-3);
+                this.angle -= 3;
+            },
+            turnRight: function() {
+                group.rotate(3);
+                this.angle += 3;
+            },
+            thrust: function() {
+                thrust.visible = true;
+                this.vector += new Point({
+                    angle: this.angle,
+                    length: presets.speed
+                });
+                if (this.vector.length > 8) {
+                    this.vector.length = 8;
+                }
+            },
+            stop: function() {
+                this.vector.length = 0;
+            },
+            fire: function() {
+                if (!this.dying)
+                    Bullets.fire(this.item.position, this.angle);
+            },
+            coast: function() {
+                thrust.visible = false;
+                this.vector *= .992;
+            },
+            move: function() {
+                group.position += this.vector;
+                keepInView(group);
+            },
+            moveTo: function(position) {
+                group.position = position;
+                keepInView(group);
+            },
+            destroy: function() {
+                this.destroyedShip = assets.destroyedShip.clone();
+                this.destroyedShip.position = this.item.position;
+                this.destroyedShip.visible = true;
+                this.item.visible = false;
+                this.stop();
+                this.item.position = view.center;
+                this.dying = true;
+            },
+            destroyed: function() {
+                this.item.visible = true;
+                this.stop();
+                this.item.position = view.center;
+                this.dying = false;
+                this.destroyedShip.visible = false;
+            },
+            checkCollisions: function() {
+                var crashRock;
+                // move rocks and do a hit-test
+                // between bounding rect of rocks and ship
+                for (var i = 0; i < Rocks.children.length; i++) {
+                    var rock = Rocks.children[i];
+                    rock.position += rock.vector;
+                    if (rock.bounds.intersects(this.item.bounds))
+                        crashRock = rock;
+                    keepInView(rock);
+                }
+                if (this.dying) {
+                    var children = this.destroyedShip.children;
+                    children[0].position.x++;
+                    children[1].position.x--;
+                    children[2].position.x--;
+                    children[2].position.y++;
+                    children[0].rotate(1);
+                    children[1].rotate(-1);
+                    children[2].rotate(1);
+                    this.destroyedShip.opacity *= 0.98;
+                    // don't update anything else if the ship is already dead.
+                    return;
+                }
+                // if bounding rect collision, do a line intersection test
+                if (crashRock) {
+                    var tempRock = crashRock.symbol.definition.clone();
+                    tempRock.transform(crashRock.matrix);
+                    tempRock.remove();
+                    var intersections = this.item.firstChild.getIntersections(tempRock);
+                    if (intersections.length > 0)
+                        Lives.remove();
+                }
+            }
+        };
+    };
+    var Bullets = new function() {
+        var group = new Group();
+        var children = group.children;
+        function checkHits(bullet) {
+            for (var r = 0; r < Rocks.children.length; r++) {
+                var rock = Rocks.children[r];
+                if (rock.bounds.contains(bullet.position) ) {
+                    Score.update(rock.shapeType);
+                    Rocks.explode(rock);
+                    if (rock.shapeType < Rocks.TYPE_SMALL ) {
+                        for (var j = 0; j < 2; j++) {
+                            Rocks.add(1, rock.shapeType + 4, rock.position);
+                        }
+                    }
+                    rock.remove();
+                    bullet.remove();
+                }
+            }
+        }
+        return {
+            fire: function(position, angle) {
+                // We can only fire 5 bullets at a time:
+                if (children.length == 5)
+                    return;
+                var vector = new Point({
+                    angle: angle,
+                    length: 10
+                });
+                var bullet = new Path.Circle({
+                    center: position + vector,
+                    radius: 0.5,
+                    parent: group,
+                    fillColor: 'white',
+                    strokeWidth: 'white',
+                    strokeWidth: 0,
+                    data: {
+                        vector: vector,
+                        timeToDie: 58
+                    }
+                });
+            },
+            move: function() {
+                for (var i = 0; i < children.length; i++) {
+                    var bullet = children[i];
+                    bullet.data.timeToDie--;
+                    if (bullet.data.timeToDie < 1) {
+                        bullet.remove();
+                    } else {
+                        bullet.position += bullet.data.vector;
+                        checkHits(bullet);
+                        keepInView(bullet);
+                    }
+                }
+            }
+        };
+    };
+    var Rocks = new function() {
+        var group = new Group();
+        var shapes = [
+            new Path(
+                [-23, -40.5], [0, -30.5], [24, -40.5], [45, -21.5], [25, -12.5],
+                [46, 9.5], [22, 38.5], [-10, 30.5], [-22, 40.5], [-46, 18.5],
+                [-33, 0.5], [-44, -21.5], [-23, -40.5]),
+            new Path(
+                [-45, -9.5], [-12, -40.5], [24, -40.5], [46, -11.5], [45, 10.5],
+                [24, 40.5], [0, 40.5], [0, 10.5], [-23, 38.5], [-46, 9.5], [-25, 0.5],
+                [-45, -9.5]),
+            new Path([-21.5, -39.5], [11.5, -39.5], [45.5, -20.5],
+                [45.5, -8.5], [9.5, 0.5], [44.5, 21.5], [22.5, 39.5], [9.5, 31.5],
+                [-20.5, 39.5], [-45.5, 10.5], [-45.5, -20.5], [-11.5, -21.5],
+                [-21.5, -39.5]),
+            new Path(
+                [-22.5, -40.5], [-0.5, -19.5], [23.5, -39.5], [44.5, -21.5],
+                [33.5, 0.5], [46.5, 19.5], [13.5, 40.5], [-22.5, 39.5], [-46.5, 18.5],
+                [-46.5, -18.5], [-22.5, -40.5])
+        ];
+        // medium rocks
+        for (var i = 4; i < 8; i++) {
+            shapes[i] = shapes[i - 4].clone();
+            shapes[i].scale(0.5);
+        }
+        // small rocks
+        for (var i = 8; i < 12; i++) {
+            shapes[i] = shapes[i - 4].clone();
+            shapes[i].scale(0.4);
+        }
+        var rockSymbols = [];
+        for (var i = 0; i < shapes.length; i++) {
+            rockSymbols[i] = new SymbolDefinition(shapes[i]);
+        }
+        var explosions = new Group();
+        return {
+            shapes: shapes,
+            children: group.children,
+            make: function(type, pos) {
+                var randomRock = type + Math.floor(4 * Math.random());
+                var rock = rockSymbols[randomRock].place();
+                rock.position = pos ? pos : Point.random() * view.size;
+                rock.vector = new Point({
+                    angle: 360 * Math.random(),
+                    length: presets.maxRockSpeed * Math.random() + 0.1
+                });
+                rock.shapeType = type;
+                return rock;
+            },
+            add: function(amount, type, position) {
+                for (var i = 0; i < amount; i++) {
+                    var rock = this.make(type || this.TYPE_BIG, position);
+                    group.addChild(rock);
+                }
+            },
+            explode: function(rock) {
+                var boomRock = rock.symbol.definition.clone();
+                boomRock.position = rock.position;
+                for (var i = 0; i < boomRock.segments.length; i++) {
+                    var segmentPoint = boomRock.segments[i].point;
+                    var placed = assets.explosion.place(segmentPoint);
+                    placed.vector = (placed.position - rock.position) * 0.1;
+                    explosions.addChild(placed);
+                }
+                boomRock.remove();
+            },
+            iterateExplosions: function() {
+                for (var i = 0; i < explosions.children.length; i++) {
+                    var explosion = explosions.children[i];
+                    explosion.vector.length *= .7;
+                    explosion.position += explosion.vector;
+                    explosion.opacity = explosion.vector.length;
+                    if (explosion.vector.length < 0.05 ) {
+                        explosion.remove();
+                        // if no more rocks, wait a second and start a new round
+                        if (this.children.length < 1 && !Game.roundDelay) {
+                            Game.roundDelay = true;
+                            presets.rockCount += 2;
+                            setTimeout(Game.newRound, 1000);
+                        }
+                    }
+                }
+            },
+            TYPE_BIG: 0,
+            TYPE_MEDIUM: 4,
+            TYPE_SMALL: 8
+        };
+    };
+    var Score = new function() {
+        var numberGroup = new Group(
+            new Path([0, 0], [20, 0], [20, 27], [0, 27], [0, 0]),
+            new Path([10, 0], [10, 27]),
+            new Path([0, 0], [20, 0], [20, 14], [0, 14], [0, 27], [20, 27]),
+            new Path([0, 0], [20, 0], [20, 14], [0, 14], [20, 14], [20, 27], [0, 27]),
+            new Path([0, 0], [0, 14], [20, 14], [20, 0], [20, 27]),
+            new Path([20, 0], [0, 0], [0, 14], [20, 14], [20, 27], [0, 27]),
+            new Path([20, 0], [0, 0], [0, 27], [20, 27], [20, 14], [0, 14]),
+            new Path([0, 0], [20, 0], [0, 27]),
+            new Path([0, 0], [20, 0], [20, 27], [0, 27], [0, 0], [0, 14], [20, 14]),
+            new Path([20, 14], [0, 14], [0, 0], [20, 0], [20, 27])
+        );
+        numberGroup.visible = false;
+        var scoreDisplay = new Group();
+        var score = 0;
+        return {
+            update: function(type) {
+                if (type == Rocks.TYPE_BIG) score += 20;
+                if (type == Rocks.TYPE_MEDIUM) score += 50;
+                if (type == Rocks.TYPE_SMALL) score += 100;
+                if (score >= presets.freeShipScore) {
+                    Lives.add(1);
+                    presets.freeShipScore += presets.freeShipIncrement;
+                }
+                scoreDisplay.removeChildren();
+                var scoreString = score + '';
+                for (var i = 0; i < scoreString.length; i++) {
+                    var n = parseInt(scoreString[i], 10);
+                    scoreDisplay.addChild(numberGroup.children[n].clone());
+                    scoreDisplay.lastChild.position = [22 + i * 24, 22];
+                }
+            }
+        };
+    };
+    var Lives = new function() {
+        var currentLives;
+        var shipPath = Ship.item.firstChild.clone();
+        project.activeLayer.addChild(shipPath);
+        shipPath.visible = false;
+        Ship.visible = false;
+        var group = new Group();
+        return {
+            initialize: function() {
+                currentLives = presets.lives;
+                this.display();
+            },
+            add: function() {
+                currentLives++;
+                this.display();
+            },
+            remove: function() {
+                currentLives--;
+                this.display();
+                Ship.destroy();
+                setTimeout(function() {
+                    if (currentLives == 0) {
+                        Game.over();
+                    } else {
+                        Ship.destroyed();
+                    }
+                }, 1200);
+            },
+            display: function() {
+                group.removeChildren();
+                for (var i = 0;i < currentLives - 1; i++) {
+                    var copy = shipPath.clone();
+                    copy.rotate(-90);
+                    copy.visible = true;
+                    group.addChild(copy);
+                    copy.position = [22+ i * copy.bounds.width, 53];
+                }
+            }
+        };
+    };
+    initialize();
+    // Stop left and right keyboard events from propagating.
+    function onKeyDown(event) {
+        if (event.key == 'left' || event.key == 'right') {
+            return false;
+        }
+    }
+    function keepInView(item) {
+        var position = item.position;
+        var itemBounds = item.bounds;
+        var bounds = view.bounds;
+        if (itemBounds.left > bounds.width) {
+            position.x = -item.bounds.width;
+        }
+        if (position.x < -itemBounds.width) {
+            position.x = bounds.width;
+        }
+        if (itemBounds.top > view.size.height) {
+            position.y = -itemBounds.height;
+        }
+        if (position.y < -itemBounds.height) {
+            position.y = bounds.height  + itemBounds.height / 2;
+        }
+    }
+    </script>
+    <style type="text/css">
+        html,
+        body {
+            margin: 0;
+            overflow: hidden;
+            height: 100%;
+        }
+        canvas {
+            width: 100%;
+            height: 100%;
+        }
+        body {
+            background: #000;
+            font-family:Helvetica,Arial;
+        }
+        .footer {
+            position:absolute;
+            bottom:0;
+            color:#ff0000;
+            background-color: rgba(60,60,60,0.8);
+            font-size:0.75em;
+            padding:0.5em;
+            color:#ddd;
+            width: 100%
+        }
+        .footer a {
+            color: #fff;
+            font-weight:
+            bold; text-decoration: none;
+            border-bottom: 1px solid #555;
+        }
+        .footer b {
+            background-color: #660000;
+            padding-left: 0.25em;
+            padding-right: 0.25em;
+        }
+        .gameover {
+            display: none;
+            position: absolute;
+            left: 40%;
+            top: 40%;
+            color: #fff;
+            background-color: rgba(60,60,60,0.8);
+            padding: 32px;
+            -moz-border-radius: 12px;
+            -webkit-border-radius: 12px;
+            border-radius: 12px;
+            -moz-background-clip: padding;
+            -webkit-background-clip: padding-box;
+            background-clip: padding-box;
+        }
+        .gameover a {
+            color: #fff;
+            font-weight: bold;
+        }
+        #stats {
+            position: absolute;
+            left: auto !important;
+            right: 0px;
+        }
+    </style>
+</head>
+<body>
+    <canvas id="canvas" resize stats></canvas>
+    <div id="footer" class="footer"><a href=#">Paperoids</a>.  To Play: <b>&#8592;</b> and <b>&#8594;</b> to rotate.  <b>&#8593;</b> for thrust.  <b>Z</b> to fire. <b>F</b> to show FPS. Follow @<a href="http://twitter.com/#/hirmes">hirmes</a> for updates. Made with the amazing <a href="http://paperjs.org">Paper.js</a></div>
+    <div id="gameover" class="gameover">Game Over.  <a href="Paperoids.html">Play again</a>?</div>
+</body>
+</html>

package/examples/JSON/Circle Testing.html ADDED Viewed

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Circle Testing</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <script type="text/javascript" src="../../dist/paper-full.js"></script>
+    <script type="text/paperscript" canvas="canvas1">
+        var topLeft = new Point(200, 200);
+        var size = new Size(150, 100);
+        var rectangle = new Rectangle(topLeft, size);
+        var path = new Path.Ellipse(rectangle);
+        path.fillColor = 'black';
+        var topLeft = new Point(5, 400);
+        var size = new Size(100, 50);
+        var rectangle = new Rectangle(topLeft, size);
+        var path = new Path.Ellipse(rectangle);
+        path.fillColor = 'yellow';
+        var path = new Path.Circle(new Point(50, 50), 25);
+        path.fillColor = 'red';
+        window._json = project.exportJSON();
+        console.log(window._json);
+    </script>
+    <script type="text/paperscript" canvas="canvas2">
+        project.importJSON(window._json);
+    </script>
+</head>
+<body>
+    <canvas id="canvas1" width="500" height="500"></canvas>
+    <canvas id="canvas2" width="500" height="500"></canvas>
+</body>
+</html>

package/examples/JSON/Compound Path.html ADDED Viewed

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Compound Path</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <script type="text/javascript" src="../../dist/paper-full.js"></script>
+    <script type="text/paperscript" canvas="canvas1">
+        project.currentStyle.fillColor = 'black';
+        var path1 = new Path.Rectangle([200, 200], [100, 100]);
+        var path2 = new Path.Rectangle([50, 50], [200, 200]);
+        var path3 = new Path.Rectangle([0, 0], [400, 400]);
+        new CompoundPath(path1, path2, path3);
+        window._json = project.exportJSON();
+        console.log(window._json);
+    </script>
+    <script type="text/paperscript" canvas="canvas2">
+        project.importJSON(window._json);
+    </script>
+</head>
+<body>
+    <canvas id="canvas1" width="500" height="500"></canvas>
+    <canvas id="canvas2" width="500" height="500"></canvas>
+</body>
+</html>

package/examples/JSON/Empty Path Testing.html ADDED Viewed

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Empty Path Testing</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <script type="text/javascript" src="../../dist/paper-full.js"></script>
+    <script type="text/paperscript" canvas="canvas1">
+        var path = new Path();
+        path.strokeColor = 'black';
+        path.add(new Point(30, 30));
+        path.add(new Point(100, 100));
+        var segments = [new Point(30, 90), new Point(100, 150)];
+        var path2 = new Path(segments);
+        path2.strokeColor = 'yellow';
+        var path3 = new Path();
+        window._json = project.exportJSON();
+        console.log(window._json);
+    </script>
+    <script type="text/paperscript" canvas="canvas2">
+        project.importJSON(window._json);
+    </script>
+</head>
+<body>
+    <canvas id="canvas1" width="500" height="500"></canvas>
+    <canvas id="canvas2" width="500" height="500"></canvas>
+</body>
+</html>

package/examples/JSON/Gradients.html ADDED Viewed

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Gradients</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <script type="text/javascript" src="../../dist/paper-full.js"></script>
+    <script type="text/paperscript" canvas="canvas1">
+        var path = new Path.Circle({
+            center: view.center,
+            radius: view.bounds.height * 0.4
+        });
+        path.fillColor = {
+            stops: ['yellow', 'red', 'black'],
+            radial: true,
+            origin: path.position,
+            destination: path.bounds.rightCenter
+        }
+        var symbol = new SymbolDefinition(path);
+        symbol.place(view.center);
+        window._json = project.exportJSON();
+        console.log(window._json);
+    </script>
+    <script type="text/paperscript" canvas="canvas2">
+        project.importJSON(window._json);
+    </script>
+</head>
+<body>
+    <canvas id="canvas1" width="500" height="500"></canvas>
+    <canvas id="canvas2" width="500" height="500"></canvas>
+</body>
+</html>