Vectors and Trigonometry

[STxAxTIC]

Hello all,

I recently arranged and "linearized" everything I think a qb graphics programmer or amateur mathematician should know about vectors and trigonometry. The attached document is very skeletal but contains the entire truth and doesn't jump around. There is no mention of calculus until the very end - it's really up to your wits and patience to get through this thing. If you're a visual person I suggest drawing notes as you read along. To improve public consumption, I'm considering augmenting the PDF attached with practice problems, maybe even videos.

This is mainly for you, Petr. Have fun.

NOTE: The version attached here is locked in time. For the newest version (starting with next update maybe a day after this post), click the web link under my avatar and look for Vectors and Trigonometry (don't get lost).

[bplus]

Thanks!

[Ashish]

Cool STxAxTIC! Almost 80% of this PDF have been taught to me in the school now. Calculus, Limits, etc is to be taught.
On vectors, there are some brilliant video by 3Blue1Brown with visualisation. Everyone should check this out -

[Petr]

Thank you, STxAxTIC. I'll look at it right away.

[jack]

@STxAxTIC thank you :)

@Ashish nice video :)

[Petr]

Ok, STxAxTIC. Here is my first output. It is very upgraded function (in my 3D programs named as JK!), this use vectors definitions, it is for 2D.

Code: QB64: [Select]

1. SCREEN _NEWIMAGE(800, 800, 256)
2.  
3. DO UNTIL _KEYHIT = 27
4.     CLS
5.     CIRCLE (400, 400), 200
6.     WHILE _MOUSEINPUT: WEND
7.     Mx = _MOUSEX
8.     My = _MOUSEY
9.  
10.     LINE (400, 400)-(400, 600), 14 'first, static vector
11.     LINE (400, 400)-(_MOUSEX, _MOUSEY), 14 'second vector
12.     LOCATE 1, 1: PRINT "Angle between vectors is:"; _R2D(GetAngleVec2D(400, 400, 400, 600, _MOUSEX, _MOUSEY))
13.     _DISPLAY
14.     _LIMIT 20
15. LOOP
16.  
17.  
18.  
19.  
20.  
21.  
22.  
23.  
24.  
25. FUNCTION GetAngleVec2D (x1, y1, x2, y2, x3, y3) 'x1, y1 = start point for both 2D vectors, x2, y2 is first vector end point, x3, y3 is second vector end point
26.     'calculate vector lenghts:
27.     Lenght1 = SQR((x2 - x1) ^ 2 + (y2 - y1) ^ 2)
28.     Lenght2 = SQR((x3 - x1) ^ 2 + (y3 - y1) ^ 2)
29.  
30.     'calculate scalar product:
31.     xx2 = x2 - x1: yy2 = y2 - y1 'this is here, because vector begin is not in 0,0
32.     xx3 = x3 - x1: yy3 = y3 - y1
33.  
34.     S = xx2 * xx3 + yy2 * yy3 'this is Scalar product
35.  
36.     GetAngleVec2D = _ACOS(S / (Lenght1 * Lenght2))
37. END FUNCTION
38.  

[STxAxTIC]

Thanks everyone for having a look at this! My goal is for people to spend more cumulative time reading this work than the time it took me to write it. This kind of writing doesn't spread and make money like the way a fantasy novel does... amen Steve? Haha anyway...

One thing I want to point out - specifically when doing graphics in QB64 - is the horrendously confusing set of screen coordinates. Mathematicians get used to the origin being in the middle of space, and the "up" and "right" directions carry you away in a positive direction (with down and left going negative). We like Cartesian systems.

QB64 is all f*cked up. The origin (0,0) is at the top-left corner of the screen, and moving down is considered increasing your distance from there. Just terrible. In vector language, this would mean the screen basis vectors are:

x_hat = <1,0>
y_hat = <0,-1>

The minus sign captures the backwards Y-motion. This is not enough though, because to do everything right, you need to propagate that minus sign into *everything*. Trig will look half-wrong because SIN() will open in the wrong direction. The right hand rule will be exactly wrong... its just a total mess. This is why its so hard for people to get right, hands down. (Especially trying to *use* QB64 to teach this. Just the wrong move to learn trigonometry on a backwards coordinate system.)

I suggest doing all of the calculations in regular Cartesian space and then converting to screen coordinates at the very end. For instance, on an 800*600 screen, do all calculations in the interval (-400,400) to (-300,300). Then, when it finally comes time to plot, just convert each X and Y:

x = x0 + 400
y = -y0 + 300

