source: main/trunk/model-sites-dev/von-sparql/js/paper/docs/classes/Point.html@ 28914

Last change on this file since 28914 was 28914, checked in by ak19, 10 years ago

Supporting javascript libraries and bespoke code written by Steffan to support the von-sparql user interface

File size: 33.8 KB
Line 
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title>Point</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 class="reference">
14<div class="reference-class">
15<h1>Point</h1>
16
17<p>The Point object represents a point in the two dimensional space
18of the Paper.js project. It is also used to represent two dimensional
19vector objects.</p>
20<p>
21<b>Example</b> &mdash; Create a point at x: 10, y: 5
22</p>
23
24
25<pre class="code">var point = new Point(10, 5);
26console.log(point.x); // 10
27console.log(point.y); // 5</pre>
28
29</div>
30
31<!-- ============================== constructors ========================= -->
32<div class="reference-members"><h2>Constructors</h2>
33
34
35<div id="point-x-y" class="member">
36<div class="member-link">
37<a name="point-x-y" href="#point-x-y"><tt><b>Point</b>(x, y)</tt></a>
38</div>
39<div class="member-description hidden">
40<div class="member-text">
41<p>Creates a Point object with the given x and y coordinates.</p>
42
43<ul><b>Parameters:</b>
44
45<li>
46<tt>x:</tt>
47<tt>Number</tt>
48&mdash;&nbsp;the x coordinate
49
50</li>
51
52<li>
53<tt>y:</tt>
54<tt>Number</tt>
55&mdash;&nbsp;the y coordinate
56
57</li>
58
59</ul>
60
61
62<p>
63<b>Example</b> &mdash; Create a point at x: 10, y: 5
64</p>
65
66
67<pre class="code">var point = new Point(10, 5);
68console.log(point.x); // 10
69console.log(point.y); // 5</pre>
70
71
72</div>
73</div>
74</div>
75
76
77<div id="point-array" class="member">
78<div class="member-link">
79<a name="point-array" href="#point-array"><tt><b>Point</b>(array)</tt></a>
80</div>
81<div class="member-description hidden">
82<div class="member-text">
83<p>Creates a Point object using the numbers in the given array as
84coordinates.</p>
85
86<ul><b>Parameters:</b>
87
88<li>
89<tt>array:</tt>
90<tt>array</tt>
91
92
93</li>
94
95</ul>
96
97
98<p>
99<b>Example</b> &mdash; Creating a point at x: 10, y: 5 using an array of numbers:
100</p>
101
102
103<pre class="code">var array = [10, 5];
104var point = new Point(array);
105console.log(point.x); // 10
106console.log(point.y); // 5</pre>
107
108<p>
109<b>Example</b> &mdash; Passing an array to a functionality that expects a point:
110</p>
111
112
113<pre class="code">// Create a circle shaped path at x: 50, y: 50
114// with a radius of 30:
115var path = new Path.Circle([50, 50], 30);
116path.fillColor = 'red';
117
118// Which is the same as doing:
119var path = new Path.Circle(new Point(50, 50), 30);
120path.fillColor = 'red';</pre>
121
122
123</div>
124</div>
125</div>
126
127
128<div id="point-object" class="member">
129<div class="member-link">
130<a name="point-object" href="#point-object"><tt><b>Point</b>(object)</tt></a>
131</div>
132<div class="member-description hidden">
133<div class="member-text">
134<p>Creates a Point object using the properties in the given object.</p>
135
136<ul><b>Parameters:</b>
137
138<li>
139<tt>object:</tt>
140<tt>Object</tt>
141&mdash;&nbsp;the object describing the point's properties
142
143</li>
144
145</ul>
146
147
148<p>
149<b>Example</b> &mdash; Creating a point using an object literal with length and angle properties:
150</p>
151
152
153<pre class="code">var point = new Point({
154 length: 10,
155 angle: 90
156});
157console.log(point.length); // 10
158console.log(point.angle); // 90</pre>
159
160<p>
161<b>Example</b> &mdash; Creating a point at x: 10, y: 20 using an object literal:
162</p>
163
164
165<pre class="code">var point = new Point({
166 x: 10,
167 y: 20
168});
169console.log(point.x); // 10
170console.log(point.y); // 20</pre>
171
172<p>
173<b>Example</b> &mdash; Passing an object to a functionality that expects a point:
174</p>
175
176
177<pre class="code">var center = {
178 x: 50,
179 y: 50
180};
181
182// Creates a circle shaped path at x: 50, y: 50
183// with a radius of 30:
184var path = new Path.Circle(center, 30);
185path.fillColor = 'red';</pre>
186
187
188</div>
189</div>
190</div>
191
192
193<div id="point-size" class="member">
194<div class="member-link">
195<a name="point-size" href="#point-size"><tt><b>Point</b>(size)</tt></a>
196</div>
197<div class="member-description hidden">
198<div class="member-text">
199<p>Creates a Point object using the width and height values of the given
200Size object.</p>
201
202<ul><b>Parameters:</b>
203
204<li>
205<tt>size:</tt>
206<a href="../classes/Size.html"><tt>Size</tt></a>
207
208
209</li>
210
211</ul>
212
213
214<p>
215<b>Example</b> &mdash; Creating a point using a size object.
216</p>
217
218
219<pre class="code">// Create a Size with a width of 100pt and a height of 50pt
220var size = new Size(100, 50);
221console.log(size); // { width: 100, height: 50 }
222var point = new Point(size);
223console.log(point); // { x: 100, y: 50 }</pre>
224
225
226</div>
227</div>
228</div>
229
230
231<div id="point-point" class="member">
232<div class="member-link">
233<a name="point-point" href="#point-point"><tt><b>Point</b>(point)</tt></a>
234</div>
235<div class="member-description hidden">
236<div class="member-text">
237<p>Creates a Point object using the coordinates of the given Point object.</p>
238
239<ul><b>Parameters:</b>
240
241<li>
242<tt>point:</tt>
243<a href="../classes/Point.html"><tt>Point</tt></a>
244
245
246</li>
247
248</ul>
249
250
251
252
253</div>
254</div>
255</div>
256
257</div>
258
259
260
261<!-- ============================== properties ========================= -->
262 <div class="reference-members"><h2>Operators</h2>
263
264 <div id="add" class="member">
265<div class="member-link">
266<a name="add" href="#add"><tt><tt><b>+</b> Number</tt>, <tt><b>+</b> Point</tt></tt></a>
267</div>
268<div class="member-description hidden">
269
270
271 <div class="member-text">
272 <p>Returns the addition of the supplied value to both coordinates of
273the point as a new point.</p>
274<p>The object itself is not modified!</p>
275
276 <ul><b>Returns:</b>
277
278 <li>
279<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the addition of the point and the value as a new point
280</li>
281
282 </ul>
283
284
285 <p>
286<b>Example</b>
287</p>
288
289
290<pre class="code">var point = new Point(5, 10);
291var result = point + 20;
292console.log(result); // {x: 25, y: 30}</pre>
293
294 </div>
295
296
297
298 <div class="member-text">
299 <p>Returns the addition of the supplied point to the point as a new
300point.</p>
301<p>The object itself is not modified!</p>
302
303 <ul><b>Returns:</b>
304
305 <li>
306<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the addition of the two points as a new point
307</li>
308
309 </ul>
310
311
312 <p>
313<b>Example</b>
314</p>
315
316
317<pre class="code">var point1 = new Point(5, 10);
318var point2 = new Point(10, 20);
319var result = point1 + point2;
320console.log(result); // {x: 15, y: 30}</pre>
321
322 </div>
323
324
325</div>
326</div>
327
328
329 <div id="subtract" class="member">
330<div class="member-link">
331<a name="subtract" href="#subtract"><tt><tt><b>-</b> Number</tt>, <tt><b>-</b> Point</tt></tt></a>
332</div>
333<div class="member-description hidden">
334
335
336 <div class="member-text">
337 <p>Returns the subtraction of the supplied value to both coordinates of
338the point as a new point.</p>
339<p>The object itself is not modified!</p>
340
341 <ul><b>Returns:</b>
342
343 <li>
344<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the subtraction of the point and the value as a new point
345</li>
346
347 </ul>
348
349
350 <p>
351<b>Example</b>
352</p>
353
354
355<pre class="code">var point = new Point(10, 20);
356var result = point - 5;
357console.log(result); // {x: 5, y: 15}</pre>
358
359 </div>
360
361
362
363 <div class="member-text">
364 <p>Returns the subtraction of the supplied point to the point as a new
365point.</p>
366<p>The object itself is not modified!</p>
367
368 <ul><b>Returns:</b>
369
370 <li>
371<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the subtraction of the two points as a new point
372</li>
373
374 </ul>
375
376
377 <p>
378<b>Example</b>
379</p>
380
381
382<pre class="code">var firstPoint = new Point(10, 20);
383var secondPoint = new Point(5, 5);
384var result = firstPoint - secondPoint;
385console.log(result); // {x: 5, y: 15}</pre>
386
387 </div>
388
389
390</div>
391</div>
392
393
394 <div id="multiply" class="member">
395<div class="member-link">
396<a name="multiply" href="#multiply"><tt><tt><b>*</b> Number</tt>, <tt><b>*</b> Point</tt></tt></a>
397</div>
398<div class="member-description hidden">
399
400
401 <div class="member-text">
402 <p>Returns the multiplication of the supplied value to both coordinates of
403the point as a new point.</p>
404<p>The object itself is not modified!</p>
405
406 <ul><b>Returns:</b>
407
408 <li>
409<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the multiplication of the point and the value as a new point
410</li>
411
412 </ul>
413
414
415 <p>
416<b>Example</b>
417</p>
418
419
420<pre class="code">var point = new Point(10, 20);
421var result = point * 2;
422console.log(result); // {x: 20, y: 40}</pre>
423
424 </div>
425
426
427
428 <div class="member-text">
429 <p>Returns the multiplication of the supplied point to the point as a new
430point.</p>
431<p>The object itself is not modified!</p>
432
433 <ul><b>Returns:</b>
434
435 <li>
436<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the multiplication of the two points as a new point
437</li>
438
439 </ul>
440
441
442 <p>
443<b>Example</b>
444</p>
445
446
447<pre class="code">var firstPoint = new Point(5, 10);
448var secondPoint = new Point(4, 2);
449var result = firstPoint * secondPoint;
450console.log(result); // {x: 20, y: 20}</pre>
451
452 </div>
453
454
455</div>
456</div>
457
458
459 <div id="divide" class="member">
460<div class="member-link">
461<a name="divide" href="#divide"><tt><tt><b>/</b> Number</tt>, <tt><b>/</b> Point</tt></tt></a>
462</div>
463<div class="member-description hidden">
464
465
466 <div class="member-text">
467 <p>Returns the division of the supplied value to both coordinates of
468the point as a new point.</p>
469<p>The object itself is not modified!</p>
470
471 <ul><b>Returns:</b>
472
473 <li>
474<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the division of the point and the value as a new point
475</li>
476
477 </ul>
478
479
480 <p>
481<b>Example</b>
482</p>
483
484
485<pre class="code">var point = new Point(10, 20);
486var result = point / 2;
487console.log(result); // {x: 5, y: 10}</pre>
488
489 </div>
490
491
492
493 <div class="member-text">
494 <p>Returns the division of the supplied point to the point as a new
495point.</p>
496<p>The object itself is not modified!</p>
497
498 <ul><b>Returns:</b>
499
500 <li>
501<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the division of the two points as a new point
502</li>
503
504 </ul>
505
506
507 <p>
508<b>Example</b>
509</p>
510
511
512<pre class="code">var firstPoint = new Point(8, 10);
513var secondPoint = new Point(2, 5);
514var result = firstPoint / secondPoint;
515console.log(result); // {x: 4, y: 2}</pre>
516
517 </div>
518
519
520</div>
521</div>
522
523
524 <div id="modulo" class="member">
525<div class="member-link">
526<a name="modulo" href="#modulo"><tt><tt><b>%</b> Number</tt>, <tt><b>%</b> Point</tt></tt></a>
527</div>
528<div class="member-description hidden">
529
530
531 <div class="member-text">
532 <p>The modulo operator returns the integer remainders of dividing the point
533by the supplied value as a new point.</p>
534
535 <ul><b>Returns:</b>
536
537 <li>
538<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the integer remainders of dividing the point by the value
539 as a new point
540</li>
541
542 </ul>
543
544
545 <p>
546<b>Example</b>
547</p>
548
549
550<pre class="code">var point = new Point(12, 6);
551console.log(point % 5); // {x: 2, y: 1}</pre>
552
553 </div>
554
555
556
557 <div class="member-text">
558 <p>The modulo operator returns the integer remainders of dividing the point
559by the supplied value as a new point.</p>
560
561 <ul><b>Returns:</b>
562
563 <li>
564<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the integer remainders of dividing the points by each
565 other as a new point
566</li>
567
568 </ul>
569
570
571 <p>
572<b>Example</b>
573</p>
574
575
576<pre class="code">var point = new Point(12, 6);
577console.log(point % new Point(5, 2)); // {x: 2, y: 0}</pre>
578
579 </div>
580
581
582</div>
583</div>
584
585
586 </div>
587
588
589
590 <div class="reference-members"><h2>Properties</h2>
591
592
593<div id="x" class="member">
594<div class="member-link">
595<a name="x" href="#x"><tt><b>x</b></tt></a>
596</div>
597<div class="member-description hidden">
598
599<div class="member-text">
600 <p>The x coordinate of the point</p>
601
602
603 <ul><b>Type:</b>
604 <li>
605 <tt>Number</tt>
606 </li>
607 </ul>
608
609
610</div>
611
612</div>
613</div>
614
615
616<div id="y" class="member">
617<div class="member-link">
618<a name="y" href="#y"><tt><b>y</b></tt></a>
619</div>
620<div class="member-description hidden">
621
622<div class="member-text">
623 <p>The y coordinate of the point</p>
624
625
626 <ul><b>Type:</b>
627 <li>
628 <tt>Number</tt>
629 </li>
630 </ul>
631
632
633</div>
634
635</div>
636</div>
637
638
639<div id="length" class="member">
640<div class="member-link">
641<a name="length" href="#length"><tt><b>length</b></tt></a>
642</div>
643<div class="member-description hidden">
644
645<div class="member-text">
646 <p>The length of the vector that is represented by this point's coordinates.</p>
647<p>Each point can be interpreted as a vector that points from the origin
648(<tt>x = 0</tt>, <tt>y = 0</tt>) to the point's location.</p>
649<p>Setting the length changes the location but keeps the vector's angle.</p>
650
651
652 <ul><b>Type:</b>
653 <li>
654 <tt>Number</tt>
655 </li>
656 </ul>
657
658
659</div>
660
661</div>
662</div>
663
664
665<div id="angle" class="member">
666<div class="member-link">
667<a name="angle" href="#angle"><tt><b>angle</b></tt></a>
668</div>
669<div class="member-description hidden">
670
671<div class="member-text">
672 <p>The vector's angle in degrees, measured from the x-axis to the vector.</p>
673
674
675 <ul><b>Type:</b>
676 <li>
677 <tt>Number</tt>
678 </li>
679 </ul>
680
681
682</div>
683
684</div>
685</div>
686
687
688<div id="angleinradians" class="member">
689<div class="member-link">
690<a name="angleinradians" href="#angleinradians"><tt><b>angleInRadians</b></tt></a>
691</div>
692<div class="member-description hidden">
693
694<div class="member-text">
695 <p>The vector's angle in radians, measured from the x-axis to the vector.</p>
696
697 <p>Read only.</p>
698
699
700 <ul><b>Type:</b>
701 <li>
702 <tt>Number</tt>
703 </li>
704 </ul>
705
706
707</div>
708
709</div>
710</div>
711
712
713<div id="quadrant" class="member">
714<div class="member-link">
715<a name="quadrant" href="#quadrant"><tt><b>quadrant</b></tt></a>
716</div>
717<div class="member-description hidden">
718
719<div class="member-text">
720 <p>The quadrant of the <a href="../classes/Point.html#angle" onclick="return toggleMember('angle', true);"><tt>angle</tt></a> of the point.</p>
721<p>Angles between 0 and 90 degrees are in quadrant <tt>1</tt>. Angles between
72290 and 180 degrees are in quadrant <tt>2</tt>, angles between 180 and 270
723degrees are in quadrant <tt>3</tt> and angles between 270 and 360 degrees
724are in quadrant <tt>4</tt>.</p>
725
726 <p>Read only.</p>
727
728
729 <ul><b>Type:</b>
730 <li>
731 <tt>Number</tt>
732 </li>
733 </ul>
734
735 <p>
736<b>Example</b>
737</p>
738
739
740<pre class="code">var point = new Point({
741 angle: 10,
742 length: 20
743});
744console.log(point.quadrant); // 1
745
746point.angle = 100;
747console.log(point.quadrant); // 2
748
749point.angle = 190;
750console.log(point.quadrant); // 3
751
752point.angle = 280;
753console.log(point.quadrant); // 4</pre>
754
755</div>
756
757</div>
758</div>
759
760
761<div id="selected" class="member">
762<div class="member-link">
763<a name="selected" href="#selected"><tt><b>selected</b></tt></a>
764</div>
765<div class="member-description hidden">
766
767<div class="member-text">
768 <p>This property is only present if the point is an anchor or control point
769of a <a href="../classes/Segment.html"><tt>Segment</tt></a> or a <a href="../classes/Curve.html"><tt>Curve</tt></a>. In this case, it returns
770<tt>true</tt> it is selected, <tt>false</tt> otherwise</p>
771
772
773 <ul><b>Type:</b>
774 <li>
775 <tt>Boolean</tt>
776 </li>
777 </ul>
778
779
780</div>
781
782</div>
783</div>
784
785 </div>
786
787
788
789<!-- ============================== methods ================================ -->
790 <div class="reference-members"><h2>Methods</h2>
791
792
793<div id="equals-point" class="member">
794<div class="member-link">
795<a name="equals-point" href="#equals-point"><tt><b>equals</b>(point)</tt></a>
796</div>
797<div class="member-description hidden">
798<div class="member-text">
799 <p>Checks whether the coordinates of the point are equal to that of the
800supplied point.</p>
801
802<ul><b>Parameters:</b>
803
804<li>
805<tt>point:</tt>
806<a href="../classes/Point.html"><tt>Point</tt></a>
807
808
809</li>
810
811</ul>
812
813
814 <ul><b>Returns:</b>
815
816 <li>
817<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the points are equal, <tt>false</tt> otherwise
818</li>
819
820 </ul>
821
822
823 <p>
824<b>Example</b>
825</p>
826
827
828<pre class="code">var point = new Point(5, 10);
829console.log(point == new Point(5, 10)); // true
830console.log(point == new Point(1, 1)); // false
831console.log(point != new Point(1, 1)); // true</pre>
832
833</div>
834</div>
835</div>
836
837
838<div id="clone" class="member">
839<div class="member-link">
840<a name="clone" href="#clone"><tt><b>clone</b>()</tt></a>
841</div>
842<div class="member-description hidden">
843<div class="member-text">
844 <p>Returns a copy of the point.</p>
845
846
847 <ul><b>Returns:</b>
848
849 <li>
850<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the cloned point
851</li>
852
853 </ul>
854
855
856 <p>
857<b>Example</b>
858</p>
859
860
861<pre class="code">var point1 = new Point();
862var point2 = point1;
863point2.x = 1; // also changes point1.x
864
865var point2 = point1.clone();
866point2.x = 1; // doesn't change point1.x</pre>
867
868</div>
869</div>
870</div>
871
872
873<div id="tostring" class="member">
874<div class="member-link">
875<a name="tostring" href="#tostring"><tt><b>toString</b>()</tt></a>
876</div>
877<div class="member-description hidden">
878<div class="member-text">
879
880
881
882 <ul><b>Returns:</b>
883
884 <li>
885<tt><tt>String</tt></tt>&nbsp;&mdash;&nbsp;a string representation of the point
886</li>
887
888 </ul>
889
890
891
892</div>
893</div>
894</div>
895
896
897<div id="transform-matrix" class="member">
898<div class="member-link">
899<a name="transform-matrix" href="#transform-matrix"><tt><b>transform</b>(matrix)</tt></a>
900</div>
901<div class="member-description hidden">
902<div class="member-text">
903 <p>Transforms the point by the matrix as a new point. The object itself
904is not modified!</p>
905
906<ul><b>Parameters:</b>
907
908<li>
909<tt>matrix:</tt>
910<a href="../classes/Matrix.html"><tt>Matrix</tt></a>
911
912
913</li>
914
915</ul>
916
917
918 <ul><b>Returns:</b>
919
920 <li>
921<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the transformed point
922</li>
923
924 </ul>
925
926
927
928</div>
929</div>
930</div>
931
932
933<h3>Distance & Length</h3>
934
935<div id="getdistance-point" class="member">
936<div class="member-link">
937<a name="getdistance-point" href="#getdistance-point"><tt><b>getDistance</b>(point[, squared])</tt></a>
938</div>
939<div class="member-description hidden">
940<div class="member-text">
941 <p>Returns the distance between the point and another point.</p>
942
943<ul><b>Parameters:</b>
944
945<li>
946<tt>point:</tt>
947<a href="../classes/Point.html"><tt>Point</tt></a>
948
949
950</li>
951
952<li>
953<tt>squared:</tt>
954<tt>Boolean</tt>
955&mdash;&nbsp;Controls whether the distance should
956 remain squared, or its square root should be calculated.
957&mdash;&nbsp;optional, default: <tt>false</tt>
958</li>
959
960</ul>
961
962
963 <ul><b>Returns:</b>
964
965 <li>
966<tt><tt>Number</tt></tt>
967</li>
968
969 </ul>
970
971
972
973</div>
974</div>
975</div>
976
977
978<div id="normalize" class="member">
979<div class="member-link">
980<a name="normalize" href="#normalize"><tt><b>normalize</b>([length])</tt></a>
981</div>
982<div class="member-description hidden">
983<div class="member-text">
984 <p>Normalize modifies the <a href="../classes/Point.html#length" onclick="return toggleMember('length', true);"><tt>length</tt></a> of the vector to <tt>1</tt> without
985changing its angle and returns it as a new point. The optional
986<tt>length</tt> parameter defines the length to normalize to.</p>
987<p>The object itself is not modified!</p>
988
989<ul><b>Parameters:</b>
990
991<li>
992<tt>length:</tt>
993<tt>Number</tt>
994&mdash;&nbsp;The length of the normalized vector
995&mdash;&nbsp;optional, default: <tt>1</tt>
996</li>
997
998</ul>
999
1000
1001 <ul><b>Returns:</b>
1002
1003 <li>
1004<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the normalized vector of the vector that is represented
1005 by this point's coordinates
1006</li>
1007
1008 </ul>
1009
1010
1011
1012</div>
1013</div>
1014</div>
1015
1016
1017<h3>Angle & Rotation</h3>
1018
1019<div id="getangle-point" class="member">
1020<div class="member-link">
1021<a name="getangle-point" href="#getangle-point"><tt><b>getAngle</b>(point)</tt></a>
1022</div>
1023<div class="member-description hidden">
1024<div class="member-text">
1025 <p>Returns the smaller angle between two vectors. The angle is unsigned, no
1026information about rotational direction is given.</p>
1027
1028<ul><b>Parameters:</b>
1029
1030<li>
1031<tt>point:</tt>
1032<a href="../classes/Point.html"><tt>Point</tt></a>
1033
1034
1035</li>
1036
1037</ul>
1038
1039
1040 <ul><b>Returns:</b>
1041
1042 <li>
1043<tt><tt>Number</tt></tt>&nbsp;&mdash;&nbsp;the angle in degrees
1044</li>
1045
1046 </ul>
1047
1048
1049
1050</div>
1051</div>
1052</div>
1053
1054
1055<div id="getangleinradians-point" class="member">
1056<div class="member-link">
1057<a name="getangleinradians-point" href="#getangleinradians-point"><tt><b>getAngleInRadians</b>(point)</tt></a>
1058</div>
1059<div class="member-description hidden">
1060<div class="member-text">
1061 <p>Returns the smaller angle between two vectors in radians. The angle is
1062unsigned, no information about rotational direction is given.</p>
1063
1064<ul><b>Parameters:</b>
1065
1066<li>
1067<tt>point:</tt>
1068<a href="../classes/Point.html"><tt>Point</tt></a>
1069
1070
1071</li>
1072
1073</ul>
1074
1075
1076 <ul><b>Returns:</b>
1077
1078 <li>
1079<tt><tt>Number</tt></tt>&nbsp;&mdash;&nbsp;the angle in radians
1080</li>
1081
1082 </ul>
1083
1084
1085
1086</div>
1087</div>
1088</div>
1089
1090
1091<div id="getdirectedangle-point" class="member">
1092<div class="member-link">
1093<a name="getdirectedangle-point" href="#getdirectedangle-point"><tt><b>getDirectedAngle</b>(point)</tt></a>
1094</div>
1095<div class="member-description hidden">
1096<div class="member-text">
1097 <p>Returns the angle between two vectors. The angle is directional and
1098signed, giving information about the rotational direction.</p>
1099<p>Read more about angle units and orientation in the description of the
1100<a href="../classes/Point.html#angle" onclick="return toggleMember('angle', true);"><tt>angle</tt></a> property.</p>
1101
1102<ul><b>Parameters:</b>
1103
1104<li>
1105<tt>point:</tt>
1106<a href="../classes/Point.html"><tt>Point</tt></a>
1107
1108
1109</li>
1110
1111</ul>
1112
1113
1114 <ul><b>Returns:</b>
1115
1116 <li>
1117<tt><tt>Number</tt></tt>&nbsp;&mdash;&nbsp;the angle between the two vectors
1118</li>
1119
1120 </ul>
1121
1122
1123
1124</div>
1125</div>
1126</div>
1127
1128
1129<div id="rotate-angle-center" class="member">
1130<div class="member-link">
1131<a name="rotate-angle-center" href="#rotate-angle-center"><tt><b>rotate</b>(angle, center)</tt></a>
1132</div>
1133<div class="member-description hidden">
1134<div class="member-text">
1135 <p>Rotates the point by the given angle around an optional center point.</p>
1136<p>The object itself is not modified.</p>
1137<p>Read more about angle units and orientation in the description of the
1138<a href="../classes/Point.html#angle" onclick="return toggleMember('angle', true);"><tt>angle</tt></a> property.</p>
1139
1140<ul><b>Parameters:</b>
1141
1142<li>
1143<tt>angle:</tt>
1144<tt>Number</tt>
1145&mdash;&nbsp;the rotation angle
1146
1147</li>
1148
1149<li>
1150<tt>center:</tt>
1151<a href="../classes/Point.html"><tt>Point</tt></a>
1152&mdash;&nbsp;the center point of the rotation
1153
1154</li>
1155
1156</ul>
1157
1158
1159 <ul><b>Returns:</b>
1160
1161 <li>
1162<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the rotated point
1163</li>
1164
1165 </ul>
1166
1167
1168
1169</div>
1170</div>
1171</div>
1172
1173
1174<h3>Tests</h3>
1175
1176<div id="isinside-rect" class="member">
1177<div class="member-link">
1178<a name="isinside-rect" href="#isinside-rect"><tt><b>isInside</b>(rect)</tt></a>
1179</div>
1180<div class="member-description hidden">
1181<div class="member-text">
1182 <p>Checks whether the point is inside the boundaries of the rectangle.</p>
1183
1184<ul><b>Parameters:</b>
1185
1186<li>
1187<tt>rect:</tt>
1188<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
1189&mdash;&nbsp;the rectangle to check against
1190
1191</li>
1192
1193</ul>
1194
1195
1196 <ul><b>Returns:</b>
1197
1198 <li>
1199<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the point is inside the rectangle, <tt>false</tt> otherwise
1200</li>
1201
1202 </ul>
1203
1204
1205
1206</div>
1207</div>
1208</div>
1209
1210
1211<div id="isclose-point-tolerance" class="member">
1212<div class="member-link">
1213<a name="isclose-point-tolerance" href="#isclose-point-tolerance"><tt><b>isClose</b>(point, tolerance)</tt></a>
1214</div>
1215<div class="member-description hidden">
1216<div class="member-text">
1217 <p>Checks if the point is within a given distance of another point.</p>
1218
1219<ul><b>Parameters:</b>
1220
1221<li>
1222<tt>point:</tt>
1223<a href="../classes/Point.html"><tt>Point</tt></a>
1224&mdash;&nbsp;the point to check against
1225
1226</li>
1227
1228<li>
1229<tt>tolerance:</tt>
1230<tt>Number</tt>
1231&mdash;&nbsp;the maximum distance allowed
1232
1233</li>
1234
1235</ul>
1236
1237
1238 <ul><b>Returns:</b>
1239
1240 <li>
1241<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is within the given distance, <tt>false</tt> otherwise
1242</li>
1243
1244 </ul>
1245
1246
1247
1248</div>
1249</div>
1250</div>
1251
1252
1253<div id="iscolinear-point" class="member">
1254<div class="member-link">
1255<a name="iscolinear-point" href="#iscolinear-point"><tt><b>isColinear</b>(point)</tt></a>
1256</div>
1257<div class="member-description hidden">
1258<div class="member-text">
1259 <p>Checks if the vector represented by this point is colinear (parallel) to
1260another vector.</p>
1261
1262<ul><b>Parameters:</b>
1263
1264<li>
1265<tt>point:</tt>
1266<a href="../classes/Point.html"><tt>Point</tt></a>
1267&mdash;&nbsp;the vector to check against
1268
1269</li>
1270
1271</ul>
1272
1273
1274 <ul><b>Returns:</b>
1275
1276 <li>
1277<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it is colinear, <tt>false</tt> otherwise
1278</li>
1279
1280 </ul>
1281
1282
1283
1284</div>
1285</div>
1286</div>
1287
1288
1289<div id="isorthogonal-point" class="member">
1290<div class="member-link">
1291<a name="isorthogonal-point" href="#isorthogonal-point"><tt><b>isOrthogonal</b>(point)</tt></a>
1292</div>
1293<div class="member-description hidden">
1294<div class="member-text">
1295 <p>Checks if the vector represented by this point is orthogonal
1296(perpendicular) to another vector.</p>
1297
1298<ul><b>Parameters:</b>
1299
1300<li>
1301<tt>point:</tt>
1302<a href="../classes/Point.html"><tt>Point</tt></a>
1303&mdash;&nbsp;the vector to check against
1304
1305</li>
1306
1307</ul>
1308
1309
1310 <ul><b>Returns:</b>
1311
1312 <li>
1313<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it is orthogonal, <tt>false</tt> otherwise
1314</li>
1315
1316 </ul>
1317
1318
1319
1320</div>
1321</div>
1322</div>
1323
1324
1325<div id="iszero" class="member">
1326<div class="member-link">
1327<a name="iszero" href="#iszero"><tt><b>isZero</b>()</tt></a>
1328</div>
1329<div class="member-description hidden">
1330<div class="member-text">
1331 <p>Checks if this point has both the x and y coordinate set to 0.</p>
1332
1333
1334 <ul><b>Returns:</b>
1335
1336 <li>
1337<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> both x and y are 0, <tt>false</tt> otherwise
1338</li>
1339
1340 </ul>
1341
1342
1343
1344</div>
1345</div>
1346</div>
1347
1348
1349<div id="isnan" class="member">
1350<div class="member-link">
1351<a name="isnan" href="#isnan"><tt><b>isNaN</b>()</tt></a>
1352</div>
1353<div class="member-description hidden">
1354<div class="member-text">
1355 <p>Checks if this point has an undefined value for at least one of its
1356coordinates.</p>
1357
1358
1359 <ul><b>Returns:</b>
1360
1361 <li>
1362<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if either x or y are not a number, <tt>false</tt> otherwise
1363</li>
1364
1365 </ul>
1366
1367
1368
1369</div>
1370</div>
1371</div>
1372
1373
1374<h3>Vector Math Functions</h3>
1375
1376<div id="dot-point" class="member">
1377<div class="member-link">
1378<a name="dot-point" href="#dot-point"><tt><b>dot</b>(point)</tt></a>
1379</div>
1380<div class="member-description hidden">
1381<div class="member-text">
1382 <p>Returns the dot product of the point and another point.</p>
1383
1384<ul><b>Parameters:</b>
1385
1386<li>
1387<tt>point:</tt>
1388<a href="../classes/Point.html"><tt>Point</tt></a>
1389
1390
1391</li>
1392
1393</ul>
1394
1395
1396 <ul><b>Returns:</b>
1397
1398 <li>
1399<tt><tt>Number</tt></tt>&nbsp;&mdash;&nbsp;the dot product of the two points
1400</li>
1401
1402 </ul>
1403
1404
1405
1406</div>
1407</div>
1408</div>
1409
1410
1411<div id="cross-point" class="member">
1412<div class="member-link">
1413<a name="cross-point" href="#cross-point"><tt><b>cross</b>(point)</tt></a>
1414</div>
1415<div class="member-description hidden">
1416<div class="member-text">
1417 <p>Returns the cross product of the point and another point.</p>
1418
1419<ul><b>Parameters:</b>
1420
1421<li>
1422<tt>point:</tt>
1423<a href="../classes/Point.html"><tt>Point</tt></a>
1424
1425
1426</li>
1427
1428</ul>
1429
1430
1431 <ul><b>Returns:</b>
1432
1433 <li>
1434<tt><tt>Number</tt></tt>&nbsp;&mdash;&nbsp;the cross product of the two points
1435</li>
1436
1437 </ul>
1438
1439
1440
1441</div>
1442</div>
1443</div>
1444
1445
1446<div id="project-point" class="member">
1447<div class="member-link">
1448<a name="project-point" href="#project-point"><tt><b>project</b>(point)</tt></a>
1449</div>
1450<div class="member-description hidden">
1451<div class="member-text">
1452 <p>Returns the projection of the point on another point.</p>
1453<p>Both points are interpreted as vectors.</p>
1454
1455<ul><b>Parameters:</b>
1456
1457<li>
1458<tt>point:</tt>
1459<a href="../classes/Point.html"><tt>Point</tt></a>
1460
1461
1462</li>
1463
1464</ul>
1465
1466
1467 <ul><b>Returns:</b>
1468
1469 <li>
1470<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the projection of the point on another point
1471</li>
1472
1473 </ul>
1474
1475
1476
1477</div>
1478</div>
1479</div>
1480
1481
1482<h3>Math Functions</h3>
1483
1484<div id="round" class="member">
1485<div class="member-link">
1486<a name="round" href="#round"><tt><b>round</b>()</tt></a>
1487</div>
1488<div class="member-description hidden">
1489<div class="member-text">
1490 <p>Returns a new point with rounded <a href="../classes/Point.html#x" onclick="return toggleMember('x', true);"><tt>x</tt></a> and <a href="../classes/Point.html#y" onclick="return toggleMember('y', true);"><tt>y</tt></a> values. The
1491object itself is not modified!</p>
1492
1493
1494 <ul><b>Returns:</b>
1495
1496 <li>
1497<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>
1498</li>
1499
1500 </ul>
1501
1502
1503 <p>
1504<b>Example</b>
1505</p>
1506
1507
1508<pre class="code">var point = new Point(10.2, 10.9);
1509var roundPoint = point.round();
1510console.log(roundPoint); // {x: 10, y: 11}</pre>
1511
1512</div>
1513</div>
1514</div>
1515
1516
1517<div id="ceil" class="member">
1518<div class="member-link">
1519<a name="ceil" href="#ceil"><tt><b>ceil</b>()</tt></a>
1520</div>
1521<div class="member-description hidden">
1522<div class="member-text">
1523 <p>Returns a new point with the nearest greater non-fractional values to the
1524specified <a href="../classes/Point.html#x" onclick="return toggleMember('x', true);"><tt>x</tt></a> and <a href="../classes/Point.html#y" onclick="return toggleMember('y', true);"><tt>y</tt></a> values. The object itself is not
1525modified!</p>
1526
1527
1528 <ul><b>Returns:</b>
1529
1530 <li>
1531<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>
1532</li>
1533
1534 </ul>
1535
1536
1537 <p>
1538<b>Example</b>
1539</p>
1540
1541
1542<pre class="code">var point = new Point(10.2, 10.9);
1543var ceilPoint = point.ceil();
1544console.log(ceilPoint); // {x: 11, y: 11}</pre>
1545
1546</div>
1547</div>
1548</div>
1549
1550
1551<div id="floor" class="member">
1552<div class="member-link">
1553<a name="floor" href="#floor"><tt><b>floor</b>()</tt></a>
1554</div>
1555<div class="member-description hidden">
1556<div class="member-text">
1557 <p>Returns a new point with the nearest smaller non-fractional values to the
1558specified <a href="../classes/Point.html#x" onclick="return toggleMember('x', true);"><tt>x</tt></a> and <a href="../classes/Point.html#y" onclick="return toggleMember('y', true);"><tt>y</tt></a> values. The object itself is not
1559modified!</p>
1560
1561
1562 <ul><b>Returns:</b>
1563
1564 <li>
1565<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>
1566</li>
1567
1568 </ul>
1569
1570
1571 <p>
1572<b>Example</b>
1573</p>
1574
1575
1576<pre class="code">var point = new Point(10.2, 10.9);
1577var floorPoint = point.floor();
1578console.log(floorPoint); // {x: 10, y: 10}</pre>
1579
1580</div>
1581</div>
1582</div>
1583
1584
1585<div id="abs" class="member">
1586<div class="member-link">
1587<a name="abs" href="#abs"><tt><b>abs</b>()</tt></a>
1588</div>
1589<div class="member-description hidden">
1590<div class="member-text">
1591 <p>Returns a new point with the absolute values of the specified <a href="../classes/Point.html#x" onclick="return toggleMember('x', true);"><tt>x</tt></a>
1592and <a href="../classes/Point.html#y" onclick="return toggleMember('y', true);"><tt>y</tt></a> values. The object itself is not modified!</p>
1593
1594
1595 <ul><b>Returns:</b>
1596
1597 <li>
1598<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>
1599</li>
1600
1601 </ul>
1602
1603
1604 <p>
1605<b>Example</b>
1606</p>
1607
1608
1609<pre class="code">var point = new Point(-5, 10);
1610var absPoint = point.abs();
1611console.log(absPoint); // {x: 5, y: 10}</pre>
1612
1613</div>
1614</div>
1615</div>
1616
1617 </div>
1618
1619
1620 <div class="reference-members"><h2>Static Methods</h2>
1621
1622
1623<div id="min-point1-point2" class="member">
1624<div class="member-link">
1625<a name="min-point1-point2" href="#min-point1-point2"><tt><b>Point.min</b>(point1, point2)</tt></a>
1626</div>
1627<div class="member-description hidden">
1628<div class="member-text">
1629 <p>Returns a new point object with the smallest <a href="../classes/Point.html#x" onclick="return toggleMember('x', true);"><tt>x</tt></a> and
1630<a href="../classes/Point.html#y" onclick="return toggleMember('y', true);"><tt>y</tt></a> of the supplied points.</p>
1631
1632<ul><b>Parameters:</b>
1633
1634<li>
1635<tt>point1:</tt>
1636<a href="../classes/Point.html"><tt>Point</tt></a>
1637
1638
1639</li>
1640
1641<li>
1642<tt>point2:</tt>
1643<a href="../classes/Point.html"><tt>Point</tt></a>
1644
1645
1646</li>
1647
1648</ul>
1649
1650
1651 <ul><b>Returns:</b>
1652
1653 <li>
1654<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created point object
1655</li>
1656
1657 </ul>
1658
1659
1660 <p>
1661<b>Example</b>
1662</p>
1663
1664
1665<pre class="code">var point1 = new Point(10, 100);
1666var point2 = new Point(200, 5);
1667var minPoint = Point.min(point1, point2);
1668console.log(minPoint); // {x: 10, y: 5}</pre>
1669
1670</div>
1671</div>
1672</div>
1673
1674
1675<div id="max-point1-point2" class="member">
1676<div class="member-link">
1677<a name="max-point1-point2" href="#max-point1-point2"><tt><b>Point.max</b>(point1, point2)</tt></a>
1678</div>
1679<div class="member-description hidden">
1680<div class="member-text">
1681 <p>Returns a new point object with the largest <a href="../classes/Point.html#x" onclick="return toggleMember('x', true);"><tt>x</tt></a> and
1682<a href="../classes/Point.html#y" onclick="return toggleMember('y', true);"><tt>y</tt></a> of the supplied points.</p>
1683
1684<ul><b>Parameters:</b>
1685
1686<li>
1687<tt>point1:</tt>
1688<a href="../classes/Point.html"><tt>Point</tt></a>
1689
1690
1691</li>
1692
1693<li>
1694<tt>point2:</tt>
1695<a href="../classes/Point.html"><tt>Point</tt></a>
1696
1697
1698</li>
1699
1700</ul>
1701
1702
1703 <ul><b>Returns:</b>
1704
1705 <li>
1706<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created point object
1707</li>
1708
1709 </ul>
1710
1711
1712 <p>
1713<b>Example</b>
1714</p>
1715
1716
1717<pre class="code">var point1 = new Point(10, 100);
1718var point2 = new Point(200, 5);
1719var maxPoint = Point.max(point1, point2);
1720console.log(maxPoint); // {x: 200, y: 100}</pre>
1721
1722</div>
1723</div>
1724</div>
1725
1726
1727<div id="random" class="member">
1728<div class="member-link">
1729<a name="random" href="#random"><tt><b>Point.random</b>()</tt></a>
1730</div>
1731<div class="member-description hidden">
1732<div class="member-text">
1733 <p>Returns a point object with random <a href="../classes/Point.html#x" onclick="return toggleMember('x', true);"><tt>x</tt></a> and <a href="../classes/Point.html#y" onclick="return toggleMember('y', true);"><tt>y</tt></a> values
1734between <tt>0</tt> and <tt>1</tt>.</p>
1735
1736
1737 <ul><b>Returns:</b>
1738
1739 <li>
1740<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created point object
1741</li>
1742
1743 </ul>
1744
1745
1746 <p>
1747<b>Example</b>
1748</p>
1749
1750
1751<pre class="code">var maxPoint = new Point(100, 100);
1752var randomPoint = Point.random();
1753
1754// A point between {x:0, y:0} and {x:100, y:100}:
1755var point = maxPoint * randomPoint;</pre>
1756
1757</div>
1758</div>
1759</div>
1760
1761 </div>
1762
1763
1764
1765<!-- =========================== copyright notice ========================= -->
1766<p class="footer">Copyright &#169; 2011 <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>
1767<div class="content-end"></div>
1768
1769</body>
Note: See TracBrowser for help on using the repository browser.