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/Animated/AnimatedStar.html ADDED Viewed

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Animated Star</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <script type="text/javascript" src="../../dist/paper-full.js"></script>
+    <script type="text/paperscript" canvas="canvas">
+        var layer = project.activeLayer;
+        var values = {
+            count: 34,
+            points: 32
+        };
+        for (var i = 0; i < values.count; i++) {
+            var path = new Path({
+                fillColor: i % 2 ? 'red' : 'black',
+                closed: true
+            });
+            var offset = new Point(20 + 10 * i, 0);
+            var l = offset.length;
+            for (var j = 0; j < values.points * 2; j++) {
+                offset.angle += 360 / values.points;
+                var vector = offset.normalize(l * (j % 2 ? 0.1 : -0.1));
+                path.add(offset + vector);
+            }
+            path.smooth({ type: 'continuous' });
+            layer.insertChild(0, new Group({
+                children: [path],
+                applyMatrix: false
+            }));
+        }
+        function onFrame(event) {
+            for (var i = 0; i < values.count; i++) {
+                var item = layer.children[i];
+                var angle = (values.count - i) * Math.sin(event.count / 128) / 10;
+                item.rotate(angle);
+            }
+        }
+        // Reposition the paths whenever the window is resized:
+        function onResize(event) {
+            layer.position = view.center;
+        }
+    </script>
+</head>
+<body>
+    <canvas id="canvas" resize stats hidpi="off"></canvas>
+</body>
+</html>

package/examples/Animated/BooleanOperations.html ADDED Viewed

@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Boolean Operations</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <script type="text/javascript" src="../../dist/paper-full.js"></script>
+    <script type="text/paperscript" canvas="canvas">
+        var text = new PointText({
+            position: view.center + [0, 200],
+            fillColor: 'black',
+            justification: 'center',
+            fontSize: 20
+        });
+        var originals = new Group({ insert: false }); // Don't insert in DOM.
+        var square = new Path.Rectangle({
+            position: view.center,
+            size: 300,
+            parent: originals,
+            fillColor: 'white'
+        });
+        // Make a ring using subtraction of two circles:
+        var inner = new Path.Circle({
+            center: view.center,
+            radius: 100,
+            parent: originals,
+            fillColor: 'white'
+        });
+        var outer = new Path.Circle({
+            center: view.center,
+            radius: 140,
+            parent: originals,
+            fillColor: 'white'
+        });
+        var ring = outer.subtract(inner);
+        var operations = ['unite', 'intersect', 'subtract', 'exclude', 'divide'];
+        var colors = ['red', 'green', 'blue', 'black'];
+        var curIndex = -1;
+        var operation, result, activeItem;
+        // Change the mode every 3 seconds:
+        setInterval(setMode, 3000);
+        // Set the initial mode:
+        setMode();
+        function setMode() {
+            curIndex++;
+            if (curIndex == operations.length * 2)
+                curIndex = 0;
+            operation = operations[curIndex % operations.length];
+        }
+        function onMouseDown(event) {
+            var hitResult = originals.hitTest(event.point);
+            activeItem = hitResult && hitResult.item;
+        }
+        function onMouseDrag(event) {
+            if (activeItem)
+                activeItem.position = event.point;
+        }
+        function onMouseUp() {
+            activeItem = null;
+            square.position = view.center;
+        }
+        function onFrame(event) {
+            if (activeItem != ring) {
+                // Move the ring around:
+                var offset = new Point(140, 80) * [Math.sin(event.count / 60), Math.sin(event.count / 40)];
+                ring.position = view.center + offset;
+            }
+            // Remove the result of the last path operation:
+            if (result)
+                result.remove();
+            // Perform the path operation on the ring:
+            if (curIndex < operations.length) {
+                result = square[operation](ring);
+                text.content = 'square.' + operation + '(ring)';
+            } else {
+                result = ring[operation](square);
+                text.content = 'ring.' + operation + '(square)';
+            }
+            result.selected = true;
+            result.fillColor = colors[curIndex % colors.length];
+            result.moveBelow(text);
+            // If the result is a group, color each of its children differently:
+            if (result instanceof Group) {
+                for (var i = 0; i < result.children.length; i++) {
+                    result.children[i].fillColor = colors[i];
+                }
+            }
+        };
+        function onResize() {
+            text.position = view.center + [0, 200];
+            square.position = view.center;
+        }
+    </script>
+</head>
+<body>
+    <canvas id="canvas" resize stats></canvas>
+</body>
+</html>

package/examples/Animated/CandyCrash.html ADDED Viewed

