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/Paperjs.org/MetaBalls.html ADDED Viewed

@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Meta Balls</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <script type="text/javascript" src="../../dist/paper-full.js"></script>
+    <script type="text/paperscript" canvas="canvas">
+        // Ported from original Metaball script by SATO Hiroyuki
+        // http://park12.wakwak.com/~shp/lc/et/en_aics_script.html
+        project.currentStyle = {
+            fillColor: 'black'
+        };
+        var ballPositions = [[255, 129], [610, 73], [486, 363],
+            [117, 459], [484, 726], [843, 306], [789, 615], [1049, 82],
+            [1292, 428], [1117, 733], [1352, 86], [92, 798]];
+        var handle_len_rate = 2.4;
+        var circlePaths = [];
+        var radius = 50;
+        for (var i = 0, l = ballPositions.length; i < l; i++) {
+            var circlePath = new Path.Circle({
+                center: ballPositions[i],
+                radius: 50
+            });
+            circlePaths.push(circlePath);
+        }
+        var largeCircle = new Path.Circle({
+            center: [676, 433],
+            radius: 100
+        });
+        circlePaths.push(largeCircle);
+        function onMouseMove(event) {
+            largeCircle.position = event.point;
+            generateConnections(circlePaths);
+        }
+        var connections = new Group();
+        function generateConnections(paths) {
+            // Remove the last connection paths:
+            connections.removeChildren();
+            for (var i = 0, l = paths.length; i < l; i++) {
+                for (var j = i - 1; j >= 0; j--) {
+                    var path = metaball(paths[i], paths[j], 0.5, handle_len_rate, 300);
+                    if (path) {
+                        connections.appendTop(path);
+                        path.removeOnMove();
+                    }
+                }
+            }
+        }
+        generateConnections(circlePaths);
+        // ---------------------------------------------
+        function metaball(ball1, ball2, v, handle_len_rate, maxDistance) {
+            var center1 = ball1.position;
+            var center2 = ball2.position;
+            var radius1 = ball1.bounds.width / 2;
+            var radius2 = ball2.bounds.width / 2;
+            var pi2 = Math.PI / 2;
+            var d = center1.getDistance(center2);
+            var u1, u2;
+            if (radius1 == 0 || radius2 == 0)
+                return;
+            if (d > maxDistance || d <= Math.abs(radius1 - radius2)) {
+                return;
+            } else if (d < radius1 + radius2) { // case circles are overlapping
+                u1 = Math.acos((radius1 * radius1 + d * d - radius2 * radius2) /
+                        (2 * radius1 * d));
+                u2 = Math.acos((radius2 * radius2 + d * d - radius1 * radius1) /
+                        (2 * radius2 * d));
+            } else {
+                u1 = 0;
+                u2 = 0;
+            }
+            var angle1 = (center2 - center1).getAngleInRadians();
+            var angle2 = Math.acos((radius1 - radius2) / d);
+            var angle1a = angle1 + u1 + (angle2 - u1) * v;
+            var angle1b = angle1 - u1 - (angle2 - u1) * v;
+            var angle2a = angle1 + Math.PI - u2 - (Math.PI - u2 - angle2) * v;
+            var angle2b = angle1 - Math.PI + u2 + (Math.PI - u2 - angle2) * v;
+            var p1a = center1 + getVector(angle1a, radius1);
+            var p1b = center1 + getVector(angle1b, radius1);
+            var p2a = center2 + getVector(angle2a, radius2);
+            var p2b = center2 + getVector(angle2b, radius2);
+            // define handle length by the distance between
+            // both ends of the curve to draw
+            var totalRadius = (radius1 + radius2);
+            var d2 = Math.min(v * handle_len_rate, (p1a - p2a).length / totalRadius);
+            // case circles are overlapping:
+            d2 *= Math.min(1, d * 2 / (radius1 + radius2));
+            radius1 *= d2;
+            radius2 *= d2;
+            var path = new Path({
+                segments: [p1a, p2a, p2b, p1b],
+                style: ball1.style,
+                closed: true
+            });
+            var segments = path.segments;
+            segments[0].handleOut = getVector(angle1a - pi2, radius1);
+            segments[1].handleIn = getVector(angle2a + pi2, radius2);
+            segments[2].handleOut = getVector(angle2b - pi2, radius2);
+            segments[3].handleIn = getVector(angle1b + pi2, radius1);
+            return path;
+        }
+        // ------------------------------------------------
+        function getVector(radians, length) {
+            return new Point({
+                // Convert radians to degrees:
+                angle: radians * 180 / Math.PI,
+                length: length
+            });
+        }
+    </script>
+</head>
+<body>
+    <canvas id="canvas" resize></canvas>
+</body>
+</html>

