Skip to content

Commit 5ed92a7

Browse files
davepagurekdavepagurek
committed
Update vector methods that were overwritten by static counterparts
1 parent d859849 commit 5ed92a7

File tree

29 files changed

+2824
-1467
lines changed

29 files changed

+2824
-1467
lines changed

‎public/reference/data.json‎

Lines changed: 0 additions & 996 deletions
Large diffs are not rendered by default.

‎public/search-indices/en.json‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎public/search-indices/es.json‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎public/search-indices/hi.json‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎public/search-indices/ko.json‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎public/search-indices/zh-Hans.json‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎src/content/reference/en/p5.Vector/add.mdx‎

Lines changed: 151 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -3,31 +3,163 @@ title: add
33
module: Math
44
submodule: ''
55
file: src/math/p5.Vector.js
6-
description: ''
7-
line: 3342
6+
description: >
7+
<p>Adds to a vector's components.</p>
8+
9+
<p><code>add()</code> can use separate numbers, as in <code>v.add(1, 2,
10+
3)</code>,
11+
12+
another <a href="/reference/p5/p5.Vector">p5.Vector</a> object, as in
13+
<code>v.add(v2)</code>, or
14+
15+
an array of numbers, as in <code>v.add([1, 2, 3])</code>.</p>
16+
17+
<p>If a value isn't provided for a component, it won't change. For
18+
19+
example, <code>v.add(4, 5)</code> adds 4 to <code>v.x</code>, 5 to
20+
<code>v.y</code>, and 0 to <code>v.z</code>.
21+
22+
Calling <code>add()</code> with no arguments, as in <code>v.add()</code>, has
23+
no effect.</p>
24+
25+
<p>This method supports N-dimensional vectors.</p>
26+
27+
<p>The static version of <code>add()</code>, as in <code>p5.Vector.add(v2,
28+
v1)</code>, returns a new
29+
30+
<a href="/reference/p5/p5.Vector">p5.Vector</a> object and doesn't change the
31+
32+
originals.</p>
33+
line: 517
834
isConstructor: false
935
itemtype: method
10-
example: []
36+
example:
37+
- |-
38+
<div>
39+
<code>
40+
function setup() {
41+
createCanvas(100, 100);
42+
43+
background(200);
44+
45+
// Style the points.
46+
strokeWeight(5);
47+
48+
// Top left.
49+
let pos = createVector(25, 25);
50+
point(pos);
51+
52+
// Top right.
53+
// Add numbers.
54+
pos.add(50, 0);
55+
point(pos);
56+
57+
// Bottom right.
58+
// Add a p5.Vector.
59+
let p2 = createVector(0, 50);
60+
pos.add(p2);
61+
point(pos);
62+
63+
// Bottom left.
64+
// Add an array.
65+
let arr = [-50, 0];
66+
pos.add(arr);
67+
point(pos);
68+
69+
describe('Four black dots arranged in a square on a gray background.');
70+
}
71+
</code>
72+
</div>
73+
74+
<div>
75+
<code>
76+
function setup() {
77+
createCanvas(100, 100);
78+
79+
background(200);
80+
81+
// Top left.
82+
let p1 = createVector(25, 25);
83+
84+
// Center.
85+
let p2 = createVector(50, 50);
86+
87+
// Bottom right.
88+
// Add p1 and p2.
89+
let p3 = p5.Vector.add(p1, p2);
90+
91+
// Draw the points.
92+
strokeWeight(5);
93+
point(p1);
94+
point(p2);
95+
point(p3);
96+
97+
describe('Three black dots in a diagonal line from top left to bottom right.');
98+
}
99+
</code>
100+
</div>
101+
102+
<div>
103+
<code>
104+
function setup() {
105+
createCanvas(100, 100);
106+
107+
describe('Three arrows drawn on a gray square. A red arrow extends from the top left corner to the center. A blue arrow extends from the tip of the red arrow. A purple arrow extends from the origin to the tip of the blue arrow.');
108+
}
109+
110+
function draw() {
111+
background(200);
112+
113+
let origin = createVector(0, 0);
114+
115+
// Draw the red arrow.
116+
let v1 = createVector(50, 50);
117+
drawArrow(origin, v1, 'red');
118+
119+
// Draw the blue arrow.
120+
let v2 = createVector(-30, 20);
121+
drawArrow(v1, v2, 'blue');
122+
123+
// Purple arrow.
124+
let v3 = p5.Vector.add(v1, v2);
125+
drawArrow(origin, v3, 'purple');
126+
}
127+
128+
// Draws an arrow between two vectors.
129+
function drawArrow(base, vec, myColor) {
130+
push();
131+
stroke(myColor);
132+
strokeWeight(3);
133+
fill(myColor);
134+
translate(base.x, base.y);
135+
line(0, 0, vec.x, vec.y);
136+
rotate(vec.heading());
137+
let arrowSize = 7;
138+
translate(vec.mag() - arrowSize, 0);
139+
triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
140+
pop();
141+
}
142+
</code>
143+
</div>
11144
class: p5.Vector
12-
return:
13-
description: resulting <a href="#/p5.Vector">p5.Vector</a>.
14-
type: p5.Vector
15145
overloads:
16146
- params:
17-
- name: v1
18-
description: A <a href="#/p5.Vector">p5.Vector</a> to add
19-
type: p5.Vector
20-
- name: v2
21-
description: A <a href="#/p5.Vector">p5.Vector</a> to add
22-
type: p5.Vector
23-
- name: target
24-
description: vector to receive the result.
147+
- name: x
148+
description: x component of the vector to be added or an array of components.
149+
type: Number|Array
150+
- name: 'y'
151+
description: y component of the vector to be added.
25152
optional: 1
26-
type: p5.Vector
27-
return:
28-
description: resulting <a href="#/p5.Vector">p5.Vector</a>.
29-
type: p5.Vector
30-
chainable: false
153+
type: Number
154+
- name: z
155+
description: z component of the vector to be added.
156+
optional: 1
157+
type: Number
158+
- params:
159+
- name: value
160+
description: The vector to add
161+
type: 'p5.Vector|Number[]'
162+
chainable: true
31163
---
32164