@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Candy Crash</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <script type="text/javascript" src="../../dist/paper-full.js"></script>
+    <script type="text/paperscript" canvas="canvas">
+    // kynd.info 2014
+    function Ball(r, p, v) {
+        this.radius = r;
+        this.point = p;
+        this.vector = v;
+        this.maxVec = 15;
+        this.numSegment = Math.floor(r / 3 + 2);
+        this.boundOffset = [];
+        this.boundOffsetBuff = [];
+        this.sidePoints = [];
+        this.path = new Path({
+            fillColor: {
+                hue: Math.random() * 360,
+                saturation: 1,
+                brightness: 1
+            },
+            blendMode: 'lighter'
+        });
+        for (var i = 0; i < this.numSegment; i ++) {
+            this.boundOffset.push(this.radius);
+            this.boundOffsetBuff.push(this.radius);
+            this.path.add(new Point());
+            this.sidePoints.push(new Point({
+                angle: 360 / this.numSegment * i,
+                length: 1
+            }));
+        }
+    }
+    Ball.prototype = {
+        iterate: function() {
+            this.checkBorders();
+            if (this.vector.length > this.maxVec)
+                this.vector.length = this.maxVec;
+            this.point += this.vector;
+            this.updateShape();
+        },
+        checkBorders: function() {
+            var size = view.size;
+            if (this.point.x < -this.radius)
+                this.point.x = size.width + this.radius;
+            if (this.point.x > size.width + this.radius)
+                this.point.x = -this.radius;
+            if (this.point.y < -this.radius)
+                this.point.y = size.height + this.radius;
+            if (this.point.y > size.height + this.radius)
+                this.point.y = -this.radius;
+        },
+        updateShape: function() {
+            var segments = this.path.segments;
+            for (var i = 0; i < this.numSegment; i ++)
+                segments[i].point = this.getSidePoint(i);
+            this.path.smooth();
+            for (var i = 0; i < this.numSegment; i ++) {
+                if (this.boundOffset[i] < this.radius / 4)
+                    this.boundOffset[i] = this.radius / 4;
+                var next = (i + 1) % this.numSegment;
+                var prev = (i > 0) ? i - 1 : this.numSegment - 1;
+                var offset = this.boundOffset[i];
+                offset += (this.radius - offset) / 15;
+                offset += ((this.boundOffset[next] + this.boundOffset[prev]) / 2 - offset) / 3;
+                this.boundOffsetBuff[i] = this.boundOffset[i] = offset;
+            }
+        },
+        react: function(b) {
+            var dist = this.point.getDistance(b.point);
+            if (dist < this.radius + b.radius && dist != 0) {
+                var overlap = this.radius + b.radius - dist;
+                var direc = (this.point - b.point).normalize(overlap * 0.015);
+                this.vector += direc;
+                b.vector -= direc;
+                this.calcBounds(b);
+                b.calcBounds(this);
+                this.updateBounds();
+                b.updateBounds();
+            }
+        },
+        getBoundOffset: function(b) {
+            var diff = this.point - b;
+            var angle = (diff.angle + 180) % 360;
+            return this.boundOffset[Math.floor(angle / 360 * this.boundOffset.length)];
+        },
+        calcBounds: function(b) {
+            for (var i = 0; i < this.numSegment; i ++) {
+                var tp = this.getSidePoint(i);
+                var bLen = b.getBoundOffset(tp);
+                var td = tp.getDistance(b.point);
+                if (td < bLen) {
+                    this.boundOffsetBuff[i] -= (bLen  - td) / 2;
+                }
+            }
+        },
+        getSidePoint: function(index) {
+            return this.point + this.sidePoints[index] * this.boundOffset[index];
+        },
+        updateBounds: function() {
+            for (var i = 0; i < this.numSegment; i ++)
+                this.boundOffset[i] = this.boundOffsetBuff[i];
+        }
+    };
+    //--------------------- main ---------------------
+    var balls = [];
+    var numBalls = 18;
+    for (var i = 0; i < numBalls; i++) {
+        var position = Point.random() * view.size;
+        var vector = new Point({
+            angle: 360 * Math.random(),
+            length: Math.random() * 10
+        });
+        var radius = Math.random() * 60 + 60;
+        balls.push(new Ball(radius, position, vector));
+    }
+    function onFrame() {
+        for (var i = 0; i < balls.length - 1; i++) {
+            for (var j = i + 1; j < balls.length; j++) {
+                balls[i].react(balls[j]);
+            }
+        }
+        for (var i = 0, l = balls.length; i < l; i++) {
+            balls[i].iterate();
+        }
+    }
+    </script>
+</head>
+<body>
+    <canvas id="canvas" resize hidpi="off" style="background:black"></canvas>
+</body>
+</html>