There you gain the minus sign back without ever having to mess around or reinvent the fundamentals.

[STxAxTIC]

@Petr:

Nice start - I want to point out that the angular interval between the vectors spans the entire 0-360 degree domain. When I increase the angle to 178,179,180 - I expect the angle to keep increasing from 181 all the way to 360. In your program, it counts back down to zero from 179.

[STxAxTIC]

This captures the point about screen coordinates vs Cartesian (just a super simple trig demo). Click (and/or drag) to move the origin.

Code: QB64: [Select]

1. SCREEN 12
2.  
3. ' Origin in Cartesian coordinates. (Changes when mouse is clicked.)
4. OriginX = -100
5. OriginY = -100
6.  
7. ' Point of interest in Cartesian coordinates. (Changes while mouse moves.)
8. x = _MOUSEX
9. y = _MOUSEY
10. IF x > 0 AND x < 640 AND y > 0 AND y < 480 THEN
11.     GOSUB unconvert
12.     OriginX = x
13.     OriginY = y
14. ELSE
15.     ThePointX = 100
16.     ThePointY = 100
17. END IF
18.  
19. ' Main loop.
20. DO
21.     DO WHILE _MOUSEINPUT
22.         x = _MOUSEX
23.         y = _MOUSEY
24.         IF x > 0 AND x < 640 AND y > 0 AND y < 480 THEN
25.  
26.             GOSUB unconvert
27.             ThePointX = x
28.             ThePointY = y
29.  
30.             IF _MOUSEBUTTON(1) THEN
31.                 x = _MOUSEX
32.                 y = _MOUSEY
33.                 GOSUB unconvert
34.                 OriginX = x
35.                 OriginY = y
36.             END IF
37.  
38.         END IF
39.     LOOP
40.     GOSUB DrawEverything
41.  
42. LOOP
43.  
44. END
45.  
46. DrawEverything:
47. CLS
48. ' Make Cartesian grid.
49. FOR x = OriginX TO 640 STEP 10
50.     LINE (x, 0)-(x, 480), 8
51. NEXT
52. FOR x = OriginX TO 0 STEP -10
53.     LINE (x, 0)-(x, 480), 8
54. NEXT
55. FOR y = OriginY TO 480 STEP 10
56.     LINE (0, -y + 240)-(640, -y + 240), 8
57. NEXT
58. FOR y = OriginY TO -240 STEP -10
59.     LINE (0, -y + 240)-(640, -y + 240), 8
60. NEXT
61. x = OriginX
62. y = OriginY
63. GOSUB convert
64. LINE (0, y)-(640, y), 7
65. LINE (x, 0)-(x, 480), 7
66. _PRINTSTRING (640 - 8 * 6, y), "X-axis"
67. _PRINTSTRING (x, 0), "Y-axis"
68. _PRINTSTRING (x, y), "Origin"
69. ' Draw the circle on which the position vector lives.
70. Radius = SQR((ThePointX - OriginX) ^ 2 + (ThePointY - OriginY) ^ 2)
71. x = OriginX
72. y = OriginY
73. GOSUB convert
74. CIRCLE (x, y), Radius, 7
75. ' Draw the vertical component.
76. x = OriginX
77. y = OriginY
78. GOSUB convert
79. x1 = x
80. y1 = y
81. x = ThePointX
82. y = OriginY
83. GOSUB convert
84. x2 = x
85. y2 = y
86. LINE (x1, y1)-(x2, y2), 9
87. LINE (x1, y1 + 1)-(x2, y2 + 1), 9
88. LINE (x1, y1 - 1)-(x2, y2 - 1), 9
89. ' Draw the horizontal component.
90. x = ThePointX
91. y = OriginY
92. GOSUB convert
93. x1 = x
94. y1 = y
95. x = ThePointX
96. y = ThePointY
97. GOSUB convert
98. x2 = x
99. y2 = y
100. LINE (x1, y1)-(x2, y2), 4
101. LINE (x1 - 1, y1)-(x2 - 1, y2), 4
102. LINE (x1 + 1, y1)-(x2 + 1, y2), 4
103. ' Draw position vector (aka the Hypotenuse).
104. x = OriginX
105. y = OriginY
106. GOSUB convert
107. x1 = x
108. y1 = y
109. x = ThePointX
110. y = ThePointY
111. GOSUB convert
112. x2 = x
113. y2 = y
114. LINE (x1, y1)-(x2, y2), 10
115. LINE (x1 + 1, y1)-(x2 + 1, y2), 10
116. LINE (x1, y1 + 1)-(x2, y2 + 1), 10
117. ' Write text.
118. COLOR 7
119. LOCATE 1, 60: PRINT "-------Origin-------"
120. LOCATE 2, 60: PRINT "Cartesian/Polar/Qb64:"
121. LOCATE 3, 61: PRINT "X=0   , Y=0"
122. LOCATE 4, 61: PRINT "R=0   , Ang=undef"
123. LOCATE 5, 61: PRINT "x="; OriginX + 320; ", "; "y="; -OriginY + 240
124. LOCATE 7, 60: PRINT "-------Cursor-------"
125. LOCATE 8, 60: PRINT "Cartesian/Polar/Qb64:"
126. LOCATE 9, 61: PRINT "X="; ThePointX - OriginX; ", "; "Y="; ThePointY - OriginY
127. ' Deal with radius calculation.
128. Radius = SQR((ThePointX - OriginX) ^ 2 + (ThePointY - OriginY) ^ 2)
129. IF Radius < .0001 THEN Radius = .0001
130. LOCATE 10, 61: PRINT "R="; INT(Radius); ", "; "Ang="; TheAngle
131. ' Deal with the anlge calculation.
132. xdiff = ThePointX - OriginX
133. ydiff = ThePointY - OriginY
134. IF xdiff > 0 AND ydiff > 0 THEN ' First quadrant
135.     TheAngle = INT((180 / 3.14159) * ATN(ydiff / xdiff))
136. END IF
137. IF xdiff < 0 AND ydiff > 0 THEN ' Second quadrant
138.     TheAngle = 180 + INT((180 / 3.14159) * ATN(ydiff / xdiff))
139. END IF
140. IF xdiff < 0 AND ydiff < 0 THEN ' Third quadrant
141.     TheAngle = 180 + INT((180 / 3.14159) * ATN(ydiff / xdiff))
142. END IF
143. IF xdiff > 0 AND ydiff < 0 THEN ' Fourth quadrant
144.     TheAngle = 360 + INT((180 / 3.14159) * ATN(ydiff / xdiff))
145. END IF
146. IF SQR(ydiff ^ 2) < .0001 THEN ydiff = .0001
147. IF SQR(xdiff ^ 2) < .0001 THEN xdiff = .0001
148. LOCATE 11, 61: PRINT "x="; ThePointX + 320; ", "; "y="; -ThePointY + 240
149. LOCATE 13, 60: PRINT "--------Trig--------"
150. LOCATE 14, 61: PRINT "sin(Ang)=";: COLOR 4: PRINT "Opp";: COLOR 7: PRINT "/";: COLOR 10: PRINT "Hyp";: COLOR 7
151. LOCATE 15, 61: PRINT "        ="; USING "##.###"; ydiff / Radius
152. LOCATE 16, 61: PRINT "cos(Ang)=";: COLOR 9: PRINT "Adj";: COLOR 7: PRINT "/";: COLOR 10: PRINT "Hyp";: COLOR 7
153. LOCATE 17, 61: PRINT "        ="; USING "##.###"; xdiff / Radius
154. LOCATE 18, 61: PRINT "tan(Ang)=";: COLOR 4: PRINT "Opp";: COLOR 7: PRINT "/";: COLOR 9: PRINT "Adj";: COLOR 7
155. f = ydiff / xdiff
156. IF f < 9999.99 AND f > -9999.99 THEN
157.     LOCATE 19, 61: PRINT "        ="; USING "####.###"; f
158. END IF
159. _DISPLAY
160. RETURN
161.  
162. convert:
163. ' Converts Cartesian coordinates to QB64 coordinates.
164. x0 = x: y0 = y
165. x = x0 + 320
166. y = -y0 + 240
167. RETURN
168.  
169. unconvert:
170. ' Converts QB64 coordinates to Cartesian coordinates.
171. x0 = x: y0 = y
172. x = x0 - 320
173. y = -y0 + 240
174. RETURN
175.  
176.  
177.  

