tag:blogger.com,1999:blog-66275453512653504202024-02-21T07:14:16.202-08:00OU Mass Writing Project: Computational ArtIn this blog I will write about an specific topic, chosen from Ira Greenberg's book, Proccessing.
It will display some chunks of Java programs together with the explanation of what it does.Anabelahttp://www.blogger.com/profile/09301547102699682053noreply@blogger.comBlogger2125tag:blogger.com,1999:blog-6627545351265350420.post-35453211984599089692009-01-30T06:03:00.000-08:002010-05-25T10:11:39.532-07:00Using Trigonometric Functions<strong>What are trigonometric functions?</strong><br /><br />Trigonometric functions are basically the function of an angle in relation with a right triangle. For the purpose of our Processing study we are going to describe the trigonometric functions in terms of their drawing capabilities, the reason for taken this approach to explain these functions is that it will make our understanding of Processing programming much easier. The trigonometric functions are:<br /><br />• Sine<br />• Cosine<br />• Tangent<br /><br /><br /><strong>The Sine function</strong><br /><br />To help us visualize these functions it is useful to define them with the help of the ‘unit circle’. A unit circle is a circle, which has a radius (r), of 1 unit in length.<br /><br />Let’s think, for example, of the following picture as being a wheel, with centre C= 0, 0. The point P is the intersection of the line, with length r, traced from the centre to the edge (the circumference) of the wheel. Also note that the point P is following the circumference of the wheel in an anti-clockwise movement.<br /><br /><br /><br /><p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgtWBnf0jHJWZ5qdzfujeKCQnjKLoX4qpcacndp5xPjFLVmNXuhoQE76qxUyDUB1osLFV3xm4RGN5UYSQWpi65DnmOal8ifiZabOENOmObxc_mhabnKw7y9tzG__QnW2B17_FyHXndW5E/s1600/unitCircle.jpg"><img style="TEXT-ALIGN: center; MARGIN: 0px auto 10px; WIDTH: 400px; DISPLAY: block; HEIGHT: 297px; CURSOR: hand" id="BLOGGER_PHOTO_ID_5475219416493435122" border="0" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgtWBnf0jHJWZ5qdzfujeKCQnjKLoX4qpcacndp5xPjFLVmNXuhoQE76qxUyDUB1osLFV3xm4RGN5UYSQWpi65DnmOal8ifiZabOENOmObxc_mhabnKw7y9tzG__QnW2B17_FyHXndW5E/s400/unitCircle.jpg" /></a> </p><br /><br /><p></p><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEO8BGNhrVsD0E0sinXQm26smIE79KruIONxH49JKs1XKW75pa-CWcC6beVonvr8Un19eVdWREVVq1VNPQKjkHISppKNb1PpVpAvi0Qu_IBhBKG8WyyZAGcG_exyAqlPWVFCYLXF4Imt8/s1600/NoteA.jpg"><img style="TEXT-ALIGN: center; MARGIN: 0px auto 10px; WIDTH: 400px; DISPLAY: block; HEIGHT: 104px; CURSOR: hand" id="BLOGGER_PHOTO_ID_5475220022587162194" border="0" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEO8BGNhrVsD0E0sinXQm26smIE79KruIONxH49JKs1XKW75pa-CWcC6beVonvr8Un19eVdWREVVq1VNPQKjkHISppKNb1PpVpAvi0Qu_IBhBKG8WyyZAGcG_exyAqlPWVFCYLXF4Imt8/s400/NoteA.jpg" /></a><br /><br /><br /><br />Now, let’s trace a perpendicular line from point P ending on the horizontal axis, X, and we do this for every point P on the circumference, as in figure 1.2<br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnfI2rSERrc9cSM7GLcK6TKrzRNvchn-EejMYS54B18-a9YWpQlm32yE0S7iWXlBVx1qFbNBHkfBPoX-RXQVDuTh-aAhdXd8XnsfCyTYP3_nbjIbFirKVOJv9cVb-HLBgFHVzGPPXjSPk/s1600/UnitContinued.jpg"><img style="TEXT-ALIGN: center; MARGIN: 0px auto 10px; WIDTH: 400px; DISPLAY: block; HEIGHT: 276px; CURSOR: hand" id="BLOGGER_PHOTO_ID_5475221280572333330" border="0" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnfI2rSERrc9cSM7GLcK6TKrzRNvchn-EejMYS54B18-a9YWpQlm32yE0S7iWXlBVx1qFbNBHkfBPoX-RXQVDuTh-aAhdXd8XnsfCyTYP3_nbjIbFirKVOJv9cVb-HLBgFHVzGPPXjSPk/s400/UnitContinued.jpg" /></a><br /><br />We can easily see that for every point on the circumference we end up with an infinite number of perpendicular lines (in blue) on the X-axis, Y. It is this line that we are interested in, as it corresponds to the function sine of the angle theta, sin (θ).<br /><br />For the mathematical minded and for those that need to come to terms why this is so, please refer to box ‘Note B’. It defines the trigonometric functions of an angle (θ) in relation to a righted-triangle; that is, as ratios of the lengths of the triangle sides.<br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeMLsg91dqm34IwUNamfZH7y_wlRIeL0realvxGxARE_-JWZgqe-9XO4uLOldd3Lbrne-TP8c1SUVeUCup2FZ9wz-FttK8rgIsaEV63MLnvjflInrcL_p-rKMvFNysaDfMxGUtIp1DpyM/s1600/NoteB.jpg"><img style="TEXT-ALIGN: center; MARGIN: 0px auto 10px; WIDTH: 364px; DISPLAY: block; HEIGHT: 400px; CURSOR: hand" id="BLOGGER_PHOTO_ID_5475221606089216226" border="0" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeMLsg91dqm34IwUNamfZH7y_wlRIeL0realvxGxARE_-JWZgqe-9XO4uLOldd3Lbrne-TP8c1SUVeUCup2FZ9wz-FttK8rgIsaEV63MLnvjflInrcL_p-rKMvFNysaDfMxGUtIp1DpyM/s400/NoteB.jpg" /></a><br /><br /><br />OK, we now are going to see how sin (θ) provides us with the power to graphics programming.<br /><br />We now draw the movement of the point P in a x-y coordinates plane (the Cartesian plane), with horizontal axis X and vertical axis Y, as it circles around the wheel.<br /><br />We need to plot on the axis Y the positive and negative value of 1 unit and on axis X the value of the angle theta that P has travel along the wheel, against time, in this example 1 second.<br />The result is illustrated in the following graph:<br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_Zd11J8nSQlZtXP29bw9mTQLsNQjBkIbNHc5LewgGDNXcuJewBIjkeGedN27OBtL0hZXz0_IhKAmgxZFboPdjoj94jXh3HEaRZPl9gVF2uQdiBm-0czgUhPkQwuYXvWRLpwjVZreSdxE/s1600/Sine.jpg"><img style="TEXT-ALIGN: center; MARGIN: 0px auto 10px; WIDTH: 400px; DISPLAY: block; HEIGHT: 267px; CURSOR: hand" id="BLOGGER_PHOTO_ID_5475222193878463666" border="0" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_Zd11J8nSQlZtXP29bw9mTQLsNQjBkIbNHc5LewgGDNXcuJewBIjkeGedN27OBtL0hZXz0_IhKAmgxZFboPdjoj94jXh3HEaRZPl9gVF2uQdiBm-0czgUhPkQwuYXvWRLpwjVZreSdxE/s400/Sine.jpg" /></a><br /><br /><br />Clearly, figure 2 shows the graphic characteristics of a sine function, a sine wave. Here point P has travel 360 degrees (or 2π radians); in other words one revolution.<br /><br />If P were to carry on rotating along the circumference of the wheel more than 1 revolution, then we will have a periodic sine function. This means that in the graph the wiggly line will continue towards infinity.<br />The amplitude, that is, the magnitude of the radius of the wheel on our example can have any other value, making the wheel smaller or bigger.<br /><br /><strong>The Cosine function</strong><br /><br />As with the sine function the cosine function can be demonstrated to possess graphics properties. This time, however, we are concerned with the adjacent side of the angle theta, X (in red).<br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj557CO_5jmI3CCjZRVo3BXpJNPtTZl38snTXkTdPy3CHIETv-LLBC3eW_ac2PImc8SNtCuW9XYC97DweMvw-G2Bqb_2cMzUVMHpaJhnzYJj1g8M1YR7UYv0KCRZkeGbpD9Q82qGF9ZmUU/s1600/UnitCircleCos.jpg"><img style="TEXT-ALIGN: center; MARGIN: 0px auto 10px; WIDTH: 400px; DISPLAY: block; HEIGHT: 312px; CURSOR: hand" id="BLOGGER_PHOTO_ID_5475222719223023602" border="0" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj557CO_5jmI3CCjZRVo3BXpJNPtTZl38snTXkTdPy3CHIETv-LLBC3eW_ac2PImc8SNtCuW9XYC97DweMvw-G2Bqb_2cMzUVMHpaJhnzYJj1g8M1YR7UYv0KCRZkeGbpD9Q82qGF9ZmUU/s400/UnitCircleCos.jpg" /></a><br /><br />Remember from the facts listed in 'Note B' above, we can conclude that because:<br /><br />cos(θ) = adjacent/hypotenuse<br />cos(θ) = X/1 = X (expression 2)<br /><br />Therefore, when theta, θ, is:<br /><br />0° then cos(θ) = X = 1, the radius.<br />90° then cos(θ) = X = 0<br />180° then cos(θ) = X = -1<br />270° then cos(θ) = X = 0<br />360° then cos(θ) = X = 1<br /><br />The following figure illustrates the cosine function graphed on the Cartesian plane, in which we can note another kind of wave:<br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFuxyOsns8MztD01eXgGi1WbNM8SwymyuSG6XH28uML_ftoeRNbghNaQIAJCt5p9t7LjqU1FniqTgpmrVAa7GePoluv1_TSdJC4YFytfVGsusyQZmtSbfg0yF5yhvK518OBc7h5OZc73c/s1600/Cosine.jpg"><img style="TEXT-ALIGN: center; MARGIN: 0px auto 10px; WIDTH: 400px; DISPLAY: block; HEIGHT: 275px; CURSOR: hand" id="BLOGGER_PHOTO_ID_5475223182978962914" border="0" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFuxyOsns8MztD01eXgGi1WbNM8SwymyuSG6XH28uML_ftoeRNbghNaQIAJCt5p9t7LjqU1FniqTgpmrVAa7GePoluv1_TSdJC4YFytfVGsusyQZmtSbfg0yF5yhvK518OBc7h5OZc73c/s400/Cosine.jpg" /></a><br /><br /><br />Again, point P has travelled a complete revolution and if it were to carry on it will result on a periodic cosine wave.<br /><br /><strong>Comparison between Sine and Cosine functions</strong><br /><br />We are now going to compare these two functions. To do that we can overlap the two graphs, imagining one on top of the other, like this:<br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU47JEBmuQk_Q8j2z4bDaReHwO0_-ClooPiGrRk5_m1Eplvl4WmgBpUAobwzRfZnhCLJE6Mq3ZiQsjL1IqzGTigS30GvwirY-vZZdP_xdpScgbRgoOKMaAwZAbJa8cy02si0QtUPjuoes/s1600/Sin&Cos.jpg"><img style="TEXT-ALIGN: center; MARGIN: 0px auto 10px; WIDTH: 400px; DISPLAY: block; HEIGHT: 301px; CURSOR: hand" id="BLOGGER_PHOTO_ID_5475223570146084018" border="0" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU47JEBmuQk_Q8j2z4bDaReHwO0_-ClooPiGrRk5_m1Eplvl4WmgBpUAobwzRfZnhCLJE6Mq3ZiQsjL1IqzGTigS30GvwirY-vZZdP_xdpScgbRgoOKMaAwZAbJa8cy02si0QtUPjuoes/s400/Sin&Cos.jpg" /></a><br /><br /><br />Figure 5 we can observe a relationship between the two functions. The sine wave can be considered identical to a cosine wave, but they are separated by one quarter of a cycle; that is π/2 radians. In other words, the cosine leads the sine wave by 90 degrees.<br /><br />As we seen in 'Note B', the sine and cosine functions are translated into the Cartesian plane by:<br /><br />X = cos(θ) * radius (expression 3)<br />Y = sin(θ) * radius (expression 4)<br /><br />Note that these expressions are deducted from expression2 and expression 1 respectively.<br /><br />This is how we can plot the point P into the Cartesian plane with axis y and x. Now, we are interested in translating these expressions for use in our Processing programming.<br /><br />The following are the trigonometric functions in Processing:<br /><br />float x = cos(radians(angle)) * radius (expression 5)<br />float y = sin(radians(angle)) * radius (expression 6)<br /><br />Please note the difference between using degrees and radians for measuring the angle theta. Here the function radians(angle) is used to give the angle in radians.<br /><br /><br /><strong>Demonstration of the Sine function in relation with the unit circle</strong><br /><br />The following is a simple program, 'SineWave', to demonstrate the relationship between the unit circle and the Sine function:<br />// initialising variables<br />float Y = 0;<br />float X = 0;<br />float Cx = 90;<br />float Cy =150;<br />float radius = 75;<br />float theta = 0;<br />int i = 188;<br />PFont font;<br />String label = "π/2 π 3π/2 2π";<br />boolean last = false;<br /><br />// set up frame, circle and coordinates plane<br />void setup() {<br />size (590, 350);<br />fill(255);<br />strokeWeight(1);<br />ellipse(Cx, Cy, 150, 150);<br /><br />// draw cartesian plane<br />strokeWeight(1);<br />line(Cx, Cy, Cx+480, 150);<br />line(191, 65, 191, 250);<br />// write labels<br />fill(0);<br />font = createFont("Helvetica", 32);<br />textFont(font, 13);<br />text(label, 270, 168);<br />}<br /><br />//draw the sine function in the cartesian plane<br />void draw()<br />{ <br />if (theta <= 360)<br />{ <br />// when the last horizontal line has been drawn<br />// then change to white colour, so that leading line is black<br />if (last)<br />{<br />stroke(199);<br />strokeWeight(1); <br />line(Cx + X, Cy - Y, i, Cy - Y);<br />if(theta == 185)<br />{<br />stroke(0);<br />line(191, Cy - Y, i, Cy - Y);<br />} <br />}<br />// axis x and y<br />strokeWeight(1);<br />Y = sin(radians(theta))* radius;<br />X = cos(radians(theta))* radius; <br />// slow down<br />try {<br />Thread.sleep(270);<br />}<br />catch (Exception e) {}<br /><br />// draw the radius<br />stroke(0); // black radius<br />line(Cx, Cy, Cx + X, Cy - Y); <br /><br />// draw the blue point in circunference<br />strokeWeight(5); // thick dot <br />stroke(20, 180, 250); // blue<br />point(Cx + X, Cy - Y); <br /><br />// draw sine wave in axis coordinates, a series of blue dots<br />i = i + 5;<br />point (i, Cy - Y); <br /><br />// draw a line to joint blue point with sine wave<br />stroke(0);<br />strokeWeight(1); <br />line(Cx + X, Cy - Y, i, Cy - Y);<br />theta = theta + 5; // increment angle <br />} <br />last = true; // last line drew<br />}<br /><br /><br /> <br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwZFajU5BZoom8voJZWkM1prztoVOe9E2R2JlYWa9E0xGDQgxiPHsrlLRw0rffnGcatiHXgTv6XkzaSvjg7hP3DV1t2W6__kAHzrY_9wUzniBBFM1IjLylRzOBXYg1yYTxtagvZTWHZQk/s1600/SineFunction.jpg"><img style="TEXT-ALIGN: center; MARGIN: 0px auto 10px; WIDTH: 400px; DISPLAY: block; HEIGHT: 282px; CURSOR: hand" id="BLOGGER_PHOTO_ID_5475225249108301378" border="0" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwZFajU5BZoom8voJZWkM1prztoVOe9E2R2JlYWa9E0xGDQgxiPHsrlLRw0rffnGcatiHXgTv6XkzaSvjg7hP3DV1t2W6__kAHzrY_9wUzniBBFM1IjLylRzOBXYg1yYTxtagvZTWHZQk/s400/SineFunction.jpg" /></a><br /><br /><strong>Some Examples </strong><br /><br />Now that we know the way to graph sine and cosine functions using Processing, we can start with a very simple program. Let’s call it ‘Coloured_ waves’, which just draw two sine waves differing in colour, see figure 7.<br /><br />// initialising variables<br />int y = 100; // the screen vertical coordinate<br />float S = 0; // sine value/y coordinate float<br />theta = 0; // angle<br />float amplitude = 60; // radius<br /><br />// set up window<br />size (400, 300);<br />strokeWeight(3);// thickness of point<br /><br />// draw the first wave of green colour<br />stroke(0, 190, 0); // green<br />for (int i = 10; i <= 380; i=i + 2)<br />{<br />S = sin(radians(theta))*amplitude;<br />point (i, y - S);<br />theta = theta + 3;<br />} <br /><br />// draw a second wave of orange colour<br />stroke(255, 128, 0); // orange<br />theta =0;<br />y = 200;<br />for (int i = 10; i <= 380; i=i + 2)<br />{<br />S = sin(radians(theta))*amplitude;<br />point (i, y - S);<br />theta = theta + 3;<br />}<br /><br /><br /><br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz8XDm5Ze6ykkpwTCKN7cbyb9oHGJCoCIKDEE9tqY-bGiAzVTJSs0FDE8KjcLmIv-upBR7KhvWE9qNae062QE_uwom3hKzSze3jFDSOUdE2g5C7UbAAOeCZlkOX44tjHBqa7DbSciNtps/s1600/ColouredWaves.jpg"><img style="TEXT-ALIGN: center; MARGIN: 0px auto 10px; WIDTH: 400px; DISPLAY: block; HEIGHT: 330px; CURSOR: hand" id="BLOGGER_PHOTO_ID_5475226208851984434" border="0" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz8XDm5Ze6ykkpwTCKN7cbyb9oHGJCoCIKDEE9tqY-bGiAzVTJSs0FDE8KjcLmIv-upBR7KhvWE9qNae062QE_uwom3hKzSze3jFDSOUdE2g5C7UbAAOeCZlkOX44tjHBqa7DbSciNtps/s400/ColouredWaves.jpg" /></a><br /><br />So now we could become a little more adventurous in our programming.<br />The next program is called ‘Alternated_Waves’ and it draws a series of cosines waves with its directions alternated. The waves in black colour can be seen as mirrored by the waves in purple. Figure 8 shows the result.<br /><br />// var initialising<br />int y = 75;<br />float theta = 0;<br /><br />void setup() {<br />size(500, 500);<br />background(255);<br />strokeWeight(3);<br />}<br /><br />void draw(){<br />float cosine = 0;<br />if (y < 425)<br />{<br />// j represents times cosine function will draw in screen<br />for (int j = 1; j <= 6; j++)<br />{<br />theta = 0;<br />// i is the lenght of the cosine wave across the screen<br />for (int i = 20; i < 453; i++)<br />{<br />if ((j+1)%2 == 0)<br />{<br />stroke(0);<br />cosine = cos(radians(theta))*(35);<br />point(i, cosine + y);<br />theta = theta + 5;<br />}<br />else<br />{<br />stroke(180, 35, 255); // purple<br />cosine = cos(radians(theta))*(35);<br />point(i, y - cosine);<br />theta = theta + 5;<br />}<br />}<br />y = y + 70;<br />}<br />}<br />}<br /><br /><br /><br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9DhUuYhFXSXZuSYC-ROquWXDDjKNXCfRATJu6ifmzSzmqOlU916Uqt1hQBr5MHUM41TMTcEyZwKJJ-7CHpVjI1GzZODA7tRnteEYnX9E049OAko87KRKXhO4BFmc7FZXR8jyN1yTijZc/s1600/MirroredCos.jpg"><img style="TEXT-ALIGN: center; MARGIN: 0px auto 10px; WIDTH: 400px; DISPLAY: block; HEIGHT: 386px; CURSOR: hand" id="BLOGGER_PHOTO_ID_5475227884179142098" border="0" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9DhUuYhFXSXZuSYC-ROquWXDDjKNXCfRATJu6ifmzSzmqOlU916Uqt1hQBr5MHUM41TMTcEyZwKJJ-7CHpVjI1GzZODA7tRnteEYnX9E049OAko87KRKXhO4BFmc7FZXR8jyN1yTijZc/s400/MirroredCos.jpg" /></a><br /><br /><br /><strong>The tangent function </strong><br />Once sine and cosine functions have been defined we can derive the tangent function from these two.<br /><br />Recalling from ‘Note B’, we have the expression:<br /><br />tan(θ) = Opposite/Adjacent<br /><br />Now lets repeat our figure of the unit circle but this time showing both sine and cosine functions, like this:<br /><br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs8glasaDC4WbgAasqpFYg1rU-exdZXckOheEJdVNbKeElXhVYqC1TBnUNNbW3hBxMi_nupi_Tmw3nBagS2UzMbHgSPuoTPvQrJ-5b1N3h2TrwnAL0CYG0_TQ7e9pG_QFTROrdZDwmXn0/s1600/Tangent.jpg"><img style="TEXT-ALIGN: center; MARGIN: 0px auto 10px; WIDTH: 400px; DISPLAY: block; HEIGHT: 305px; CURSOR: hand" id="BLOGGER_PHOTO_ID_5475228309049024146" border="0" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs8glasaDC4WbgAasqpFYg1rU-exdZXckOheEJdVNbKeElXhVYqC1TBnUNNbW3hBxMi_nupi_Tmw3nBagS2UzMbHgSPuoTPvQrJ-5b1N3h2TrwnAL0CYG0_TQ7e9pG_QFTROrdZDwmXn0/s400/Tangent.jpg" /></a><br /><br /><br />In figure 9 we can see the line, highlighted in green (Z), which corresponds to the tangent function forming a perpendicular with the radius on point P. We could say that the tangent just touches the unit circle at point P.<br />Therefore we have:<br /><br />tan(θ) = Opposite/Adjacent = Y/X<br /><br />Also recall expressions 1 and 2, repeated here:<br /><br />sin(θ) = Y/1 = Y (expression 1)<br />cos(θ) = X/1 = X (expression 2)<br /><br />Therefore we can conclude that:<br /><br />tan(θ) = sin(θ) / cos(θ)<br />Lets calculate values of tangent when theta , θ, equals:<br /><br />0° then tan(θ) = Y/X = 0/1 = 0<br />90° then tan(θ) = Y/X = 1/0 = undefined<br />180° then tan(θ) = Y/X = 0/-1 = 0<br />270° then tan(θ) = Y/X = -1/0 = undefined<br />360° then tan(θ) = Y/X = 0/1 = 0<br /><br />Finally, the Processing expression to program the tangent function is:<br /><br /><strong>float z = tan(radians(angle)) * radius </strong>(expression 7)<br /><br />The following program, ‘TangentWave’, draws the tangent for one revolution on the Cartesian plane.<br /><br /><br />// initialising variables<br />float tang = 0;<br />float Y = 0;<br />float X = 0;<br />float Cx = 100;<br />float Cy = 350;<br />float radius = 75;<br />float theta = 0;<br />int i = 188;<br />PFont font;<br />String label = "π/2 π 3π/2 2π";<br />boolean last = false;<br /><br />// set up frame, circle and coordinates plane<br />void setup() {<br />size (600, 700);<br />fill(255);<br />strokeWeight(1);<br />ellipse(Cx, Cy, 150, 150);<br /><br />// draw cartesian plane<br />strokeWeight(1);<br />line(Cx, Cy, Cx+465, Cy);<br />line(191, 250, 191, 500);<br />stroke(185);<br />line(270, 50, 270, 660);<br />line(450, 50, 450, 660);<br />// write labels<br />fill(0);<br />font = createFont("Helvetica", 32);<br />textFont(font, 15);<br />text(label, 271, 370);<br />}<br /><br />//draw the tangent function in the cartesian plane<br />void draw()<br />{ <br />if (theta <= 360)<br />{ <br />// when the last horizontal line has been drawn<br />// then change to grey, so that leading line is black<br />if (last)<br />{<br />stroke(185); // grey<br />strokeWeight(1); <br />line(Cx + X, Cy - tang, i, Cy - tang); <br />if(theta == 185)<br />{<br />stroke(0);<br />line(191, Cy - tang, i, Cy - tang);<br />}<br />}<br />// axis x and y<br />strokeWeight(1);<br />tang = tan(radians(theta))*radius;<br />Y = sin(radians(theta))*radius;<br />X = cos(radians(theta))*radius; <br />// slow down<br />try {<br />Thread.sleep(270);<br />}<br />catch (Exception e) {}<br /><br />// draw the angle line, radius<br />stroke(185); // grey radius <br />line(Cx, Cy, Cx + X, Cy - Y);<br /><br />// draw the point that follows the tangent<br />strokeWeight(3); // dot thickness <br />stroke(20, 180, 250); // blue <br />point(Cx + X, Cy - tang); <br /><br />// draw sine wave in axis coordinates, a series of green dots<br />strokeWeight(6); // thick dot <br />stroke(30, 200, 175); // green<br />i = i + 5;<br />point (i, Cy - tang); <br /><br />// draw a line to joint tangent point with tangent wave<br />stroke(0);<br />strokeWeight(1); <br />line(Cx + X, Cy - tang, i, Cy - tang); <br />theta = theta + 5; // increment angle <br />} <br />last = true; // last line drew<br />}<br /> <br /><br /><br />The result is shown in figure 10 below. <br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdAZr-y3W7L3Xt-HV4rtND2N8ZQu9NNjbcxclth9jYXzCirGObVPL843Xgp6T5jsplobLGvEhqEmExEWiL4TNShpLFn3LwKIcIOaawN8NTVBlQevxNHPBR2slpjQh_Cflxv3lwaPkPtkQ/s1600/TanFunction.jpg"><img style="TEXT-ALIGN: center; MARGIN: 0px auto 10px; WIDTH: 315px; DISPLAY: block; HEIGHT: 400px; CURSOR: hand" id="BLOGGER_PHOTO_ID_5475229736641572322" border="0" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdAZr-y3W7L3Xt-HV4rtND2N8ZQu9NNjbcxclth9jYXzCirGObVPL843Xgp6T5jsplobLGvEhqEmExEWiL4TNShpLFn3LwKIcIOaawN8NTVBlQevxNHPBR2slpjQh_Cflxv3lwaPkPtkQ/s400/TanFunction.jpg" /></a><br /><br /><br />The figure above illustrate a different curve altogether from those of the sine and cosine functions. We can see that at 90 and 270 degrees (π/2 and 3π/2 radians respectively) the curve is undefined, going upwards towards positive infinity (+ Y) at 90 degrees and reappearing on the negative coordinate Y at 91 degrees. The same can be said when theta is at 270, 450, etc.<br /><br />Again, if we can carry on further than one revolution, we will be able to see that there is a repeating pattern at every 180 degrees. For example, in figure 10 we can see a curve formed between angles 90 (π/2) and 270 (3π/2) degrees, this shape of curve will repeat at angles between 270 and 450, and between 450 and 630 degreees and so on.<br /><br /><strong>--- Let’s make art ---</strong><br /><br />OK, we have now defined and understood where these three fundamental trigonometric functions come from and as you might agree this is a very interesting and easy way to help our understanding and we hope this have opened your appetite for further investigation and experimentation.<br /><br />The program that follows draws a flower designed with the trigonometric functions. It has been named ‘Trigo_Flower’ and the result is illustrated in figure 11.<br />The flower is drawn from the centre of the window. At its centre there is a small bright purple circle. The flower has a distinctive centre also in blue. The ‘petals’ are drawn in dark purple, with the outer petal drawn a 2/3 of its way in light purple. The gap between second and third petal has been filled with light purple, giving an elegant finish to the flower. These have been achieved with the sine function.<br /><br />And finally, the tangent function is used as a way to simulate the filaments containing the pollen, in dark purple. Also, tangent is used to draw the leaves on each corner of the window.<br /><br />Here is the code for the ‘Trigo_Flower’ program.<br /><br /><br />// var initialising<br />float Y = 0; // sine function<br />float X = 0; // cosine function<br />float tang = 0; // tangent function<br />// for x and y coordinates<br />float Cx = 0; // x coordinate<br />float Cy =0; // y coordinate<br />float Cx1 = 0;<br />float Cx2 = 0;<br />// angles<br />float theta = 0;<br />float betha = 0;<br /><br />float centre = 250; // the centre of window<br /><br />// set up window<br />void setup() {<br />size(500, 500);<br />background(255);<br />strokeWeight(3);<br />}<br /><br />// draw flower function<br />void draw(){<br />float temp1 = 0; <br />float y = 0; // sine<br /><br />if (betha <= 360)<br />{<br />// calculate trig functions. Radius is 183, the flower will fit in this circle<br />Y = sin(radians(betha))* 183;<br />X = cos(radians(betha))* 183;<br />// calculate the coordinates, it is centred in the centre of window<br />Cx = width/2 + X;<br />Cy = height/2 - Y;<br /><br />// when angle is 45 degrees calculate coordinates<br />// to shorten petal<br />if (betha == 45)<br />{<br />Cx1 = width/2 + X; // coor x to the right<br />Cx2 = width/2 - X; // coor x to the left<br />} <br /><br />/* ---------drawing the flower------------*/<br />theta = 0;<br />if (theta <= 360)<br />{<br />strokeWeight(5); // thick dot<br />stroke(20, 180, 250); // blue<br /><br />// draw and paint centre of flower, blue<br />for (float i = 160; i <= 335; i++)<br />{ <br />y = sin(radians(theta))*20/4; <br /><br />point(y + centre, i); // sine function drawn from bottom to top/rigth to left<br />point(centre - y, i); // sine function drawn from top to bottom/left to right<br />point(i, centre - y); // sine function drawn from rigth to left/bottom to top<br />point(i , y + centre ); // sine function drawn from left to right/top to bottom <br />theta++;<br />}<br />// to fill the centre <br />theta = 0;<br />for (float i = 175; i <= 320; i++)<br />{ <br />y = sin(radians(theta))*20/13; <br />point(y + centre, i);<br />point(centre - y, i);<br />point(i, centre - y);<br />point(i , y + centre ); <br />theta++;<br />} <br /><br />// carry on drawing, draw first petal with radius 20<br />theta =0;<br />strokeWeight(3); <br />for (int i = 75; i <= Cy; i++)<br />{ <br />stroke(115, 10, 255); // dark purple<br />y = sin(radians(theta))*20; <br />point(y + centre, i);<br />point(centre - y, i);<br />point(i, centre - y);<br />point(i, y + centre);<br /><br />// colour gap between outer and inner petals<br />stroke(190, 90, 245); // back to purple<br />temp1 = 38; // starting radius <br />for (int j=1; j <= 17; j= j+1)<br />{<br />y = sin(radians(theta))*temp1;<br />point(y + centre, i);<br />point(centre - y, i);<br />point(i, y + centre);<br />point(i, centre - y);<br />temp1= temp1 - 1; // decreasing radius<br />} <br />theta++;<br />} <br /><br />// ---------- draw bigger petal, radius 40 --------------<br />theta = 0;<br />for (int i = 75; i <= Cx; i++)<br />{ <br />stroke(115, 10, 255); // dark purple<br />y = sin(radians(theta))*40; <br />point(y + centre, i);<br />point(i, centre - y);<br />point(i, y + centre );<br />point(centre - y, i);<br /><br />// draw purple tangent function across flower for decoration as pollen filaments <br />if ((theta > 100) && (theta < 260))<br />{ <br />stroke(115, 10, 255); // dark purple<br />tang = tan(radians(theta ))*30;<br />point(i, tang + centre); <br />point(centre - tang, i);<br />point(tang + centre, i); <br />point(i, centre - tang); <br />} <br />theta++;<br />}<br /><br />// ------------- draw last petal leaving a one third of it empty ----------------- <br />theta = 0;<br />for (float i = 75 ; i <= Cx1; i++)<br />{ <br />stroke(190, 90, 245); // back to purple<br />if (i >= Cx2)<br />{ <br />y = sin(radians(theta))*55; <br />point(y + centre, i);<br />point(i, centre - y);<br />point(i , y + centre );<br />point(centre - y, i); <br />}<br />theta++;<br />} <br /><br />// --------------- draw green leaves ----------------<br />theta = 165; <br />for (int i = 25; i <= 155; i=i+1)<br />{<br />if ((theta > 165) && (theta < 260))<br />{ <br />stroke(10, 140, 65); // green <br />for (int k = 25; k <= 35; k= k + 1)<br />{ <br />tang = tan(radians(theta))*10; <br />// top-left leaf<br />point(i, tang + k); <br />point(tang + k, i );<br />// top-right leaf<br />point(width - i, tang + k); <br />point(width-(tang+k),i ); <br />// bottom-left<br />point(tang + k, width - i);<br />point(i, width - (tang+k));<br />// bottom-right<br />point(width - i, width-(tang + k));<br />point(width - (tang+k), width - i);<br />} <br />} <br />theta++;<br />}<br />// inside each leaf<br />theta = 160; <br />temp1 = 15.5;<br />for (int i = 25; i <= 130; i=i+2)<br />{ <br />if ((theta > 175) && (theta < 230))<br />{ <br />tang = tan(radians(theta))*(temp1);<br />temp1 = temp1 + 2.5;<br />// top-left corner<br />point(i, tang + 65); <br />point(tang + 65, i);<br />// top-right corner<br />point(width -i, tang+65); <br />point(width-(tang+65),i );<br />// bottom-left<br />point(tang+65, width-i); <br />point(i, width - (tang+65));<br />// bottom-right<br />point(width - i, width-(tang + 65));<br />point(width - (tang+65), width - i);<br />} <br />theta++;<br />}//--------- end of leaves-------------<br />} <br />betha = betha + 15;<br /><br />// draw a circle in the middle, the centre of flower<br />// draw the blue point in circunference<br />strokeWeight(4); // thick dot <br />stroke (80, 280, 300); // bright blue<br />ellipse(width/2, height/2, 15, 15);<br />fill(235); <br />} <br />}<br /><br /><br />Figure 11 illustrate the result.<br /><br /><br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF5fgEOz8kZ8VGWpsRfOoSf7XXecpZq17kchX0xj7bis4shyphenhyphen1-NLLH0juN70z7eW6xAbb4DTbm1MVlr5J8T_oeYKTwxk07KcTypG2JWrPpIlDVGhaS4DM6DFwYqaXKYJmdIF46Y7ouOdw/s1600/Flower.jpg"><img style="TEXT-ALIGN: center; MARGIN: 0px auto 10px; WIDTH: 361px; DISPLAY: block; HEIGHT: 400px; CURSOR: hand" id="BLOGGER_PHOTO_ID_5475230788053148642" border="0" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF5fgEOz8kZ8VGWpsRfOoSf7XXecpZq17kchX0xj7bis4shyphenhyphen1-NLLH0juN70z7eW6xAbb4DTbm1MVlr5J8T_oeYKTwxk07KcTypG2JWrPpIlDVGhaS4DM6DFwYqaXKYJmdIF46Y7ouOdw/s400/Flower.jpg" /></a>Anabelahttp://www.blogger.com/profile/09301547102699682053noreply@blogger.com4tag:blogger.com,1999:blog-6627545351265350420.post-7476009682810961902008-11-22T08:48:00.000-08:002008-11-22T09:25:41.690-08:00I'm glad my 'Processing' book finally arrived today so now I can get started with chunk 53 'Using trigonometric functions'. I think this topic is quite exciting and challenging. I like art and I agree with the author: trig functions are central to graphics programming.<br />I am looking forward to create art with sine, cosine and tangent functions and to make the most of any 'happy coding mistakes' that I am sure it will make this experience worth it!Anabelahttp://www.blogger.com/profile/09301547102699682053noreply@blogger.com0