package/examples/Animated/Extruded.html ADDED Viewed

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Extruded</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <script type="text/javascript" src="../../dist/paper-full.js"></script>
+    <script type="text/paperscript" canvas="canvas">
+        var lineGroup = new Group();
+        var lineCount = 100;
+        for (var i = 0; i < lineCount; i++) {
+            var linePath = new Path.Line([0, 0], [0, 0]);
+            lineGroup.addChild(linePath);
+        }
+        lineGroup.strokeColor = 'red';
+        var path1 = new Path('M63.39307,265.71387c10.8667,6.96631 26.4707,12.26025 43.18896,12.26025c24.79932,0 39.28857,-13.09619 39.28857,-32.04346c0,-17.27588 -10.03125,-27.58545 -35.38721,-37.05908c-30.65088,-11.146 -49.59814,-27.30713 -49.59814,-53.49902c0,-29.25732 24.2417,-50.9917 60.74365,-50.9917c18.94727,0 33.1582,4.4585 41.23877,9.19531L156.18018,133.35986c-5.85156,-3.62256 -18.39014,-8.9165 -35.38721,-8.9165c-25.63525,0 -35.3877,15.3252 -35.3877,28.14258c0,17.5542 11.42432,26.19238 37.33789,36.22314c31.76514,12.26025 47.64795,27.58545 47.64795,55.1709c0,28.979 -21.17676,54.33496 -65.48096,54.33496c-18.11133,0 -37.89502,-5.57275 -47.92578,-12.26025z');
+        path1.position = view.center;
+        var path2 = path1.clone();
+        path1.scale(1.5);
+        path2.scale(2);
+        var length1 = path1.length;
+        var length2 = path2.length;
+        function onFrame(event) {
+            var vector = new Point({
+                angle: -event.count % 360,
+                length: 100
+            });
+            path1.rotate(-0.5);
+            path1.position = view.center - vector;
+            path2.rotate(-0.5);
+            path2.position = view.center + vector.normalize(50);
+            for (var i = 0; i < lineCount; i++) {
+                var path = lineGroup.children[i];
+                var l1 = (length1 / lineCount * (i + event.count / 10)) % length1;
+                var l2 = (length2 / lineCount * (i + event.count / 10)) % length2;
+                path.firstSegment.point = path1.getPointAt(l1),
+                path.lastSegment.point = path2.getPointAt(l2);
+            }
+        }
+    </script>
+</head>
+<body>
+    <canvas id="canvas" resize></canvas>
+</body>
+</html>

package/examples/Animated/Lines.html ADDED Viewed

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Lines</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <script type="text/javascript" src="../../dist/paper-full.js"></script>
+    <script type="text/paperscript" canvas="canvas">
+        var amount = 45;
+        for (var i = 0; i < amount; i++) {
+            var path = new Path({
+                fillColor: {
+                    hue: 1,
+                    saturation: 1,
+                    brightness: Math.random()
+                },
+                closed: true
+            });
+        }
+        var position = view.center;
+        var mousePos = view.center;
+        var children = project.activeLayer.children;
+        function iterate(count) {
+            var delta = mousePos - position;
+            position += delta / 10;
+            for (var i = 1; i < amount; i++) {
+                var path = children[i];
+                var length = Math.abs(Math.sin(i + count / 40) * 300);
+                path.segments = [
+                    position + delta / 1.5,
+                    position + { angle: i / amount * 360, length: length },
+                    position + { angle: (i + 1) / amount * 360, length: length }
+                ];
+                path.fillColor.hue = count - length;
+            }
+        }
+        function onFrame(event) {
+            iterate(event.count);
+        }
+        function onMouseMove(event) {
+            iterate();
+            mousePos = event.point;
+        }
+    </script>
+</head>
+<body style="background:black">
+    <canvas id="canvas" resize></canvas>
+</body>
+</html>

package/examples/Animated/Smoothing.html ADDED Viewed

@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Smoothing</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <script type="text/javascript" src="../../dist/paper-full.js"></script>
+    <script type="text/paperscript" canvas="canvas">
+        var width, height, center;
+        var points = 10;
+        var smooth = true;
+        var path = new Path({
+            fillColor: 'black'
+        });
+        var mousePos = view.center / 2;
+        var pathHeight = mousePos.y;
+        initializePath();
+        function initializePath() {
+            center = view.center;
+            width = view.size.width;
+            height = view.size.height / 2;
+            path.segments = [];
+            path.add(view.bounds.bottomLeft);
+            for (var i = 1; i < points; i++) {
+                var point = new Point(width / points * i, center.y);
+                path.add(point);
+            }
+            path.add(view.bounds.bottomRight);
+            path.fullySelected = true;
+        }
+        function onFrame(event) {
+            pathHeight += (center.y - mousePos.y - pathHeight) / 10;
+            for (var i = 1; i < points; i++) {
+                var sinSeed = event.count + (i + i % 10) * 100;
+                var sinHeight = Math.sin(sinSeed / 200) * pathHeight;
+                var yPos = Math.sin(sinSeed / 100) * sinHeight + height;
+                path.segments[i].point.y = yPos;
+            }
+            if (smooth)
+                path.smooth({ type: 'continuous' });
+        }
+        function onMouseMove(event) {
+            mousePos = event.point;
+        }
+        function onMouseDown(event) {
+            smooth = !smooth;
+            if (!smooth) {
+                // If smooth has been turned off, we need to reset
+                // the handles of the path:
+                for (var i = 0, l = path.segments.length; i < l; i++) {
+                    var segment = path.segments[i];
+                    segment.handleIn = segment.handleOut = null;
+                }
+            }
+        }
+        // Reposition the path whenever the window is resized:
+        function onResize(event) {
+            initializePath();
+        }
+    </script>
+</head>
+<body>
+    <canvas id="canvas" resize></canvas>
+</body>
+</html>

