paper.js

2025-02-07 16:38:56 +01:00
parent 803e4407f4
commit b1c9f6170b
186 changed files with 178519 additions and 0 deletions
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Fancy Brush</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <script type="text/javascript" src="../../dist/paper-full.js"></script>
+    <script type="text/paperscript" canvas="canvas">
+        ////////////////////////////////////////////////////////////////////////////////
+        // This script belongs to the following tutorial:
+        //
+        // http://scriptographer.org/tutorials/geometry/working-with-mouse-vectors/#adding-brush-stroke-ends
+
+        tool.fixedDistance = 80;
+
+        var path;
+        var strokeEnds = 6;
+
+        function onMouseDown(event) {
+            path = new Path();
+            path.fillColor = event.count % 2 ? 'red' : 'black';
+        }
+
+        var lastPoint;
+        function onMouseDrag(event) {
+            // If this is the first drag event,
+            // add the strokes at the start:
+            if (event.count == 0) {
+                addStrokes(event.middlePoint, event.delta * -1);
+            } else {
+                var step = event.delta / 2;
+                step.angle += 90;
+
+                // The top point: the middle point + the step rotated by 90 degrees:
+                //   -----*
+                //   |
+                //   ------
+                var top = event.middlePoint + step;
+
+                // The bottom point: the middle point - the step rotated by 90 degrees:
+                //   ------
+                //   |
+                //   -----*
+                var bottom = event.middlePoint - step;
+
+                path.add(top);
+                path.insert(0, bottom);
+            }
+            path.smooth();
+
+            lastPoint = event.middlePoint;
+        }
+
+        function onMouseUp(event) {
+            var delta = event.point - lastPoint;
+            delta.length = tool.maxDistance;
+            addStrokes(event.point, delta);
+            path.closed = true;
+            path.smooth();
+        }
+
+        function addStrokes(point, delta) {
+            var step = delta.rotate(90);
+            var strokePoints = strokeEnds * 2 + 1;
+            point -= step / 2;
+            step /= strokePoints - 1;
+            for (var i = 0; i < strokePoints; i++) {
+                var strokePoint = point + step * i;
+                var offset = delta * (Math.random() * 0.3 + 0.1);
+                if (i % 2) {
+                    offset *= -1;
+                }
+                strokePoint += offset;
+                path.insert(0, strokePoint);
+            }
+        }
+    </script>
+</head>
+<body>
+    <canvas id="canvas" resize></canvas>
+</body>
+</html>