package/examples/Paperjs.org/NyanRainbow.html ADDED Viewed

@@ -0,0 +1,202 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Nyan Rainbow</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <script type="text/javascript" src="../../dist/paper-full.js"></script>
+    <script type="text/javascript" src="http://paperjs.org/assets/mediaelement/mediaelement.js"></script>
+    <script type="text/paperscript" canvas="canvas">
+        // A tribute to Nyan Cat http://www.youtube.com/watch?v=QH2-TGUlwu4
+        var mediaElement;
+        var playing = false;
+        MediaElement('nyan', {
+            pluginPath: '/assets/mediaelement/',
+            success: function(me) {
+                mediaElement = me;
+                me.play();
+                me.addEventListener('timeupdate', function(time) {
+                    if (me.currentTime > 3.7)
+                        playing = true;
+                });
+            }
+        });
+        var mousePos = view.center + [view.bounds.width / 3, 100];
+        var position = view.center;
+        function onFrame(event) {
+            position += (mousePos - position) / 10;
+            var vector = (view.center - position) / 10;
+            moveStars(vector * 3);
+            moveRainbow(vector, event);
+        }
+        function onMouseMove(event) {
+            mousePos = event.point;
+        }
+        function onKeyDown(event) {
+            if (event.key == 'space')
+                project.activeLayer.selected = !project.activeLayer.selected;
+        }
+        var moveStars = new function() {
+            // The amount of symbol we want to place;
+            var count = 50;
+            // 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);
+                placed.scale(i / count + 0.01);
+                placed.data = {
+                    vector: new Point({
+                        angle: Math.random() * 360,
+                        length : (i / count) * Math.random() / 5
+                    })
+                };
+            }
+            var vector = new Point({
+                angle: 45,
+                length: 0
+            });
+            function keepInView(item) {
+                var position = item.position;
+                var viewBounds = view.bounds;
+                if (position.isInside(viewBounds))
+                    return;
+                var itemBounds = item.bounds;
+                if (position.x > viewBounds.width + 5) {
+                    position.x = -item.bounds.width;
+                }
+                if (position.x < -itemBounds.width - 5) {
+                    position.x = viewBounds.width;
+                }
+                if (position.y > viewBounds.height + 5) {
+                    position.y = -itemBounds.height;
+                }
+                if (position.y < -itemBounds.height - 5) {
+                    position.y = viewBounds.height
+                }
+            }
+            return function(vector) {
+                // Run through the active layer's children list and change
+                // the position of the placed symbols:
+                var layer = project.activeLayer;
+                for (var i = 0; i < count; i++) {
+                    var item = layer.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);
+                }
+            };
+        };
+        var moveRainbow = new function() {
+            var paths = [];
+            var colors = ['red', 'orange', 'yellow', 'lime', 'blue', 'purple'];
+            for (var i = 0; i < colors.length; i++) {
+                var path = new Path({
+                    fillColor: colors[i]
+                });
+                paths.push(path);
+            }
+            var count = 30;
+            var group = new Group(paths);
+            var headGroup;
+            var eyePosition = new Point();
+            var eyeFollow = (Point.random() - 0.5);
+            var blinkTime = 200;
+            function createHead(vector, count) {
+                var eyeVector = (eyePosition - eyeFollow);
+                eyePosition -= eyeVector / 4;
+                if (eyeVector.length < 0.00001)
+                    eyeFollow = (Point.random() - 0.5);
+                if (headGroup)
+                    headGroup.remove();
+                var top = paths[0].lastSegment.point;
+                var bottom = paths[paths.length - 1].firstSegment.point;
+                var radius = (bottom - top).length / 2;
+                var circle = new Path.Circle({
+                    center: top + (bottom - top) / 2,
+                    radius: radius,
+                    fillColor: 'black'
+                });
+                circle.scale(vector.length / 100, 1);
+                circle.rotate(vector.angle, circle.center);
+                innerCircle = circle.clone();
+                innerCircle.scale(0.5);
+                innerCircle.fillColor = (count % blinkTime < 3)
+                    || (count % (blinkTime + 5) < 3) ? 'black' : 'white';
+                if (count % (blinkTime + 40) == 0)
+                    blinkTime = Math.round(Math.random() * 40) + 200;
+                var eye = circle.clone();
+                eye.position += eyePosition * radius;
+                eye.scale(0.15, innerCircle.position);
+                eye.fillColor = 'black';
+                headGroup = new Group(circle, innerCircle, eye);
+            }
+            return function(vector, event) {
+                var vector = (view.center - position) / 10;
+                if (vector.length < 5)
+                    vector.length = 5;
+                count += vector.length / 100;
+                group.translate(vector);
+                var rotated = vector.rotate(90);
+                var middle = paths.length / 2;
+                for (var j = 0; j < paths.length; j++) {
+                    var path = paths[j];
+                    var nyanSwing = playing ? Math.sin(event.count / 2) * vector.length : 1;
+                    var unitLength = vector.length * (2 + Math.sin(event.count / 10)) / 2;
+                    var length = (j - middle) * unitLength + nyanSwing;
+                    var top = view.center + rotated.normalize(length);
+                    var bottom = view.center + rotated.normalize(length + unitLength);
+                    path.add(top);
+                    path.insert(0, bottom);
+                    if (path.segments.length > 200) {
+                        var index = Math.round(path.segments.length / 2);
+                        path.segments[index].remove();
+                        path.segments[index - 1].remove();
+                    }
+                    path.smooth();
+                }
+                createHead(vector, event.count);
+                if (mediaElement)
+                    mediaElement.setVolume(vector.length / 200);
+            }
+        }
+    </script>
+    <style>
+        body {
+            background: black;
+        }
+    </style>
+</head>
+<body>
+    <audio id="nyan" src="http://dl.dropbox.com/u/31703/nyan.mp3" autoplay autobuffer preload=none loop style="display:none"></audio>
+    <canvas id="canvas" resize hidpi="off"></canvas>
+</body>
+</html>

