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/Tools/Vektor.html ADDED Viewed

@@ -0,0 +1,200 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Vektor</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <script type="text/javascript" src="../../dist/paper-full.js"></script>
+    <script type="text/paperscript" canvas="canvas">
+    ////////////////////////////////////////////////////////////////////////////////
+    // Interface
+    var values = {
+        fixLength: false,
+        fixAngle: false,
+        showCircle: false,
+        showAngleLength: true,
+        showCoordinates: false
+    };
+    ////////////////////////////////////////////////////////////////////////////////
+    // Vector
+    var vectorStart, vector, vectorPrevious;
+    var vectorItem, items, dashedItems;
+    function processVector(event, drag) {
+        vector = event.point - vectorStart;
+        if (vectorPrevious) {
+            if (values.fixLength && values.fixAngle) {
+                vector = vectorPrevious;
+            } else if (values.fixLength) {
+                vector.length = vectorPrevious.length;
+            } else if (values.fixAngle) {
+                vector = vector.project(vectorPrevious);
+            }
+        }
+        drawVector(drag);
+    }
+    function drawVector(drag) {
+        if (items) {
+            for (var i = 0, l = items.length; i < l; i++) {
+                items[i].remove();
+            }
+        }
+        if (vectorItem)
+            vectorItem.remove();
+        items = [];
+        var arrowVector = vector.normalize(10);
+        var end = vectorStart + vector;
+        vectorItem = new Group(
+            new Path(vectorStart, end),
+            new Path(
+                end + arrowVector.rotate(135),
+                end,
+                end + arrowVector.rotate(-135)
+            )
+        );
+        vectorItem.strokeWidth = 0.75;
+        vectorItem.strokeColor = '#e4141b';
+        // Display:
+        dashedItems = [];
+        // Draw Circle
+        if (values.showCircle) {
+            dashedItems.push(new Path.Circle(vectorStart, vector.length));
+        }
+        // Draw Labels
+        if (values.showAngleLength) {
+            drawAngle(vectorStart, vector, !drag);
+            if (!drag)
+                drawLength(vectorStart, end, vector.angle < 0 ? -1 : 1, true);
+        }
+        var quadrant = vector.quadrant;
+        if (values.showCoordinates && !drag) {
+            drawLength(vectorStart, vectorStart + [vector.x, 0],
+                    [1, 3].indexOf(quadrant) != -1 ? -1 : 1, true, vector.x, 'x: ');
+            drawLength(vectorStart, vectorStart + [0, vector.y],
+                    [1, 3].indexOf(quadrant) != -1 ? 1 : -1, true, vector.y, 'y: ');
+        }
+        for (var i = 0, l = dashedItems.length; i < l; i++) {
+            var item = dashedItems[i];
+            item.strokeColor = 'black';
+            item.dashArray = [1, 2];
+            items.push(item);
+        }
+        // Update palette
+        values.x = vector.x;
+        values.y = vector.y;
+        values.length = vector.length;
+        values.angle = vector.angle;
+    }
+    function drawAngle(center, vector, label) {
+        var radius = 25, threshold = 10;
+        if (vector.length < radius + threshold || Math.abs(vector.angle) < 15)
+            return;
+        var from = new Point(radius, 0);
+        var through = from.rotate(vector.angle / 2);
+        var to = from.rotate(vector.angle);
+        var end = center + to;
+        dashedItems.push(new Path.Line(center,
+                center + new Point(radius + threshold, 0)));
+        dashedItems.push(new Path.Arc(center + from, center + through, end));
+        var arrowVector = to.normalize(7.5).rotate(vector.angle < 0 ? -90 : 90);
+        dashedItems.push(new Path([
+                end + arrowVector.rotate(135),
+                end,
+                end + arrowVector.rotate(-135)
+        ]));
+        if (label) {
+            // Angle Label
+            var text = new PointText(center
+                    + through.normalize(radius + 10) + new Point(0, 3));
+            text.content = Math.floor(vector.angle * 100) / 100 + '\xb0';
+            items.push(text);
+        }
+    }
+    function drawLength(from, to, sign, label, value, prefix) {
+        var lengthSize = 5;
+        if ((to - from).length < lengthSize * 4)
+            return;
+        var vector = to - from;
+        var awayVector = vector.normalize(lengthSize).rotate(90 * sign);
+        var upVector = vector.normalize(lengthSize).rotate(45 * sign);
+        var downVector = upVector.rotate(-90 * sign);
+        var lengthVector = vector.normalize(
+                vector.length / 2 - lengthSize * Math.SQRT2);
+        var line = new Path();
+        line.add(from + awayVector);
+        line.lineBy(upVector);
+        line.lineBy(lengthVector);
+        line.lineBy(upVector);
+        var middle = line.lastSegment.point;
+        line.lineBy(downVector);
+        line.lineBy(lengthVector);
+        line.lineBy(downVector);
+        dashedItems.push(line);
+        if (label) {
+            // Length Label
+            var textAngle = Math.abs(vector.angle) > 90
+                    ? textAngle = 180 + vector.angle : vector.angle;
+            // Label needs to move away by different amounts based on the
+            // vector's quadrant:
+            var away = (sign >= 0 ? [1, 4] : [2, 3]).indexOf(vector.quadrant) != -1
+                    ? 8 : 0;
+            var text = new PointText(middle + awayVector.normalize(away + lengthSize));
+            text.rotate(textAngle);
+            text.justification = 'center';
+            value = value || vector.length;
+            text.content = (prefix || '') + Math.floor(value * 1000) / 1000;
+            items.push(text);
+        }
+    }
+    ////////////////////////////////////////////////////////////////////////////////
+    // Mouse Handling
+    var dashItem;
+    function onMouseDown(event) {
+        var end = vectorStart + vector;
+        var create = false;
+        if (event.modifiers.shift && vectorItem) {
+            vectorStart = end;
+            create = true;
+        } else if (vector && (event.modifiers.option
+                || end && end.getDistance(event.point) < 10)) {
+            create = false;
+        } else {
+            vectorStart = event.point;
+        }
+        if (create) {
+            dashItem = vectorItem;
+            vectorItem = null;
+        }
+        processVector(event, true);
+    }
+    function onMouseDrag(event) {
+        if (!event.modifiers.shift && values.fixLength && values.fixAngle)
+            vectorStart = event.point;
+        processVector(event, event.modifiers.shift);
+    }
+    function onMouseUp(event) {
+        processVector(event, false);
+        if (dashItem) {
+            dashItem.dashArray = [1, 2];
+            dashItem = null;
+        }
+        vectorPrevious = vector;
+    }
+    </script>
+</head>
+<body>
+    <canvas id="canvas" resize></canvas>
+</body>
+</html>

