paper 0.12.17 → 0.12.18

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 (228) hide show
  1. package/CHANGELOG.md +12 -1
  2. package/dist/docs/assets/js/paper.js +19 -11
  3. package/dist/docs/classes/Color.html +2 -2
  4. package/dist/docs/classes/CompoundPath.html +3 -4
  5. package/dist/docs/classes/Curve.html +2 -2
  6. package/dist/docs/classes/CurveLocation.html +2 -2
  7. package/dist/docs/classes/Event.html +2 -2
  8. package/dist/docs/classes/Gradient.html +2 -2
  9. package/dist/docs/classes/GradientStop.html +2 -2
  10. package/dist/docs/classes/Group.html +3 -4
  11. package/dist/docs/classes/HitResult.html +2 -2
  12. package/dist/docs/classes/Item.html +3 -4
  13. package/dist/docs/classes/Key.html +2 -2
  14. package/dist/docs/classes/KeyEvent.html +2 -2
  15. package/dist/docs/classes/Layer.html +3 -4
  16. package/dist/docs/classes/Matrix.html +2 -2
  17. package/dist/docs/classes/MouseEvent.html +2 -2
  18. package/dist/docs/classes/PaperScope.html +2 -2
  19. package/dist/docs/classes/PaperScript.html +2 -2
  20. package/dist/docs/classes/Path.html +3 -4
  21. package/dist/docs/classes/PathItem.html +3 -4
  22. package/dist/docs/classes/Point.html +2 -2
  23. package/dist/docs/classes/PointText.html +3 -4
  24. package/dist/docs/classes/Project.html +3 -2
  25. package/dist/docs/classes/Raster.html +3 -4
  26. package/dist/docs/classes/Rectangle.html +2 -2
  27. package/dist/docs/classes/Segment.html +2 -2
  28. package/dist/docs/classes/Shape.html +3 -4
  29. package/dist/docs/classes/Size.html +2 -2
  30. package/dist/docs/classes/Style.html +2 -2
  31. package/dist/docs/classes/SymbolDefinition.html +2 -2
  32. package/dist/docs/classes/SymbolItem.html +3 -4
  33. package/dist/docs/classes/TextItem.html +3 -4
  34. package/dist/docs/classes/Tool.html +2 -2
  35. package/dist/docs/classes/ToolEvent.html +2 -2
  36. package/dist/docs/classes/Tween.html +2 -2
  37. package/dist/docs/classes/View.html +3 -3
  38. package/dist/docs/classes/global.html +2 -2
  39. package/dist/docs/classes/index.html +2 -2
  40. package/dist/docs/index.html +1 -1
  41. package/dist/paper-core.js +19 -11
  42. package/dist/paper-core.min.js +3 -3
  43. package/dist/paper-full.js +19 -11
  44. package/dist/paper-full.min.js +3 -3
  45. package/dist/paper.d.ts +10 -4
  46. package/dist/paperjs/LICENSE.txt +23 -0
  47. package/dist/paperjs/dist/node/canvas.js +66 -0
  48. package/dist/paperjs/dist/node/extend.js +156 -0
  49. package/dist/paperjs/dist/node/self.js +58 -0
  50. package/dist/paperjs/dist/node/xml.js +40 -0
  51. package/dist/paperjs/dist/paper-core.d.ts +1 -0
  52. package/dist/paperjs/dist/paper-core.js +15703 -0
  53. package/dist/paperjs/dist/paper-core.min.js +32 -0
  54. package/dist/paperjs/dist/paper-full.js +17472 -0
  55. package/dist/paperjs/dist/paper-full.min.js +32 -0
  56. package/dist/paperjs/dist/paper.d.ts +7394 -0
  57. package/dist/paperjs/docs/assets/css/docs.css +414 -0
  58. package/dist/paperjs/docs/assets/js/codemirror.js +4 -0
  59. package/dist/paperjs/docs/assets/js/docs.js +493 -0
  60. package/dist/paperjs/docs/assets/js/jquery.js +6 -0
  61. package/dist/paperjs/docs/assets/js/paper.js +17472 -0
  62. package/dist/paperjs/docs/classes/Color.html +2188 -0
  63. package/dist/paperjs/docs/classes/CompoundPath.html +8877 -0
  64. package/dist/paperjs/docs/classes/Curve.html +2323 -0
  65. package/dist/paperjs/docs/classes/CurveLocation.html +672 -0
  66. package/dist/paperjs/docs/classes/Event.html +176 -0
  67. package/dist/paperjs/docs/classes/Gradient.html +240 -0
  68. package/dist/paperjs/docs/classes/GradientStop.html +273 -0
  69. package/dist/paperjs/docs/classes/Group.html +6864 -0
  70. package/dist/paperjs/docs/classes/HitResult.html +239 -0
  71. package/dist/paperjs/docs/classes/Item.html +6628 -0
  72. package/dist/paperjs/docs/classes/Key.html +139 -0
  73. package/dist/paperjs/docs/classes/KeyEvent.html +308 -0
  74. package/dist/paperjs/docs/classes/Layer.html +6850 -0
  75. package/dist/paperjs/docs/classes/Matrix.html +1744 -0
  76. package/dist/paperjs/docs/classes/MouseEvent.html +355 -0
  77. package/dist/paperjs/docs/classes/PaperScope.html +459 -0
  78. package/dist/paperjs/docs/classes/PaperScript.html +198 -0
  79. package/dist/paperjs/docs/classes/Path.html +11775 -0
  80. package/dist/paperjs/docs/classes/PathItem.html +8639 -0
  81. package/dist/paperjs/docs/classes/Point.html +2699 -0
  82. package/dist/paperjs/docs/classes/PointText.html +7029 -0
  83. package/dist/paperjs/docs/classes/Project.html +1305 -0
  84. package/dist/paperjs/docs/classes/Raster.html +7843 -0
  85. package/dist/paperjs/docs/classes/Rectangle.html +1654 -0
  86. package/dist/paperjs/docs/classes/Segment.html +939 -0
  87. package/dist/paperjs/docs/classes/Shape.html +7363 -0
  88. package/dist/paperjs/docs/classes/Size.html +1825 -0
  89. package/dist/paperjs/docs/classes/Style.html +919 -0
  90. package/dist/paperjs/docs/classes/SymbolDefinition.html +311 -0
  91. package/dist/paperjs/docs/classes/SymbolItem.html +6755 -0
  92. package/dist/paperjs/docs/classes/TextItem.html +6869 -0
  93. package/dist/paperjs/docs/classes/Tool.html +761 -0
  94. package/dist/paperjs/docs/classes/ToolEvent.html +446 -0
  95. package/dist/paperjs/docs/classes/Tween.html +374 -0
  96. package/dist/paperjs/docs/classes/View.html +1772 -0
  97. package/dist/paperjs/docs/classes/global.html +425 -0
  98. package/dist/paperjs/docs/classes/index.html +88 -0
  99. package/dist/paperjs/docs/index.html +11 -0
  100. package/dist/paperjs/examples/Animated/AnimatedStar.html +53 -0
  101. package/dist/paperjs/examples/Animated/BooleanOperations.html +115 -0
  102. package/dist/paperjs/examples/Animated/CandyCrash.html +151 -0
  103. package/dist/paperjs/examples/Animated/Extruded.html +50 -0
  104. package/dist/paperjs/examples/Animated/Lines.html +53 -0
  105. package/dist/paperjs/examples/Animated/Smoothing.html +70 -0
  106. package/dist/paperjs/examples/Animated/Space.html +86 -0
  107. package/dist/paperjs/examples/Animated/SpaceUsingShapes.html +79 -0
  108. package/dist/paperjs/examples/Games/Paperoids.html +569 -0
  109. package/dist/paperjs/examples/JSON/Circle Testing.html +34 -0
  110. package/dist/paperjs/examples/JSON/Compound Path.html +25 -0
  111. package/dist/paperjs/examples/JSON/Empty Path Testing.html +31 -0
  112. package/dist/paperjs/examples/JSON/Gradients.html +34 -0
  113. package/dist/paperjs/examples/JSON/Group Transform.html +28 -0
  114. package/dist/paperjs/examples/JSON/Line Testing.html +44 -0
  115. package/dist/paperjs/examples/JSON/Random Path Testing.html +42 -0
  116. package/dist/paperjs/examples/JSON/Raster.html +29 -0
  117. package/dist/paperjs/examples/JSON/Rect and Attribute Testing.html +56 -0
  118. package/dist/paperjs/examples/JSON/Rotated Primitives.html +55 -0
  119. package/dist/paperjs/examples/JSON/Selection.html +43 -0
  120. package/dist/paperjs/examples/JSON/Shapes.html +54 -0
  121. package/dist/paperjs/examples/JSON/Symbols.html +30 -0
  122. package/dist/paperjs/examples/JSON/Text Testing.html +38 -0
  123. package/dist/paperjs/examples/JSON/Tiger.html +19 -0
  124. package/dist/paperjs/examples/JSON/Transform Test 1.html +32 -0
  125. package/dist/paperjs/examples/JSON/Transform Test 2.html +30 -0
  126. package/dist/paperjs/examples/Node.js/AnimatedStar.js +52 -0
  127. package/dist/paperjs/examples/Node.js/BooleanOperations.js +36 -0
  128. package/dist/paperjs/examples/Node.js/JSONtoPDF.js +20 -0
  129. package/dist/paperjs/examples/Node.js/Raster.js +32 -0
  130. package/dist/paperjs/examples/Node.js/RasterRemote.js +33 -0
  131. package/dist/paperjs/examples/Node.js/SvgExport.js +52 -0
  132. package/dist/paperjs/examples/Node.js/SvgImport.js +23 -0
  133. package/dist/paperjs/examples/Node.js/Tadpoles.js +16 -0
  134. package/dist/paperjs/examples/Node.js/Tadpoles.pjs +278 -0
  135. package/dist/paperjs/examples/Node.js/in.json +1 -0
  136. package/dist/paperjs/examples/Node.js/in.svg +16 -0
  137. package/dist/paperjs/examples/Paperjs.org/BooleanOperattions.html +115 -0
  138. package/dist/paperjs/examples/Paperjs.org/BouncingBalls.html +103 -0
  139. package/dist/paperjs/examples/Paperjs.org/Chain.html +54 -0
  140. package/dist/paperjs/examples/Paperjs.org/DivisionRaster.html +72 -0
  141. package/dist/paperjs/examples/Paperjs.org/FutureSplash.html +122 -0
  142. package/dist/paperjs/examples/Paperjs.org/HitTesting.html +103 -0
  143. package/dist/paperjs/examples/Paperjs.org/InteractiveTiger.html +777 -0
  144. package/dist/paperjs/examples/Paperjs.org/MetaBalls.html +132 -0
  145. package/dist/paperjs/examples/Paperjs.org/NyanRainbow.html +202 -0
  146. package/dist/paperjs/examples/Paperjs.org/PathIntersections.html +76 -0
  147. package/dist/paperjs/examples/Paperjs.org/Qbertify.html +146 -0
  148. package/dist/paperjs/examples/Paperjs.org/RadialRainbows.html +80 -0
  149. package/dist/paperjs/examples/Paperjs.org/RoundedRectangles.html +41 -0
  150. package/dist/paperjs/examples/Paperjs.org/SatieLikedToDraw.html +140 -0
  151. package/dist/paperjs/examples/Paperjs.org/Simplify.html +63 -0
  152. package/dist/paperjs/examples/Paperjs.org/SpiralRaster.html +120 -0
  153. package/dist/paperjs/examples/Paperjs.org/Tadpoles.html +283 -0
  154. package/dist/paperjs/examples/Paperjs.org/Voronoi.html +134 -0
  155. package/dist/paperjs/examples/Rasters/PhyllotaxisRaster.html +96 -0
  156. package/dist/paperjs/examples/Rasters/Raster.html +34 -0
  157. package/dist/paperjs/examples/Rasters/RotationRaster.html +44 -0
  158. package/dist/paperjs/examples/Rasters/Smoothing.html +36 -0
  159. package/dist/paperjs/examples/SVG Export/Circle Testing.html +32 -0
  160. package/dist/paperjs/examples/SVG Export/Clipping.html +17 -0
  161. package/dist/paperjs/examples/SVG Export/Compound Path.html +22 -0
  162. package/dist/paperjs/examples/SVG Export/Empty Path Testing.html +28 -0
  163. package/dist/paperjs/examples/SVG Export/Gradients.html +52 -0
  164. package/dist/paperjs/examples/SVG Export/Group Transform.html +25 -0
  165. package/dist/paperjs/examples/SVG Export/Line Testing.html +41 -0
  166. package/dist/paperjs/examples/SVG Export/Random Path Testing.html +39 -0
  167. package/dist/paperjs/examples/SVG Export/Raster.html +21 -0
  168. package/dist/paperjs/examples/SVG Export/Rect and Attribute Testing.html +53 -0
  169. package/dist/paperjs/examples/SVG Export/Rotated Primitives.html +80 -0
  170. package/dist/paperjs/examples/SVG Export/Shapes.html +58 -0
  171. package/dist/paperjs/examples/SVG Export/Symbols.html +27 -0
  172. package/dist/paperjs/examples/SVG Export/Text Testing.html +45 -0
  173. package/dist/paperjs/examples/SVG Export/Tiger.html +23 -0
  174. package/dist/paperjs/examples/SVG Export/Transform Test 1.html +29 -0
  175. package/dist/paperjs/examples/SVG Export/Transform Test 2.html +27 -0
  176. package/dist/paperjs/examples/SVG Import/Arcs.html +78 -0
  177. package/dist/paperjs/examples/SVG Import/Butterfly.html +223 -0
  178. package/dist/paperjs/examples/SVG Import/Circle and Ellipse Testing.html +26 -0
  179. package/dist/paperjs/examples/SVG Import/Clipping.html +100 -0
  180. package/dist/paperjs/examples/SVG Import/From File.html +30 -0
  181. package/dist/paperjs/examples/SVG Import/Gradient.html +138 -0
  182. package/dist/paperjs/examples/SVG Import/Gradients.html +30 -0
  183. package/dist/paperjs/examples/SVG Import/Inkscape Pivot.html +52 -0
  184. package/dist/paperjs/examples/SVG Import/Inkscape.html +88 -0
  185. package/dist/paperjs/examples/SVG Import/Line Testing.html +24 -0
  186. package/dist/paperjs/examples/SVG Import/MoreGradients.html +107 -0
  187. package/dist/paperjs/examples/SVG Import/Multiple Paths Test 1.html +42 -0
  188. package/dist/paperjs/examples/SVG Import/Multiple Paths Test 2.html +33 -0
  189. package/dist/paperjs/examples/SVG Import/Nested Groups Test.html +78 -0
  190. package/dist/paperjs/examples/SVG Import/Polybezier.html +43 -0
  191. package/dist/paperjs/examples/SVG Import/Rect Testing.html +25 -0
  192. package/dist/paperjs/examples/SVG Import/Symbols.html +24 -0
  193. package/dist/paperjs/examples/SVG Import/Testing.html +40 -0
  194. package/dist/paperjs/examples/SVG Import/Text Testing.html +19 -0
  195. package/dist/paperjs/examples/SVG Import/Tiger.html +742 -0
  196. package/dist/paperjs/examples/SVG Import/Transform Testing.html +22 -0
  197. package/dist/paperjs/examples/SVG Import/Viewbox.html +38 -0
  198. package/dist/paperjs/examples/Scripts/Arcs.html +39 -0
  199. package/dist/paperjs/examples/Scripts/BlendModes.html +77 -0
  200. package/dist/paperjs/examples/Scripts/BooleanOperations.html +937 -0
  201. package/dist/paperjs/examples/Scripts/CompoundPath.html +19 -0
  202. package/dist/paperjs/examples/Scripts/CurveTimeParameterization.html +61 -0
  203. package/dist/paperjs/examples/Scripts/HslColor.html +53 -0
  204. package/dist/paperjs/examples/Scripts/PathStructure.html +82 -0
  205. package/dist/paperjs/examples/Scripts/PathTangents.html +73 -0
  206. package/dist/paperjs/examples/Scripts/Resize.html +42 -0
  207. package/dist/paperjs/examples/Scripts/RoundRectangle.html +28 -0
  208. package/dist/paperjs/examples/Scripts/Shapes.html +54 -0
  209. package/dist/paperjs/examples/Scripts/StrokeBounds.html +101 -0
  210. package/dist/paperjs/examples/Scripts/StrokeScaling.html +65 -0
  211. package/dist/paperjs/examples/Tools/BezierTool.html +90 -0
  212. package/dist/paperjs/examples/Tools/Circles.html +28 -0
  213. package/dist/paperjs/examples/Tools/Clouds.html +35 -0
  214. package/dist/paperjs/examples/Tools/DrippingBrush.html +73 -0
  215. package/dist/paperjs/examples/Tools/FancyBrush.html +82 -0
  216. package/dist/paperjs/examples/Tools/Grid.html +44 -0
  217. package/dist/paperjs/examples/Tools/MultiLines.html +44 -0
  218. package/dist/paperjs/examples/Tools/MultipleTools.html +44 -0
  219. package/dist/paperjs/examples/Tools/PathEditing.html +95 -0
  220. package/dist/paperjs/examples/Tools/SquareRounded.html +76 -0
  221. package/dist/paperjs/examples/Tools/Stars.html +38 -0
  222. package/dist/paperjs/examples/Tools/Vektor.html +200 -0
  223. package/dist/paperjs/examples/Tools/Wave.html +50 -0
  224. package/dist/paperjs/examples/Tools/WormFarm.html +88 -0
  225. package/dist/paperjs/examples/Worker/Main.html +53 -0
  226. package/dist/paperjs/examples/Worker/Worker.js +14 -0
  227. package/dist/paperjs/examples/css/style.css +12 -0
  228. package/package.json +4 -4
