paperjs.github.io/tutorials/geometry/mathematical-operations/index.html at 85d89fb136c6942a163bff5092c774a6c288d8e7 · paperjs/paperjs.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
  <meta name="apple-mobile-web-app-capable" content="yes"/>
  <meta name="apple-touch-fullscreen" content="yes"/>
  <meta name="msapplication-tap-highlight" content="no"/>
  <link rel="stylesheet" href="/assets/css/style.css"/>
  <link rel="icon" href="/assets/favicon.ico" type="image/x-icon"/>
  <link rel="shortcut icon" href="/assets/favicon.ico"/>
  <script src="/assets/js/jquery.js"></script>
  <script src="/assets/js/paper.js"></script>
  <script src="/assets/js/codemirror.js"></script>
  <script src="/assets/js/scripts.js"></script>
  <script>
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-10082945-6']);
    _gaq.push(['_trackPageview']);
    (function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
  </script>
  <title>Paper.js — Mathematical Operations</title>
</head>
  <body>
    <nav>
      <h1><a href="/">Paper.js</a></h1>
<ul>
  <li><a href="/about/">About</a>
  </li>
  <li><a href="/features/">Features</a>
  </li>
  <li class="spacer"></li>
  <li><a href="/examples/">Examples</a>
  </li>
  <li><a href="/showcase/">Showcase</a>
  </li>
  <li class="spacer"></li>
  <li><a href="/tutorials/">Tutorials</a>
<ul>
</ul>
  </li>
  <li><a href="/reference/">Reference</a>
  </li>
  <li><a href="http://sketch.paperjs.org/">Sketch</a>
  </li>
  <li class="spacer"></li>
  <li><a href="/download/">Download</a>
  </li>
  <li><a href="/donation/">Donation</a>
  </li>
  <li><a href="/license/">License</a>
  </li>
  <li class="spacer"></li>
  <li><a href="http://groups.google.com/group/paperjs" target="_blank">Mailing List</a>
  </li>
  <li><a href="http://twitter.com/PaperJS" target="_blank">Follow on Twitter</a>
  </li>
  <li><a href="http://github.com/paperjs/paper.js" target="_blank">Watch on Github</a>
  </li>
</ul>
    </nav>
<article class="tutorial">
  <h1>Mathematical Operations</h1><p>
Paper.js allows you to write normal algebraic operators in connection with basic type objects. Points and Sizes can be added to, subtracted from, multiplied with or divided by numeric values or other points and sizes:
</p>
<pre class="code">
// Define a point to start with
var point1 = new Point(10, 20);

// Create a second point that is 4 times the first one.
// This is the same as creating a new point with x and y
// of point1 multiplied by 4:
var point2 = point1.multiply(4);
console.log(point2); // { x: 40, y: 80 }

// Now we calculate the difference between the two.
var point3 = point2.subtract(point1);
console.log(point3); // { x: 30, y: 60 }

// Create yet another point, with a numeric value added to point3:
var point4 = point3.add(30);
console.log(point4); // { x: 60, y: 90 }

// How about a third of that?
var point5 = point4.divide(3);
console.log(point5); // { x: 20, y: 30 }

// Multiplying two points with each other multiplies each
// coordinate seperately
var point6 = point5.multiply(new Point(3, 2));
console.log(point6); // { x: 60, y: 60 }
</pre>
<p>
These operators work just fine in conjunction with the feature of object conversion as described in the <a href="/tutorials/geometry/object-conversion/">Object Conversion</a> tutorial, as long as the object the operation is performed on is a real basic type:
</p>
<pre class="code">
var point1 = new Point(10, 20);
var point2 = point1.add({ x: 100, y: 100 });
console.log(point2); // { x: 110, y: 120 }

// Adding size objects to points work too,
// forcing them to be converted to a point first
var point3 = point2.add(new Size(50, 100));
console.log(point3); // { x: 160, y: 220 }

// And using the object notation for size works just as well:
var point4 = point3.add({ width: 40, height: 80 });
console.log(point4); // { x: 200, y: 300 }

// How about adding a point in array notation instead?
var point5 = point4.add([100, 0]);
console.log(point5); // { x: 300, y: 300 }
</pre>
<section id="math-functions"><a name="math-functions" title="Math Functions" class="anchor"><h2>Math Functions</h2></a></section>
<p>
Paper.js offers several mathematical functions for rounding the values of points and sizes:
</p>
<pre class="code">
var point = new Point(1.2, 1.8);

// Round the point:
var rounded = point.round();
console.log(rounded); // { x: 1, y: 2 }

// Round the point up:
var ceiled = point.ceil();
console.log(ceiled); // { x: 2, y: 2 }

// Round the point down:
var floored = point.floor();
console.log(floored); // { x: 1, y: 1 }
</pre>
<section id="random-values"><a name="random-values" title="Random Values" class="anchor"><h2>Random Values</h2></a></section>
<p>
Use <tt>Point.random()</tt> or <tt>Size.random()</tt> to create a point or size with random values for each of its properties between <tt>0</tt> and <tt>1</tt>:
</p>
<pre class="code">
// Create a point whose x is between 0 and 50,
// and y is between 0 and 100
var point = new Point(50, 100).multiply(Point.random());

// Create a size whose width is between 0 and 50,
// and height is between 0 and 100
var size = new Size(50, 100).multiply(Size.random());
</pre>
</article>
<aside>
<h1>Index</h1>
<ul class="tutorial-index">
  <li class="expandable-list"><b><a href="/tutorials/getting-started/">Getting Started</a></b>
<ul class="tutorial-index">
  <li><a href="/tutorials/getting-started/working-with-paper-js/">Working with Paper.js</a></li>
  <li><a href="/tutorials/getting-started/using-javascript-directly/">Using JavaScript Directly</a></li>
  <li><a href="/tutorials/getting-started/paperscript-interoperability/">PaperScript Interoperability</a></li>
</ul>
  </li>
  <li class="expandable-list expanded"><b><a href="/tutorials/geometry/">Geometry</a></b>
<ul class="tutorial-index">
  <li><a href="/tutorials/geometry/point-size-and-rectangle/">Point, Size and Rectangle</a></li>
  <li><a href="/tutorials/geometry/object-conversion/">Object Conversion</a></li>
  <li class="active"><span>Mathematical Operations</span></li>
  <li><a href="/tutorials/geometry/vector-geometry/">Vector Geometry</a></li>
</ul>
  </li>
  <li class="expandable-list"><b><a href="/tutorials/paths/">Paths</a></b>
<ul class="tutorial-index">
  <li><a href="/tutorials/paths/working-with-path-items/">Working with Path Items</a></li>
  <li><a href="/tutorials/paths/creating-predefined-shapes/">Creating Predefined Shapes</a></li>
  <li><a href="/tutorials/paths/using-color-and-style/">Using Color and Style</a></li>
  <li><a href="/tutorials/paths/smoothing-simplifying-flattening/">Smoothing, Simplifying &amp; Flattening</a></li>
</ul>
  </li>
  <li class="expandable-list"><b><a href="/tutorials/interaction/">Interaction</a></b>
<ul class="tutorial-index">
  <li><a href="/tutorials/interaction/creating-mouse-tools/">Creating Mouse Tools</a></li>
  <li><a href="/tutorials/interaction/mouse-tool-events/">Mouse Tool Events</a></li>
  <li><a href="/tutorials/interaction/working-with-mouse-vectors/">Working with Mouse Vectors</a></li>
  <li><a href="/tutorials/interaction/keyboard-interaction/">Keyboard Interaction</a></li>
</ul>
  </li>
  <li class="expandable-list"><b><a href="/tutorials/project-items/">Project &amp; Items</a></b>
<ul class="tutorial-index">
  <li><a href="/tutorials/project-items/working-with-items/">Working with Items</a></li>
  <li><a href="/tutorials/project-items/transforming-items/">Transforming Items</a></li>
  <li><a href="/tutorials/project-items/project-hierarchy/">Project Hierarchy</a></li>
  <li><a href="/tutorials/project-items/working-with-symbols/">Working with Symbols</a></li>
</ul>
  </li>
  <li class="expandable-list"><b><a href="/tutorials/images/">Images</a></b>
<ul class="tutorial-index">
  <li><a href="/tutorials/images/working-with-rasters/">Working with Rasters</a></li>
  <li><a href="/tutorials/images/using-pixel-colors/">Using Pixel Colors</a></li>
  <li><a href="/tutorials/images/color-averaging-image-areas/">Color Averaging Image Areas</a></li>
</ul>
  </li>
  <li class="expandable-list"><b><a href="/tutorials/animation/">Animation</a></b>
<ul class="tutorial-index">
  <li><a href="/tutorials/animation/creating-animations/">Creating Animations</a></li>
</ul>
  </li>
</ul>
<div class="sticky">
  <h1>Content</h1>
  <ul class="toc"></ul>
</div>
</aside>
  </body>
</html>