package/examples/Tools/Wave.html ADDED Viewed

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Wave</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <script type="text/javascript" src="../../dist/paper-full.js"></script>
+    <script type="text/paperscript" canvas="canvas">
+        //////////////////////////////////////////////////////////////////////
+        // Values
+        tool.minDistance = 10;
+        var values = {
+            curviness: 0.5,
+            distance: tool.minDistance,
+            offset: 10,
+            mouseOffset: true
+        };
+        //////////////////////////////////////////////////////////////////////
+        // Mouse handling
+        var path;
+        function onMouseDown(event) {
+            path = new Path({
+                strokeColor: '#000000'
+            });
+        }
+        var mul = 1;
+        function onMouseDrag(event) {
+            var step = event.delta.rotate(90 * mul);
+            if (!values.mouseOffset)
+                step.length = values.offset;
+            path.add({
+                point: event.point + step,
+                handleIn: -event.delta * values.curviness,
+                handleOut: event.delta * values.curviness
+            });
+            mul *= -1;
+        }
+    </script>
+</head>
+<body>
+    <canvas id="canvas" resize></canvas>
+</body>
+</html>

package/examples/Tools/WormFarm.html ADDED Viewed

@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Worm Farm</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <script type="text/javascript" src="../../dist/paper-full.js"></script>
+    <script type="text/paperscript" canvas="canvas">
+        /////////////////////////////////////////////////////////////////////
+        // Values
+        var values  = {
+            minDistance: 10,
+            maxDistance: 30,
+            varyThickness: true
+        };
+        // All newly created items will inherit the following styles:
+        project.currentStyle = {
+            fillColor: 'white',
+            strokeColor: 'black'
+        };
+        /////////////////////////////////////////////////////////////////////
+        // Mouse handling
+        tool.minDistance = values.minDistance;
+        tool.maxDistance = values.maxDistance;
+        var worm;
+        // Every time the user clicks the mouse to drag we create a path
+        // and when a user drags the mouse we add points to it
+        function onMouseDown(event) {
+            worm = new Path();
+            worm.add(event.point, event.point);
+            worm.closed = true;
+        }
+        function onMouseDrag(event) {
+            // the vector in the direction that the mouse moved
+            var step = event.delta;
+            // if the vary thickness checkbox is marked
+            // divide the length of the step vector by two:
+            if (values.varyThickness) {
+                step.length = step.length / 2;
+            } else {
+                // otherwise set the length of the step vector to half of
+                // minDistance
+                step.length = values.minDistance / 2;
+            }
+            // the top point: the middle point + the step rotated by -90
+            // degrees
+            //   -----*
+            //   |
+            //   ------
+            var top = event.middlePoint + step.rotate(-90);
+            // the bottom point: the middle point + the step rotated by 90
+            // degrees
+            //   ------
+            //   |
+            //   -----*
+            var bottom = event.middlePoint + step.rotate(90);
+            // add the top point to the end of the path
+            worm.add(top);
+            // insert the bottom point after the first segment of the path
+            worm.insert(1, bottom);
+            // make a new line path from top to bottom
+            new Path(top, bottom);
+            // This is the point at the front of the worm:
+            worm.firstSegment.point = event.point;
+            // smooth the segments of the path
+            worm.smooth();
+        }
+    </script>
+</head>
+<body>
+    <canvas id="canvas" resize></canvas>
+</body>
+</html>