package/dist/paperjs/docs/classes/Color.html ADDED
@@ -0,0 +1,2188 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>Color</title>
6
+ <base target="class-frame">
7
+ <link href="../assets/css/docs.css" rel="stylesheet" type="text/css">
8
+ <script src="../assets/js/paper.js"></script>
9
+ <script src="../assets/js/jquery.js"></script>
10
+ <script src="../assets/js/codemirror.js"></script>
11
+ <script src="../assets/js/docs.js"></script>
12
+ </head>
13
+ <body>
14
+ <article class="reference">
15
+ <div class="reference-class">
16
+ <h1>Color</h1>
17
+
18
+ <p>All properties and functions that expect color values in the form of instances of Color objects, also accept named colors and hex values as strings which are then converted to instances of <a href="../classes/Color.html"><tt>Color</tt></a> internally.</p>
19
+ <h4>Example:<span class="description">Named color values:</span></h4>
20
+
21
+ <div class="paperscript split">
22
+
23
+ <div class="buttons">
24
+ <div class="button run">Run</div>
25
+ </div>
26
+
27
+ <script type="text/paperscript" canvas="canvas-0">
28
+ // Create a circle shaped path at {x: 80, y: 50}
29
+ // with a radius of 30.
30
+ var circle = new Path.Circle(new Point(80, 50), 30);
31
+
32
+ // Pass a color name to the fillColor property, which is internally
33
+ // converted to a Color.
34
+ circle.fillColor = 'green';
35
+ </script>
36
+ <div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
37
+ </div>
38
+
39
+
40
+ <h4>Example:<span class="description">Hex color values:</span></h4>
41
+
42
+ <div class="paperscript split">
43
+
44
+ <div class="buttons">
45
+ <div class="button run">Run</div>
46
+ </div>
47
+
48
+ <script type="text/paperscript" canvas="canvas-1">
49
+ // Create a circle shaped path at {x: 80, y: 50}
50
+ // with a radius of 30.
51
+ var circle = new Path.Circle(new Point(80, 50), 30);
52
+
53
+ // Pass a hex string to the fillColor property, which is internally
54
+ // converted to a Color.
55
+ circle.fillColor = '#ff0000';
56
+ </script>
57
+ <div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
58
+ </div>
59
+
60
+
61
+ </div>
62
+
63
+ <!-- =============================== constructors ========================== -->
64
+ <div class="reference-members">
65
+ <h2>Constructors</h2>
66
+
67
+
68
+ <div id="color-red-green-blue" class="member">
69
+ <div class="member-link">
70
+ <a name="color-red-green-blue" href="#color-red-green-blue"><tt><b>Color</b>(red, green, blue[, alpha])</tt></a>
71
+ </div>
72
+ <div class="member-description hidden">
73
+ <div class="member-text">
74
+ <p>Creates a RGB Color object.</p>
75
+
76
+
77
+ <ul class="member-list">
78
+ <h4>Parameters:</h4>
79
+
80
+ <li>
81
+ <tt>red:</tt>
82
+ <tt>Number</tt>
83
+ &mdash;&nbsp;the amount of red in the color as a value between <code>0</code> and <code>1</code>
84
+
85
+ </li>
86
+
87
+ <li>
88
+ <tt>green:</tt>
89
+ <tt>Number</tt>
90
+ &mdash;&nbsp;the amount of green in the color as a value between <code>0</code> and <code>1</code>
91
+
92
+ </li>
93
+
94
+ <li>
95
+ <tt>blue:</tt>
96
+ <tt>Number</tt>
97
+ &mdash;&nbsp;the amount of blue in the color as a value between <code>0</code> and <code>1</code>
98
+
99
+ </li>
100
+
101
+ <li>
102
+ <tt>alpha:</tt>
103
+ <tt>Number</tt>
104
+ &mdash;&nbsp;the alpha of the color as a value between <code>0</code> and <code>1</code>
105
+ &mdash;&nbsp;optional
106
+ </li>
107
+
108
+ </ul>
109
+
110
+
111
+ <ul class="member-list">
112
+ <h4>Returns:</h4>
113
+
114
+ <li>
115
+ <tt><a href="../classes/Color.html"><tt>Color</tt></a></tt>
116
+ </li>
117
+
118
+
119
+ </ul>
120
+
121
+
122
+
123
+
124
+ <h4>Example:<span class="description">Creating a RGB Color:</span></h4>
125
+
126
+ <div class="paperscript split">
127
+
128
+ <div class="buttons">
129
+ <div class="button run">Run</div>
130
+ </div>
131
+
132
+ <script type="text/paperscript" canvas="canvas-2">
133
+ // Create a circle shaped path at {x: 80, y: 50}
134
+ // with a radius of 30:
135
+ var circle = new Path.Circle(new Point(80, 50), 30);
136
+
137
+ // 100% red, 0% blue, 50% blue:
138
+ circle.fillColor = new Color(1, 0, 0.5);
139
+ </script>
140
+ <div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
141
+ </div>
142
+
143
+
144
+ </div>
145
+ </div>
146
+ </div>
147
+
148
+
149
+ <div id="color-gray" class="member">
150
+ <div class="member-link">
151
+ <a name="color-gray" href="#color-gray"><tt><b>Color</b>(gray[, alpha])</tt></a>
152
+ </div>
153
+ <div class="member-description hidden">
154
+ <div class="member-text">
155
+ <p>Creates a gray Color object.</p>
156
+
157
+
158
+ <ul class="member-list">
159
+ <h4>Parameters:</h4>
160
+
161
+ <li>
162
+ <tt>gray:</tt>
163
+ <tt>Number</tt>
164
+ &mdash;&nbsp;the amount of gray in the color as a value between <code>0</code> and <code>1</code>
165
+
166
+ </li>
167
+
168
+ <li>
169
+ <tt>alpha:</tt>
170
+ <tt>Number</tt>
171
+ &mdash;&nbsp;the alpha of the color as a value between <code>0</code> and <code>1</code>
172
+ &mdash;&nbsp;optional
173
+ </li>
174
+
175
+ </ul>
176
+
177
+
178
+ <ul class="member-list">
179
+ <h4>Returns:</h4>
180
+
181
+ <li>
182
+ <tt><a href="../classes/Color.html"><tt>Color</tt></a></tt>
183
+ </li>
184
+
185
+
186
+ </ul>
187
+
188
+
189
+
190
+
191
+ <h4>Example:<span class="description">Creating a gray Color:</span></h4>
192
+
193
+ <div class="paperscript split">
194
+
195
+ <div class="buttons">
196
+ <div class="button run">Run</div>
197
+ </div>
198
+
199
+ <script type="text/paperscript" canvas="canvas-3">
200
+ // Create a circle shaped path at {x: 80, y: 50}
201
+ // with a radius of 30:
202
+ var circle = new Path.Circle(new Point(80, 50), 30);
203
+
204
+ // Create a GrayColor with 50% gray:
205
+ circle.fillColor = new Color(0.5);
206
+ </script>
207
+ <div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
208
+ </div>
209
+
210
+
211
+ </div>
212
+ </div>
213
+ </div>
214
+
215
+
216
+ <div id="color-object" class="member">
217
+ <div class="member-link">
218
+ <a name="color-object" href="#color-object"><tt><b>Color</b>(object)</tt></a>
219
+ </div>
220
+ <div class="member-description hidden">
221
+ <div class="member-text">
222
+ <p>Creates a HSB, HSL or gradient Color object from the properties of the provided object:</p>
223
+ <ul class="member-list">
224
+ <h4>Options:</h4>
225
+ <li><tt>hsb.hue: <tt>Number</tt></tt> &mdash; the hue of the color as a value in degrees between <code>0</code> and <code>360</code></li>
226
+ <li><tt>hsb.saturation: <tt>Number</tt></tt> &mdash; the saturation of the color as a value between <code>0</code> and <code>1</code></li>
227
+ <li><tt>hsb.brightness: <tt>Number</tt></tt> &mdash; the brightness of the color as a value between <code>0</code> and <code>1</code></li>
228
+ <li><tt>hsb.alpha: <tt>Number</tt></tt> &mdash; the alpha of the color as a value between <code>0</code> and <code>1</code></li>
229
+ <li><tt>hsl.hue: <tt>Number</tt></tt> &mdash; the hue of the color as a value in degrees between <code>0</code> and <code>360</code></li>
230
+ <li><tt>hsl.saturation: <tt>Number</tt></tt> &mdash; the saturation of the color as a value between <code>0</code> and <code>1</code></li>
231
+ <li><tt>hsl.lightness: <tt>Number</tt></tt> &mdash; the lightness of the color as a value between <code>0</code> and <code>1</code><br></li>
232
+ <li><tt>hsl.alpha: <tt>Number</tt></tt> &mdash; the alpha of the color as a value between <code>0</code> and <code>1</code></li>
233
+ <li><tt>gradient.gradient: <a href="../classes/Gradient.html"><tt>Gradient</tt></a></tt> &mdash; the gradient object that describes the color stops and type of gradient to be used</li>
234
+ <li><tt>gradient.origin: <a href="../classes/Point.html"><tt>Point</tt></a></tt> &mdash; the origin point of the gradient</li>
235
+ <li><tt>gradient.destination: <a href="../classes/Point.html"><tt>Point</tt></a></tt> &mdash; the destination point of the gradient</li>
236
+ <li><tt>gradient.stops: Array of <a href="../classes/GradientStop.html"><tt>GradientStop</tt></a> objects</tt> &mdash; the gradient stops describing the gradient, as an alternative to providing a gradient object</li>
237
+ <li><tt>gradient.radial: <tt>Boolean</tt></tt> &mdash; controls whether the gradient is radial, as an alternative to providing a gradient object</li>
238
+ </ul>
239
+
240
+ <ul class="member-list">
241
+ <h4>Parameters:</h4>
242
+
243
+ <li>
244
+ <tt>object:</tt>
245
+ <tt>Object</tt>
246
+ &mdash;&nbsp;an object describing the components and properties of the color
247
+
248
+ </li>
249
+
250
+ </ul>
251
+
252
+
253
+ <ul class="member-list">
254
+ <h4>Returns:</h4>
255
+
256
+ <li>
257
+ <tt><a href="../classes/Color.html"><tt>Color</tt></a></tt>
258
+ </li>
259
+
260
+
261
+ </ul>
262
+
263
+
264
+
265
+
266
+ <h4>Example:<span class="description">Creating a HSB Color:</span></h4>
267
+
268
+ <div class="paperscript split">
269
+
270
+ <div class="buttons">
271
+ <div class="button run">Run</div>
272
+ </div>
273
+
274
+ <script type="text/paperscript" canvas="canvas-4">
275
+ // Create a circle shaped path at {x: 80, y: 50}
276
+ // with a radius of 30:
277
+ var circle = new Path.Circle(new Point(80, 50), 30);
278
+
279
+ // Create an HSB Color with a hue of 90 degrees, a saturation
280
+ // 100% and a brightness of 100%:
281
+ circle.fillColor = { hue: 90, saturation: 1, brightness: 1 };
282
+ </script>
283
+ <div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
284
+ </div>
285
+
286
+
287
+ <h4>Example:<span class="description">Creating a HSL Color:</span></h4>
288
+
289
+ <div class="paperscript split">
290
+
291
+ <div class="buttons">
292
+ <div class="button run">Run</div>
293
+ </div>
294
+
295
+ <script type="text/paperscript" canvas="canvas-5">
296
+ // Create a circle shaped path at {x: 80, y: 50}
297
+ // with a radius of 30:
298
+ var circle = new Path.Circle(new Point(80, 50), 30);
299
+
300
+ // Create an HSL Color with a hue of 90 degrees, a saturation
301
+ // 100% and a lightness of 50%:
302
+ circle.fillColor = { hue: 90, saturation: 1, lightness: 0.5 };
303
+ </script>
304
+ <div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
305
+ </div>
306
+
307
+
308
+ <h4>Example:<span class="description">Creating a gradient color from an object literal:</span></h4>
309
+
310
+ <div class="paperscript split">
311
+
312
+ <div class="buttons">
313
+ <div class="button run">Run</div>
314
+ </div>
315
+
316
+ <script type="text/paperscript" canvas="canvas-6">
317
+ // Define two points which we will be using to construct
318
+ // the path and to position the gradient color:
319
+ var topLeft = view.center - [80, 80];
320
+ var bottomRight = view.center + [80, 80];
321
+
322
+ var path = new Path.Rectangle({
323
+ topLeft: topLeft,
324
+ bottomRight: bottomRight,
325
+ // Fill the path with a gradient of three color stops
326
+ // that runs between the two points we defined earlier:
327
+ fillColor: {
328
+ stops: ['yellow', 'red', 'blue'],
329
+ origin: topLeft,
330
+ destination: bottomRight
331
+ }
332
+ });
333
+ </script>
334
+ <div class="canvas"><canvas width="516" height="200" id="canvas-6"></canvas></div>
335
+ </div>
336
+
337
+
338
+ </div>
339
+ </div>
340
+ </div>
341
+
342
+
343
+ <div id="color-color" class="member">
344
+ <div class="member-link">
345
+ <a name="color-color" href="#color-color"><tt><b>Color</b>(color)</tt></a>
346
+ </div>
347
+ <div class="member-description hidden">
348
+ <div class="member-text">
349
+ <p>Creates a Color object from a CSS string. All common CSS color string formats are supported: - Named colors (e.g. <code>&#39;red&#39;</code>, <code>&#39;fuchsia&#39;</code>, …) - Hex strings (<code>&#39;#ffff00&#39;</code>, <code>&#39;#ff0&#39;</code>, …) - RGB strings (<code>&#39;rgb(255, 128, 0)&#39;</code>, <code>&#39;rgba(255, 128, 0, 0.5)&#39;</code>, …) - HSL strings (<code>&#39;hsl(180deg, 20%, 50%)&#39;</code>, <code>&#39;hsla(3.14rad, 20%, 50%, 0.5)&#39;</code>, …)</p>
350
+
351
+
352
+ <ul class="member-list">
353
+ <h4>Parameters:</h4>
354
+
355
+ <li>
356
+ <tt>color:</tt>
357
+ <tt>String</tt>
358
+ &mdash;&nbsp;the color&rsquo;s CSS string representation
359
+
360
+ </li>
361
+
362
+ </ul>
363
+
364
+
365
+ <ul class="member-list">
366
+ <h4>Returns:</h4>
367
+
368
+ <li>
369
+ <tt><a href="../classes/Color.html"><tt>Color</tt></a></tt>
370
+ </li>
371
+
372
+
373
+ </ul>
374
+
375
+
376
+
377
+
378
+ <h4>Example:</h4>
379
+
380
+ <div class="paperscript split">
381
+
382
+ <div class="buttons">
383
+ <div class="button run">Run</div>
384
+ </div>
385
+
386
+ <script type="text/paperscript" canvas="canvas-7">
387
+ var circle = new Path.Circle({
388
+ center: [80, 50],
389
+ radius: 30,
390
+ fillColor: new Color('rgba(255, 255, 0, 0.5)')
391
+ });
392
+ </script>
393
+ <div class="canvas"><canvas width="516" height="100" id="canvas-7"></canvas></div>
394
+ </div>
395
+
396
+
397
+ </div>
398
+ </div>
399
+ </div>
400
+
401
+
402
+ <div id="color-gradient-origin-destination" class="member">
403
+ <div class="member-link">
404
+ <a name="color-gradient-origin-destination" href="#color-gradient-origin-destination"><tt><b>Color</b>(gradient, origin, destination[, highlight])</tt></a>
405
+ </div>
406
+ <div class="member-description hidden">
407
+ <div class="member-text">
408
+ <p>Creates a gradient Color object.</p>
409
+
410
+
411
+ <ul class="member-list">
412
+ <h4>Parameters:</h4>
413
+
414
+ <li>
415
+ <tt>gradient:</tt>
416
+ <a href="../classes/Gradient.html"><tt>Gradient</tt></a>
417
+
418
+
419
+ </li>
420
+
421
+ <li>
422
+ <tt>origin:</tt>
423
+ <a href="../classes/Point.html"><tt>Point</tt></a>
424
+
425
+
426
+ </li>
427
+
428
+ <li>
429
+ <tt>destination:</tt>
430
+ <a href="../classes/Point.html"><tt>Point</tt></a>
431
+
432
+
433
+ </li>
434
+
435
+ <li>
436
+ <tt>highlight:</tt>
437
+ <a href="../classes/Point.html"><tt>Point</tt></a>
438
+
439
+ &mdash;&nbsp;optional
440
+ </li>
441
+
442
+ </ul>
443
+
444
+
445
+ <ul class="member-list">
446
+ <h4>Returns:</h4>
447
+
448
+ <li>
449
+ <tt><a href="../classes/Color.html"><tt>Color</tt></a></tt>
450
+ </li>
451
+
452
+
453
+ </ul>
454
+
455
+
456
+
457
+
458
+ <h4>Example:<span class="description">Applying a linear gradient color containing evenly distributed color stops:</span></h4>
459
+
460
+ <div class="paperscript split">
461
+
462
+ <div class="buttons">
463
+ <div class="button run">Run</div>
464
+ </div>
465
+
466
+ <script type="text/paperscript" canvas="canvas-8">
467
+ // Define two points which we will be using to construct
468
+ // the path and to position the gradient color:
469
+ var topLeft = view.center - [80, 80];
470
+ var bottomRight = view.center + [80, 80];
471
+
472
+ // Create a rectangle shaped path between
473
+ // the topLeft and bottomRight points:
474
+ var path = new Path.Rectangle(topLeft, bottomRight);
475
+
476
+ // Create the gradient, passing it an array of colors to be converted
477
+ // to evenly distributed color stops:
478
+ var gradient = new Gradient(['yellow', 'red', 'blue']);
479
+
480
+ // Have the gradient color run between the topLeft and
481
+ // bottomRight points we defined earlier:
482
+ var gradientColor = new Color(gradient, topLeft, bottomRight);
483
+
484
+ // Set the fill color of the path to the gradient color:
485
+ path.fillColor = gradientColor;
486
+ </script>
487
+ <div class="canvas"><canvas width="516" height="200" id="canvas-8"></canvas></div>
488
+ </div>
489
+
490
+
491
+ <h4>Example:<span class="description">Applying a radial gradient color containing unevenly distributed color stops:</span></h4>
492
+
493
+ <div class="paperscript split">
494
+
495
+ <div class="buttons">
496
+ <div class="button run">Run</div>
497
+ </div>
498
+
499
+ <script type="text/paperscript" canvas="canvas-9">
500
+ // Create a circle shaped path at the center of the view
501
+ // with a radius of 80:
502
+ var path = new Path.Circle({
503
+ center: view.center,
504
+ radius: 80
505
+ });
506
+
507
+ // The stops array: yellow mixes with red between 0 and 15%,
508
+ // 15% to 30% is pure red, red mixes with black between 30% to 100%:
509
+ var stops = [
510
+ ['yellow', 0],
511
+ ['red', 0.15],
512
+ ['red', 0.3],
513
+ ['black', 0.9]
514
+ ];
515
+
516
+ // Create a radial gradient using the color stops array:
517
+ var gradient = new Gradient(stops, true);
518
+
519
+ // We will use the center point of the circle shaped path as
520
+ // the origin point for our gradient color
521
+ var from = path.position;
522
+
523
+ // The destination point of the gradient color will be the
524
+ // center point of the path + 80pt in horizontal direction:
525
+ var to = path.position + [80, 0];
526
+
527
+ // Create the gradient color:
528
+ var gradientColor = new Color(gradient, from, to);
529
+
530
+ // Set the fill color of the path to the gradient color:
531
+ path.fillColor = gradientColor;
532
+ </script>
533
+ <div class="canvas"><canvas width="516" height="200" id="canvas-9"></canvas></div>
534
+ </div>
535
+
536
+
537
+ </div>
538
+ </div>
539
+ </div>
540
+
541
+ </div>
542
+
543
+
544
+
545
+ <!-- ================================ operators ============================ -->
546
+ <div class="reference-members">
547
+ <h2>Operators</h2>
548
+
549
+ <div id="add" class="member">
550
+ <div class="member-link">
551
+ <a name="add" href="#add"><tt><tt><b>+</b>number</tt>, <tt><b>+</b>color</tt></tt></a>
552
+ </div>
553
+ <div class="member-description hidden">
554
+
555
+
556
+ <div class="member-text">
557
+ <p>Returns the addition of the supplied value to both coordinates of the color as a new color. The object itself is not modified!</p>
558
+
559
+ <ul class="member-list">
560
+ <h4>Parameters:</h4>
561
+
562
+ <li>
563
+ <tt>number:</tt>
564
+ <tt>Number</tt>
565
+ &mdash;&nbsp;the number to add
566
+
567
+ </li>
568
+
569
+ </ul>
570
+
571
+
572
+ <ul class="member-list">
573
+ <h4>Returns:</h4>
574
+
575
+ <li>
576
+ <tt><a href="../classes/Color.html"><tt>Color</tt></a></tt>&nbsp;&mdash;&nbsp;the addition of the color and the value as a new color
577
+ </li>
578
+
579
+
580
+ </ul>
581
+
582
+
583
+
584
+
585
+ <h4>Example:</h4>
586
+
587
+
588
+ <pre><code>var color = new Color(0.5, 1, 1);
589
+ var result = color + 1;
590
+ console.log(result); // { red: 1, blue: 1, green: 1 }</code></pre>
591
+
592
+ </div>
593
+
594
+
595
+
596
+ <div class="member-text">
597
+ <p>Returns the addition of the supplied color to the color as a new color. The object itself is not modified!</p>
598
+
599
+ <ul class="member-list">
600
+ <h4>Parameters:</h4>
601
+
602
+ <li>
603
+ <tt>color:</tt>
604
+ <a href="../classes/Color.html"><tt>Color</tt></a>
605
+ &mdash;&nbsp;the color to add
606
+
607
+ </li>
608
+
609
+ </ul>
610
+
611
+
612
+ <ul class="member-list">
613
+ <h4>Returns:</h4>
614
+
615
+ <li>
616
+ <tt><a href="../classes/Color.html"><tt>Color</tt></a></tt>&nbsp;&mdash;&nbsp;the addition of the two colors as a new color
617
+ </li>
618
+
619
+
620
+ </ul>
621
+
622
+
623
+
624
+
625
+ <h4>Example:</h4>
626
+
627
+
628
+ <pre><code>var color1 = new Color(0, 1, 1);
629
+ var color2 = new Color(1, 0, 0);
630
+ var result = color1 + color2;
631
+ console.log(result); // { red: 1, blue: 1, green: 1 }</code></pre>
632
+
633
+ </div>
634
+
635
+
636
+ </div>
637
+ </div>
638
+
639
+
640
+ <div id="subtract" class="member">
641
+ <div class="member-link">
642
+ <a name="subtract" href="#subtract"><tt><tt><b>-</b>number</tt>, <tt><b>-</b>color</tt></tt></a>
643
+ </div>
644
+ <div class="member-description hidden">
645
+
646
+
647
+ <div class="member-text">
648
+ <p>Returns the subtraction of the supplied value to both coordinates of the color as a new color. The object itself is not modified!</p>
649
+
650
+ <ul class="member-list">
651
+ <h4>Parameters:</h4>
652
+
653
+ <li>
654
+ <tt>number:</tt>
655
+ <tt>Number</tt>
656
+ &mdash;&nbsp;the number to subtract
657
+
658
+ </li>
659
+
660
+ </ul>
661
+
662
+
663
+ <ul class="member-list">
664
+ <h4>Returns:</h4>
665
+
666
+ <li>
667
+ <tt><a href="../classes/Color.html"><tt>Color</tt></a></tt>&nbsp;&mdash;&nbsp;the subtraction of the color and the value as a new color
668
+ </li>
669
+
670
+
671
+ </ul>
672
+
673
+
674
+
675
+
676
+ <h4>Example:</h4>
677
+
678
+
679
+ <pre><code>var color = new Color(0.5, 1, 1);
680
+ var result = color - 1;
681
+ console.log(result); // { red: 0, blue: 0, green: 0 }</code></pre>
682
+
683
+ </div>
684
+
685
+
686
+
687
+ <div class="member-text">
688
+ <p>Returns the subtraction of the supplied color to the color as a new color. The object itself is not modified!</p>
689
+
690
+ <ul class="member-list">
691
+ <h4>Parameters:</h4>
692
+
693
+ <li>
694
+ <tt>color:</tt>
695
+ <a href="../classes/Color.html"><tt>Color</tt></a>
696
+ &mdash;&nbsp;the color to subtract
697
+
698
+ </li>
699
+
700
+ </ul>
701
+
702
+
703
+ <ul class="member-list">
704
+ <h4>Returns:</h4>
705
+
706
+ <li>
707
+ <tt><a href="../classes/Color.html"><tt>Color</tt></a></tt>&nbsp;&mdash;&nbsp;the subtraction of the two colors as a new color
708
+ </li>
709
+
710
+
711
+ </ul>
712
+
713
+
714
+
715
+
716
+ <h4>Example:</h4>
717
+
718
+
719
+ <pre><code>var color1 = new Color(0, 1, 1);
720
+ var color2 = new Color(1, 0, 0);
721
+ var result = color1 - color2;
722
+ console.log(result); // { red: 0, blue: 1, green: 1 }</code></pre>
723
+
724
+ </div>
725
+
726
+
727
+ </div>
728
+ </div>
729
+
730
+
731
+ <div id="multiply" class="member">
732
+ <div class="member-link">
733
+ <a name="multiply" href="#multiply"><tt><tt><b>*</b>number</tt>, <tt><b>*</b>color</tt></tt></a>
734
+ </div>
735
+ <div class="member-description hidden">
736
+
737
+
738
+ <div class="member-text">
739
+ <p>Returns the multiplication of the supplied value to both coordinates of the color as a new color. The object itself is not modified!</p>
740
+
741
+ <ul class="member-list">
742
+ <h4>Parameters:</h4>
743
+
744
+ <li>
745
+ <tt>number:</tt>
746
+ <tt>Number</tt>
747
+ &mdash;&nbsp;the number to multiply
748
+
749
+ </li>
750
+
751
+ </ul>
752
+
753
+
754
+ <ul class="member-list">
755
+ <h4>Returns:</h4>
756
+
757
+ <li>
758
+ <tt><a href="../classes/Color.html"><tt>Color</tt></a></tt>&nbsp;&mdash;&nbsp;the multiplication of the color and the value as a new color
759
+ </li>
760
+
761
+
762
+ </ul>
763
+
764
+
765
+
766
+
767
+ <h4>Example:</h4>
768
+
769
+
770
+ <pre><code>var color = new Color(0.5, 1, 1);
771
+ var result = color * 0.5;
772
+ console.log(result); // { red: 0.25, blue: 0.5, green: 0.5 }</code></pre>
773
+
774
+ </div>
775
+
776
+
777
+
778
+ <div class="member-text">
779
+ <p>Returns the multiplication of the supplied color to the color as a new color. The object itself is not modified!</p>
780
+
781
+ <ul class="member-list">
782
+ <h4>Parameters:</h4>
783
+
784
+ <li>
785
+ <tt>color:</tt>
786
+ <a href="../classes/Color.html"><tt>Color</tt></a>
787
+ &mdash;&nbsp;the color to multiply
788
+
789
+ </li>
790
+
791
+ </ul>
792
+
793
+
794
+ <ul class="member-list">
795
+ <h4>Returns:</h4>
796
+
797
+ <li>
798
+ <tt><a href="../classes/Color.html"><tt>Color</tt></a></tt>&nbsp;&mdash;&nbsp;the multiplication of the two colors as a new color
799
+ </li>
800
+
801
+
802
+ </ul>
803
+
804
+
805
+
806
+
807
+ <h4>Example:</h4>
808
+
809
+
810
+ <pre><code>var color1 = new Color(0, 1, 1);
811
+ var color2 = new Color(0.5, 0, 0.5);
812
+ var result = color1 * color2;
813
+ console.log(result); // { red: 0, blue: 0, green: 0.5 }</code></pre>
814
+
815
+ </div>
816
+
817
+
818
+ </div>
819
+ </div>
820
+
821
+
822
+ <div id="divide" class="member">
823
+ <div class="member-link">
824
+ <a name="divide" href="#divide"><tt><tt><b>/</b>number</tt>, <tt><b>/</b>color</tt></tt></a>
825
+ </div>
826
+ <div class="member-description hidden">
827
+
828
+
829
+ <div class="member-text">
830
+ <p>Returns the division of the supplied value to both coordinates of the color as a new color. The object itself is not modified!</p>
831
+
832
+ <ul class="member-list">
833
+ <h4>Parameters:</h4>
834
+
835
+ <li>
836
+ <tt>number:</tt>
837
+ <tt>Number</tt>
838
+ &mdash;&nbsp;the number to divide
839
+
840
+ </li>
841
+
842
+ </ul>
843
+
844
+
845
+ <ul class="member-list">
846
+ <h4>Returns:</h4>
847
+
848
+ <li>
849
+ <tt><a href="../classes/Color.html"><tt>Color</tt></a></tt>&nbsp;&mdash;&nbsp;the division of the color and the value as a new color
850
+ </li>
851
+
852
+
853
+ </ul>
854
+
855
+
856
+
857
+
858
+ <h4>Example:</h4>
859
+
860
+
861
+ <pre><code>var color = new Color(0.5, 1, 1);
862
+ var result = color / 2;
863
+ console.log(result); // { red: 0.25, blue: 0.5, green: 0.5 }</code></pre>
864
+
865
+ </div>
866
+
867
+
868
+
869
+ <div class="member-text">
870
+ <p>Returns the division of the supplied color to the color as a new color. The object itself is not modified!</p>
871
+
872
+ <ul class="member-list">
873
+ <h4>Parameters:</h4>
874
+
875
+ <li>
876
+ <tt>color:</tt>
877
+ <a href="../classes/Color.html"><tt>Color</tt></a>
878
+ &mdash;&nbsp;the color to divide
879
+
880
+ </li>
881
+
882
+ </ul>
883
+
884
+
885
+ <ul class="member-list">
886
+ <h4>Returns:</h4>
887
+
888
+ <li>
889
+ <tt><a href="../classes/Color.html"><tt>Color</tt></a></tt>&nbsp;&mdash;&nbsp;the division of the two colors as a new color
890
+ </li>
891
+
892
+
893
+ </ul>
894
+
895
+
896
+
897
+
898
+ <h4>Example:</h4>
899
+
900
+
901
+ <pre><code>var color1 = new Color(0, 1, 1);
902
+ var color2 = new Color(0.5, 0, 0.5);
903
+ var result = color1 / color2;
904
+ console.log(result); // { red: 0, blue: 0, green: 1 }</code></pre>
905
+
906
+ </div>
907
+
908
+
909
+ </div>
910
+ </div>
911
+
912
+
913
+ </div>
914
+
915
+
916
+
917
+ <!-- ================================ properties =========================== -->
918
+ <div class="reference-members">
919
+ <h2>Properties</h2>
920
+
921
+
922
+ <div id="type" class="member">
923
+ <div class="member-link">
924
+ <a name="type" href="#type"><tt><b>type</b></tt></a>
925
+ </div>
926
+ <div class="member-description hidden">
927
+
928
+ <div class="member-text">
929
+ <p>The type of the color as a string.</p>
930
+
931
+
932
+
933
+ <ul class="member-list">
934
+ <h4>Type:</h4>
935
+ <li>
936
+ <tt>String</tt>
937
+ </li>
938
+ </ul>
939
+
940
+
941
+ <h4>Example:</h4>
942
+
943
+
944
+ <pre><code>var color = new Color(1, 0, 0);
945
+ console.log(color.type); // 'rgb'</code></pre>
946
+
947
+ </div>
948
+
949
+ </div>
950
+ </div>
951
+
952
+
953
+ <div id="components" class="member">
954
+ <div class="member-link">
955
+ <a name="components" href="#components"><tt><b>components</b></tt></a>
956
+ </div>
957
+ <div class="member-description hidden">
958
+
959
+ <div class="member-text">
960
+ <p>The color components that define the color, including the alpha value if defined.</p>
961
+
962
+ <p>Read only.</p>
963
+
964
+
965
+
966
+ <ul class="member-list">
967
+ <h4>Type:</h4>
968
+ <li>
969
+ Array of <tt>Numbers</tt>
970
+ </li>
971
+ </ul>
972
+
973
+
974
+
975
+ </div>
976
+
977
+ </div>
978
+ </div>
979
+
980
+
981
+ <div id="alpha" class="member">
982
+ <div class="member-link">
983
+ <a name="alpha" href="#alpha"><tt><b>alpha</b></tt></a>
984
+ </div>
985
+ <div class="member-description hidden">
986
+
987
+ <div class="member-text">
988
+ <p>The color&rsquo;s alpha value as a number between <code>0</code> and <code>1</code>. All colors of the different subclasses support alpha values.</p>
989
+
990
+
991
+
992
+ <ul class="member-list">
993
+ <h4>Default:</h4>
994
+ <li><tt>1</tt></li>
995
+ </ul>
996
+
997
+ <ul class="member-list">
998
+ <h4>Type:</h4>
999
+ <li>
1000
+ <tt>Number</tt>
1001
+ </li>
1002
+ </ul>
1003
+
1004
+
1005
+ <h4>Example:<span class="description">A filled path with a half transparent stroke:</span></h4>
1006
+
1007
+ <div class="paperscript split">
1008
+
1009
+ <div class="buttons">
1010
+ <div class="button run">Run</div>
1011
+ </div>
1012
+
1013
+ <script type="text/paperscript" canvas="canvas-10">
1014
+ var circle = new Path.Circle(new Point(80, 50), 30);
1015
+
1016
+ // Fill the circle with red and give it a 20pt green stroke:
1017
+ circle.style = {
1018
+ fillColor: 'red',
1019
+ strokeColor: 'green',
1020
+ strokeWidth: 20
1021
+ };
1022
+
1023
+ // Make the stroke half transparent:
1024
+ circle.strokeColor.alpha = 0.5;
1025
+ </script>
1026
+ <div class="canvas"><canvas width="516" height="100" id="canvas-10"></canvas></div>
1027
+ </div>
1028
+
1029
+
1030
+ </div>
1031
+
1032
+ </div>
1033
+ </div>
1034
+
1035
+
1036
+ <h3>RGB Components</h3>
1037
+
1038
+ <div id="red" class="member">
1039
+ <div class="member-link">
1040
+ <a name="red" href="#red"><tt><b>red</b></tt></a>
1041
+ </div>
1042
+ <div class="member-description hidden">
1043
+
1044
+ <div class="member-text">
1045
+ <p>The amount of red in the color as a value between <code>0</code> and <code>1</code>.</p>
1046
+
1047
+
1048
+
1049
+ <ul class="member-list">
1050
+ <h4>Type:</h4>
1051
+ <li>
1052
+ <tt>Number</tt>
1053
+ </li>
1054
+ </ul>
1055
+
1056
+
1057
+ <h4>Example:<span class="description">Changing the amount of red in a color:</span></h4>
1058
+
1059
+ <div class="paperscript split">
1060
+
1061
+ <div class="buttons">
1062
+ <div class="button run">Run</div>
1063
+ </div>
1064
+
1065
+ <script type="text/paperscript" canvas="canvas-11">
1066
+ var circle = new Path.Circle(new Point(80, 50), 30);
1067
+ circle.fillColor = 'blue';
1068
+
1069
+ // Blue + red = purple:
1070
+ circle.fillColor.red = 1;
1071
+ </script>
1072
+ <div class="canvas"><canvas width="516" height="100" id="canvas-11"></canvas></div>
1073
+ </div>
1074
+
1075
+
1076
+ </div>
1077
+
1078
+ </div>
1079
+ </div>
1080
+
1081
+
1082
+ <div id="green" class="member">
1083
+ <div class="member-link">
1084
+ <a name="green" href="#green"><tt><b>green</b></tt></a>
1085
+ </div>
1086
+ <div class="member-description hidden">
1087
+
1088
+ <div class="member-text">
1089
+ <p>The amount of green in the color as a value between <code>0</code> and <code>1</code>.</p>
1090
+
1091
+
1092
+
1093
+ <ul class="member-list">
1094
+ <h4>Type:</h4>
1095
+ <li>
1096
+ <tt>Number</tt>
1097
+ </li>
1098
+ </ul>
1099
+
1100
+
1101
+ <h4>Example:<span class="description">Changing the amount of green in a color:</span></h4>
1102
+
1103
+ <div class="paperscript split">
1104
+
1105
+ <div class="buttons">
1106
+ <div class="button run">Run</div>
1107
+ </div>
1108
+
1109
+ <script type="text/paperscript" canvas="canvas-12">
1110
+ var circle = new Path.Circle(new Point(80, 50), 30);
1111
+
1112
+ // First we set the fill color to red:
1113
+ circle.fillColor = 'red';
1114
+
1115
+ // Red + green = yellow:
1116
+ circle.fillColor.green = 1;
1117
+ </script>
1118
+ <div class="canvas"><canvas width="516" height="100" id="canvas-12"></canvas></div>
1119
+ </div>
1120
+
1121
+
1122
+ </div>
1123
+
1124
+ </div>
1125
+ </div>
1126
+
1127
+
1128
+ <div id="blue" class="member">
1129
+ <div class="member-link">
1130
+ <a name="blue" href="#blue"><tt><b>blue</b></tt></a>
1131
+ </div>
1132
+ <div class="member-description hidden">
1133
+
1134
+ <div class="member-text">
1135
+ <p>The amount of blue in the color as a value between <code>0</code> and <code>1</code>.</p>
1136
+
1137
+
1138
+
1139
+ <ul class="member-list">
1140
+ <h4>Type:</h4>
1141
+ <li>
1142
+ <tt>Number</tt>
1143
+ </li>
1144
+ </ul>
1145
+
1146
+
1147
+ <h4>Example:<span class="description">Changing the amount of blue in a color:</span></h4>
1148
+
1149
+ <div class="paperscript split">
1150
+
1151
+ <div class="buttons">
1152
+ <div class="button run">Run</div>
1153
+ </div>
1154
+
1155
+ <script type="text/paperscript" canvas="canvas-13">
1156
+ var circle = new Path.Circle(new Point(80, 50), 30);
1157
+
1158
+ // First we set the fill color to red:
1159
+ circle.fillColor = 'red';
1160
+
1161
+ // Red + blue = purple:
1162
+ circle.fillColor.blue = 1;
1163
+ </script>
1164
+ <div class="canvas"><canvas width="516" height="100" id="canvas-13"></canvas></div>
1165
+ </div>
1166
+
1167
+
1168
+ </div>
1169
+
1170
+ </div>
1171
+ </div>
1172
+
1173
+
1174
+ <h3>Gray Components</h3>
1175
+
1176
+ <div id="gray" class="member">
1177
+ <div class="member-link">
1178
+ <a name="gray" href="#gray"><tt><b>gray</b></tt></a>
1179
+ </div>
1180
+ <div class="member-description hidden">
1181
+
1182
+ <div class="member-text">
1183
+ <p>The amount of gray in the color as a value between <code>0</code> and <code>1</code>.</p>
1184
+
1185
+
1186
+
1187
+ <ul class="member-list">
1188
+ <h4>Type:</h4>
1189
+ <li>
1190
+ <tt>Number</tt>
1191
+ </li>
1192
+ </ul>
1193
+
1194
+
1195
+
1196
+ </div>
1197
+
1198
+ </div>
1199
+ </div>
1200
+
1201
+
1202
+ <h3>HSB Components</h3>
1203
+
1204
+ <div id="hue" class="member">
1205
+ <div class="member-link">
1206
+ <a name="hue" href="#hue"><tt><b>hue</b></tt></a>
1207
+ </div>
1208
+ <div class="member-description hidden">
1209
+
1210
+ <div class="member-text">
1211
+ <p>The hue of the color as a value in degrees between <code>0</code> and <code>360</code>.</p>
1212
+
1213
+
1214
+
1215
+ <ul class="member-list">
1216
+ <h4>Type:</h4>
1217
+ <li>
1218
+ <tt>Number</tt>
1219
+ </li>
1220
+ </ul>
1221
+
1222
+
1223
+ <h4>Example:<span class="description">Changing the hue of a color:</span></h4>
1224
+
1225
+ <div class="paperscript split">
1226
+
1227
+ <div class="buttons">
1228
+ <div class="button run">Run</div>
1229
+ </div>
1230
+
1231
+ <script type="text/paperscript" canvas="canvas-14">
1232
+ var circle = new Path.Circle(new Point(80, 50), 30);
1233
+ circle.fillColor = 'red';
1234
+ circle.fillColor.hue += 30;
1235
+ </script>
1236
+ <div class="canvas"><canvas width="516" height="100" id="canvas-14"></canvas></div>
1237
+ </div>
1238
+
1239
+
1240
+ <h4>Example:<span class="description">Hue cycling:</span></h4>
1241
+
1242
+ <div class="paperscript split">
1243
+
1244
+ <div class="buttons">
1245
+ <div class="button run">Run</div>
1246
+ </div>
1247
+
1248
+ <script type="text/paperscript" canvas="canvas-15">
1249
+ // Create a rectangle shaped path, using the dimensions
1250
+ // of the view:
1251
+ var path = new Path.Rectangle(view.bounds);
1252
+ path.fillColor = 'red';
1253
+
1254
+ function onFrame(event) {
1255
+ path.fillColor.hue += 0.5;
1256
+ }
1257
+ </script>
1258
+ <div class="canvas"><canvas width="516" height="100" id="canvas-15"></canvas></div>
1259
+ </div>
1260
+
1261
+
1262
+ </div>
1263
+
1264
+ </div>
1265
+ </div>
1266
+
1267
+
1268
+ <div id="saturation" class="member">
1269
+ <div class="member-link">
1270
+ <a name="saturation" href="#saturation"><tt><b>saturation</b></tt></a>
1271
+ </div>
1272
+ <div class="member-description hidden">
1273
+
1274
+ <div class="member-text">
1275
+ <p>The saturation of the color as a value between <code>0</code> and <code>1</code>.</p>
1276
+
1277
+
1278
+
1279
+ <ul class="member-list">
1280
+ <h4>Type:</h4>
1281
+ <li>
1282
+ <tt>Number</tt>
1283
+ </li>
1284
+ </ul>
1285
+
1286
+
1287
+
1288
+ </div>
1289
+
1290
+ </div>
1291
+ </div>
1292
+
1293
+
1294
+ <div id="brightness" class="member">
1295
+ <div class="member-link">
1296
+ <a name="brightness" href="#brightness"><tt><b>brightness</b></tt></a>
1297
+ </div>
1298
+ <div class="member-description hidden">
1299
+
1300
+ <div class="member-text">
1301
+ <p>The brightness of the color as a value between <code>0</code> and <code>1</code>.</p>
1302
+
1303
+
1304
+
1305
+ <ul class="member-list">
1306
+ <h4>Type:</h4>
1307
+ <li>
1308
+ <tt>Number</tt>
1309
+ </li>
1310
+ </ul>
1311
+
1312
+
1313
+
1314
+ </div>
1315
+
1316
+ </div>
1317
+ </div>
1318
+
1319
+
1320
+ <h3>HSL Components</h3>
1321
+
1322
+ <div id="lightness" class="member">
1323
+ <div class="member-link">
1324
+ <a name="lightness" href="#lightness"><tt><b>lightness</b></tt></a>
1325
+ </div>
1326
+ <div class="member-description hidden">
1327
+
1328
+ <div class="member-text">
1329
+ <p>The lightness of the color as a value between <code>0</code> and <code>1</code>.</p>
1330
+ <p>Note that all other components are shared with HSB.</p>
1331
+
1332
+
1333
+
1334
+ <ul class="member-list">
1335
+ <h4>Type:</h4>
1336
+ <li>
1337
+ <tt>Number</tt>
1338
+ </li>
1339
+ </ul>
1340
+
1341
+
1342
+
1343
+ </div>
1344
+
1345
+ </div>
1346
+ </div>
1347
+
1348
+
1349
+ <h3>Gradient Components</h3>
1350
+
1351
+ <div id="gradient" class="member">
1352
+ <div class="member-link">
1353
+ <a name="gradient" href="#gradient"><tt><b>gradient</b></tt></a>
1354
+ </div>
1355
+ <div class="member-description hidden">
1356
+
1357
+ <div class="member-text">
1358
+ <p>The gradient object describing the type of gradient and the stops.</p>
1359
+
1360
+
1361
+
1362
+ <ul class="member-list">
1363
+ <h4>Type:</h4>
1364
+ <li>
1365
+ <a href="../classes/Gradient.html"><tt>Gradient</tt></a>
1366
+ </li>
1367
+ </ul>
1368
+
1369
+
1370
+
1371
+ </div>
1372
+
1373
+ </div>
1374
+ </div>
1375
+
1376
+
1377
+ <div id="highlight" class="member">
1378
+ <div class="member-link">
1379
+ <a name="highlight" href="#highlight"><tt><b>highlight</b></tt></a>
1380
+ </div>
1381
+ <div class="member-description hidden">
1382
+
1383
+ <div class="member-text">
1384
+ <p>The highlight point of the gradient.</p>
1385
+
1386
+
1387
+
1388
+ <ul class="member-list">
1389
+ <h4>Type:</h4>
1390
+ <li>
1391
+ <a href="../classes/Point.html"><tt>Point</tt></a>
1392
+ </li>
1393
+ </ul>
1394
+
1395
+
1396
+ <h4>Example:<span class="description">Create a circle shaped path at the center of the view, using 40% of the height of the view as its radius and fill it with a radial gradient color:</span></h4>
1397
+
1398
+ <div class="paperscript split">
1399
+
1400
+ <div class="buttons">
1401
+ <div class="button run">Run</div>
1402
+ </div>
1403
+
1404
+ <script type="text/paperscript" canvas="canvas-16">
1405
+ var path = new Path.Circle({
1406
+ center: view.center,
1407
+ radius: view.bounds.height * 0.4
1408
+ });
1409
+
1410
+ path.fillColor = {
1411
+ gradient: {
1412
+ stops: ['yellow', 'red', 'black'],
1413
+ radial: true
1414
+ },
1415
+ origin: path.position,
1416
+ destination: path.bounds.rightCenter
1417
+ };
1418
+
1419
+ function onMouseMove(event) {
1420
+ // Set the origin highlight of the path's gradient color
1421
+ // to the position of the mouse:
1422
+ path.fillColor.highlight = event.point;
1423
+ }
1424
+ </script>
1425
+ <div class="canvas"><canvas width="516" height="300" id="canvas-16"></canvas></div>
1426
+ </div>
1427
+
1428
+
1429
+ </div>
1430
+
1431
+ </div>
1432
+ </div>
1433
+
1434
+ </div>
1435
+
1436
+
1437
+
1438
+
1439
+
1440
+ <!-- ============================== methods ================================ -->
1441
+ <div class="reference-members">
1442
+ <h2>Methods</h2>
1443
+
1444
+
1445
+ <div id="set-values" class="member">
1446
+ <div class="member-link">
1447
+ <a name="set-values" href="#set-values"><tt><b>set</b>(...values)</tt></a>
1448
+ </div>
1449
+ <div class="member-description hidden">
1450
+ <div class="member-text">
1451
+ <p>Sets the color to the passed values. Note that any sequence of parameters that is supported by the various <a href="../classes/Color.html"><tt>Color</tt></a>() constructors also work for calls of <code>set()</code>.</p>
1452
+
1453
+
1454
+ <ul class="member-list">
1455
+ <h4>Parameters:</h4>
1456
+
1457
+ <li>
1458
+ <tt>values:</tt>
1459
+ <tt>any value</tt>
1460
+
1461
+
1462
+ </li>
1463
+
1464
+ </ul>
1465
+
1466
+
1467
+ <ul class="member-list">
1468
+ <h4>Returns:</h4>
1469
+
1470
+ <li>
1471
+ <tt><a href="../classes/Color.html"><tt>Color</tt></a></tt>
1472
+ </li>
1473
+
1474
+
1475
+ </ul>
1476
+
1477
+
1478
+
1479
+
1480
+
1481
+ </div>
1482
+ </div>
1483
+ </div>
1484
+
1485
+
1486
+ <div id="convert-type" class="member">
1487
+ <div class="member-link">
1488
+ <a name="convert-type" href="#convert-type"><tt><b>convert</b>(type)</tt></a>
1489
+ </div>
1490
+ <div class="member-description hidden">
1491
+ <div class="member-text">
1492
+ <p>Converts the color to another type.</p>
1493
+
1494
+
1495
+ <ul class="member-list">
1496
+ <h4>Parameters:</h4>
1497
+
1498
+ <li>
1499
+ <tt>type:</tt>
1500
+ <tt>String</tt>
1501
+ &mdash;&nbsp;the color type to convert to. Possible values: <tt>&lsquo;rgb&rsquo;</tt>, <tt>&lsquo;gray&rsquo;</tt>, <tt>&lsquo;hsb&rsquo;</tt>, <tt>&lsquo;hsl&rsquo;</tt>
1502
+
1503
+ </li>
1504
+
1505
+ </ul>
1506
+
1507
+
1508
+ <ul class="member-list">
1509
+ <h4>Returns:</h4>
1510
+
1511
+ <li>
1512
+ <tt><a href="../classes/Color.html"><tt>Color</tt></a></tt>&nbsp;&mdash;&nbsp;the converted color as a new instance
1513
+ </li>
1514
+
1515
+
1516
+ </ul>
1517
+
1518
+
1519
+
1520
+
1521
+
1522
+ </div>
1523
+ </div>
1524
+ </div>
1525
+
1526
+
1527
+ <div id="hasalpha" class="member">
1528
+ <div class="member-link">
1529
+ <a name="hasalpha" href="#hasalpha"><tt><b>hasAlpha</b>()</tt></a>
1530
+ </div>
1531
+ <div class="member-description hidden">
1532
+ <div class="member-text">
1533
+ <p>Checks if the color has an alpha value.</p>
1534
+
1535
+
1536
+
1537
+ <ul class="member-list">
1538
+ <h4>Returns:</h4>
1539
+
1540
+ <li>
1541
+ <tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the color has an alpha value, <tt>false</tt> otherwise
1542
+ </li>
1543
+
1544
+
1545
+ </ul>
1546
+
1547
+
1548
+
1549
+
1550
+
1551
+ </div>
1552
+ </div>
1553
+ </div>
1554
+
1555
+
1556
+ <div id="equals-color" class="member">
1557
+ <div class="member-link">
1558
+ <a name="equals-color" href="#equals-color"><tt><b>equals</b>(color)</tt></a>
1559
+ </div>
1560
+ <div class="member-description hidden">
1561
+ <div class="member-text">
1562
+ <p>Checks if the component color values of the color are the same as those of the supplied one.</p>
1563
+
1564
+
1565
+ <ul class="member-list">
1566
+ <h4>Parameters:</h4>
1567
+
1568
+ <li>
1569
+ <tt>color:</tt>
1570
+ <a href="../classes/Color.html"><tt>Color</tt></a>
1571
+ &mdash;&nbsp;the color to compare with
1572
+
1573
+ </li>
1574
+
1575
+ </ul>
1576
+
1577
+
1578
+ <ul class="member-list">
1579
+ <h4>Returns:</h4>
1580
+
1581
+ <li>
1582
+ <tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the colors are the same, <tt>false</tt> otherwise
1583
+ </li>
1584
+
1585
+
1586
+ </ul>
1587
+
1588
+
1589
+
1590
+
1591
+
1592
+ </div>
1593
+ </div>
1594
+ </div>
1595
+
1596
+
1597
+ <div id="clone" class="member">
1598
+ <div class="member-link">
1599
+ <a name="clone" href="#clone"><tt><b>clone</b>()</tt></a>
1600
+ </div>
1601
+ <div class="member-description hidden">
1602
+ <div class="member-text">
1603
+
1604
+
1605
+
1606
+
1607
+ <ul class="member-list">
1608
+ <h4>Returns:</h4>
1609
+
1610
+ <li>
1611
+ <tt><a href="../classes/Color.html"><tt>Color</tt></a></tt>&nbsp;&mdash;&nbsp;a copy of the color object
1612
+ </li>
1613
+
1614
+
1615
+ </ul>
1616
+
1617
+
1618
+
1619
+
1620
+
1621
+ </div>
1622
+ </div>
1623
+ </div>
1624
+
1625
+
1626
+ <h3>String Representations</h3>
1627
+
1628
+ <div id="tostring" class="member">
1629
+ <div class="member-link">
1630
+ <a name="tostring" href="#tostring"><tt><b>toString</b>()</tt></a>
1631
+ </div>
1632
+ <div class="member-description hidden">
1633
+ <div class="member-text">
1634
+
1635
+
1636
+
1637
+
1638
+ <ul class="member-list">
1639
+ <h4>Returns:</h4>
1640
+
1641
+ <li>
1642
+ <tt><tt>String</tt></tt>&nbsp;&mdash;&nbsp;a string representation of the color
1643
+ </li>
1644
+
1645
+
1646
+ </ul>
1647
+
1648
+
1649
+
1650
+
1651
+
1652
+ </div>
1653
+ </div>
1654
+ </div>
1655
+
1656
+
1657
+ <div id="tocss-hex" class="member">
1658
+ <div class="member-link">
1659
+ <a name="tocss-hex" href="#tocss-hex"><tt><b>toCSS</b>(hex)</tt></a>
1660
+ </div>
1661
+ <div class="member-description hidden">
1662
+ <div class="member-text">
1663
+ <p>Returns the color as a CSS string.</p>
1664
+
1665
+
1666
+ <ul class="member-list">
1667
+ <h4>Parameters:</h4>
1668
+
1669
+ <li>
1670
+ <tt>hex:</tt>
1671
+ <tt>Boolean</tt>
1672
+ &mdash;&nbsp;whether to return the color in hexadecimal representation or as a CSS RGB / RGBA string.
1673
+
1674
+ </li>
1675
+
1676
+ </ul>
1677
+
1678
+
1679
+ <ul class="member-list">
1680
+ <h4>Returns:</h4>
1681
+
1682
+ <li>
1683
+ <tt><tt>String</tt></tt>&nbsp;&mdash;&nbsp;a CSS string representation of the color
1684
+ </li>
1685
+
1686
+
1687
+ </ul>
1688
+
1689
+
1690
+
1691
+
1692
+
1693
+ </div>
1694
+ </div>
1695
+ </div>
1696
+
1697
+
1698
+ <div id="transform-matrix" class="member">
1699
+ <div class="member-link">
1700
+ <a name="transform-matrix" href="#transform-matrix"><tt><b>transform</b>(matrix)</tt></a>
1701
+ </div>
1702
+ <div class="member-description hidden">
1703
+ <div class="member-text">
1704
+ <p>Transform the gradient color by the specified matrix.</p>
1705
+
1706
+
1707
+ <ul class="member-list">
1708
+ <h4>Parameters:</h4>
1709
+
1710
+ <li>
1711
+ <tt>matrix:</tt>
1712
+ <a href="../classes/Matrix.html"><tt>Matrix</tt></a>
1713
+ &mdash;&nbsp;the matrix to transform the gradient color by
1714
+
1715
+ </li>
1716
+
1717
+ </ul>
1718
+
1719
+
1720
+
1721
+
1722
+
1723
+
1724
+ </div>
1725
+ </div>
1726
+ </div>
1727
+
1728
+
1729
+
1730
+ <h3>Math Operator Functions</h3>
1731
+
1732
+
1733
+
1734
+ <div id="add-number" class="member">
1735
+ <div class="member-link">
1736
+ <a name="add-number" href="#add-number"><tt><b>add</b>(number)</tt></a>
1737
+ </div>
1738
+ <div class="member-description hidden">
1739
+ <div class="member-text">
1740
+ <p>Returns the addition of the supplied value to both coordinates of the color as a new color. The object itself is not modified!</p>
1741
+
1742
+
1743
+ <ul class="member-list">
1744
+ <h4>Parameters:</h4>
1745
+
1746
+ <li>
1747
+ <tt>number:</tt>
1748
+ <tt>Number</tt>
1749
+ &mdash;&nbsp;the number to add
1750
+
1751
+ </li>
1752
+
1753
+ </ul>
1754
+
1755
+
1756
+ <ul class="member-list">
1757
+ <h4>Returns:</h4>
1758
+
1759
+ <li>
1760
+ <tt><a href="../classes/Color.html"><tt>Color</tt></a></tt>&nbsp;&mdash;&nbsp;the addition of the color and the value as a new color
1761
+ </li>
1762
+
1763
+
1764
+ </ul>
1765
+
1766
+
1767
+
1768
+
1769
+ <h4>Example:</h4>
1770
+
1771
+
1772
+ <pre><code>var color = new Color(0.5, 1, 1);
1773
+ var result = color + 1;
1774
+ console.log(result); // { red: 1, blue: 1, green: 1 }</code></pre>
1775
+
1776
+ </div>
1777
+ </div>
1778
+ </div>
1779
+
1780
+
1781
+ <div id="add-color" class="member">
1782
+ <div class="member-link">
1783
+ <a name="add-color" href="#add-color"><tt><b>add</b>(color)</tt></a>
1784
+ </div>
1785
+ <div class="member-description hidden">
1786
+ <div class="member-text">
1787
+ <p>Returns the addition of the supplied color to the color as a new color. The object itself is not modified!</p>
1788
+
1789
+
1790
+ <ul class="member-list">
1791
+ <h4>Parameters:</h4>
1792
+
1793
+ <li>
1794
+ <tt>color:</tt>
1795
+ <a href="../classes/Color.html"><tt>Color</tt></a>
1796
+ &mdash;&nbsp;the color to add
1797
+
1798
+ </li>
1799
+
1800
+ </ul>
1801
+
1802
+
1803
+ <ul class="member-list">
1804
+ <h4>Returns:</h4>
1805
+
1806
+ <li>
1807
+ <tt><a href="../classes/Color.html"><tt>Color</tt></a></tt>&nbsp;&mdash;&nbsp;the addition of the two colors as a new color
1808
+ </li>
1809
+
1810
+
1811
+ </ul>
1812
+
1813
+
1814
+
1815
+
1816
+ <h4>Example:</h4>
1817
+
1818
+
1819
+ <pre><code>var color1 = new Color(0, 1, 1);
1820
+ var color2 = new Color(1, 0, 0);
1821
+ var result = color1 + color2;
1822
+ console.log(result); // { red: 1, blue: 1, green: 1 }</code></pre>
1823
+
1824
+ </div>
1825
+ </div>
1826
+ </div>
1827
+
1828
+
1829
+
1830
+
1831
+
1832
+ <div id="subtract-number" class="member">
1833
+ <div class="member-link">
1834
+ <a name="subtract-number" href="#subtract-number"><tt><b>subtract</b>(number)</tt></a>
1835
+ </div>
1836
+ <div class="member-description hidden">
1837
+ <div class="member-text">
1838
+ <p>Returns the subtraction of the supplied value to both coordinates of the color as a new color. The object itself is not modified!</p>
1839
+
1840
+
1841
+ <ul class="member-list">
1842
+ <h4>Parameters:</h4>
1843
+
1844
+ <li>
1845
+ <tt>number:</tt>
1846
+ <tt>Number</tt>
1847
+ &mdash;&nbsp;the number to subtract
1848
+
1849
+ </li>
1850
+
1851
+ </ul>
1852
+
1853
+
1854
+ <ul class="member-list">
1855
+ <h4>Returns:</h4>
1856
+
1857
+ <li>
1858
+ <tt><a href="../classes/Color.html"><tt>Color</tt></a></tt>&nbsp;&mdash;&nbsp;the subtraction of the color and the value as a new color
1859
+ </li>
1860
+
1861
+
1862
+ </ul>
1863
+
1864
+
1865
+
1866
+
1867
+ <h4>Example:</h4>
1868
+
1869
+
1870
+ <pre><code>var color = new Color(0.5, 1, 1);
1871
+ var result = color - 1;
1872
+ console.log(result); // { red: 0, blue: 0, green: 0 }</code></pre>
1873
+
1874
+ </div>
1875
+ </div>
1876
+ </div>
1877
+
1878
+
1879
+ <div id="subtract-color" class="member">
1880
+ <div class="member-link">
1881
+ <a name="subtract-color" href="#subtract-color"><tt><b>subtract</b>(color)</tt></a>
1882
+ </div>
1883
+ <div class="member-description hidden">
1884
+ <div class="member-text">
1885
+ <p>Returns the subtraction of the supplied color to the color as a new color. The object itself is not modified!</p>
1886
+
1887
+
1888
+ <ul class="member-list">
1889
+ <h4>Parameters:</h4>
1890
+
1891
+ <li>
1892
+ <tt>color:</tt>
1893
+ <a href="../classes/Color.html"><tt>Color</tt></a>
1894
+ &mdash;&nbsp;the color to subtract
1895
+
1896
+ </li>
1897
+
1898
+ </ul>
1899
+
1900
+
1901
+ <ul class="member-list">
1902
+ <h4>Returns:</h4>
1903
+
1904
+ <li>
1905
+ <tt><a href="../classes/Color.html"><tt>Color</tt></a></tt>&nbsp;&mdash;&nbsp;the subtraction of the two colors as a new color
1906
+ </li>
1907
+
1908
+
1909
+ </ul>
1910
+
1911
+
1912
+
1913
+
1914
+ <h4>Example:</h4>
1915
+
1916
+
1917
+ <pre><code>var color1 = new Color(0, 1, 1);
1918
+ var color2 = new Color(1, 0, 0);
1919
+ var result = color1 - color2;
1920
+ console.log(result); // { red: 0, blue: 1, green: 1 }</code></pre>
1921
+
1922
+ </div>
1923
+ </div>
1924
+ </div>
1925
+
1926
+
1927
+
1928
+
1929
+
1930
+ <div id="multiply-number" class="member">
1931
+ <div class="member-link">
1932
+ <a name="multiply-number" href="#multiply-number"><tt><b>multiply</b>(number)</tt></a>
1933
+ </div>
1934
+ <div class="member-description hidden">
1935
+ <div class="member-text">
1936
+ <p>Returns the multiplication of the supplied value to both coordinates of the color as a new color. The object itself is not modified!</p>
1937
+
1938
+
1939
+ <ul class="member-list">
1940
+ <h4>Parameters:</h4>
1941
+
1942
+ <li>
1943
+ <tt>number:</tt>
1944
+ <tt>Number</tt>
1945
+ &mdash;&nbsp;the number to multiply
1946
+
1947
+ </li>
1948
+
1949
+ </ul>
1950
+
1951
+
1952
+ <ul class="member-list">
1953
+ <h4>Returns:</h4>
1954
+
1955
+ <li>
1956
+ <tt><a href="../classes/Color.html"><tt>Color</tt></a></tt>&nbsp;&mdash;&nbsp;the multiplication of the color and the value as a new color
1957
+ </li>
1958
+
1959
+
1960
+ </ul>
1961
+
1962
+
1963
+
1964
+
1965
+ <h4>Example:</h4>
1966
+
1967
+
1968
+ <pre><code>var color = new Color(0.5, 1, 1);
1969
+ var result = color * 0.5;
1970
+ console.log(result); // { red: 0.25, blue: 0.5, green: 0.5 }</code></pre>
1971
+
1972
+ </div>
1973
+ </div>
1974
+ </div>
1975
+
1976
+
1977
+ <div id="multiply-color" class="member">
1978
+ <div class="member-link">
1979
+ <a name="multiply-color" href="#multiply-color"><tt><b>multiply</b>(color)</tt></a>
1980
+ </div>
1981
+ <div class="member-description hidden">
1982
+ <div class="member-text">
1983
+ <p>Returns the multiplication of the supplied color to the color as a new color. The object itself is not modified!</p>
1984
+
1985
+
1986
+ <ul class="member-list">
1987
+ <h4>Parameters:</h4>
1988
+
1989
+ <li>
1990
+ <tt>color:</tt>
1991
+ <a href="../classes/Color.html"><tt>Color</tt></a>
1992
+ &mdash;&nbsp;the color to multiply
1993
+
1994
+ </li>
1995
+
1996
+ </ul>
1997
+
1998
+
1999
+ <ul class="member-list">
2000
+ <h4>Returns:</h4>
2001
+
2002
+ <li>
2003
+ <tt><a href="../classes/Color.html"><tt>Color</tt></a></tt>&nbsp;&mdash;&nbsp;the multiplication of the two colors as a new color
2004
+ </li>
2005
+
2006
+
2007
+ </ul>
2008
+
2009
+
2010
+
2011
+
2012
+ <h4>Example:</h4>
2013
+
2014
+
2015
+ <pre><code>var color1 = new Color(0, 1, 1);
2016
+ var color2 = new Color(0.5, 0, 0.5);
2017
+ var result = color1 * color2;
2018
+ console.log(result); // { red: 0, blue: 0, green: 0.5 }</code></pre>
2019
+
2020
+ </div>
2021
+ </div>
2022
+ </div>
2023
+
2024
+
2025
+
2026
+
2027
+
2028
+ <div id="divide-number" class="member">
2029
+ <div class="member-link">
2030
+ <a name="divide-number" href="#divide-number"><tt><b>divide</b>(number)</tt></a>
2031
+ </div>
2032
+ <div class="member-description hidden">
2033
+ <div class="member-text">
2034
+ <p>Returns the division of the supplied value to both coordinates of the color as a new color. The object itself is not modified!</p>
2035
+
2036
+
2037
+ <ul class="member-list">
2038
+ <h4>Parameters:</h4>
2039
+
2040
+ <li>
2041
+ <tt>number:</tt>
2042
+ <tt>Number</tt>
2043
+ &mdash;&nbsp;the number to divide
2044
+
2045
+ </li>
2046
+
2047
+ </ul>
2048
+
2049
+
2050
+ <ul class="member-list">
2051
+ <h4>Returns:</h4>
2052
+
2053
+ <li>
2054
+ <tt><a href="../classes/Color.html"><tt>Color</tt></a></tt>&nbsp;&mdash;&nbsp;the division of the color and the value as a new color
2055
+ </li>
2056
+
2057
+
2058
+ </ul>
2059
+
2060
+
2061
+
2062
+
2063
+ <h4>Example:</h4>
2064
+
2065
+
2066
+ <pre><code>var color = new Color(0.5, 1, 1);
2067
+ var result = color / 2;
2068
+ console.log(result); // { red: 0.25, blue: 0.5, green: 0.5 }</code></pre>
2069
+
2070
+ </div>
2071
+ </div>
2072
+ </div>
2073
+
2074
+
2075
+ <div id="divide-color" class="member">
2076
+ <div class="member-link">
2077
+ <a name="divide-color" href="#divide-color"><tt><b>divide</b>(color)</tt></a>
2078
+ </div>
2079
+ <div class="member-description hidden">
2080
+ <div class="member-text">
2081
+ <p>Returns the division of the supplied color to the color as a new color. The object itself is not modified!</p>
2082
+
2083
+
2084
+ <ul class="member-list">
2085
+ <h4>Parameters:</h4>
2086
+
2087
+ <li>
2088
+ <tt>color:</tt>
2089
+ <a href="../classes/Color.html"><tt>Color</tt></a>
2090
+ &mdash;&nbsp;the color to divide
2091
+
2092
+ </li>
2093
+
2094
+ </ul>
2095
+
2096
+
2097
+ <ul class="member-list">
2098
+ <h4>Returns:</h4>
2099
+
2100
+ <li>
2101
+ <tt><a href="../classes/Color.html"><tt>Color</tt></a></tt>&nbsp;&mdash;&nbsp;the division of the two colors as a new color
2102
+ </li>
2103
+
2104
+
2105
+ </ul>
2106
+
2107
+
2108
+
2109
+
2110
+ <h4>Example:</h4>
2111
+
2112
+
2113
+ <pre><code>var color1 = new Color(0, 1, 1);
2114
+ var color2 = new Color(0.5, 0, 0.5);
2115
+ var result = color1 / color2;
2116
+ console.log(result); // { red: 0, blue: 0, green: 1 }</code></pre>
2117
+
2118
+ </div>
2119
+ </div>
2120
+ </div>
2121
+
2122
+
2123
+
2124
+
2125
+ </div>
2126
+
2127
+
2128
+ <div class="reference-members">
2129
+ <h2>Static Methods</h2>
2130
+
2131
+
2132
+ <div id="random" class="member">
2133
+ <div class="member-link">
2134
+ <a name="random" href="#random"><tt><b>Color.random</b>()</tt></a>
2135
+ </div>
2136
+ <div class="member-description hidden">
2137
+ <div class="member-text">
2138
+ <p>Returns a color object with random <a href="../classes/Color.html#red"><tt>red</tt></a>, <a href="../classes/Color.html#green"><tt>green</tt></a> and <a href="../classes/Color.html#blue"><tt>blue</tt></a> values between <code>0</code> and <code>1</code>.</p>
2139
+
2140
+
2141
+
2142
+ <ul class="member-list">
2143
+ <h4>Returns:</h4>
2144
+
2145
+ <li>
2146
+ <tt><a href="../classes/Color.html"><tt>Color</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created color object
2147
+ </li>
2148
+
2149
+
2150
+ </ul>
2151
+
2152
+
2153
+
2154
+
2155
+ <h4>Example:</h4>
2156
+
2157
+ <div class="paperscript split">
2158
+
2159
+ <div class="buttons">
2160
+ <div class="button run">Run</div>
2161
+ </div>
2162
+
2163
+ <script type="text/paperscript" canvas="canvas-17">
2164
+ var circle = new Path.Circle(view.center, 50);
2165
+ // Set a random color as circle fill color.
2166
+ circle.fillColor = Color.random();
2167
+ </script>
2168
+ <div class="canvas"><canvas width="516" height="100" id="canvas-17"></canvas></div>
2169
+ </div>
2170
+
2171
+
2172
+ </div>
2173
+ </div>
2174
+ </div>
2175
+
2176
+ </div>
2177
+
2178
+
2179
+
2180
+ <!-- =========================== copyright notice ========================== -->
2181
+ <p class="footer">
2182
+ Paper.js v0.12.17<br>
2183
+ Copyright &#169; 2011—2022 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
2184
+ <div class="content-end"></div>
2185
+
2186
+
2187
+ </article>
2188
+ </body>