33165

‎src/content/reference/en/p5.Vector/angleBetween.mdx‎

Lines changed: 141 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,32 +3,158 @@ title: angleBetween
33
module: Math
44
submodule: ''
55
file: src/math/p5.Vector.js
6-
description: >-
7-
Calculates and returns the angle between two vectors. This function will take
6+
description: >
7+
<p>Calculates the angle between two vectors.</p>
88
9-
the <a href="/reference/p5/angleMode/">angleMode</a> on v1 into consideration,
10-
and
9+
<p>The angles returned are signed, which means that
1110
12-
give the angle in radians or degrees accordingly.
13-
line: 3747
11+
<code>v1.angleBetween(v2) === -v2.angleBetween(v1)</code>.</p>
12+
13+
<p>If the vector was created with
14+
15+
<a href="/reference/p5/createVector/">createVector()</a>,
16+
<code>angleBetween()</code> returns
17+
18+
angles in the units of the current
19+
20+
<a href="/reference/p5/angleMode/">angleMode()</a>.</p>
21+
line: 2479
1422
isConstructor: false
1523
itemtype: method
16-
example: []
24+
example:
25+
- |-
26+
<div class="norender">
27+
<code>
28+
function setup() {
29+
// Create p5.Vector objects.
30+
let v0 = createVector(1, 0);
31+
let v1 = createVector(0, 1);
32+
33+
// Prints "1.570..." to the console.
34+
print(v0.angleBetween(v1));
35+
36+
// Prints "-1.570..." to the console.
37+
print(v1.angleBetween(v0));
38+
}
39+
</code>
40+
</div>
41+
42+
<div class="norender">
43+
<code>
44+
function setup() {
45+
// Use degrees.
46+
angleMode(DEGREES);
47+
// Create p5.Vector objects.
48+
let v0 = createVector(1, 0);
49+
let v1 = createVector(0, 1);
50+
51+
// Prints "90" to the console.
52+
print(v0.angleBetween(v1));
53+
54+
// Prints "-90" to the console.
55+
print(v1.angleBetween(v0));
56+
}
57+
</code>
58+
</div>
59+
60+
<div class="norender">
61+
<code>
62+
function setup() {
63+
// Create p5.Vector objects.
64+
let v0 = createVector(1, 0);
65+
let v1 = createVector(0, 1);
66+
67+
// Prints "1.570..." to the console.
68+
print(p5.Vector.angleBetween(v0, v1));
69+
70+
// Prints "-1.570..." to the console.
71+
print(p5.Vector.angleBetween(v1, v0));
72+
}
73+
</code>
74+
</div>
75+
76+
<div class="norender">
77+
<code>
78+
function setup() {
79+
// Use degrees.
80+
angleMode(DEGREES);
81+
82+
// Create p5.Vector objects.
83+
let v0 = createVector(1, 0);
84+
let v1 = createVector(0, 1);
85+
86+
// Prints "90" to the console.
87+
print(p5.Vector.angleBetween(v0, v1));
88+
89+
// Prints "-90" to the console.
90+
print(p5.Vector.angleBetween(v1, v0));
91+
}
92+
</code>
93+
</div>
94+
95+
<div>
96+
<code>
97+
function setup() {
98+
createCanvas(100, 100);
99+
100+
describe('Two arrows extend from the center of a gray square. A red arrow points to the right and a blue arrow points down. The text "Radians: 1.57" and "Degrees: 90" is written above the arrows.');
101+
}
102+
function draw() {
103+
background(200);
104+
105+
// Create p5.Vector objects.
106+
let v0 = createVector(50, 50);
107+
let v1 = createVector(30, 0);
108+
let v2 = createVector(0, 30);
109+
110+
// Draw the red arrow.
111+
drawArrow(v0, v1, 'red');
112+
113+
// Draw the blue arrow.
114+
drawArrow(v0, v2, 'blue');
115+
116+
// Use radians.
117+
angleMode(RADIANS);
118+
119+
// Display the angle in radians.
120+
let angle = round(v1.angleBetween(v2), 2);
121+
text(`Radians: ${angle}`, 20, 20);
122+
123+
// Use degrees.
124+
angleMode(DEGREES);
125+
126+
// Display the angle in degrees.
127+
angle = round(v1.angleBetween(v2), 2);
128+
text(`Degrees: ${angle}`, 20, 35);
129+
}
130+
131+
// Draws an arrow between two vectors.
132+
function drawArrow(base, vec, myColor) {
133+
push();
134+
stroke(myColor);
135+
strokeWeight(3);
136+
fill(myColor);
137+
translate(base.x, base.y);
138+
line(0, 0, vec.x, vec.y);
139+
rotate(vec.heading());
140+
let arrowSize = 7;
141+
translate(vec.mag() - arrowSize, 0);
142+
triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
143+
pop();
144+
}
145+
</code>
146+
</div>
17147
class: p5.Vector
18148
return:
19-
description: angle between the two vectors.
149+
description: angle between the vectors.
20150
type: Number
21151
overloads:
22-
- params: []
23152
- params:
24-
- name: v1
25-
description: the first vector.
26-
type: p5.Vector
27-
- name: v2
28-
description: the second vector.
153+
- name: value
154+
description: 'x, y, and z components of a <a href="#/p5.Vector">p5.Vector</a>.'
29155
type: p5.Vector
30156
return:
31-
description: angle between the two vectors.
157+
description: angle between the vectors.
32158
type: Number
33159
chainable: false
34160
---

0 commit comments

Comments
 (0)