paper 0.12.18 → 0.12.20

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 (231) hide show
  1. package/CHANGELOG.md +49 -0
  2. package/README.md +5 -14
  3. package/dist/docs/assets/js/paper.js +94 -54
  4. package/dist/docs/classes/Color.html +2 -2
  5. package/dist/docs/classes/CompoundPath.html +2 -2
  6. package/dist/docs/classes/Curve.html +2 -2
  7. package/dist/docs/classes/CurveLocation.html +2 -2
  8. package/dist/docs/classes/Event.html +2 -2
  9. package/dist/docs/classes/Gradient.html +2 -2
  10. package/dist/docs/classes/GradientStop.html +2 -2
  11. package/dist/docs/classes/Group.html +2 -2
  12. package/dist/docs/classes/HitResult.html +2 -2
  13. package/dist/docs/classes/Item.html +2 -2
  14. package/dist/docs/classes/Key.html +2 -2
  15. package/dist/docs/classes/KeyEvent.html +2 -2
  16. package/dist/docs/classes/Layer.html +2 -2
  17. package/dist/docs/classes/Matrix.html +2 -2
  18. package/dist/docs/classes/MouseEvent.html +2 -2
  19. package/dist/docs/classes/PaperScope.html +2 -2
  20. package/dist/docs/classes/PaperScript.html +2 -2
  21. package/dist/docs/classes/Path.html +2 -2
  22. package/dist/docs/classes/PathItem.html +2 -2
  23. package/dist/docs/classes/Point.html +2 -2
  24. package/dist/docs/classes/PointText.html +2 -2
  25. package/dist/docs/classes/Project.html +2 -2
  26. package/dist/docs/classes/Raster.html +2 -2
  27. package/dist/docs/classes/Rectangle.html +2 -2
  28. package/dist/docs/classes/Segment.html +2 -2
  29. package/dist/docs/classes/Shape.html +2 -2
  30. package/dist/docs/classes/Size.html +2 -2
  31. package/dist/docs/classes/Style.html +2 -2
  32. package/dist/docs/classes/SymbolDefinition.html +2 -2
  33. package/dist/docs/classes/SymbolItem.html +2 -2
  34. package/dist/docs/classes/TextItem.html +2 -2
  35. package/dist/docs/classes/Tool.html +2 -2
  36. package/dist/docs/classes/ToolEvent.html +2 -2
  37. package/dist/docs/classes/Tween.html +2 -2
  38. package/dist/docs/classes/View.html +2 -2
  39. package/dist/docs/classes/global.html +2 -2
  40. package/dist/docs/classes/index.html +2 -2
  41. package/dist/docs/index.html +1 -1
  42. package/dist/node/canvas.js +9 -7
  43. package/dist/node/self.js +9 -1
  44. package/dist/paper-core.js +93 -53
  45. package/dist/paper-core.min.js +3 -3
  46. package/dist/paper-full.js +94 -54
  47. package/dist/paper-full.min.js +3 -3
  48. package/dist/paper.d.ts +2 -2
  49. package/package.json +11 -7
  50. package/dist/paperjs/LICENSE.txt +0 -23
  51. package/dist/paperjs/dist/node/canvas.js +0 -66
  52. package/dist/paperjs/dist/node/extend.js +0 -156
  53. package/dist/paperjs/dist/node/self.js +0 -58
  54. package/dist/paperjs/dist/node/xml.js +0 -40
  55. package/dist/paperjs/dist/paper-core.d.ts +0 -1
  56. package/dist/paperjs/dist/paper-core.js +0 -15703
  57. package/dist/paperjs/dist/paper-core.min.js +0 -32
  58. package/dist/paperjs/dist/paper-full.js +0 -17472
  59. package/dist/paperjs/dist/paper-full.min.js +0 -32
  60. package/dist/paperjs/dist/paper.d.ts +0 -7394
  61. package/dist/paperjs/docs/assets/css/docs.css +0 -414
  62. package/dist/paperjs/docs/assets/js/codemirror.js +0 -4
  63. package/dist/paperjs/docs/assets/js/docs.js +0 -493
  64. package/dist/paperjs/docs/assets/js/jquery.js +0 -6
  65. package/dist/paperjs/docs/assets/js/paper.js +0 -17472
  66. package/dist/paperjs/docs/classes/Color.html +0 -2188
  67. package/dist/paperjs/docs/classes/CompoundPath.html +0 -8877
  68. package/dist/paperjs/docs/classes/Curve.html +0 -2323
  69. package/dist/paperjs/docs/classes/CurveLocation.html +0 -672
  70. package/dist/paperjs/docs/classes/Event.html +0 -176
  71. package/dist/paperjs/docs/classes/Gradient.html +0 -240
  72. package/dist/paperjs/docs/classes/GradientStop.html +0 -273
  73. package/dist/paperjs/docs/classes/Group.html +0 -6864
  74. package/dist/paperjs/docs/classes/HitResult.html +0 -239
  75. package/dist/paperjs/docs/classes/Item.html +0 -6628
  76. package/dist/paperjs/docs/classes/Key.html +0 -139
  77. package/dist/paperjs/docs/classes/KeyEvent.html +0 -308
  78. package/dist/paperjs/docs/classes/Layer.html +0 -6850
  79. package/dist/paperjs/docs/classes/Matrix.html +0 -1744
  80. package/dist/paperjs/docs/classes/MouseEvent.html +0 -355
  81. package/dist/paperjs/docs/classes/PaperScope.html +0 -459
  82. package/dist/paperjs/docs/classes/PaperScript.html +0 -198
  83. package/dist/paperjs/docs/classes/Path.html +0 -11775
  84. package/dist/paperjs/docs/classes/PathItem.html +0 -8639
  85. package/dist/paperjs/docs/classes/Point.html +0 -2699
  86. package/dist/paperjs/docs/classes/PointText.html +0 -7029
  87. package/dist/paperjs/docs/classes/Project.html +0 -1305
  88. package/dist/paperjs/docs/classes/Raster.html +0 -7843
  89. package/dist/paperjs/docs/classes/Rectangle.html +0 -1654
  90. package/dist/paperjs/docs/classes/Segment.html +0 -939
  91. package/dist/paperjs/docs/classes/Shape.html +0 -7363
  92. package/dist/paperjs/docs/classes/Size.html +0 -1825
  93. package/dist/paperjs/docs/classes/Style.html +0 -919
  94. package/dist/paperjs/docs/classes/SymbolDefinition.html +0 -311
  95. package/dist/paperjs/docs/classes/SymbolItem.html +0 -6755
  96. package/dist/paperjs/docs/classes/TextItem.html +0 -6869
  97. package/dist/paperjs/docs/classes/Tool.html +0 -761
  98. package/dist/paperjs/docs/classes/ToolEvent.html +0 -446
  99. package/dist/paperjs/docs/classes/Tween.html +0 -374
  100. package/dist/paperjs/docs/classes/View.html +0 -1772
  101. package/dist/paperjs/docs/classes/global.html +0 -425
  102. package/dist/paperjs/docs/classes/index.html +0 -88
  103. package/dist/paperjs/docs/index.html +0 -11
  104. package/dist/paperjs/examples/Animated/AnimatedStar.html +0 -53
  105. package/dist/paperjs/examples/Animated/BooleanOperations.html +0 -115
  106. package/dist/paperjs/examples/Animated/CandyCrash.html +0 -151
  107. package/dist/paperjs/examples/Animated/Extruded.html +0 -50
  108. package/dist/paperjs/examples/Animated/Lines.html +0 -53
  109. package/dist/paperjs/examples/Animated/Smoothing.html +0 -70
  110. package/dist/paperjs/examples/Animated/Space.html +0 -86
  111. package/dist/paperjs/examples/Animated/SpaceUsingShapes.html +0 -79
  112. package/dist/paperjs/examples/Games/Paperoids.html +0 -569
  113. package/dist/paperjs/examples/JSON/Circle Testing.html +0 -34
  114. package/dist/paperjs/examples/JSON/Compound Path.html +0 -25
  115. package/dist/paperjs/examples/JSON/Empty Path Testing.html +0 -31
  116. package/dist/paperjs/examples/JSON/Gradients.html +0 -34
  117. package/dist/paperjs/examples/JSON/Group Transform.html +0 -28
  118. package/dist/paperjs/examples/JSON/Line Testing.html +0 -44
  119. package/dist/paperjs/examples/JSON/Random Path Testing.html +0 -42
  120. package/dist/paperjs/examples/JSON/Raster.html +0 -29
  121. package/dist/paperjs/examples/JSON/Rect and Attribute Testing.html +0 -56
  122. package/dist/paperjs/examples/JSON/Rotated Primitives.html +0 -55
  123. package/dist/paperjs/examples/JSON/Selection.html +0 -43
  124. package/dist/paperjs/examples/JSON/Shapes.html +0 -54
  125. package/dist/paperjs/examples/JSON/Symbols.html +0 -30
  126. package/dist/paperjs/examples/JSON/Text Testing.html +0 -38
  127. package/dist/paperjs/examples/JSON/Tiger.html +0 -19
  128. package/dist/paperjs/examples/JSON/Transform Test 1.html +0 -32
  129. package/dist/paperjs/examples/JSON/Transform Test 2.html +0 -30
  130. package/dist/paperjs/examples/Node.js/AnimatedStar.js +0 -52
  131. package/dist/paperjs/examples/Node.js/BooleanOperations.js +0 -36
  132. package/dist/paperjs/examples/Node.js/JSONtoPDF.js +0 -20
  133. package/dist/paperjs/examples/Node.js/Raster.js +0 -32
  134. package/dist/paperjs/examples/Node.js/RasterRemote.js +0 -33
  135. package/dist/paperjs/examples/Node.js/SvgExport.js +0 -52
  136. package/dist/paperjs/examples/Node.js/SvgImport.js +0 -23
  137. package/dist/paperjs/examples/Node.js/Tadpoles.js +0 -16
  138. package/dist/paperjs/examples/Node.js/Tadpoles.pjs +0 -278
  139. package/dist/paperjs/examples/Node.js/in.json +0 -1
  140. package/dist/paperjs/examples/Node.js/in.svg +0 -16
  141. package/dist/paperjs/examples/Paperjs.org/BooleanOperattions.html +0 -115
  142. package/dist/paperjs/examples/Paperjs.org/BouncingBalls.html +0 -103
  143. package/dist/paperjs/examples/Paperjs.org/Chain.html +0 -54
  144. package/dist/paperjs/examples/Paperjs.org/DivisionRaster.html +0 -72
  145. package/dist/paperjs/examples/Paperjs.org/FutureSplash.html +0 -122
  146. package/dist/paperjs/examples/Paperjs.org/HitTesting.html +0 -103
  147. package/dist/paperjs/examples/Paperjs.org/InteractiveTiger.html +0 -777
  148. package/dist/paperjs/examples/Paperjs.org/MetaBalls.html +0 -132
  149. package/dist/paperjs/examples/Paperjs.org/NyanRainbow.html +0 -202
  150. package/dist/paperjs/examples/Paperjs.org/PathIntersections.html +0 -76
  151. package/dist/paperjs/examples/Paperjs.org/Qbertify.html +0 -146
  152. package/dist/paperjs/examples/Paperjs.org/RadialRainbows.html +0 -80
  153. package/dist/paperjs/examples/Paperjs.org/RoundedRectangles.html +0 -41
  154. package/dist/paperjs/examples/Paperjs.org/SatieLikedToDraw.html +0 -140
  155. package/dist/paperjs/examples/Paperjs.org/Simplify.html +0 -63
  156. package/dist/paperjs/examples/Paperjs.org/SpiralRaster.html +0 -120
  157. package/dist/paperjs/examples/Paperjs.org/Tadpoles.html +0 -283
  158. package/dist/paperjs/examples/Paperjs.org/Voronoi.html +0 -134
  159. package/dist/paperjs/examples/Rasters/PhyllotaxisRaster.html +0 -96
  160. package/dist/paperjs/examples/Rasters/Raster.html +0 -34
  161. package/dist/paperjs/examples/Rasters/RotationRaster.html +0 -44
  162. package/dist/paperjs/examples/Rasters/Smoothing.html +0 -36
  163. package/dist/paperjs/examples/SVG Export/Circle Testing.html +0 -32
  164. package/dist/paperjs/examples/SVG Export/Clipping.html +0 -17
  165. package/dist/paperjs/examples/SVG Export/Compound Path.html +0 -22
  166. package/dist/paperjs/examples/SVG Export/Empty Path Testing.html +0 -28
  167. package/dist/paperjs/examples/SVG Export/Gradients.html +0 -52
  168. package/dist/paperjs/examples/SVG Export/Group Transform.html +0 -25
  169. package/dist/paperjs/examples/SVG Export/Line Testing.html +0 -41
  170. package/dist/paperjs/examples/SVG Export/Random Path Testing.html +0 -39
  171. package/dist/paperjs/examples/SVG Export/Raster.html +0 -21
  172. package/dist/paperjs/examples/SVG Export/Rect and Attribute Testing.html +0 -53
  173. package/dist/paperjs/examples/SVG Export/Rotated Primitives.html +0 -80
  174. package/dist/paperjs/examples/SVG Export/Shapes.html +0 -58
  175. package/dist/paperjs/examples/SVG Export/Symbols.html +0 -27
  176. package/dist/paperjs/examples/SVG Export/Text Testing.html +0 -45
  177. package/dist/paperjs/examples/SVG Export/Tiger.html +0 -23
  178. package/dist/paperjs/examples/SVG Export/Transform Test 1.html +0 -29
  179. package/dist/paperjs/examples/SVG Export/Transform Test 2.html +0 -27
  180. package/dist/paperjs/examples/SVG Import/Arcs.html +0 -78
  181. package/dist/paperjs/examples/SVG Import/Butterfly.html +0 -223
  182. package/dist/paperjs/examples/SVG Import/Circle and Ellipse Testing.html +0 -26
  183. package/dist/paperjs/examples/SVG Import/Clipping.html +0 -100
  184. package/dist/paperjs/examples/SVG Import/From File.html +0 -30
  185. package/dist/paperjs/examples/SVG Import/Gradient.html +0 -138
  186. package/dist/paperjs/examples/SVG Import/Gradients.html +0 -30
  187. package/dist/paperjs/examples/SVG Import/Inkscape Pivot.html +0 -52
  188. package/dist/paperjs/examples/SVG Import/Inkscape.html +0 -88
  189. package/dist/paperjs/examples/SVG Import/Line Testing.html +0 -24
  190. package/dist/paperjs/examples/SVG Import/MoreGradients.html +0 -107
  191. package/dist/paperjs/examples/SVG Import/Multiple Paths Test 1.html +0 -42
  192. package/dist/paperjs/examples/SVG Import/Multiple Paths Test 2.html +0 -33
  193. package/dist/paperjs/examples/SVG Import/Nested Groups Test.html +0 -78
  194. package/dist/paperjs/examples/SVG Import/Polybezier.html +0 -43
  195. package/dist/paperjs/examples/SVG Import/Rect Testing.html +0 -25
  196. package/dist/paperjs/examples/SVG Import/Symbols.html +0 -24
  197. package/dist/paperjs/examples/SVG Import/Testing.html +0 -40
  198. package/dist/paperjs/examples/SVG Import/Text Testing.html +0 -19
  199. package/dist/paperjs/examples/SVG Import/Tiger.html +0 -742
  200. package/dist/paperjs/examples/SVG Import/Transform Testing.html +0 -22
  201. package/dist/paperjs/examples/SVG Import/Viewbox.html +0 -38
  202. package/dist/paperjs/examples/Scripts/Arcs.html +0 -39
  203. package/dist/paperjs/examples/Scripts/BlendModes.html +0 -77
  204. package/dist/paperjs/examples/Scripts/BooleanOperations.html +0 -937
  205. package/dist/paperjs/examples/Scripts/CompoundPath.html +0 -19
  206. package/dist/paperjs/examples/Scripts/CurveTimeParameterization.html +0 -61
  207. package/dist/paperjs/examples/Scripts/HslColor.html +0 -53
  208. package/dist/paperjs/examples/Scripts/PathStructure.html +0 -82
  209. package/dist/paperjs/examples/Scripts/PathTangents.html +0 -73
  210. package/dist/paperjs/examples/Scripts/Resize.html +0 -42
  211. package/dist/paperjs/examples/Scripts/RoundRectangle.html +0 -28
  212. package/dist/paperjs/examples/Scripts/Shapes.html +0 -54
  213. package/dist/paperjs/examples/Scripts/StrokeBounds.html +0 -101
  214. package/dist/paperjs/examples/Scripts/StrokeScaling.html +0 -65
  215. package/dist/paperjs/examples/Tools/BezierTool.html +0 -90
  216. package/dist/paperjs/examples/Tools/Circles.html +0 -28
  217. package/dist/paperjs/examples/Tools/Clouds.html +0 -35
  218. package/dist/paperjs/examples/Tools/DrippingBrush.html +0 -73
  219. package/dist/paperjs/examples/Tools/FancyBrush.html +0 -82
  220. package/dist/paperjs/examples/Tools/Grid.html +0 -44
  221. package/dist/paperjs/examples/Tools/MultiLines.html +0 -44
  222. package/dist/paperjs/examples/Tools/MultipleTools.html +0 -44
  223. package/dist/paperjs/examples/Tools/PathEditing.html +0 -95
  224. package/dist/paperjs/examples/Tools/SquareRounded.html +0 -76
  225. package/dist/paperjs/examples/Tools/Stars.html +0 -38
  226. package/dist/paperjs/examples/Tools/Vektor.html +0 -200
  227. package/dist/paperjs/examples/Tools/Wave.html +0 -50
  228. package/dist/paperjs/examples/Tools/WormFarm.html +0 -88
  229. package/dist/paperjs/examples/Worker/Main.html +0 -53
  230. package/dist/paperjs/examples/Worker/Worker.js +0 -14
  231. package/dist/paperjs/examples/css/style.css +0 -12