package/examples/Animated/Space.html ADDED Viewed

@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Space</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <script type="text/javascript" src="../../dist/paper-full.js"></script>
+    <script type="text/paperscript" canvas="canvas">
+    // The amount of symbol we want to place;
+    var count = 150;
+    // Create a symbol, which we will use to place instances of later:
+    var path = new Path.Circle({
+        center: new Point(0, 0),
+        radius: 5,
+        fillColor: 'white',
+        strokeColor: 'black'
+    });
+    var symbol = new SymbolDefinition(path);
+    // Place the instances of the symbol:
+    for (var i = 0; i < count; i++) {
+        // The center position is a random point in the view:
+        var center = Point.random() * view.size;
+        var placed = symbol.place(center);
+        var scale = (i + 1) / count;
+        placed.scale(scale);
+        placed.data.vector = new Point({
+            angle: Math.random() * 360,
+            length : scale * Math.random() / 5
+        });
+    }
+    var vector = new Point({
+        angle: 45,
+        length: 0
+    });
+    var mouseVector = vector.clone();
+    function onMouseMove(event) {
+        mouseVector = view.center - event.point;
+    }
+    // The onFrame function is called up to 60 times a second:
+    function onFrame(event) {
+        vector = vector + (mouseVector - vector) / 30;
+        // Run through the active layer's children list and change
+        // the position of the placed symbols:
+        for (var i = 0; i < count; i++) {
+            var item = project.activeLayer.children[i];
+            var size = item.bounds.size;
+            var length = vector.length / 10 * size.width / 10;
+            item.position += vector.normalize(length) + item.data.vector;
+            keepInView(item);
+        }
+    }
+    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 + itemBounds.width;
+        }
+        if (itemBounds.top > view.size.height) {
+            position.y = -itemBounds.height;
+        }
+        if (position.y < -itemBounds.height) {
+            position.y = bounds.height  + itemBounds.height / 2;
+        }
+    }
+    </script>
+</head>
+<body>
+    <canvas id="canvas" resize hidpi="off" style="background:black"></canvas>
+</body>
+</html>

package/examples/Animated/SpaceUsingShapes.html ADDED Viewed

@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Space</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <script type="text/javascript" src="../../dist/paper-full.js"></script>
+    <script type="text/paperscript" canvas="canvas">
+    // The amount of symbol we want to place;
+    var count = 150;
+    project.currentStyle = {
+        fillColor: 'white'
+    };
+    // Place the instances of the symbol:
+    for (var i = 0; i < count; i++) {
+        // The center position is a random point in the view:
+        var center = Point.random() * view.size;
+        var scale = (i + 1) / count;
+        var path = new Shape.Circle(center, 5 * scale);
+        path.data.vector = new Point({
+            angle: Math.random() * 360,
+            length : scale * Math.random() / 5
+        });
+    }
+    var vector = new Point({
+        angle: 45,
+        length: 0
+    });
+    var mouseVector = vector.clone();
+    function onMouseMove(event) {
+        mouseVector = view.center - event.point;
+    }
+    // The onFrame function is called up to 60 times a second:
+    function onFrame(event) {
+        vector = vector + (mouseVector - vector) / 30;
+        // Run through the active layer's children list and change
+        // the position of the placed symbols:
+        for (var i = 0; i < count; i++) {
+            var item = project.activeLayer.children[i];
+            var size = item.bounds.size;
+            var length = vector.length / 10 * size.width / 10;
+            item.position += vector.normalize(length) + item.data.vector;
+            keepInView(item);
+        }
+    }
+    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 + itemBounds.width;
+        }
+        if (itemBounds.top > view.size.height) {
+            position.y = -itemBounds.height;
+        }
+        if (position.y < -itemBounds.height) {
+            position.y = bounds.height  + itemBounds.height / 2;
+        }
+    }
+    </script>
+</head>
+<body>
+    <canvas id="canvas" resize hidpi="off" style="background:black"></canvas>
+</body>
+</html>