package/examples/Worker/Main.html ADDED Viewed

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>Shapes</title>
+<link rel="stylesheet" href="../css/style.css">
+<script type="text/javascript" src="../../dist/paper-full.js"></script>
+<script type="text/paperscript" canvas="canvas">
+    if (window.Worker) { // Check if Browser supports the Worker API.
+        var worker = new Worker("Worker.js");
+        // Create two paths, and send them to the worker to perform a boolean
+        // operation on them.
+        var circle = new Path.Circle({
+            center: [200, 200],
+            radius: 100,
+            fillColor: 'red'
+        });
+        var rectangle = new Path.Rectangle({
+            point: [200, 200],
+            size: [200, 200],
+            fillColor: 'blue'
+        });
+        var data = [
+            circle.exportJSON(),
+            rectangle.exportJSON()
+        ];
+        console.log('Sent', data);
+        worker.postMessage(data);
+        // The worker sends the result back in a message, from which we can then
+        // create a new path item and siplay it.
+        worker.onmessage = function(event) {
+            var data = event.data;
+            if (data) {
+                console.log('Received', data);
+                var result = project.activeLayer.importJSON(data);
+                result.fillColor = 'yellow';
+                result.fillColor.alpha = 0.5;
+                result.position += [400, 0];
+                result.fullySelected = true;
+            }
+        };
+    }
+</script>
+</head>
+<body>
+    <canvas id="canvas" resize></canvas>
+</body>
+</html>

package/examples/Worker/Worker.js ADDED Viewed

@@ -0,0 +1,14 @@
+importScripts('../../dist/paper-full.js');
+paper.install(this);
+paper.setup([640, 480]);
+onmessage = function(event) {
+    var data = event.data;
+    if (data) {
+        var path1 = project.importJSON(data[0]);
+        var path2 = project.importJSON(data[1]);
+        console.log(path1, path2);
+        var result = path1.unite(path2);
+        postMessage(result.exportJSON());
+    }
+};