package/examples/Paperjs.org/PathIntersections.html ADDED Viewed

@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Path Intersections</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <script type="text/javascript" src="../../dist/paper-full.js"></script>
+    <script type="text/paperscript" canvas="canvas">
+        // Imported SVG Groups have their applyMatrix flag turned off by
+        // default. This is required for SVG importing to work correctly. Turn
+        // it on now, so we don't have to deal with nested coordinate spaces.
+        var words = project.importSVG(document.getElementById('svg'));
+        words.visible = true; // Turn off the effect of display:none;
+        words.fillColor = null;
+        words.strokeColor = 'black';
+        var yesGroup = words.children.yes;
+        var noGroup = words.children.no;
+        // Resize the words to fit snugly inside the view:
+        words.fitBounds(view.bounds);
+        words.scale(0.8);
+        yesGroup.position = view.center;
+        noGroup.position = [-900, -900];
+        function onMouseMove(event) {
+            noGroup.position = event.point;
+            for (var i = 0; i < yesGroup.children.length; i++) {
+                for (var j = 0; j < noGroup.children.length; j++) {
+                    showIntersections(noGroup.children[j], yesGroup.children[i])
+                }
+            }
+        }
+        function showIntersections(path1, path2) {
+            var intersections = path1.getIntersections(path2);
+            for (var i = 0; i < intersections.length; i++) {
+                new Path.Circle({
+                    center: intersections[i].point,
+                    radius: 5,
+                    fillColor: '#009dec'
+                }).removeOnMove();
+            }
+        }
+    </script>
+</head>
+<body>
+<canvas id="canvas" resize></canvas>
+<svg xmlns="http://www.w3.org/2000/svg"
+         xmlns:xlink="http://www.w3.org/1999/xlink"
+         height="600" width="600" id="svg" style="display:none">
+<g id="yes">
+    <path d="M427.151,85.781h27.331l-38.608,72.151v43.283h-24.121v-43.283l-39.94-72.151h28.428l23.964,50.277L427.151,85.781z"/>
+    <path d="M553.467,106.221h-61.084v24.512h56.073v20.048h-56.073v29.681h63.905v20.753H468.81V85.781h84.657V106.221z"/>
+    <path d="M592.307,165.583c0.746,5.274,2.213,9.215,4.396,11.826c3.998,4.751,10.848,7.126,20.551,7.126
+        c5.811,0,10.529-0.626,14.152-1.88c6.877-2.4,10.316-6.864,10.316-13.392c0-3.811-1.686-6.761-5.053-8.849
+        c-3.371-2.036-8.713-3.837-16.027-5.404l-12.498-2.741c-12.283-2.714-20.721-5.664-25.314-8.849
+        c-7.779-5.326-11.668-13.652-11.668-24.982c0-10.337,3.805-18.925,11.414-25.765c7.611-6.839,18.789-10.259,33.537-10.259
+        c12.312,0,22.816,3.224,31.512,9.671c8.693,6.449,13.252,15.807,13.676,28.076h-23.182c-0.428-6.943-3.531-11.877-9.312-14.801
+        c-3.855-1.931-8.645-2.897-14.371-2.897c-6.369,0-11.455,1.253-15.254,3.759c-3.801,2.506-5.701,6.004-5.701,10.494
+        c0,4.125,1.873,7.205,5.621,9.241c2.408,1.358,7.52,2.95,15.336,4.777l20.258,4.777c8.879,2.089,15.533,4.882,19.965,8.379
+        c6.881,5.431,10.32,13.288,10.32,23.572c0,10.547-4.076,19.305-12.23,26.274c-8.152,6.97-19.67,10.455-34.551,10.455
+        c-15.197,0-27.15-3.433-35.857-10.298c-8.707-6.865-13.061-16.302-13.061-28.311H592.307z"/>
+</g>
+<g id="no">
+    <path d="M400.993,246.168h25.287l45.821,80.49v-80.49h22.476v115.435h-24.115l-46.993-81.906v81.906h-22.476V246.168z"/>
+    <path d="M605.936,351.343c-8.721,8.98-21.33,13.471-37.826,13.471c-16.498,0-29.107-4.49-37.824-13.471
+        c-11.697-11.016-17.542-26.887-17.542-47.615c0-21.144,5.845-37.015,17.542-47.614c8.717-8.979,21.326-13.47,37.824-13.47
+        c16.496,0,29.105,4.491,37.826,13.47c11.641,10.6,17.463,26.47,17.463,47.614C623.398,324.457,617.576,340.328,605.936,351.343z
+         M590.859,333.801c5.611-7.048,8.418-17.072,8.418-30.073c0-12.947-2.807-22.958-8.418-30.033
+        c-5.613-7.074-13.195-10.611-22.75-10.611s-17.178,3.524-22.867,10.572c-5.691,7.048-8.537,17.072-8.537,30.072
+        c0,13.001,2.846,23.025,8.537,30.073c5.689,7.048,13.312,10.572,22.867,10.572S585.246,340.849,590.859,333.801z"/>
+</g>
+</svg>
+</body>
+</html>