[bplus]

Started the "grunt work" of translating notes into code, Vector Math.bas:

Code: QB64: [Select]

1. OPTION _EXPLICIT
2. _TITLE "Vector Math" ' B+ started 2019-10-20
3. ' Based on notes provided to QB64 forum by William F Barnes, on 2019-10-19
4. ' https://www.qb64.org/forum/index.php?topic=1782.0
5. ' A vector's dimension is the number of components it has.
6. ' Here is code for processing 2 and 3 dimension vectors.
7.  
8. TYPE xyType
9.     x AS SINGLE
10.     y AS SINGLE
11. END TYPE
12.  
13. TYPE xyzType
14.     x AS SINGLE
15.     y AS SINGLE
16.     z AS SINGLE
17. END TYPE
18.  
19. ' notation 0 w/arrowHat  (no way of telling if 2, 3 or more dimensions)
20. DIM SHARED v2zero AS xyType, v3zero AS xyzType
21. v2zero.x = 0: v2zero.y = 0
22. v3zero.x = 0: v3zero.y = 0: v3zero.z = 0
23.  
24. 'Basis Vectors, isolate components e sub x Dot V w/arrowHat = V sub x
25. DIM SHARED v2e(1 TO 2) AS xyType, v3e(1 TO 3) AS xyzType
26. v2e(1).x = 1: v2e(1).y = 0
27. v2e(2).x = 0: v2e(2).y = 1
28. v3e(1).x = 1: v3e(1).y = 0: v3e(1).z = 0
29. v3e(2).x = 0: v3e(2).y = 1: v3e(2).z = 0
30. v3e(3).x = 0: v3e(3).y = 0: v3e(3).z = 1
31.  
32.  
33. '==================================================================================== test area
34.  
35. 'define a test vector
36. DIM Test AS xyzType, A AS xyzType, B AS xyzType, Inv AS xyzType, sing AS SINGLE
37. A.x = 1: A.y = 2: A.z = 3
38. B.x = -10: B.y = -20: B.z = -30
39. PRINT "A w/arrowHat = " + v3$(A)
40. PRINT "B w/arrowHat = " + v3$(B)
41. v3Add A, B, Test
42. PRINT "A + B = " + v3$(Test)
43. v3Subtr A, B, Test
44. PRINT "A - B = " + v3(Test)
45. v3Scale 10, A, Test
46. PRINT "10A = " + v3$(Test)
47. v3Inverse A, Inv
48. PRINT "A Inverse = " + v3$(Inv)
49. v3Add A, Inv, Test
50. PRINT "Check Inverse: A v3Add Inv = " + v3$(Test)
51. PRINT "A's magnitude is "; v3Magnitude(A)
52. v3Unit A, Test
53. PRINT "A's unit vector is "; v3$(Test)
54. 'isolate y component of test
55. Test.x = 10: Test.y = -101.11: Test.z = 22.37
56. DIM yComponent
57. PRINT "Test = " + v3$(Test)
58. yComponent = v3DotProduct(v3e(2), Test)
59. PRINT "Test isolate component y = v3DotProduct(v3e(2), Test) = " + ts$(yComponent) 'yeah it worked!"
60. setV3 1, 0, 0, A
61. setV3 0, 1, 0, B
62. v3CrossProduct A, B, Test
63. PRINT "A = " + v3$(A)
64. PRINT "B = " + v3$(B)
65. PRINT "A Cross B = " + v3$(Test) ' = [0, 0, 1] ?
66.  
67.  
68. '================================================= subs and fuctions
69. SUB setV3 (x, y, z, setMe AS xyzType)
70.     setMe.x = x: setMe.y = y: setMe.z = z
71. END SUB
72.  
73. FUNCTION v3$ (showMeInnards AS xyzType)
74.     v3$ = "[" + ts$(showMeInnards.x) + ", " + ts$(showMeInnards.y) + ", " + ts$(showMeInnards.z) + "]"
75. END FUNCTION
76.  
77. FUNCTION ts$ (number)
78.     ts$ = _TRIM$(STR$(number))
79. END FUNCTION
80.  
81. 'notation UppercaseLetter w/arrowhat + uppercase Letter w/arrowHat
82. SUB v2Add (A AS xyType, B AS xyType, Sum AS xyType)
83.     Sum.x = A.x + B.x
84.     Sum.y = A.y + B.y
85. END SUB
86. SUB v3Add (A AS xyzType, B AS xyzType, Sum AS xyzType)
87.     Sum.x = A.x + B.x
88.     Sum.y = A.y + B.y
89.     Sum.z = A.z + B.z
90. END SUB
91.  
92. 'notation UppercaseLetter w/arrowHat - UppercaseLetter w/arrowHat
93. SUB v2Subtr (A AS xyType, B AS xyType, Sum AS xyType)
94.     Sum.x = A.x - B.x
95.     Sum.y = A.y - B.y
96. END SUB
97. SUB v3Subtr (A AS xyzType, B AS xyzType, Sum AS xyzType)
98.     Sum.x = A.x - B.x
99.     Sum.y = A.y - B.y
100.     Sum.z = A.z - B.z
101. END SUB
102.  
103. 'notation lowercaseletter (for a number next to (times)) UppercaseLetter w/arrowHat
104. SUB v2Scale (mult AS SINGLE, A AS xyType, Scale AS xyType) 'parallels
105.     Scale.x = mult * A.x
106.     Scale.y = mult * A.y
107. END SUB
108. SUB v3Scale (mult AS SINGLE, A AS xyzType, Scale AS xyzType) 'parallels
109.     Scale.x = mult * A.x
110.     Scale.y = mult * A.y
111.     Scale.z = mult * A.z
112. END SUB
113.  
114. 'notation the inverse of A w/arrowHat is -A w/arrowHat
115. SUB v2Inverse (A AS xyType, Inverse AS xyType) ' A + InverseOfA = 0
116.     Inverse.x = -A.x
117.     Inverse.y = -A.y
118. END SUB
119. SUB v3Inverse (A AS xyzType, Inverse AS xyzType) ' A + InverseOfA = 0
120.     Inverse.x = -A.x
121.     Inverse.y = -A.y
122.     Inverse.z = -A.z
123. END SUB
124.  
125. 'notation: A w/arrowHat Dot B w/arrowHat v2 Dot Product is a number, v3 Dot Product is a vector
126. FUNCTION v2DotProduct (A AS xyType, B AS xyType) 'shadow or projection  if A Dot B = 0 then A , B are perpendicular
127.     v2DotProduct = A.x * B.x + A.y * B.y
128. END SUB
129. FUNCTION v3DotProduct (A AS xyzType, B AS xyzType) 'shadow or projection  if A Dot B = 0 then A , B are perpendicular
130.     v3DotProduct = A.x * B.x + A.y * B.y + A.z * B.z
131. END SUB
132.  
133. 'notation absolute value bars about A w/arrowHat OR just an UppercaseLetter (with no hat), its just a number
134. FUNCTION v2Magnitude (A AS xyType) 'hypotenuse of right triangle
135.     v2Magnitude = SQR(v2DotProduct(A, A))
136. END FUNCTION
137. FUNCTION v3Magnitude (A AS xyzType) 'hypotenuse of cube
138.     v3Magnitude = SQR(v3DotProduct(A, A))
139. END FUNCTION
140.  
141. 'notation: A w/arrowHat X B w/arrowHat, X is a Cross get it?
142. FUNCTION v2CrossProduct (A AS xyType, B AS xyType) ' a vector perpendicular to both A and B, v2 is a magnitude
143.     v2CrossProduct = A.x * B.y - A.y * B.x
144. END FUNCTION
145. SUB v3CrossProduct (A AS xyzType, B AS xyzType, Cross AS xyzType) ' v3 cross product is a 3d vector perpendicular to A and B
146.     'notice x has no x components, y no y componets, z no z components
147.     Cross.x = A.y * B.z - A.z * B.y
148.     Cross.y = A.z * B.x - A.x * B.z
149.     Cross.z = A.x * B.y - A.y * B.x
150. END FUNCTION
151.  
152. 'notation: A w/caratHat = A w/arrowHat divided by A (UppercaseLetter) or scaled by 1/A magnitude (no hats)
153. SUB v2Unit (A AS xyType, Unit AS xyType)
154.     DIM m AS SINGLE
155.     m = v2Magnitude(A)
156.     v2Scale 1 / m, A, Unit
157. END SUB
158. SUB v3Unit (A AS xyzType, Unit AS xyzType)
159.     DIM m AS SINGLE
160.     m = v3Magnitude(A)
161.     v3Scale 1 / m, A, Unit
162. END SUB
163.  

[Qwerkey]

STxAxTIC, a useful doument.  I had almost forgotten the method for cross product.  How easily things slip from memory (those grey cells holding that information have disappeared).

[STxAxTIC]

@Querkey - Thanks for having a look!

I think my next step is to show how this apparatus actually applies to 3D graphics and engines and so on (as least as far as I've taken it across a bunch of scattered projects). Funny thing is, half the math-stuff that Sanctum and similar projects implement are made completely redundant by hardware via _GL, so all the serious coder has to worry about is getting the 3D illusion right. I'll ramble about clipping planes, backface occulting, and overlap prevention for the true nerds out there...

@Bplus - killin' the game man. If we polish off that set of tools and generalize them enough for doing linear algebra, they can hang with the best out there.