@@ -1,28 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Circles</title>
6
- <link rel="stylesheet" href="../css/style.css">
7
- <script type="text/javascript" src="../../dist/paper-full.js"></script>
8
- <script type="text/paperscript" canvas="canvas">
9
- function onMouseDrag(event) {
10
- // The radius is the distance between the position
11
- // where the user clicked and the current position
12
- // of the mouse.
13
- var path = new Path.Circle({
14
- center: event.downPoint,
15
- radius: (event.downPoint - event.point).length,
16
- fillColor: 'white',
17
- strokeColor: 'black'
18
- });
19
-
20
- // Remove this path on the next drag event:
21
- path.removeOnDrag();
22
- };
23
- </script>
24
- </head>
25
- <body>
26
- <canvas id="canvas" resize></canvas>
27
- </body>
28
- </html>
@@ -1,35 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Clouds</title>
6
- <link rel="stylesheet" href="../css/style.css">
7
- <script type="text/javascript" src="../../dist/paper-full.js"></script>
8
- <script type="text/paperscript" canvas="canvas">
9
- // Any newly created item will inherit the following styles:
10
- project.currentStyle = {
11
- strokeColor: 'black',
12
- strokeWidth: 5,
13
- strokeJoin: 'round',
14
- strokeCap: 'round'
15
- };
16
-
17
- // The user has to drag the mouse at least 30pt before the mouse drag
18
- // event is fired:
19
- tool.minDistance = 30;
20
-
21
- var path;
22
- function onMouseDown(event) {
23
- path = new Path();
24
- path.add(event.point);
25
- }
26
-
27
- function onMouseDrag(event) {
28
- path.arcTo(event.point, true);
29
- }
30
- </script>
31
- </head>
32
- <body>
33
- <canvas id="canvas" resize></canvas>
34
- </body>
35
- </html>
@@ -1,73 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Dripping Brush</title>
6
- <link rel="stylesheet" href="../css/style.css">
7
- <script type="text/javascript" src="../../dist/paper-full.js"></script>
8
- <script type="text/paperscript" canvas="canvas">
9
- var path;
10
- var minSize = 5;
11
- tool.maxDistance = 20;
12
- function onMouseDrag(event) {
13
- // If the user dragged more then minSize:
14
- if (event.delta.length > minSize) {
15
- // If there is no path, make one:
16
- if (!path) {
17
- path = new Path({
18
- fillColor: 'black'
19
- });
20
- path.add(event.lastPoint);
21
- }
22
-
23
- var step = event.delta / 2;
24
- step.angle = step.angle + 90;
25
-
26
- // The top point: the middle point + the step rotated by 90 degrees:
27
- // -----*
28
- // |
29
- // ------
30
- var top = event.middlePoint + step;
31
-
32
- // The bottom point: the middle point - the step rotated by 90 degrees:
33
- // ------
34
- // |
35
- // -----*
36
- var bottom = event.middlePoint - step;
37
-
38
- path.add(top);
39
- path.insert(0, bottom);
40
- path.smooth();
41
- } else {
42
- // If the user dragged too slowly:
43
-
44
- // If there is currently a path, close it
45
- if (path) {
46
- path.add(event.point);
47
- path.closed = true;
48
- path.smooth();
49
-
50
- // Set path to null (nothing) so the path check above
51
- // will force a new path next time the user drags fast enough:
52
- path = null;
53
- }
54
- }
55
- }
56
-
57
- function onMouseUp(event) {
58
- if (path) {
59
- path.add(event.point);
60
- path.closed = true;
61
- path.smooth();
62
-
63
- // Set path to null (nothing) so the path check above
64
- // will force a new path next time the user drags fast enough:
65
- path = null;
66
- }
67
- }
68
- </script>
69
- </head>
70
- <body>
71
- <canvas id="canvas" resize></canvas>
72
- </body>
73
- </html>
@@ -1,82 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Fancy Brush</title>
6
- <link rel="stylesheet" href="../css/style.css">
7
- <script type="text/javascript" src="../../dist/paper-full.js"></script>
8
- <script type="text/paperscript" canvas="canvas">
9
- ////////////////////////////////////////////////////////////////////////////////
10
- // This script belongs to the following tutorial:
11
- //
12
- // http://scriptographer.org/tutorials/geometry/working-with-mouse-vectors/#adding-brush-stroke-ends
13
-
14
- tool.fixedDistance = 80;
15
-
16
- var path;
17
- var strokeEnds = 6;
18
-
19
- function onMouseDown(event) {
20
- path = new Path();
21
- path.fillColor = event.count % 2 ? 'red' : 'black';
22
- }
23
-
24
- var lastPoint;
25
- function onMouseDrag(event) {
26
- // If this is the first drag event,
27
- // add the strokes at the start:
28
- if (event.count == 0) {
29
- addStrokes(event.middlePoint, event.delta * -1);
30
- } else {
31
- var step = event.delta / 2;
32
- step.angle += 90;
33
-
34
- // The top point: the middle point + the step rotated by 90 degrees:
35
- // -----*
36
- // |
37
- // ------
38
- var top = event.middlePoint + step;
39
-
40
- // The bottom point: the middle point - the step rotated by 90 degrees:
41
- // ------
42
- // |
43
- // -----*
44
- var bottom = event.middlePoint - step;
45
-
46
- path.add(top);
47
- path.insert(0, bottom);
48
- }
49
- path.smooth();
50
-
51
- lastPoint = event.middlePoint;
52
- }
53
-
54
- function onMouseUp(event) {
55
- var delta = event.point - lastPoint;
56
- delta.length = tool.maxDistance;
57
- addStrokes(event.point, delta);
58
- path.closed = true;
59
- path.smooth();
60
- }
61
-
62
- function addStrokes(point, delta) {
63
- var step = delta.rotate(90);
64
- var strokePoints = strokeEnds * 2 + 1;
65
- point -= step / 2;
66
- step /= strokePoints - 1;
67
- for (var i = 0; i < strokePoints; i++) {
68
- var strokePoint = point + step * i;
69
- var offset = delta * (Math.random() * 0.3 + 0.1);
70
- if (i % 2) {
71
- offset *= -1;
72
- }
73
- strokePoint += offset;
74
- path.insert(0, strokePoint);
75
- }
76
- }
77
- </script>
78
- </head>
79
- <body>
80
- <canvas id="canvas" resize></canvas>
81
- </body>
82
- </html>
@@ -1,44 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Grid</title>
6
- <link rel="stylesheet" href="../css/style.css">
7
- <script type="text/javascript" src="../../dist/paper-full.js"></script>
8
- <script type="text/paperscript" canvas="canvas">
9
- /////////////////////////////////////////////////////////////////////
10
- // Values
11
-
12
- tool.fixedDistance = 10;
13
-
14
- var values = { size: tool.fixedDistance };
15
-
16
- /////////////////////////////////////////////////////////////////////
17
- // Mouse handling
18
-
19
- var point, path;
20
-
21
- function getPos(pt) {
22
- return (pt / values.size).round() * values.size;
23
- }
24
-
25
- function onMouseDown(event) {
26
- point = getPos(event.point);
27
- path = new Path();
28
- path.strokeColor = 'black';
29
- path.add(point);
30
- }
31
-
32
- function onMouseDrag(event) {
33
- var p = getPos(event.point);
34
- if (point != p) {
35
- path.add(p);
36
- point = p;
37
- }
38
- }
39
- </script>
40
- </head>
41
- <body>
42
- <canvas id="canvas" resize></canvas>
43
- </body>
44
- </html>
@@ -1,44 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Multi Lines</title>
6
- <link rel="stylesheet" href="../css/style.css">
7
- <script type="text/javascript" src="../../dist/paper-full.js"></script>
8
- <script type="text/paperscript" canvas="canvas">
9
- tool.fixedDistance = 30;
10
-
11
- var values = {
12
- lines: 5,
13
- size: 40,
14
- smooth: true
15
- };
16
-
17
- var paths;
18
-
19
- function onMouseDown(event) {
20
- paths = [];
21
- for (var i = 0; i < values.lines; i++) {
22
- var path = new Path();
23
- path.strokeColor = '#000000';
24
- paths.push(path);
25
- }
26
- }
27
-
28
- function onMouseDrag(event) {
29
- var offset = event.delta;
30
- offset.angle = offset.angle + 90;
31
- var lineSize = values.size / values.lines;
32
- for (var i = 0; i < values.lines; i++) {
33
- var path = paths[values.lines - 1 - i];
34
- offset.length = lineSize * i + lineSize / 2;
35
- path.add(event.middlePoint + offset);
36
- path.smooth();
37
- }
38
- }
39
- </script>
40
- </head>
41
- <body>
42
- <canvas id="canvas" resize></canvas>
43
- </body>
44
- </html>
@@ -1,44 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Mulitple Tools</title>
6
- <link rel="stylesheet" href="../css/style.css">
7
- <script type="text/javascript" src="../../dist/paper-full.js"></script>
8
- <script type="text/paperscript" canvas="canvas">
9
- // Create two drawing tools.
10
- // tool1 will draw straight lines, tool2 will draw clouds.
11
-
12
- // Both share the mouseDown event:
13
- var path;
14
- function onMouseDown(event) {
15
- path = new Path();
16
- path.strokeColor = 'black';
17
- path.add(event.point);
18
- }
19
-
20
- window.app = {
21
- tool1: new Tool({
22
- onMouseDown: onMouseDown,
23
- onMouseDrag: function(event) {
24
- path.add(event.point);
25
- }
26
- }),
27
-
28
- tool2: new Tool({
29
- minDistance: 20,
30
- onMouseDown: onMouseDown,
31
- onMouseDrag: function(event) {
32
- // Use the arcTo command to draw cloudy lines
33
- path.arcTo(event.point);
34
- }
35
- })
36
- };
37
- </script>
38
- </head>
39
- <body>
40
- <a href="#" onclick="app.tool1.activate(); return false;">Lines</a>
41
- <a href="#" onclick="app.tool2.activate(); return false;">Clouds</a>
42
- <canvas id="canvas" resize></canvas>
43
- </body>
44
- </html>
@@ -1,95 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Path Editing</title>
6
- <link rel="stylesheet" href="../css/style.css">
7
- <script type="text/javascript" src="../../dist/paper-full.js"></script>
8
- <script type="text/paperscript" canvas="canvas">
9
- var values = {
10
- paths: 100,
11
- minPoints: 5,
12
- maxPoints: 15,
13
- minRadius: 30,
14
- maxRadius: 90
15
- };
16
-
17
- var hitOptions = {
18
- segments: true,
19
- stroke: true,
20
- fill: true,
21
- tolerance: 5
22
- };
23
-
24
- var radiusDelta = values.maxRadius - values.minRadius;
25
- var pointsDelta = values.maxPoints - values.minPoints;
26
- for (var i = 0; i < values.paths; i++) {
27
- var radius = values.minRadius + Math.random() * radiusDelta;
28
- var points = values.minPoints + Math.floor(Math.random() * pointsDelta);
29
- var path = createBlob(view.size * Point.random(), radius, points);
30
- var lightness = (Math.random() - 0.5) * 0.4 + 0.4;
31
- var hue = Math.random() * 360;
32
- path.fillColor = { hue: hue, saturation: 1, lightness: lightness };
33
- path.strokeColor = 'black';
34
- };
35
-
36
- function createBlob(center, maxRadius, points) {
37
- var path = new Path();
38
- path.closed = true;
39
- for (var i = 0; i < points; i++) {
40
- var delta = new Point({
41
- length: (maxRadius * 0.5) + (Math.random() * maxRadius * 0.5),
42
- angle: (360 / points) * i
43
- });
44
- path.add(center + delta);
45
- }
46
- path.smooth();
47
- return path;
48
- }
49
-
50
- var segment, path;
51
- function onMouseDown(event) {
52
- segment = path = null;
53
- var hitResult = project.hitTest(event.point, hitOptions);
54
-
55
- if (event.modifiers.shift) {
56
- if (hitResult.type == 'segment') {
57
- hitResult.segment.remove();
58
- };
59
- return;
60
- }
61
-
62
- if (hitResult) {
63
- path = hitResult.item;
64
- if (hitResult.type == 'segment') {
65
- segment = hitResult.segment;
66
- } else if (hitResult.type == 'stroke') {
67
- var location = hitResult.location;
68
- segment = path.insert(location.index + 1, event.point);
69
- path.smooth();
70
- }
71
- hitResult.item.bringToFront();
72
- }
73
- }
74
-
75
- function onMouseMove(event) {
76
- var hitResult = project.hitTest(event.point, hitOptions);
77
- project.activeLayer.selected = false;
78
- if (hitResult && hitResult.item)
79
- hitResult.item.selected = true;
80
- }
81
-
82
- function onMouseDrag(event) {
83
- if (segment) {
84
- segment.point += event.delta;
85
- path.smooth();
86
- } else if (path) {
87
- path.position += event.delta;
88
- }
89
- }
90
- </script>
91
- </head>
92
- <body style="background:black">
93
- <canvas id="canvas" resize></canvas>
94
- </body>
95
- </html>
@@ -1,76 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Square Rounded</title>
6
- <link rel="stylesheet" href="../css/style.css">
7
- <script type="text/javascript" src="../../dist/paper-full.js"></script>
8
- <script type="text/paperscript" canvas="canvas">
9
- /////////////////////////////////////////////////////////////////////
10
- // Values
11
-
12
- var values = {
13
- radius: 10,
14
- tolerance: 5
15
- };
16
-
17
- checkValues();
18
-
19
- /////////////////////////////////////////////////////////////////////
20
- // Mouse handling
21
-
22
- var handle;
23
- function checkValues() {
24
- var min = values.radius * 2;
25
- if (values.tolerance < min) values.tolerance = min;
26
- handle = values.radius * Numerical.KAPPA;
27
- }
28
-
29
- var path;
30
- function onMouseDown(event) {
31
- path = new Path({
32
- segments: [event.point, event.point],
33
- strokeColor: 'black',
34
- strokeWidth: 5,
35
- strokeCap: 'round'
36
- });
37
- prevPoint = path.firstSegment.point;
38
- curPoint = path.lastSegment.point;
39
- curHandleSeg = null;
40
- }
41
-
42
- var curPoint, prevPoint, curHandleSeg;
43
- function onMouseDrag(event) {
44
- var point = event.point;
45
- var diff = (point - prevPoint).abs();
46
- if (diff.x < diff.y) {
47
- curPoint.x = prevPoint.x;
48
- curPoint.y = point.y;
49
- } else {
50
- curPoint.x = point.x;
51
- curPoint.y = prevPoint.y;
52
- }
53
- var normal = curPoint - prevPoint;
54
- normal.length = 1;
55
- if (curHandleSeg) {
56
- curHandleSeg.point = prevPoint + (normal * values.radius);
57
- curHandleSeg.handleIn = normal * -handle;
58
- }
59
- var minDiff = Math.min(diff.x, diff.y);
60
- if (minDiff > values.tolerance) {
61
- var point = curPoint - (normal * values.radius);
62
- var segment = new Segment(point, null, normal * handle);
63
- path.insert(path.segments.length - 1, segment);
64
- curHandleSeg = path.lastSegment;
65
- // clone as we want the unmodified one:
66
- prevPoint = curHandleSeg.point.clone();
67
- path.add(curHandleSeg);
68
- curPoint = path.lastSegment.point;
69
- }
70
- }
71
- </script>
72
- </head>
73
- <body>
74
- <canvas id="canvas" resize></canvas>
75
- </body>
76
- </html>
@@ -1,38 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Stars</title>
6
- <link rel="stylesheet" href="../css/style.css">
7
- <script type="text/javascript" src="../../dist/paper-full.js"></script>
8
- <script type="text/paperscript" canvas="canvas">
9
- function onMouseDown(event) {
10
- var hue = Math.random() * 360;
11
- project.currentStyle.fillColor = {
12
- hue: hue,
13
- saturation: 1,
14
- brightness: 1
15
- };
16
- }
17
-
18
- function onMouseDrag(event) {
19
- var delta = event.point - event.downPoint;
20
- var radius = delta.length;
21
- var points = 5 + Math.round(radius / 50);
22
- var path = new Path.Star({
23
- center: event.downPoint,
24
- points: points,
25
- radius1: radius / 2,
26
- radius2: radius
27
- });
28
- path.rotate(delta.angle);
29
- // Remove the path automatically before the next mouse drag
30
- // event:
31
- path.removeOnDrag();
32
- }
33
- </script>
34
- </head>
35
- <body>
36
- <canvas id="canvas" resize></canvas>
37
- </body>
38
- </html>