-
-
Notifications
You must be signed in to change notification settings - Fork 173
Expand file tree
/
Copy pathindex.html
More file actions
161 lines (126 loc) · 10.5 KB
/
Copy pathindex.html
File metadata and controls
161 lines (126 loc) · 10.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<table width="650">
<tr>
<td>
<p class="license">
This tutorial is from the book, <a href="http://www.processing.org/learning/books/#ira">Processing: Creative Coding and Computational Art</a>, Ira Greenberg, Friends of ED, © 2007. This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License</a>. If you see any errors or have comments, please <a href="https://github.com/processing/processing-docs/issues?state=open">let us know</a>.
</p>
<h1 style="line-height: 0.7em;">Trigonometry Primer</h1>
<h3 style="line-height: 0.7em;"><em>Ira Greenberg</em></h3>
<p class="txt">
Trigonometry (really just a couple of the trig functions) is central to graphics programming. That being said, if you're anything like me you probably have a hazy memory of trig. Perhaps you remember the mnemonic device <strong>soh-cah-toa</strong> to remember the relationships between the trig functions and a right triangle. Here's a diagram to awaken your memory.
</p>
<!--<img src="imgs/sohcahtoa.jpg">-->
<img src="imgs/sohcahtoa.svg" style= "width: 645px; height: 486px" class="tut" />
<ul>
<li><strong>soh</strong> stands for "sine equals opposite over hypotenuse." "Opposite" refers to the side opposite the angle.</li>
<li><strong>cah</strong> stands for "cosine equals adjacent over hypotenuse." "Adjacent" is the side next to the angle.</li>
<li><strong>toa</strong> refers to "tangent equals opposite over adjacent."</li>
</ul>
<p class="txt">
You should also notice in the figure that tangent equals sine(θ) over cosine(θ). You may also remember that sine and cosine are similar when you graph them, both forming periodic waves. Only the cosine wave is shifted a bit (90° or pi/2) on the graph, which is technically called a phase shift. I fully realize that it is difficult to deal with this stuff in the abstract. Fortunately, there is another model, the unit circle (shown below) used to visualize and study the trig functions.
</p>
<!--<img src="imgs/unit_circle.jpg">-->
<img src="imgs/unit_circle.svg" style= "width: 645px; height: 486px" class="tut" />
<p class="txt">
The unit circle is a circle with a radius of 1 unit in length—hence its imaginative name. When you work with the unit circle, you don't use the regular and trusted Cartesian coordinate system; instead you use a polar coordinate system. The Cartesian system works great in a rectangular grid space, where a point can be located by a coordinate, such as (x, y). In a polar coordinate system, in contrast, location is specified by (r, θ), where r is the radius and θ (the Greek letter theta) is the angle of rotation. The unit circle has its origin at its center, and you measure angles of rotation beginning at the right-middle edge of the unit circle (facing 3 o'clock) and moving in a counterclockwise direction around it.
</p>
<p class="txt">
In the unit circle diagram, the point p is at 45° or pi / 4. You can use pi also to measure around the unit circle, as illustrated in the figure. Halfway around the circle (180°) is equal to pi radians, and all the way around the circle is equal to 2pi radians and also 0 radians, since a circle is continuous and ends where it begins. The number pi is a constant that is equal to the circumference of a circle divided by its diameter, and is approximately 3.142.
</p>
<p class="txt">
In the polar system, you use radians to measure angles, instead of degrees. The angle of rotation in radians is commonly referred to as θ (the Greek letter theta). The arc length of this rotation is calculated by r*θ where r is the radius. In a unit circle, with a radius of 1, θ is equal to the arc length of rotation (arc s in unit circle diagram). It's nice to know the arc length, but most of the time (in computer graphics), you really just want to know the location of a point in relation to the unit circle. For example, if I wanted to rotate a point around the unit circle, I'd need to know how to place and move the point in a circle. With the unit circle, this is an incredibly easy task and precisely the kind of thing trig is used for.
</p>
<p class="txt">
There is a really simple relationship between the trig functions and the unit circle. Notice in the unit circle diagram that from point p on the ellipse, a right triangle is formed within the unit circle. This should immediately make you think of good old Pythagoras. Notice also that r (the radius) is the hypotenuse of the right triangle. In addition, you now also know that with the trig functions, you can use theta and any one side (opposite, adjacent, or hypotenuse) to solve the rest of the triangle. The big payoff of these relationships, for our purposes, is that to translate point p in the polar coordinate system to the Cartesian coordinate system (the system used by our monitors), you would use these simple expressions:
</p>
<p class="txt">
<strong>x = cosine(theta) * radius</strong><br />
<strong>y = sine(theta) * radius</strong>
</p>
<p class="txt">
These seemingly humble little expressions are very powerful and can be exploited for all sorts of expressive and organic purposes.
</p>
<p class="txt">
Here's how you actually use the trig functions in Processing:
</p>
<p class="txt">
<strong>float x = cos(radians(angle)) * radius;</strong><br />
<strong>float y = sin(radians(angle)) * radius;</strong>
</p>
<p class="txt">
Notice the function call <strong>(radians(angle))</strong> inside each of the trig function calls. Remember that theta is measured in radians, in the polar coordinate system. However, in the Cartesian coordinate system, you work in degrees. To convert between radians and degrees and vice versa, you can use the following expressions:
</p>
<p class="txt">
<strong>theta = angle*pi/180</strong><br />
<strong>angle = theta*180/pi</strong>
</p>
<p class="txt">
Or better yet, just use Processing's handy conversion functions:
</p>
<p class="txt">
<strong>theta = radians(angle)</strong><br />
<strong>angle = degrees(theta)</strong>
</p>
<p class="txt">
Lastly, I include a Processing sketch that demonstrates how the unit circle and sine function relate:
</p>
<pre>
<img src="imgs/trig_console.jpg">
<span style="color: #E2661A;">float</span> px, py, px2, py2;
<span style="color: #E2661A;">float</span> angle, angle2;
<span style="color: #E2661A;">float</span> radius = 50;
<span style="color: #E2661A;">float</span> frequency = 2;
<span style="color: #E2661A;">float</span> frequency2 = 2;
<span style="color: #E2661A;">float</span> x, x2;
<span style="color: #33997E;">void</span> <span style="color: #006699;"><b>setup</b></span>(){
<span style="color: #006699;">size</span>(600, 200);
<span style="color: #006699;">background</span> (127);
}
<span style="color: #33997E;">void</span> <span style="color: #006699;"><b>draw</b></span>(){
<span style="color: #006699;">background</span> (127);
<span style="color: #006699;">noStroke</span>();
<span style="color: #006699;">fill</span>(255);
<span style="color: #006699;">ellipse</span>(<span style="color: #D94A7A;">width</span>/8, 75, radius*2, radius*2);
<span style="color: #666666;">// Rotates rectangle around circle</span>
px = <span style="color: #D94A7A;">width</span>/8 + <span style="color: #006699;">cos</span>(<span style="color: #006699;">radians</span>(angle))*(radius);
py = 75 + <span style="color: #006699;">sin</span>(<span style="color: #006699;">radians</span>(angle))*(radius);
<span style="color: #006699;">fill</span>(0);
<span style="color: #006699;">rect</span> (px, py, 5, 5);
<span style="color: #006699;">stroke</span>(100);
<span style="color: #006699;">line</span>(<span style="color: #D94A7A;">width</span>/8, 75, px, py);
<span style="color: #006699;">stroke</span>(200);
<span style="color: #666666;">// Keep reinitializing to 0, to avoid</span>
<span style="color: #666666;">// flashing during redrawing</span>
angle2 = 0;
<span style="color: #666666;">// Draw static curve - y = sin(x)</span>
<span style="color: #669900;">for</span> (<span style="color: #E2661A;">int</span> i = 0; i< <span style="color: #D94A7A;">width</span>; i++){
px2 = <span style="color: #D94A7A;">width</span>/8 + <span style="color: #006699;">cos</span>(<span style="color: #006699;">radians</span>(angle2))*(radius);
py2 = 75 + <span style="color: #006699;">sin</span>(<span style="color: #006699;">radians</span>(angle2))*(radius);
<span style="color: #006699;">point</span>(<span style="color: #D94A7A;">width</span>/8+radius+i, py2);
angle2 -= frequency2;
}
<span style="color: #666666;">// Send small ellipse along sine curve</span>
<span style="color: #666666;">// to illustrate relationship of circle to wave</span>
<span style="color: #006699;">noStroke</span>();
<span style="color: #006699;">ellipse</span>(<span style="color: #D94A7A;">width</span>/8+radius+x, py, 5, 5);
angle -= frequency;
x+=1;
<span style="color: #666666;">// When little ellipse reaches end of window,</span>
<span style="color: #666666;">// set the variables back to 0</span>
<span style="color: #669900;">if</span> (x >= <span style="color: #D94A7A;">width</span>-60) {
x = 0;
angle = 0;
}
<span style="color: #666666;">// Draw dynamic line connecting circular path with wave</span>
<span style="color: #006699;">stroke</span>(50);
<span style="color: #006699;">line</span>(px, py, <span style="color: #D94A7A;">width</span>/8+radius+x, py);
<span style="color: #666666;">// Output calculations to screen</span>
<span style="color: #006699;">text</span>(<span style="color: #7D4793;">"y = sin x"</span>, 35, 185);
<span style="color: #006699;">text</span>(<span style="color: #7D4793;">"px = "</span> + px, 105, 185);
<span style="color: #006699;">text</span>(<span style="color: #7D4793;">"py = "</span> + py, 215, 185);
}
</pre>
</td>
</tr>
</table>