package/examples/css/style.css ADDED Viewed

@@ -0,0 +1,12 @@
+html,
+body {
+    margin: 0;
+    overflow: hidden;
+    height: 100%;
+}
+/* Scale canvas with resize attribute to full size */
+canvas[resize] {
+    width: 100%;
+    height: 100%;
+}

package/package.json ADDED Viewed

@@ -0,0 +1,109 @@
+{
+  "name": "@turbowarp/paper",
+  "version": "0.12.202407161743",
+  "description": "The Swiss Army Knife of Vector Graphics Scripting",
+  "license": "MIT",
+  "homepage": "http://paperjs.org",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/scratchfoundation/paper.js"
+  },
+  "bugs": "https://github.com/scratchfoundation/paper.js/issues",
+  "contributors": [
+    "Jürg Lehni <juerg@scratchdisk.com> (http://scratchdisk.com)",
+    "Jonathan Puckey <jonathan@puckey.studio> (http://studiomoniker.com)"
+  ],
+  "main": "dist/paper-full.js",
+  "types": "dist/paper.d.ts",
+  "scripts": {
+    "build": "gulp build",
+    "dist": "gulp dist",
+    "zip": "gulp zip",
+    "docs": "gulp docs",
+    "load": "gulp load",
+    "jshint": "gulp jshint",
+    "test": "gulp test"
+  },
+  "files": [
+    "AUTHORS.md",
+    "CHANGELOG.md",
+    "dist/",
+    "examples/",
+    "LICENSE.txt",
+    "README.md"
+  ],
+  "engines": {
+    "node": ">=8.0.0"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "gulp jshint --ensure-branch develop",
+      "pre-push": "gulp test --ensure-branch develop"
+    }
+  },
+  "overrides": {
+    "graceful-fs": "^4.2.11"
+  },
+  "browser": {
+    "canvas": false,
+    "jsdom": false,
+    "jsdom/lib/jsdom/living/generated/utils": false,
+    "source-map-support": false,
+    "./dist/node/self.js": false,
+    "./dist/node/extend.js": false
+  },
+  "devDependencies": {
+    "acorn": "0.5.0",
+    "canvas": "2.11.2",
+    "del": "4.1.1",
+    "gulp": "3.9.1",
+    "gulp-cached": "1.1.1",
+    "gulp-git-streamed": "2.10.1",
+    "gulp-jshint": "2.1.0",
+    "gulp-json-editor": "2.6.0",
+    "gulp-prepro": "2.4.0",
+    "gulp-qunits": "2.1.2",
+    "gulp-rename": "1.4.0",
+    "gulp-shell": "0.8.0",
+    "gulp-symlink": "2.1.4",
+    "gulp-typescript": "5.0.1",
+    "gulp-uglify": "1.5.4",
+    "gulp-uncomment": "0.3.0",
+    "gulp-util": "3.0.8",
+    "gulp-webserver": "0.9.1",
+    "gulp-whitespace": "0.1.0",
+    "gulp-zip": "3.2.0",
+    "jsdom": "15.2.1",
+    "jshint": "2.13.6",
+    "jshint-summary": "0.4.0",
+    "merge-stream": "2.0.0",
+    "minimist": "1.2.8",
+    "mustache": "3.2.1",
+    "prepro": "2.4.0",
+    "qunitjs": "1.23.1",
+    "require-dir": "1.2.0",
+    "resemblejs": "3.2.5",
+    "run-sequence": "2.2.1",
+    "source-map-support": "0.5.21",
+    "stats.js": "0.17.0",
+    "straps": "3.0.1",
+    "typescript": "4.9.5"
+  },
+  "keywords": [
+    "vector",
+    "graphic",
+    "graphics",
+    "2d",
+    "geometry",
+    "bezier",
+    "curve",
+    "curves",
+    "path",
+    "paths",
+    "canvas",
+    "svg",
+    "paper",
+    "paper.js",
+    "paperjs"
+  ]
+}