package/examples/Paperjs.org/Qbertify.html ADDED Viewed

@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Q*bertify</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <script type="text/javascript" src="../../dist/paper-full.js"></script>
+    <script type="text/paperscript" canvas="canvas">
+        // Please note: dragging and dropping images only works for
+        // certain browsers when serving this script online:
+        var values = {
+            amount: 30
+        };
+        var raster,
+            group;
+        var piece = createPiece();
+        var count = 0;
+        handleImage('mona');
+        var text = new PointText({
+            point: view.center,
+            justification: 'center',
+            fillColor: 'white',
+            fontSize: 15,
+            content: window.FileReader
+                ? 'Drag & drop an image from your desktop'
+                : 'To drag & drop images, please use Webkit, Firefox, Chrome or IE 10'
+        });
+        function createPiece() {
+            var group = new Group();
+            var hexagon = new Path.RegularPolygon({
+                center: view.center,
+                sides: 6,
+                radius: 50,
+                fillColor: 'gray',
+                parent: group
+            });
+            for (var i = 0; i < 2; i++) {
+                var path = new Path({
+                    closed: true,
+                    parent: group,
+                    fillColor: i == 0 ? 'white' : 'black'
+                });
+                for (var j = 0; j < 3; j++) {
+                    var index = (i * 2 + j) % hexagon.segments.length;
+                    path.add(hexagon.segments[index].clone());
+                }
+                path.add(hexagon.bounds.center);
+            }
+            // Remove the group from the document, so it is not drawn:
+            group.remove();
+            return group;
+        }
+        function handleImage(image) {
+            count = 0;
+            var size = piece.bounds.size;
+            if (group)
+                group.remove();
+            // As the web is asynchronous, we need to wait for the raster to
+            // load before we can perform any operation on its pixels.
+            raster = new Raster(image);
+            raster.visible = false;
+            raster.on('load', function() {
+                // Transform the raster, so it fills the view:
+                raster.fitBounds(view.bounds, true);
+                group = new Group();
+                for (var y = 0; y < values.amount; y++) {
+                    for (var x = 0; x < values.amount; x++) {
+                        var copy = piece.clone();
+                        copy.position += size * [x + (y % 2 ? 0.5 : 0), y * 0.75];
+                        group.addChild(copy);
+                    }
+                }
+                // Transform the group so it covers the view:
+                group.fitBounds(view.bounds, true);
+                group.scale(1.1);
+            })
+        }
+        function onFrame(event) {
+            if (!group)
+                return;
+            // Loop through the uncolored hexagons in the group and fill them
+            // with the average color:
+            var length = Math.min(count + values.amount, group.children.length);
+            for (var i = count; i < length; i++) {
+                piece = group.children[i];
+                var hexagon = piece.children[0];
+                var color = raster.getAverageColor(hexagon);
+                if (color) {
+                    hexagon.fillColor = color;
+                    var top = piece.children[1];
+                    top.fillColor = color.clone();
+                    top.fillColor.brightness *= 1.5;
+                    var right = piece.children[2];
+                    right.fillColor = color.clone();
+                    right.fillColor.brightness *= 0.5;
+                }
+            }
+            count += values.amount;
+        }
+        function onResize() {
+            project.activeLayer.position = view.center;
+        }
+        function onDocumentDrag(event) {
+            event.preventDefault();
+        }
+        function onDocumentDrop(event) {
+            event.preventDefault();
+            var file = event.dataTransfer.files[0];
+            var reader = new FileReader();
+            reader.onload = function(event) {
+                var image = document.createElement('img');
+                image.onload = function () {
+                    handleImage(image);
+                    view.draw();
+                };
+                image.src = event.target.result;
+            };
+            reader.readAsDataURL(file);
+        }
+        document.addEventListener('drop', onDocumentDrop, false);
+        document.addEventListener('dragover', onDocumentDrag, false);
+        document.addEventListener('dragleave', onDocumentDrag, false);
+    </script>
+</head>
+<body>
+    <canvas id="canvas" resize></canvas>
+    <img width="512" height="512" id="mona" style="display: none;" src="data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAATAAD/4QMraHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjAtYzA2MCA2MS4xMzQ3NzcsIDIwMTAvMDIvMTItMTc6MzI6MDAgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzUgTWFjaW50b3NoIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjA1NUZCMzkwOTFGMTExRTBCNTg4OEQ5RDIyNkE4Qjc5IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjA1NUZCMzkxOTFGMTExRTBCNTg4OEQ5RDIyNkE4Qjc5Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDU1RkIzOEU5MUYxMTFFMEI1ODg4RDlEMjI2QThCNzkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDU1RkIzOEY5MUYxMTFFMEI1ODg4RDlEMjI2QThCNzkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAATDw8WEBYkFRUkLSIcIi0pIyIi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">
+</body>
+</html>

