toosoon-utils 4.1.8 → 4.2.0
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.
- package/README.md +97 -885
- package/lib/constants.d.ts +0 -1
- package/lib/constants.js +3 -1
- package/lib/extras/color-scale/ColorScale.d.ts +2 -2
- package/lib/extras/color-scale/ColorScale.js +2 -2
- package/lib/extras/curves/CatmullRomCurve.d.ts +20 -5
- package/lib/extras/curves/CatmullRomCurve.js +23 -5
- package/lib/extras/curves/CatmullRomCurve3.d.ts +101 -0
- package/lib/extras/curves/CatmullRomCurve3.js +122 -0
- package/lib/extras/curves/CubicBezierCurve.d.ts +20 -5
- package/lib/extras/curves/CubicBezierCurve.js +23 -5
- package/lib/extras/curves/CubicBezierCurve3.d.ts +101 -0
- package/lib/extras/curves/CubicBezierCurve3.js +122 -0
- package/lib/extras/curves/Curve.d.ts +23 -24
- package/lib/extras/curves/Curve.js +19 -26
- package/lib/extras/curves/EllipseCurve.d.ts +21 -5
- package/lib/extras/curves/EllipseCurve.js +55 -6
- package/lib/extras/curves/LineCurve.d.ts +34 -10
- package/lib/extras/curves/LineCurve.js +35 -13
- package/lib/extras/curves/LineCurve3.d.ts +87 -0
- package/lib/extras/curves/LineCurve3.js +108 -0
- package/lib/extras/curves/PolylineCurve.d.ts +9 -8
- package/lib/extras/curves/PolylineCurve.js +6 -6
- package/lib/extras/curves/PolylineCurve3.d.ts +28 -0
- package/lib/extras/curves/PolylineCurve3.js +39 -0
- package/lib/extras/curves/QuadraticBezierCurve.d.ts +19 -5
- package/lib/extras/curves/QuadraticBezierCurve.js +22 -5
- package/lib/extras/curves/QuadraticBezierCurve3.d.ts +84 -0
- package/lib/extras/curves/QuadraticBezierCurve3.js +102 -0
- package/lib/extras/curves/SplineCurve.d.ts +12 -8
- package/lib/extras/curves/SplineCurve.js +9 -6
- package/lib/extras/curves/SplineCurve3.d.ts +28 -0
- package/lib/extras/curves/SplineCurve3.js +41 -0
- package/lib/extras/curves/index.d.ts +6 -0
- package/lib/extras/curves/index.js +6 -0
- package/lib/extras/geometry/Matrix2.d.ts +1 -0
- package/lib/extras/geometry/Matrix2.js +230 -0
- package/lib/extras/geometry/Matrix4.d.ts +1 -0
- package/lib/extras/geometry/Matrix4.js +632 -0
- package/lib/extras/geometry/Vector.d.ts +42 -0
- package/lib/extras/geometry/Vector.js +1 -0
- package/lib/extras/geometry/Vector2.d.ts +480 -0
- package/lib/extras/geometry/Vector2.js +709 -0
- package/lib/extras/geometry/Vector3.d.ts +486 -0
- package/lib/extras/geometry/Vector3.js +765 -0
- package/lib/extras/geometry/index.d.ts +3 -0
- package/lib/extras/geometry/index.js +2 -0
- package/lib/extras/paths/Path.d.ts +24 -18
- package/lib/extras/paths/Path.js +48 -35
- package/lib/extras/paths/PathContext.d.ts +97 -67
- package/lib/extras/paths/PathContext.js +326 -183
- package/lib/extras/paths/PathSVG.d.ts +43 -31
- package/lib/extras/paths/PathSVG.js +68 -50
- package/lib/geometry.d.ts +0 -135
- package/lib/geometry.js +1 -219
- package/lib/maths.d.ts +54 -22
- package/lib/maths.js +77 -27
- package/lib/random.d.ts +12 -16
- package/lib/random.js +19 -27
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/lib/types.d.ts +43 -1
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -398,32 +398,6 @@ Calculate the distance between two points.
|
|
|
398
398
|
distance(x1: number, y1: number, x2: number, y2: number): number;
|
|
399
399
|
```
|
|
400
400
|
|
|
401
|
-
##### dot(x1, y1, x2, y2)
|
|
402
|
-
|
|
403
|
-
Calculate the dot product of two vectors.
|
|
404
|
-
|
|
405
|
-
- `x1`: X-axis coordinate of the first vector.
|
|
406
|
-
- `y1`: Y-axis coordinate of the first vector.
|
|
407
|
-
- `x2`: X-axis coordinate of the second vector.
|
|
408
|
-
- `y2`: Y-axis coordinate of the second vector.
|
|
409
|
-
|
|
410
|
-
```ts
|
|
411
|
-
dot(x1: number, y1: number, x2: number, y2: number): number;
|
|
412
|
-
```
|
|
413
|
-
|
|
414
|
-
##### cross(x1, y1, x2, y2)
|
|
415
|
-
|
|
416
|
-
Calculate the cross product of two vectors.
|
|
417
|
-
|
|
418
|
-
- `x1`: X-axis coordinate of the first vector.
|
|
419
|
-
- `y1`: Y-axis coordinate of the first vector.
|
|
420
|
-
- `x2`: X-axis coordinate of the second vector.
|
|
421
|
-
- `y2`: Y-axis coordinate of the second vector.
|
|
422
|
-
|
|
423
|
-
```ts
|
|
424
|
-
cross(x1: number, y1: number, x2: number, y2: number): number;
|
|
425
|
-
```
|
|
426
|
-
|
|
427
401
|
##### diagonal(width, height)
|
|
428
402
|
|
|
429
403
|
Calculate the length of the diagonal of a rectangle.
|
|
@@ -435,201 +409,6 @@ Calculate the length of the diagonal of a rectangle.
|
|
|
435
409
|
diagonal(width: number, height: number): number;
|
|
436
410
|
```
|
|
437
411
|
|
|
438
|
-
##### radToSphere(radius, phi, theta)
|
|
439
|
-
|
|
440
|
-
Convert radians to a 3D point on the surface of a unit sphere.
|
|
441
|
-
|
|
442
|
-
- `radius`: Radius of the sphere.
|
|
443
|
-
- `phi`: Polar angle from the y (up) axis [0, PI].
|
|
444
|
-
- `theta`: Equator angle around the y (up) axis [0, 2*PI].
|
|
445
|
-
- `[target]`: Target vector.
|
|
446
|
-
|
|
447
|
-
```ts
|
|
448
|
-
radToSphere(radius: number, phi: number, theta: number, target?: [number, number, number]): [number, number, number];
|
|
449
|
-
```
|
|
450
|
-
|
|
451
|
-
#### Curves
|
|
452
|
-
|
|
453
|
-
##### line(t, x1, y1, x2, y2)
|
|
454
|
-
|
|
455
|
-
Interpolate a point on line.
|
|
456
|
-
|
|
457
|
-
- `t`: Normalized time value to interpolate.
|
|
458
|
-
- `x1`: X-axis coordinate of the start point.
|
|
459
|
-
- `y1`: Y-axis coordinate of the start point.
|
|
460
|
-
- `x2`: X-axis coordinate of the end point.
|
|
461
|
-
- `y2`: Y-axis coordinate of the end point.
|
|
462
|
-
|
|
463
|
-
```ts
|
|
464
|
-
line(
|
|
465
|
-
t: number,
|
|
466
|
-
x1: number,
|
|
467
|
-
y1: number,
|
|
468
|
-
x2: number,
|
|
469
|
-
y2: number
|
|
470
|
-
): [number, number];
|
|
471
|
-
```
|
|
472
|
-
|
|
473
|
-
##### quadraticBezier(t, x1, y1, cpx, cpy, x2, y2)
|
|
474
|
-
|
|
475
|
-
Interpolate a point on Quadratic Bézier curve.
|
|
476
|
-
|
|
477
|
-
- `t`: Normalized time value to interpolate.
|
|
478
|
-
- `x1`: X-axis coordinate of the start point.
|
|
479
|
-
- `y1`: Y-axis coordinate of the start point.
|
|
480
|
-
- `cpx`: X-axis coordinate of the control point.
|
|
481
|
-
- `cpy`: Y-axis coordinate of the control point.
|
|
482
|
-
- `x2`: X-axis coordinate of the end point.
|
|
483
|
-
- `y2`: Y-axis coordinate of the end point.
|
|
484
|
-
|
|
485
|
-
```ts
|
|
486
|
-
quadraticBezier(
|
|
487
|
-
t: number,
|
|
488
|
-
x1: number,
|
|
489
|
-
y1: number,
|
|
490
|
-
cpx: number,
|
|
491
|
-
cpy: number,
|
|
492
|
-
x2: number,
|
|
493
|
-
y2: number
|
|
494
|
-
): [number, number];
|
|
495
|
-
```
|
|
496
|
-
|
|
497
|
-
##### cubicBezier(t, x1, y1, cp1x, cp1y, cp2x, cp2y, x2, y2)
|
|
498
|
-
|
|
499
|
-
Interpolate a point on Cubic Bézier curve.
|
|
500
|
-
|
|
501
|
-
- `t`: Normalized time value to interpolate.
|
|
502
|
-
- `x1`: X-axis coordinate of the start point.
|
|
503
|
-
- `y1`: Y-axis coordinate of the start point.
|
|
504
|
-
- `cp1x`: X-axis coordinate of the first control point.
|
|
505
|
-
- `cp1y`: Y-axis coordinate of the first control point.
|
|
506
|
-
- `cp2x`: X-axis coordinate of the second control point.
|
|
507
|
-
- `cp2y`: Y-axis coordinate of the second control point.
|
|
508
|
-
- `x2`: X-axis coordinate of the end point.
|
|
509
|
-
- `y2`: Y-axis coordinate of the end point.
|
|
510
|
-
|
|
511
|
-
```ts
|
|
512
|
-
cubicBezier(
|
|
513
|
-
t: number,
|
|
514
|
-
x1: number,
|
|
515
|
-
y1: number,
|
|
516
|
-
cp1x: number,
|
|
517
|
-
cp1y: number,
|
|
518
|
-
cp2x: number,
|
|
519
|
-
cp2y: number,
|
|
520
|
-
x2: number,
|
|
521
|
-
y2: number
|
|
522
|
-
): [number, number];
|
|
523
|
-
```
|
|
524
|
-
|
|
525
|
-
##### catmullRom(t, x1, y1, cp1x, cpy1, cp2x, cp2y, x2, y2)
|
|
526
|
-
|
|
527
|
-
Interpolate a point on a Catmull-Rom spline.
|
|
528
|
-
|
|
529
|
-
- `t`: Normalized time value to interpolate.
|
|
530
|
-
- `x1`: X-axis coordinate of the start point.
|
|
531
|
-
- `y1`: Y-axis coordinate of the start point.
|
|
532
|
-
- `cp1x`: X-axis coordinate of the first control point.
|
|
533
|
-
- `cp1y`: Y-axis coordinate of the first control point.
|
|
534
|
-
- `cp2x`: X-axis coordinate of the second control point.
|
|
535
|
-
- `cp2y`: Y-axis coordinate of the second control point.
|
|
536
|
-
- `x2`: X-axis coordinate of the end point.
|
|
537
|
-
- `y2`: Y-axis coordinate of the end point.
|
|
538
|
-
|
|
539
|
-
```ts
|
|
540
|
-
catmullRom(
|
|
541
|
-
t: number,
|
|
542
|
-
x1: number,
|
|
543
|
-
y1: number,
|
|
544
|
-
cp1x: number,
|
|
545
|
-
cp1y: number,
|
|
546
|
-
cp2x: number,
|
|
547
|
-
cp2y: number,
|
|
548
|
-
x2: number,
|
|
549
|
-
y2: number
|
|
550
|
-
): [number, number];
|
|
551
|
-
```
|
|
552
|
-
|
|
553
|
-
##### ellipse(t, cx, cy, rx, ry, rotation, startAngle, endAngle, counterclockwise)
|
|
554
|
-
|
|
555
|
-
Interpolate a point on an elliptical arc.
|
|
556
|
-
|
|
557
|
-
- `t`: Normalized time value to interpolate.
|
|
558
|
-
- `cx`: X-axis coordinate of the center of the ellipse.
|
|
559
|
-
- `cy`: Y-axis coordinate of the center of the ellipse.
|
|
560
|
-
- `rx`: X-radius of the ellipse.
|
|
561
|
-
- `ry`: Y-radius of the ellipse.
|
|
562
|
-
- `[rotation=0]`: Rotation angle of the ellipse (in radians), counterclockwise from the positive X-axis.
|
|
563
|
-
- `[startAngle=0]`: Start angle of the arc (in radians).
|
|
564
|
-
- `[endAngle=TWO_PI]`: Rotation angle of the arc (in radians).
|
|
565
|
-
- `[counterclockwise=false]`: Flag indicating the direction of the arc.
|
|
566
|
-
|
|
567
|
-
```ts
|
|
568
|
-
ellipse(
|
|
569
|
-
t: number,
|
|
570
|
-
cx: number,
|
|
571
|
-
cy: number,
|
|
572
|
-
rx: number,
|
|
573
|
-
ry: number,
|
|
574
|
-
rotation?: number,
|
|
575
|
-
startAngle?: number,
|
|
576
|
-
endAngle?: number,
|
|
577
|
-
counterclockwise?: boolean
|
|
578
|
-
): [number, number];
|
|
579
|
-
```
|
|
580
|
-
|
|
581
|
-
##### arc(t, cx, cy, radius, startAngle, endAngle, counterclockwise)
|
|
582
|
-
|
|
583
|
-
Interpolate a point on a circular arc.
|
|
584
|
-
|
|
585
|
-
- `t`: Normalized time value to interpolate.
|
|
586
|
-
- `cx`: X-axis coordinate of the center of the circle.
|
|
587
|
-
- `cy`: Y-axis coordinate of the center of the circle.
|
|
588
|
-
- `radius`: Radius of the circle.
|
|
589
|
-
- `[startAngle]`: Start angle of the arc (in radians).
|
|
590
|
-
- `[endAngle]`: End angle of the arc (in radians).
|
|
591
|
-
- `[counterclockwise=false]`: Flag indicating the direction of the arc.
|
|
592
|
-
|
|
593
|
-
```ts
|
|
594
|
-
arc(
|
|
595
|
-
t: number,
|
|
596
|
-
cx: number,
|
|
597
|
-
cy: number,
|
|
598
|
-
radius: number,
|
|
599
|
-
startAngle?: number,
|
|
600
|
-
endAngle?: number,
|
|
601
|
-
counterclockwise?: boolean
|
|
602
|
-
): [number, number];
|
|
603
|
-
```
|
|
604
|
-
|
|
605
|
-
##### isCoincident(x1, y1, x2, y2)
|
|
606
|
-
|
|
607
|
-
Check if two points are coincident.
|
|
608
|
-
|
|
609
|
-
- `x1`: X-axis coordinate of the first point.
|
|
610
|
-
- `y1`: Y-axis coordinate of the first point.
|
|
611
|
-
- `x2`: X-axis coordinate of the second point.
|
|
612
|
-
- `y2`: Y-axis coordinate of the second point.
|
|
613
|
-
|
|
614
|
-
```ts
|
|
615
|
-
isCoincident(x1: number, y1: number, x2: number, y2: number): boolean;
|
|
616
|
-
```
|
|
617
|
-
|
|
618
|
-
##### isCollinear(x1, y1, x2, y2, x3, y3)
|
|
619
|
-
|
|
620
|
-
Check if 3 points are collinear.
|
|
621
|
-
|
|
622
|
-
- `x1`: X-axis coordinate of the first point.
|
|
623
|
-
- `y1`: Y-axis coordinate of the first point.
|
|
624
|
-
- `x2`: X-axis coordinate of the second point.
|
|
625
|
-
- `y2`: Y-axis coordinate of the second point.
|
|
626
|
-
- `x3`: Y-axis coordinate of the third point.
|
|
627
|
-
- `y3`: Y-axis coordinate of the third point.
|
|
628
|
-
|
|
629
|
-
```ts
|
|
630
|
-
isCollinear(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number): boolean;
|
|
631
|
-
```
|
|
632
|
-
|
|
633
412
|
#### Fit
|
|
634
413
|
|
|
635
414
|
```ts
|
|
@@ -734,9 +513,20 @@ Clamp a value between two bounds.
|
|
|
734
513
|
clamp(value: number, min?: number, max?: number): number;
|
|
735
514
|
```
|
|
736
515
|
|
|
516
|
+
##### snap(value, multiple)
|
|
517
|
+
|
|
518
|
+
Round a number up to a nearest multiple.
|
|
519
|
+
|
|
520
|
+
- `value`: Value to round.
|
|
521
|
+
- `[multiple=1]`: Multiple to round to.
|
|
522
|
+
|
|
523
|
+
```ts
|
|
524
|
+
snap(value: number, multiple?: number): number;
|
|
525
|
+
```
|
|
526
|
+
|
|
737
527
|
##### lerp(t, min, max)
|
|
738
528
|
|
|
739
|
-
|
|
529
|
+
Interpolate a value between two values using Linear interpolation (lerping).
|
|
740
530
|
|
|
741
531
|
- `t`: Normalized time value to interpolate.
|
|
742
532
|
- `min`: Minimum value.
|
|
@@ -746,9 +536,35 @@ Linear interpolation between two values (lerping).
|
|
|
746
536
|
lerp(t: number, min: number, max: number): number;
|
|
747
537
|
```
|
|
748
538
|
|
|
539
|
+
##### normalize(value, min, max)
|
|
540
|
+
|
|
541
|
+
Normalize a value between two bounds.
|
|
542
|
+
|
|
543
|
+
- `value`: Value to normalize.
|
|
544
|
+
- `min`: Minimum boundary.
|
|
545
|
+
- `max`: Maximum boundary.
|
|
546
|
+
|
|
547
|
+
```ts
|
|
548
|
+
normalize(value: number, min: number, max: number): number;
|
|
549
|
+
```
|
|
550
|
+
|
|
551
|
+
##### map(value, currentMin, currentMax, targetMin, targetMax)
|
|
552
|
+
|
|
553
|
+
Re-map a number from one range to another.
|
|
554
|
+
|
|
555
|
+
- `value`: Value to re-map.
|
|
556
|
+
- `currentMin`: Lower bound of the value's current range.
|
|
557
|
+
- `currentMax`: Upper bound of the value's current range.
|
|
558
|
+
- `targetMin`: Lower bound of the value's target range.
|
|
559
|
+
- `targetMax`: Upper bound of the value's target range.
|
|
560
|
+
|
|
561
|
+
```ts
|
|
562
|
+
map(value: number, currentMin: number, currentMax: number, targetMin: number, targetMax: number): number;
|
|
563
|
+
```
|
|
564
|
+
|
|
749
565
|
##### triLerp(t, min, max, target)
|
|
750
566
|
|
|
751
|
-
|
|
567
|
+
Interpolate a value between two values using Triangular interpolation.
|
|
752
568
|
|
|
753
569
|
- `t`: Normalized time value to interpolate.
|
|
754
570
|
- `min`: Minimum value.
|
|
@@ -761,7 +577,7 @@ triLerp(t: number, min: number, max: number, target: number): number;
|
|
|
761
577
|
|
|
762
578
|
##### expLerp(t, currentMin, currentMax, targetMin, targetMax)
|
|
763
579
|
|
|
764
|
-
|
|
580
|
+
Interpolate a value using Exponential interpolation.
|
|
765
581
|
|
|
766
582
|
- `t`: Normalized time value to interpolate.
|
|
767
583
|
- `currentMin`: Lower bound of the value's current range.
|
|
@@ -773,41 +589,45 @@ Exponential interpolation between two values.
|
|
|
773
589
|
expLerp(t: number, currentMin: number, currentMax: number, targetMin: number, targetMax: number): number;
|
|
774
590
|
```
|
|
775
591
|
|
|
776
|
-
#####
|
|
592
|
+
##### quadraticBezier(t, p1, cp, p2)
|
|
777
593
|
|
|
778
|
-
|
|
594
|
+
Interpolate a value using Quadratic Bézier interpolation.
|
|
779
595
|
|
|
780
|
-
- `
|
|
781
|
-
- `
|
|
782
|
-
- `
|
|
596
|
+
- `t`: Normalized time value to interpolate.
|
|
597
|
+
- `p1`: Start point.
|
|
598
|
+
- `cp`: Control point.
|
|
599
|
+
- `p2`: End point.
|
|
783
600
|
|
|
784
601
|
```ts
|
|
785
|
-
|
|
602
|
+
quadraticBezier(t: number, p1: number, cp: number, p2: number): number;
|
|
786
603
|
```
|
|
787
604
|
|
|
788
|
-
#####
|
|
605
|
+
##### cubicBezier(t, p1, cp1, cp2, p2)
|
|
789
606
|
|
|
790
|
-
|
|
607
|
+
Interpolate a value using Cubic Bézier interpolation.
|
|
791
608
|
|
|
792
|
-
- `
|
|
793
|
-
- `
|
|
794
|
-
- `
|
|
795
|
-
- `
|
|
796
|
-
- `
|
|
609
|
+
- `t`: Normalized time value to interpolate.
|
|
610
|
+
- `p1`: Start point.
|
|
611
|
+
- `cp1`: First control point.
|
|
612
|
+
- `cp2`: Second control point.
|
|
613
|
+
- `p2`: End point.
|
|
797
614
|
|
|
798
615
|
```ts
|
|
799
|
-
|
|
616
|
+
cubicBezier(t: number, p1: number, cp1: number, cp2: number, p2: number): number;
|
|
800
617
|
```
|
|
801
618
|
|
|
802
|
-
#####
|
|
619
|
+
##### catmullRom(t, p1, cp1, cp2, p2)
|
|
803
620
|
|
|
804
|
-
|
|
621
|
+
Interpolate a value using Catmull-Rom interpolation.
|
|
805
622
|
|
|
806
|
-
- `
|
|
807
|
-
- `
|
|
623
|
+
- `t`: Normalized time value to interpolate.
|
|
624
|
+
- `p1`: Start point.
|
|
625
|
+
- `cp1`: First control point.
|
|
626
|
+
- `cp2`: Second control point.
|
|
627
|
+
- `p2`: End point.
|
|
808
628
|
|
|
809
629
|
```ts
|
|
810
|
-
|
|
630
|
+
catmullRom(t: number, p1: number, cp1: number, cp2: number, p2: number): number;
|
|
811
631
|
```
|
|
812
632
|
|
|
813
633
|
##### modAbs(value, length)
|
|
@@ -987,10 +807,9 @@ randomGaussian(mean?: number, spread?: number): number;
|
|
|
987
807
|
Produce a random 2D point around the perimiter of a unit circle.
|
|
988
808
|
|
|
989
809
|
- `[radius=1]`: Radius of the circle.
|
|
990
|
-
- `[target]`: Target vector.
|
|
991
810
|
|
|
992
811
|
```ts
|
|
993
|
-
onCircle(radius?: number
|
|
812
|
+
onCircle(radius?: number): [number, number];
|
|
994
813
|
```
|
|
995
814
|
|
|
996
815
|
##### insideCircle(radius)
|
|
@@ -998,32 +817,29 @@ onCircle(radius?: number, target?: [number, number]): [number, number];
|
|
|
998
817
|
Produce a random 2D point inside a unit circle.
|
|
999
818
|
|
|
1000
819
|
- `[radius=1]`: Radius of the circle.
|
|
1001
|
-
- `[target]` Target vector.
|
|
1002
820
|
|
|
1003
821
|
```ts
|
|
1004
|
-
insideCircle(radius?: number
|
|
822
|
+
insideCircle(radius?: number): [number, number];
|
|
1005
823
|
```
|
|
1006
824
|
|
|
1007
825
|
##### onSphere(radius)
|
|
1008
826
|
|
|
1009
|
-
Produce a random 3D point on the surface of a
|
|
827
|
+
Produce a random 3D point on the surface of a sphere.
|
|
1010
828
|
|
|
1011
829
|
- `[radius=1]`: Radius of the sphere.
|
|
1012
|
-
- `[target]`: Target vector.
|
|
1013
830
|
|
|
1014
831
|
```ts
|
|
1015
|
-
onSphere(radius?: number
|
|
832
|
+
onSphere(radius?: number): [number, number, number];
|
|
1016
833
|
```
|
|
1017
834
|
|
|
1018
835
|
##### insideSphere(radius)
|
|
1019
836
|
|
|
1020
|
-
Produce a random 3D point inside a
|
|
837
|
+
Produce a random 3D point inside a sphere.
|
|
1021
838
|
|
|
1022
839
|
- `[radius=1]`: Radius of the sphere.
|
|
1023
|
-
- `[target]`: Target vector.
|
|
1024
840
|
|
|
1025
841
|
```ts
|
|
1026
|
-
insideSphere(radius?: number
|
|
842
|
+
insideSphere(radius?: number): [number, number, number];
|
|
1027
843
|
```
|
|
1028
844
|
|
|
1029
845
|
### Pseudo-Random Number Generator (PRNG)
|
|
@@ -1345,657 +1161,57 @@ removeTrailingSlash(path: string): string;
|
|
|
1345
1161
|
|
|
1346
1162
|
## Utility classes
|
|
1347
1163
|
|
|
1348
|
-
|
|
1349
|
-
|
|
1350
|
-
### Curve <a id="curve"></a>
|
|
1351
|
-
|
|
1352
|
-
Utility abstract class for manipulating curves.
|
|
1353
|
-
|
|
1354
|
-
- [new Curve()](#curve)
|
|
1355
|
-
- .isCurve: `true`
|
|
1356
|
-
- [.arcLengthDivisions](#curve-arc-length-divisions): `number`
|
|
1357
|
-
- [.needsUpdate](#curve-needs-update): `boolean`
|
|
1358
|
-
- [.getPoint(t)](#curve-get-point-method): `[number, number]`
|
|
1359
|
-
- [.getPointAt(u)](#curve-get-point-at-method): `[number, number]`
|
|
1360
|
-
- [.getPoints(divisions)](#curve-get-points-method): `Array<[number, number]>`
|
|
1361
|
-
- [.getSpacedPoints(divisions)](#curve-get-spaced-points-method): `Array<[number, number]>`
|
|
1362
|
-
- [.getLengths()](#curve-get-length-method): `number`
|
|
1363
|
-
- [.getLengths()](#curve-get-lengths-method): `number[]`
|
|
1364
|
-
- [.updateArcLengths()](#curve-update-arc-lengths-method): `void`
|
|
1365
|
-
- [.getUtoTmapping(t, targetArcLength)](#curve-get-u-to-t-mapping-method): `number`
|
|
1366
|
-
- [.getTangent(t)](#curve-get-tangent-method): `[number, number]`
|
|
1367
|
-
- [.getTangentAt(u)](#curve-get-tangent-at-method): `[number, number]`
|
|
1368
|
-
- `static` [.isClosed(points)](#curve-static-is-closed-method): `boolean`
|
|
1369
|
-
|
|
1370
|
-
#### Properties
|
|
1371
|
-
|
|
1372
|
-
##### arcLengthDivisions <a id="curve-arc-length-divisions"></a>
|
|
1373
|
-
|
|
1374
|
-
Amount of divisions when calculating the cumulative segment lengths of a curve.
|
|
1375
|
-
|
|
1376
|
-
```ts
|
|
1377
|
-
Curve.arcLengthDivisions: number;
|
|
1378
|
-
```
|
|
1379
|
-
|
|
1380
|
-
##### needsUpdate <a id="curve-needs-update"></a>
|
|
1381
|
-
|
|
1382
|
-
Must be set to `true` if the curve parameters have changed.
|
|
1383
|
-
|
|
1384
|
-
```ts
|
|
1385
|
-
Curve.needsUpdate: boolean;
|
|
1386
|
-
```
|
|
1387
|
-
|
|
1388
|
-
#### Methods
|
|
1389
|
-
|
|
1390
|
-
##### getPoint(t) <a id="curve-get-point-method"></a>
|
|
1391
|
-
|
|
1392
|
-
Interpolate a point on the curve.
|
|
1393
|
-
|
|
1394
|
-
- `u`: Normalized time value to interpolate.
|
|
1395
|
-
|
|
1396
|
-
```ts
|
|
1397
|
-
Curve.getPoint(t: number): [number, number];
|
|
1398
|
-
```
|
|
1399
|
-
|
|
1400
|
-
##### getPointAt(u) <a id="curve-get-point-at-method"></a>
|
|
1401
|
-
|
|
1402
|
-
Interpolate a point on the curve.
|
|
1403
|
-
|
|
1404
|
-
- `u`: Normalized position value to interpolate.
|
|
1405
|
-
|
|
1406
|
-
```ts
|
|
1407
|
-
Curve.getPointAt(u: number): [number, number];
|
|
1408
|
-
```
|
|
1409
|
-
|
|
1410
|
-
##### getPoints(divisions) <a id="curve-get-points-method"></a>
|
|
1411
|
-
|
|
1412
|
-
Compute the curve shape into an array of points.
|
|
1413
|
-
|
|
1414
|
-
- `[divisions=5]`: Number of divisions.
|
|
1415
|
-
|
|
1416
|
-
```ts
|
|
1417
|
-
Curve.getPoints(divisions?: number): Array<[number, number]>;
|
|
1418
|
-
```
|
|
1419
|
-
|
|
1420
|
-
##### getSpacedPoints(divisions) <a id="curve-get-spaced-points-method"></a>
|
|
1421
|
-
|
|
1422
|
-
Compute the curve shape into an array of equi-spaced points across the entire curve.
|
|
1423
|
-
|
|
1424
|
-
- `[divisions=5]`: Number of divisions.
|
|
1425
|
-
|
|
1426
|
-
```ts
|
|
1427
|
-
Curve.getSpacedPoints(divisions?: number): Array<[number, number]>;
|
|
1428
|
-
```
|
|
1429
|
-
|
|
1430
|
-
##### getLength() <a id="curve-get-lengt-methodh"></a>
|
|
1431
|
-
|
|
1432
|
-
Compute the total arc length of the curve.
|
|
1433
|
-
|
|
1434
|
-
```ts
|
|
1435
|
-
Curve.getLength(): number;
|
|
1436
|
-
```
|
|
1437
|
-
|
|
1438
|
-
##### getLengths() <a id="curve-get-lengths-method"></a>
|
|
1439
|
-
|
|
1440
|
-
Compute the cumulative segment lengths of the curve.
|
|
1441
|
-
|
|
1442
|
-
- `[divisions]`: Number of divisions.
|
|
1443
|
-
|
|
1444
|
-
```ts
|
|
1445
|
-
Curve.getLengths(divisions?: number): number[];
|
|
1446
|
-
```
|
|
1447
|
-
|
|
1448
|
-
##### updateArcLengths() <a id="curve-get-point-method"></a>
|
|
1449
|
-
|
|
1450
|
-
Update the cached cumulative segment lengths.
|
|
1451
|
-
|
|
1452
|
-
```ts
|
|
1453
|
-
Curve.updateArcLengths(): void;
|
|
1454
|
-
```
|
|
1455
|
-
|
|
1456
|
-
##### getUtoTmapping(t, targetArcLength) <a id="curve-get-u-to-t)mapping-method"></a>
|
|
1457
|
-
|
|
1458
|
-
Re-map a normalized position value into normalized time.
|
|
1459
|
-
|
|
1460
|
-
- `u`: Normalized position value to interpolate.
|
|
1461
|
-
- `[targetArcLength]`: Distance on the curve.
|
|
1462
|
-
|
|
1463
|
-
```ts
|
|
1464
|
-
Curve.getUtoTmapping(u: number, targetArcLength?: number): number;
|
|
1465
|
-
```
|
|
1466
|
-
|
|
1467
|
-
##### getTangent(t) <a id="curve-get-tangent-method"></a>
|
|
1468
|
-
|
|
1469
|
-
Compute an unit vector tangent for the given normalized time value.
|
|
1470
|
-
|
|
1471
|
-
- `t`: Normalized time value.
|
|
1472
|
-
|
|
1473
|
-
```ts
|
|
1474
|
-
Curve.getTangent(t: number): [number, number];
|
|
1475
|
-
```
|
|
1476
|
-
|
|
1477
|
-
##### getTangentAt(u) <a id="curve-get-tangent-at-method"></a>
|
|
1478
|
-
|
|
1479
|
-
Compute an unit vector tangent for the given normalized position value.
|
|
1480
|
-
|
|
1481
|
-
- `u`: Normalized position value.
|
|
1482
|
-
|
|
1483
|
-
```ts
|
|
1484
|
-
Curve.getTangentAt(u: number): [number, number];
|
|
1485
|
-
```
|
|
1486
|
-
|
|
1487
|
-
##### `static` isClosed(points) <a id="curve-static-is-closed-method"></a>
|
|
1488
|
-
|
|
1489
|
-
Static method to check if given points are defining a closed curve.
|
|
1490
|
-
|
|
1491
|
-
- `points`: Points to check.
|
|
1492
|
-
|
|
1493
|
-
```ts
|
|
1494
|
-
static Curve.isClosed(points: Array<[number, number]>): boolean;
|
|
1495
|
-
```
|
|
1496
|
-
|
|
1497
|
-
### LineCurve <a id="line-curve"></a>
|
|
1498
|
-
|
|
1499
|
-
Utility class extending [Curve](#curve) for manipulating lines.
|
|
1500
|
-
|
|
1501
|
-
- [new LineCurve(x1, y1, x2, y2)](#line-curve)
|
|
1502
|
-
|
|
1503
|
-
| Parameter | Type | Default | Description |
|
|
1504
|
-
| --------- | -------- | ------- | ------------------------------------- |
|
|
1505
|
-
| x1 | `number` | | X-axis coordinate of the start point. |
|
|
1506
|
-
| y1 | `number` | | Y-axis coordinate of the start point. |
|
|
1507
|
-
| x2 | `number` | | X-axis coordinate of the end point. |
|
|
1508
|
-
| y2 | `number` | | Y-axis coordinate of the end point. |
|
|
1509
|
-
|
|
1510
|
-
### PolylineCurve <a id="polyline-curve"></a>
|
|
1511
|
-
|
|
1512
|
-
Utility class extending [Curve](#curve) for manipulating polylines.
|
|
1513
|
-
|
|
1514
|
-
- [new PolylineCurve(points)](#polyline-curve)
|
|
1515
|
-
|
|
1516
|
-
| Parameter | Type | Default | Description |
|
|
1517
|
-
| --------- | ------------------------- | ------- | ----------------------------------- |
|
|
1518
|
-
| [points] | `Array<[number, number]>` | `[]` | Array of points defining the curve. |
|
|
1519
|
-
|
|
1520
|
-
### QuadraticBezierCurve <a id="quadratic-bezier-curve"></a>
|
|
1521
|
-
|
|
1522
|
-
Utility class extending [Curve](#curve) for manipulating Quadratic Bézier curves.
|
|
1523
|
-
|
|
1524
|
-
- [new QuadraticBezierCurve(x1, y1, cpx, cpy, x2, y2)](#quadratic-bezier-curve)
|
|
1525
|
-
|
|
1526
|
-
| Parameter | Type | Default | Description |
|
|
1527
|
-
| --------- | -------- | ------- | --------------------------------------- |
|
|
1528
|
-
| x1 | `number` | | X-axis coordinate of the start point. |
|
|
1529
|
-
| y1 | `number` | | Y-axis coordinate of the start point. |
|
|
1530
|
-
| cpx | `number` | | X-axis coordinate of the control point. |
|
|
1531
|
-
| cpy | `number` | | Y-axis coordinate of the control point. |
|
|
1532
|
-
| x2 | `number` | | X-axis coordinate of the end point. |
|
|
1533
|
-
| y2 | `number` | | Y-axis coordinate of the end point. |
|
|
1534
|
-
|
|
1535
|
-
### CubicBezierCurve <a id="cubic-bezier-curve"></a>
|
|
1536
|
-
|
|
1537
|
-
Utility class extending [Curve](#curve) for manipulating Cubic Bézier curves.
|
|
1538
|
-
|
|
1539
|
-
- [new CubicBezierCurve(x1, y1, cp1x, cp1y, cp2x, cp2y x2, y2)](#cubic-bezier-curve)
|
|
1540
|
-
|
|
1541
|
-
| Parameter | Type | Default | Description |
|
|
1542
|
-
| --------- | -------- | ------- | ---------------------------------------------- |
|
|
1543
|
-
| x1 | `number` | | X-axis coordinate of the start point. |
|
|
1544
|
-
| y1 | `number` | | Y-axis coordinate of the start point. |
|
|
1545
|
-
| cp1x | `number` | | X-axis coordinate of the first control point. |
|
|
1546
|
-
| cp1y | `number` | | Y-axis coordinate of the first control point. |
|
|
1547
|
-
| cp2x | `number` | | X-axis coordinate of the second control point. |
|
|
1548
|
-
| cp2y | `number` | | Y-axis coordinate of the second control point. |
|
|
1549
|
-
| x2 | `number` | | X-axis coordinate of the end point. |
|
|
1550
|
-
| y2 | `number` | | Y-axis coordinate of the end point. |
|
|
1551
|
-
|
|
1552
|
-
### CatmullRomCurve <a id="catmull-rom-curve"></a>
|
|
1553
|
-
|
|
1554
|
-
Utility class extending [Curve](#curve) for manipulating Catmull-Rom curves.
|
|
1555
|
-
|
|
1556
|
-
- [new CatmullRomCurve(x1, y1, cp1x, cp1y, cp2x, cp2y x2, y2)](#catmull-rom-bezier-curve)
|
|
1557
|
-
|
|
1558
|
-
| Parameter | Type | Default | Description |
|
|
1559
|
-
| --------- | -------- | ------- | ---------------------------------------------- |
|
|
1560
|
-
| x1 | `number` | | X-axis coordinate of the start point. |
|
|
1561
|
-
| y1 | `number` | | Y-axis coordinate of the start point. |
|
|
1562
|
-
| cp1x | `number` | | X-axis coordinate of the first control point. |
|
|
1563
|
-
| cp1y | `number` | | Y-axis coordinate of the first control point. |
|
|
1564
|
-
| cp2x | `number` | | X-axis coordinate of the second control point. |
|
|
1565
|
-
| cp2y | `number` | | Y-axis coordinate of the second control point. |
|
|
1566
|
-
| x2 | `number` | | X-axis coordinate of the end point. |
|
|
1567
|
-
| y2 | `number` | | Y-axis coordinate of the end point. |
|
|
1568
|
-
|
|
1569
|
-
### SplineCurve <a id="spline-curve"></a>
|
|
1570
|
-
|
|
1571
|
-
Utility class extending [Curve](#curve) for manipulating splines.
|
|
1572
|
-
|
|
1573
|
-
- [new SplineCurve(points)](#spline-curve)
|
|
1574
|
-
|
|
1575
|
-
| Parameter | Type | Default | Description |
|
|
1576
|
-
| --------- | ------------------------- | ------- | ----------------------------------- |
|
|
1577
|
-
| [points] | `Array<[number, number]>` | `[]` | Array of points defining the curve. |
|
|
1578
|
-
|
|
1579
|
-
### EllipseCurve <a id="ellipse-curve"></a>
|
|
1580
|
-
|
|
1581
|
-
Utility class extending [Curve](#curve) for manipulating ellipses.
|
|
1582
|
-
|
|
1583
|
-
- [new EllipseCurve(cx, cy, rx, ry, rotation, startAngle, endAngle, counterclockwise)](#ellipse-curve)
|
|
1584
|
-
|
|
1585
|
-
| Parameter | Type | Default | Description |
|
|
1586
|
-
| ------------------ | --------- | ------- | -------------------------------------------------------------------------------------- |
|
|
1587
|
-
| cx | `number` | | X-axis coordinate of the center of the ellipse. |
|
|
1588
|
-
| cy | `number` | | Y-axis coordinate of the center of the ellipse. |
|
|
1589
|
-
| rx | `number` | | X-radius of the ellipse. |
|
|
1590
|
-
| ry | `number` | | Y-radius of the ellipse. |
|
|
1591
|
-
| [rotation] | `number` | | Rotation angle of the ellipse (in radians), counterclockwise from the positive X-axis. |
|
|
1592
|
-
| [startAngle] | `number` | | Rotation angle of the arc (in radians). |
|
|
1593
|
-
| [endAngle] | `number` | | Rotation angle of the arc (in radians). |
|
|
1594
|
-
| [counterclockwise] | `boolean` | | Flag indicating the direction of the arc. |
|
|
1595
|
-
|
|
1596
|
-
### ArcCurve <a id="arc-curve"></a>
|
|
1597
|
-
|
|
1598
|
-
Utility class extending [Curve](#curve) for manipulating arcs.
|
|
1599
|
-
|
|
1600
|
-
- [new ArcCurve(cx, cy, radius, startAngle, endAngle, counterclockwise)](#arc-curve)
|
|
1601
|
-
|
|
1602
|
-
| Parameter | Type | Default | Description |
|
|
1603
|
-
| ------------------ | --------- | ------- | ---------------------------------------------- |
|
|
1604
|
-
| cx | `number` | | X-axis coordinate of the center of the circle. |
|
|
1605
|
-
| cy | `number` | | Y-axis coordinate of the center of the circle. |
|
|
1606
|
-
| radius | `number` | | X-radius of the circle. |
|
|
1607
|
-
| [startAngle] | `number` | | Rotation angle of the arc (in radians). |
|
|
1608
|
-
| [endAngle] | `number` | | Rotation angle of the arc (in radians). |
|
|
1609
|
-
| [counterclockwise] | `boolean` | | Flag indicating the direction of the arc. |
|
|
1610
|
-
|
|
1611
|
-
### Path <a id="path"></a>
|
|
1612
|
-
|
|
1613
|
-
Utility class extending [Curve](#curve) for manipulating connected curves.
|
|
1614
|
-
|
|
1615
|
-
- [new Path()](#path)
|
|
1616
|
-
- .isPath: `true`
|
|
1617
|
-
- [.curves](#path-curves): `Curve[]`
|
|
1618
|
-
- [.points](#path-points): `Array<[number, number]>`
|
|
1619
|
-
- [.autoClose](#path-auto-close): `boolean`
|
|
1620
|
-
- [.add()](#path-add-method): `void`
|
|
1621
|
-
- [.getCurveLengths()](#path-get-curve-lengths-method): `number[]`
|
|
1622
|
-
|
|
1623
|
-
#### Properties
|
|
1624
|
-
|
|
1625
|
-
##### curves <a id="path-curves"></a>
|
|
1626
|
-
|
|
1627
|
-
Array of curves composing the path.
|
|
1628
|
-
|
|
1629
|
-
```ts
|
|
1630
|
-
Path.curves: Curve[];
|
|
1631
|
-
```
|
|
1632
|
-
|
|
1633
|
-
##### points <a id="path-points"></a>
|
|
1634
|
-
|
|
1635
|
-
Array of points composing the path.
|
|
1636
|
-
|
|
1637
|
-
```ts
|
|
1638
|
-
Path.points: Array<[number, number]>;
|
|
1639
|
-
```
|
|
1640
|
-
|
|
1641
|
-
##### autoClose <a id="path-auto-close"></a>
|
|
1642
|
-
|
|
1643
|
-
```ts
|
|
1644
|
-
Path.autoClose: boolean;
|
|
1645
|
-
```
|
|
1646
|
-
|
|
1647
|
-
#### Methods
|
|
1648
|
-
|
|
1649
|
-
##### add <a id="path-add-method"></a>
|
|
1650
|
-
|
|
1651
|
-
Add a curve to this curve path.
|
|
1652
|
-
|
|
1653
|
-
- `curve`: Curve to add.
|
|
1654
|
-
|
|
1655
|
-
```ts
|
|
1656
|
-
Path.add(curve: Curve): void;
|
|
1657
|
-
```
|
|
1658
|
-
|
|
1659
|
-
##### getCurveLengths <a id="path-get-curve-lengths-method"></a>
|
|
1660
|
-
|
|
1661
|
-
Compute the cumulative curve lengths of the curve path.
|
|
1662
|
-
|
|
1663
|
-
```ts
|
|
1664
|
-
Path.getCurveLengths(): number[];
|
|
1665
|
-
```
|
|
1666
|
-
|
|
1667
|
-
### PathContext <a id="path-context"></a>
|
|
1668
|
-
|
|
1669
|
-
Utility class extending [Path](#path) providing methods similar to the 2D Canvas API.
|
|
1670
|
-
|
|
1671
|
-
- [new PathContext()](#path-context)
|
|
1672
|
-
- [.currentPosition](#path-context-current-position): `[number, number]`
|
|
1673
|
-
- [.setFromPoints(points)](#path-context-set-from-points-method): `this`
|
|
1674
|
-
- [.beginPath()](#path-context-begin-path-method): `this`
|
|
1675
|
-
- [.closePath()](#path-context-close-path-method): `this`
|
|
1676
|
-
- [.moveTo(x, y)](#path-context-move-to-method): `this`
|
|
1677
|
-
- [.lineTo(x, y)](#path-context-line-to-method): `this`
|
|
1678
|
-
- [.polylineTo(points)](#path-context-polyline-to-method): `this`
|
|
1679
|
-
- [.arcTo(x1, y1, x2, y2, radius)](#path-context-arc-to-method): `this`
|
|
1680
|
-
- [.quadraticCurveTo(cpx, cpy, x2, y2)](#path-context-quadratic-curve-to-method): `this`
|
|
1681
|
-
- [.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x2, y2)](#path-context-bezier-curve-to-method): `this`
|
|
1682
|
-
- [.catmullRomCurveTo(cp1x, cp1y, cp2x, cp2y, x2, y2)](#path-context-catmull-rom-to-method): `this`
|
|
1683
|
-
- [.splineTo(points)](#path-context-spline-to-method): `this`
|
|
1684
|
-
- [.ellipse(cx, cy, rx, ry, rotation, startAngle, endAngle, counterclockwise)](#path-context-ellipse-method): `this`
|
|
1685
|
-
- [.arc(cx, cy, radius, startAngle, endAngle, counterclockwise)](#path-context-arc-method): `this`
|
|
1686
|
-
- [.rect(x, y, width, height)](#path-context-rect-method): `this`
|
|
1687
|
-
- [.roundRect(x, y, width, height, radius)](#path-context-round-rect-method): `this`
|
|
1688
|
-
|
|
1689
|
-
#### Properties
|
|
1690
|
-
|
|
1691
|
-
##### currentPosition <a id="path-context-current-position"></a>
|
|
1692
|
-
|
|
1693
|
-
Path current offset position.
|
|
1694
|
-
|
|
1695
|
-
```ts
|
|
1696
|
-
PathContext.currentPosition: [number, number];
|
|
1697
|
-
```
|
|
1698
|
-
|
|
1699
|
-
#### Methods
|
|
1700
|
-
|
|
1701
|
-
##### setFromPoints(points) <a id="path-context-set-from-points-method"></a>
|
|
1702
|
-
|
|
1703
|
-
Create a path from the given list of points.
|
|
1704
|
-
|
|
1705
|
-
- `points`: Array of points defining the path.
|
|
1706
|
-
- `[type]`: Type of curve used for creating the path.
|
|
1707
|
-
|
|
1708
|
-
```ts
|
|
1709
|
-
PathContext.setFromPoints(points: Array<[number, number]>, type?: 'lines' | 'polyline' | 'spline'): this;
|
|
1710
|
-
```
|
|
1711
|
-
|
|
1712
|
-
##### beginPath() <a id="path-context-begin-path-method"></a>
|
|
1713
|
-
|
|
1714
|
-
Begin the path.
|
|
1715
|
-
Reset `currentPosition`.
|
|
1716
|
-
|
|
1717
|
-
```ts
|
|
1718
|
-
PathContext.beginPath(): this;
|
|
1719
|
-
```
|
|
1720
|
-
|
|
1721
|
-
##### closePath <a id="path-context-close-path-method"></a>
|
|
1722
|
-
|
|
1723
|
-
Draw a line from the ending position to the beginning position of the path.
|
|
1724
|
-
Add an instance of [LineCurve](#line-curve) to the path.
|
|
1725
|
-
|
|
1726
|
-
```ts
|
|
1727
|
-
PathContext.closePath(): this;
|
|
1728
|
-
```
|
|
1729
|
-
|
|
1730
|
-
##### moveTo(x, y) <a id="path-context-move-to-method"></a>
|
|
1731
|
-
|
|
1732
|
-
Move `currentPosition` to the coordinates specified by `x` and `y`.
|
|
1733
|
-
|
|
1734
|
-
- `x`: X-axis coordinate of the point.
|
|
1735
|
-
- `y`: Y-axis coordinate of the point.
|
|
1736
|
-
|
|
1737
|
-
```ts
|
|
1738
|
-
PathContext.moveTo(x: number, y: number): this;
|
|
1739
|
-
```
|
|
1740
|
-
|
|
1741
|
-
##### lineTo(x, y) <a id="path-context-line-to-method"></a>
|
|
1742
|
-
|
|
1743
|
-
Draw a line from the current position to the position specified by `x` and `y`.
|
|
1744
|
-
Add an instance of [LineCurve](#line-curve) to the path.
|
|
1745
|
-
|
|
1746
|
-
- `x`: X-axis coordinate of the point.
|
|
1747
|
-
- `y`: Y-axis coordinate of the point.
|
|
1748
|
-
|
|
1749
|
-
```ts
|
|
1750
|
-
PathContext.lineTo(x: number, y: number): this;
|
|
1751
|
-
```
|
|
1752
|
-
|
|
1753
|
-
##### polylineTo(points) <a id="path-context-polyline-to-method"></a>
|
|
1754
|
-
|
|
1755
|
-
Draw a Polyline curve from the current position through the given points.
|
|
1756
|
-
Add an instance of [PolylineCurve](#polyline-curve) to the path.
|
|
1757
|
-
|
|
1758
|
-
- `points`: Array of points defining the curve.
|
|
1759
|
-
|
|
1760
|
-
```ts
|
|
1761
|
-
PathContext.polylineTo(points: Array<[number, number]>): this;
|
|
1762
|
-
```
|
|
1763
|
-
|
|
1764
|
-
##### arcTo(x1, y1, x2, y2, radius) <a id="path-context-arc-to-method"></a>
|
|
1765
|
-
|
|
1766
|
-
Draw an Arc curve from the current position, tangential to the 2 segments created by both control points
|
|
1767
|
-
Add an instance of [ArcCurve](#arc-curve) to the path.
|
|
1768
|
-
|
|
1769
|
-
- `x1`: X-axis coordinate of the first control point.
|
|
1770
|
-
- `y1`: Y-axis coordinate of the first control point.
|
|
1771
|
-
- `x2`: X-axis coordinate of the second control point.
|
|
1772
|
-
- `y2`: Y-axis coordinate of the second control point.
|
|
1773
|
-
- `radius`: Arc radius (Must be non-negative).
|
|
1774
|
-
|
|
1775
|
-
```ts
|
|
1776
|
-
PathContext.arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): this;
|
|
1777
|
-
```
|
|
1778
|
-
|
|
1779
|
-
##### quadraticCurveTo(cpx, cpy, x2, y2) <a id="path-context-quadratic-curve-to-method"></a>
|
|
1780
|
-
|
|
1781
|
-
Draw a Quadratic Bézier curve from the current position to the end point specified by `x` and `y`, using the control point specified by `cpx` and `cpy`.
|
|
1782
|
-
Add an instance of [QuadraticBezierCurve](#quadratic-bezier-curve) to the path.
|
|
1783
|
-
|
|
1784
|
-
- `cpx`: X-axis coordinate of the control point.
|
|
1785
|
-
- `cpy`: Y-axis coordinate of the control point.
|
|
1786
|
-
- `x2`: X-axis coordinate of the end point.
|
|
1787
|
-
- `y2`: Y-axis coordinate of the end point.
|
|
1788
|
-
|
|
1789
|
-
```ts
|
|
1790
|
-
PathContext.quadraticCurveTo(cpx: number, cpy: number, x2: number, y2: number): this;
|
|
1791
|
-
```
|
|
1792
|
-
|
|
1793
|
-
##### bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x2, y2) <a id="path-context-bezier-curve-to-method"></a>
|
|
1794
|
-
|
|
1795
|
-
Draw a Cubic Bézier curve from the current position to the end point specified by `x` and `y`, using the control point specified by (`cp1x`, `cp1y`) and (`cp2x`, `cp2y`).
|
|
1796
|
-
Add an instance of [CubicBezierCurve](#cubic-bezier-curve) to the path.
|
|
1797
|
-
|
|
1798
|
-
- `cp1x`: X-axis coordinate of the first control point.
|
|
1799
|
-
- `cp1y`: Y-axis coordinate of the first control point.
|
|
1800
|
-
- `cp2x`: X-axis coordinate of the second control point.
|
|
1801
|
-
- `cp2y`: Y-axis coordinate of the second control point.
|
|
1802
|
-
- `x2`: X-axis coordinate of the end point.
|
|
1803
|
-
- `y2`: Y-axis coordinate of the end point.
|
|
1804
|
-
|
|
1805
|
-
```ts
|
|
1806
|
-
PathContext.bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x2: number, y2: number): this;
|
|
1807
|
-
```
|
|
1808
|
-
|
|
1809
|
-
##### catmullRomCurveTo(cp1x, cp1y, cp2x, cp2y, x2, y2) <a id="path-context-catmull-rom-curve-to-method"></a>
|
|
1810
|
-
|
|
1811
|
-
Draw a Catmull-Rom curve from the current position to the end point specified by `x` and `y`, using the control points specified by (`cp1x`, `cp1y`) and (`cp2x`, `cp2y`).
|
|
1812
|
-
Add an instance of [CatmullRomCurve](#catmull-rom-curve) to the path.
|
|
1813
|
-
|
|
1814
|
-
- `cp1x`: X-axis coordinate of the first control point.
|
|
1815
|
-
- `cp1y`: Y-axis coordinate of the first control point.
|
|
1816
|
-
- `cp2x`: X-axis coordinate of the second control point.
|
|
1817
|
-
- `cp2y`: Y-axis coordinate of the second control point.
|
|
1818
|
-
- `x2`: X-axis coordinate of the end point.
|
|
1819
|
-
- `y2`: Y-axis coordinate of the end point.
|
|
1820
|
-
|
|
1821
|
-
```ts
|
|
1822
|
-
PathContext.catmullRomCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x2: number, y2: number): this;
|
|
1823
|
-
```
|
|
1824
|
-
|
|
1825
|
-
##### splineTo(points) <a id="path-context-spline-to-method"></a>
|
|
1826
|
-
|
|
1827
|
-
Draw a Spline curve from the current position through the given points.
|
|
1828
|
-
Add an instance of [SplineCurve](#spline-curve) to the path.
|
|
1829
|
-
|
|
1830
|
-
- `points`: Array of points defining the curve.
|
|
1831
|
-
|
|
1832
|
-
```ts
|
|
1833
|
-
PathContext.splineTo(points: Array<[number, number]>): this;
|
|
1834
|
-
```
|
|
1835
|
-
|
|
1836
|
-
##### ellipse(cx, cy, rx, ry, rotation, startAngle, endAngle, counterclockwise) <a id="path-context-ellipse-method"></a>
|
|
1837
|
-
|
|
1838
|
-
Draw an Ellispe curve which is centered at (`cx`, `cy`) position.
|
|
1839
|
-
Add an instance of [EllipseCurve](#ellipse-curve) to the path.
|
|
1840
|
-
|
|
1841
|
-
- `cx`: X-axis coordinate of the center of the ellipse.
|
|
1842
|
-
- `cy`: Y-axis coordinate of the center of the ellipse.
|
|
1843
|
-
- `rx`: X-radius of the ellipse.
|
|
1844
|
-
- `ry`: Y-radius of the ellipse.
|
|
1845
|
-
- `[rotation]`: Rotation angle of the ellipse (in radians), counterclockwise from the positive X-axis.
|
|
1846
|
-
- `[startAngle]`: Start angle of the arc (in radians).
|
|
1847
|
-
- `[endAngle]`: End angle of the arc (in radians).
|
|
1848
|
-
- `[counterclockwise]`: Flag indicating the direction of the arc.
|
|
1849
|
-
|
|
1850
|
-
```ts
|
|
1851
|
-
PathContext.ellipse(cx: number, cy: number, rx: number, ry: number, rotation?: number, startAngle?: number, endAngle?: number, counterclockwise?: boolean): this;
|
|
1852
|
-
```
|
|
1853
|
-
|
|
1854
|
-
##### arc(cx, cy, radius, startAngle, endAngle, counterclockwise) <a id="path-context-arc-method"></a>
|
|
1855
|
-
|
|
1856
|
-
Draw an Arc curve which is centered at (`cx`, `cy`) position.
|
|
1857
|
-
Add an instance of [ArcCurve](#arc-curve) to the path.
|
|
1858
|
-
|
|
1859
|
-
- `cx`: X-axis coordinate of the center of the circle.
|
|
1860
|
-
- `cy`: Y-axis coordinate of the center of the circle.
|
|
1861
|
-
- `radius`: Radius of the circle.
|
|
1862
|
-
- `[startAngle]`: Start angle of the arc (in radians).
|
|
1863
|
-
- `[endAngle]`: End angle of the arc (in radians).
|
|
1864
|
-
- `[counterclockwise]`: Flag indicating the direction of the arc.
|
|
1865
|
-
|
|
1866
|
-
```ts
|
|
1867
|
-
PathContext.arc(cx: number, cy: number, radius: number, startAngle?: number, endAngle?: number, counterclockwise?: boolean): this;
|
|
1868
|
-
```
|
|
1869
|
-
|
|
1870
|
-
##### rect(x, y, width, height) <a id="path-context-rect-method"></a>
|
|
1871
|
-
|
|
1872
|
-
Draw a rectangular path from the start position specified by `x` and `y` to the end position using `width` and `height`.
|
|
1873
|
-
Add an instance of [PolylineCurve](#polyline-curve) to the path.
|
|
1874
|
-
|
|
1875
|
-
- `x`: X-axis coordinate of the rectangle starting point.
|
|
1876
|
-
- `y`: Y-axis coordinate of the rectangle starting point.
|
|
1877
|
-
- `width`: Rectangle width (Positive values are to the right and negative to the left).
|
|
1878
|
-
- `height`: Rectangle height (Positive values are down, and negative are up).
|
|
1879
|
-
|
|
1880
|
-
```ts
|
|
1881
|
-
PathContext.rect(x: number, y: number, width: number, height: number): this;
|
|
1882
|
-
```
|
|
1883
|
-
|
|
1884
|
-
##### roundRect(x, y, width, height, radius) <a id="path-context-round-rect-method"></a>
|
|
1885
|
-
|
|
1886
|
-
Draw a rounded rectangular path from the start position specified by `x` and `y` to the end position using `width` and `height`.
|
|
1887
|
-
|
|
1888
|
-
- `x`: X-axis coordinate of the rectangle starting point.
|
|
1889
|
-
- `y`: Y-axis coordinate of the rectangle starting point.
|
|
1890
|
-
- `width`: Rectangle width (Positive values are to the right and negative to the left).
|
|
1891
|
-
- `height`: Rectangle height (Positive values are down, and negative are up).
|
|
1892
|
-
- `radius`: Radius of the circular arc to be used for the corners of the rectangle.
|
|
1893
|
-
|
|
1894
|
-
```ts
|
|
1895
|
-
PathContext.roundRect(x: number, y: number, width: number, height: number, radius: number | number[]): this;
|
|
1896
|
-
```
|
|
1897
|
-
|
|
1898
|
-
### PathSVG <a id="path-svg"></a>
|
|
1899
|
-
|
|
1900
|
-
Utility class extending [PathContext](#path-context) for manipulating connected curves and generating SVG path.
|
|
1901
|
-
It works by serializing 2D Canvas API to SVG path data.
|
|
1902
|
-
|
|
1903
|
-
- [new PathSVG()](#path-svg-constructor)
|
|
1904
|
-
- `static` [.serialize(curve, params)](#path-svg-static-serialize-method): `string`
|
|
1905
|
-
- `static` [.serializeLineCurve(curve)](#path-svg-static-serialize-line-curve-method): `string`
|
|
1906
|
-
- `static` [.serializePolylineCurve(curve)](#path-svg-static-serialize-polyline-curve-method): `string`
|
|
1907
|
-
- `static` [.serializeQuadraticBezierCurve(curve)](#path-svg-static-serialize-quadratic-bezier-curve-method): `string`
|
|
1908
|
-
- `static` [.serializeCubicBezierCurve(curve)](#path-svg-static-serialize-cubic-bezier-curve-method): `string`
|
|
1909
|
-
- `static` [.serializeCatmullRomCurve(curve, params)](#path-svg-static-serialize-catmull-rom-curve-method): `string`
|
|
1910
|
-
- `static` [.serializeSplineCurve(curve, params)](#path-svg-static-serialize-spline-curve-method): `string`
|
|
1911
|
-
- `static` [.serializeEllipseCurve(curve)](#path-svg-static-serialize-ellipse-curve-method): `string`
|
|
1912
|
-
- `static` [.serializeArcCurve(curve)](#path-svg-static-serialize-arc-curve-method): `string`
|
|
1913
|
-
- [.toString(params)](#path-svg-to-string-method): `string`
|
|
1914
|
-
|
|
1915
|
-
#### Methods
|
|
1916
|
-
|
|
1917
|
-
##### serialize(curve) <a id="path-svg-static-serialize-method"></a>
|
|
1918
|
-
|
|
1919
|
-
Serialize a [Curve](#curve)
|
|
1920
|
-
|
|
1921
|
-
```ts
|
|
1922
|
-
static PathSVG.serialize(curve: Curve, params: object): string;
|
|
1923
|
-
```
|
|
1164
|
+
### Geometry
|
|
1924
1165
|
|
|
1925
|
-
|
|
1166
|
+
See documentation [here](./docs/GEOMETRY.md).
|
|
1926
1167
|
|
|
1927
|
-
|
|
1168
|
+
#### [Vector2](./docs//GEOMETRY.md#vector-2)
|
|
1928
1169
|
|
|
1929
|
-
|
|
1930
|
-
static PathSVG.serializeLineCurve(curve: LineCurve): string;
|
|
1931
|
-
```
|
|
1170
|
+
#### [Vector3](./docs//GEOMETRY.md#vector-3)
|
|
1932
1171
|
|
|
1933
|
-
|
|
1172
|
+
### Curves
|
|
1934
1173
|
|
|
1935
|
-
|
|
1174
|
+
See documentation [here](./docs/CURVES.md).
|
|
1936
1175
|
|
|
1937
|
-
|
|
1938
|
-
static PathSVG.serializePolylineCurve(curve: PolylineCurve): string;
|
|
1939
|
-
```
|
|
1176
|
+
#### [Curve](./docs/CURVES.md#curve)
|
|
1940
1177
|
|
|
1941
|
-
|
|
1178
|
+
#### [LineCurve](./docs/CURVES.md#line-curve)
|
|
1942
1179
|
|
|
1943
|
-
|
|
1180
|
+
#### [LineCurve3](./docs/CURVES.md#line-curve-3)
|
|
1944
1181
|
|
|
1945
|
-
|
|
1946
|
-
static PathSVG.serializeQuadraticBezierCurve(curve: QuadraticBezierCurve): string;
|
|
1947
|
-
```
|
|
1948
|
-
|
|
1949
|
-
##### serializeCubicBezierCurve(curve) <a id="path-svg-static-serialize-cubic-bezier-method"></a>
|
|
1950
|
-
|
|
1951
|
-
Serialize a [CubicBezierCurve](#cubic-bezier-curve).
|
|
1952
|
-
|
|
1953
|
-
```ts
|
|
1954
|
-
static PathSVG.serializeCubicBezierCurve(curve: CubicBezierCurve): string;
|
|
1955
|
-
```
|
|
1182
|
+
#### [PolylineCurve](./docs/CURVES.md#polyline-curve)
|
|
1956
1183
|
|
|
1957
|
-
|
|
1184
|
+
#### [PolylineCurve3](./docs/CURVES.md#polyline-curve-3)
|
|
1958
1185
|
|
|
1959
|
-
|
|
1186
|
+
#### [QuadraticBezierCurve](./docs/CURVES.md#quadratic-bezier-curve)
|
|
1960
1187
|
|
|
1961
|
-
|
|
1962
|
-
static PathSVG.serializeCatmullRomCurve(curve: CatmullRomCurve, params: object): string;
|
|
1963
|
-
```
|
|
1188
|
+
#### [QuadraticBezierCurve3](./docs/CURVES.md#quadratic-bezier-curve-3)
|
|
1964
1189
|
|
|
1965
|
-
|
|
1190
|
+
#### [CubicBezierCurve](./docs/CURVES.md#cubic-bezier-curve)
|
|
1966
1191
|
|
|
1967
|
-
|
|
1192
|
+
#### [CubicBezierCurve3](./docs/CURVES.md#cubic-bezier-curve-3)
|
|
1968
1193
|
|
|
1969
|
-
|
|
1970
|
-
static PathSVG.serializeSplineCurve(curve: SplineCurve, params: object): string;
|
|
1971
|
-
```
|
|
1194
|
+
#### [CatmullRomCurve](./docs/CURVES.md#catmull-rom-curve)
|
|
1972
1195
|
|
|
1973
|
-
|
|
1196
|
+
#### [CatmullRomCurve3](./docs/CURVES.md#catmull-rom-curve-3)
|
|
1974
1197
|
|
|
1975
|
-
|
|
1198
|
+
#### [SplineCurve](./docs/CURVES.md#spline-curve)
|
|
1976
1199
|
|
|
1977
|
-
|
|
1978
|
-
static PathSVG.serializeEllipseCurve(curve: EllipseCurve): string;
|
|
1979
|
-
```
|
|
1200
|
+
#### [SplineCurve3](./docs/CURVES.md#spline-curve-3)
|
|
1980
1201
|
|
|
1981
|
-
|
|
1202
|
+
#### [EllipseCurve](./docs/CURVES.md#ellipse-curve)
|
|
1982
1203
|
|
|
1983
|
-
|
|
1204
|
+
#### [ArcCurve](./docs/CURVES.md#arc-curve)
|
|
1984
1205
|
|
|
1985
|
-
|
|
1986
|
-
static PathSVG.serializeArcCurve(curve: ArcCurve): string;
|
|
1987
|
-
```
|
|
1206
|
+
### Paths
|
|
1988
1207
|
|
|
1989
|
-
|
|
1208
|
+
See documentation [here](./docs/PATHS.md).
|
|
1990
1209
|
|
|
1991
|
-
|
|
1210
|
+
#### [Path](./docs/PATHS.md#path)
|
|
1992
1211
|
|
|
1993
|
-
|
|
1994
|
-
- `[params.curveResolution=5]`: Resolution used for Catmull-Rom curves and Spline curves approximations.
|
|
1212
|
+
#### [PathContext](./docs/PATHS.md#path-context)
|
|
1995
1213
|
|
|
1996
|
-
|
|
1997
|
-
PathSVG.toString(params: object): string;
|
|
1998
|
-
```
|
|
1214
|
+
#### [PathSVG](./docs/PATHS.md#path-svg)
|
|
1999
1215
|
|
|
2000
1216
|
### Color scale
|
|
2001
1217
|
|
|
@@ -2065,7 +1281,7 @@ ColorScale.colors: Array<[number, number, number]>;
|
|
|
2065
1281
|
|
|
2066
1282
|
##### `static` generate(input, target, length) <a id="color-scale-static-generate-method"></a>
|
|
2067
1283
|
|
|
2068
|
-
|
|
1284
|
+
Generate a color scale.
|
|
2069
1285
|
|
|
2070
1286
|
- `input`: Input color representation.
|
|
2071
1287
|
- `target`: Target color representation.
|
|
@@ -2083,7 +1299,7 @@ static ColorScale.generate(
|
|
|
2083
1299
|
|
|
2084
1300
|
##### `static` interpolate(inputColor, targetColor, value) <a id="color-scale-static-interpolate-method"></a>
|
|
2085
1301
|
|
|
2086
|
-
|
|
1302
|
+
Interpolate between colors.
|
|
2087
1303
|
|
|
2088
1304
|
- `inputColor`: Input color.
|
|
2089
1305
|
- `targetColor`: Target color.
|
|
@@ -2150,8 +1366,6 @@ FrameRate.update(): boolean;
|
|
|
2150
1366
|
|
|
2151
1367
|
`QUARTER_PI`
|
|
2152
1368
|
|
|
2153
|
-
`TAU_EPSILON`
|
|
2154
|
-
|
|
2155
1369
|
### Colors
|
|
2156
1370
|
|
|
2157
1371
|
`W3CX11`
|
|
@@ -2159,5 +1373,3 @@ FrameRate.update(): boolean;
|
|
|
2159
1373
|
## License
|
|
2160
1374
|
|
|
2161
1375
|
MIT License, see [LICENSE](https://github.com/toosoon-dev/toosoon-utils/tree/master/LICENSE) for details.
|
|
2162
|
-
|
|
2163
|
-
[](https://nodei.co/npm/toosoon-utils/)
|