package/examples/Paperjs.org/RadialRainbows.html ADDED Viewed

@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Radial Rainbows</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 point = view.center;
+        var colors = [];
+        var cycles = 4;
+        for (var i = 0, l = 60; i < l; i++) {
+            var brightness = 1 - (i / l) * 1.5;
+            var hue = i / l * cycles * 360;
+            var color = {
+                hue: hue,
+                saturation: 1,
+                brightness: brightness
+            };
+            colors.push(color);
+        }
+        var path = new Path.Rectangle(view.bounds);
+        var gradient = new Gradient(colors, true);
+        var radius = Math.max(view.size.width, view.size.height) * 0.75;
+        path.fillColor = new Color(gradient, point, point + [radius, 0]);
+        var gradientColor = path.fillColor;
+        var mouseDown = false,
+            mousePoint = view.center;
+        function onMouseDown(event) {
+            mouseDown = true;
+            mousePoint = event.point;
+        }
+        function onMouseDrag(event) {
+            mousePoint = event.point;
+        }
+        function onMouseUp(event) {
+            vector.length = 10;
+            mouseDown = false;
+        }
+        var grow = false;
+        var vector = new Point(150, 0);
+        function onFrame() {
+            for (var i = 0, l = gradient.stops.length; i < l; i++)
+                gradient.stops[i].color.hue -= 20;
+            if (grow && vector.length > 300) {
+                grow = false;
+            } else if (!grow && vector.length < 75) {
+                grow = true;
+            }
+            if (mouseDown) {
+                point = point + (mousePoint - point) / 10;
+            } else {
+                vector.length += (grow ? 1 : -1);
+                vector.angle += 5;
+            }
+            gradientColor.highlight = mouseDown ? point : point + vector;
+        }
+        function onResize(event) {
+            point = view.center;
+            path.bounds = view.bounds;
+            var gradientColor = path.fillColor;
+            gradientColor.origin = point;
+            var radius = Math.max(view.size.width, view.size.height) * 0.75;
+            gradientColor.destination = point + [radius, 0];
+        }
+    </script>
+</head>
+<body>
+    <canvas id="canvas" hidpi="off" resize></canvas>
+</body>
+</html>