Trigonometry — Core Graphics — Xcode iOS — Part-1
In maths, Trigonometry describes relationships between side lengths and angles of triangles. With the use of the trigonometric equation and calculation in the Core Graphics framework, we can make any kind of design and pattern. We can draw lines, edges, circles, arcs, etc with the use of Core graphics functions. Core Graphics is a powerful and pixel perfect tool for designing complex patterns using trigonometric functions.
Trigonometric functions, sin() and cos() in Core Graphics
Here we will get an idea about the most common trigonometric functions sin() and cos() and how can we use it in Core Graphics.
If you are interested in maths and physics, then you will like to read about what is sine and cos functions. How its generated and why its used??
OR
Go directly to the Coding part here if you want to explore just the swift code and understand how to use that in core graphics.
The whole trigonometry and its functions are base on the Unit Circle. So, let’s demystify the whole Unit Circle first.
Unit Circle
This image shows that the 360˚ circle centered at the point x = 0 and y = 0, with 4 quadrants. The 4 quadrants are (x,y), (-x,y), (-x,-y) and (x,-y). In the image, there are lines drawn at angles within the circle in all 4 quadrants. The circle describes both degree and radian value. We know how to draw a line at any angle on the paper with a pencil and ruler.
Because we all used this traditional method in our school 😃.
But what if values of the angles are in radians? Then we have to convert radians to the degree with the following formula. Then we can draw a line on a paper with a specific angle.
But generally in programming, this is the opposite. Generally, all programming languages accept the angle values in radians and not in degree. The same thing is Xcode. When we are using angle in Core Graphics we are providing values in radians. So, let’s take a look at the basic understanding that what is radian and how equals to “Degree * π / 180˚”.
From the above animation, it could be understood that what is 1 radian and how the value of π is equal to 3.14 radians. So when the circle reaches the 180˚, the radian will be π radian, and the circle completes its half cycle. That's why we use this standard formula “Degree * π / 180˚” for converting radians to degrees. And when the circle completes its full one cycle then it will be reached to the 360˚and 2π rad. So we can also describe that formula as a “Degree * 2π / 360˚” for the degree conversion but as the answer will be the same the first one is the standard formula.
For understanding what is sin() and cos() function, we have to understand first how the sine and cosine waves are generated with the Unit circle.
Sine and Cosine wave generation
These waves are generated when we start to unwrap the Unit Circle from 0 degrees, with a specified radius.
Now if we draw a line in the circle for all 0˚ to 360˚ degrees at a distance of every 10˚. It will look something like the below image. Then add a tangent line from the circle's edges to the baseline for all angles. Here we draw two blue color baselines at 0º and 90˚.
Assume that circle’s diameter is 20cm, so the radius is 10cm. So, now we have a total of 8 red color triangles. The opposite length ‘AC’ is the same for all the triangles, It’s called hypotenuse length, which is equal to the radius 10cm. The baseline ‘AB’ and tangent line ‘BC’ varies upon the degree.
Now if we measure ‘BC’ line with the scale and divide by radius 10cm for every triangle we will get 8 values between 0.0 and 1.0. For the 90˚ we can directly calculate the value 10cm / 10cm = 1.0. These values we have to plot on the Y-axis and degrees on the X-axis on a different graph. Then it will be looks like the below.
So, this pattern is basically generated when we unwrapped the unit circle’s 1st quadrant. Then in the 2nd quadrant, the Y value will be decreased with an increase in degrees. Then in 3rd quadrant, the Y value will be negative between 0.0 and -1.0, and in 4rth quadrant, it will be rise again to the 0.
So, after completion of these four quadrants one cycle of the unit circle is completed. And the process will be looks like below.
When this circulation process is continually running the continuous sine waves will be generated i.e. Quad1, Quad2, Quad3, Quad4, Quad1, Quad2, Quad3, Quad4, Quad1, Quad2, Quad3, Quad4 and so on.
Now, the sine wave picture is clear, let’s see what’s cosine waves.
Cosine Waves
There is no more difference, both are the same 😁. The difference is just cosine waves are starting from 90˚ before sine waves. Because in cosine we are starting to unwrapping the circle from 90˚ and in sine wave from 0˚. So there is exactly a 90˚ parallel gap between sine and cosine waves. But the generation process is the same.
Thus the formula is sin(Ø) = cos90˚- (Ø), where Ø is an unknown angle.
Let’s understand this in a different way.
Just note that there is a point P where x and y intersects. So, according to the triangle in a circle, cosø is the value of x, and sinø is the value of y. Now notice that what will be the unit circle value(Red digits i.e. 1, 1, -1, -1), when the cosø and sinø reach to the 0˚ and 90˚.
1 — When point P reaches to 0˚, Y plane is at 0, the X plane is at 1, so sin(0˚) = 0 & cos(0˚) = 1
2 — When point P reaches to 90˚, Y plane is at 1, the X plane is at 0, so sin(90˚) = 1 & cos(90˚) = 0
That’s why the formula is sin(Ø) = cos90˚- (Ø).
Now you should get why cos waves are starting from 90˚ behind the sine waves.😉
The third major fact is that the sinø and cosø values are always between -1.0 < 0.0 < 1.0. So on the sine and cosine wave graph on the y plane, all values will remain between -1.0 < 0.0 < 1.0.
Unit circle wise there is a strong parallel relationship between sine and cosine functions. Also for the tan and cot functions. But in programming geometry, there is no such use of tan and cot functions or it may be rare. That’s why we will not discuss them here.
Coool. That’s it. 👍
But still, there are three main basic components in these waves, which are also dependent on the measurements of the unit circle, those are known as frequency, wavelength, and amplitude here, and in any of the wave patterns.
Frequency, Wavelength, and Amplitude
Wavelength — It is the measurement of length on the graph of one completion of the unit circle. i.e. 0˚ to 360˚.
Frequency — It is the measure of, how many cycles the unit circle finishes in one second. So, we can say that time and frequency are inversely proportional.
Frequency = 1 / Time
Amplitude — Amplitude is related to the unit circle’s radius. If the radius is increasing the amplitude will increase and if the radius will decrease the amplitude will be also decreased. Both are proportional.
Amplitude is always between -1.0 < 0.0 < 1.0.
In the circle, there are 360 degrees, so we can plot values for a total of 360 angles for drawing a pattern. But in rectangle just 4, in septangle 6 and in octangle 8 angles. Then if we unwrap these kinds of shapes w.r.t degrees and radius, then the process and calculations are the same. For the square, we can joint only four points on the graph. That's why we got the discrete square wave pattern for a square shape. Here we have to also divide them into four quadrants and apply the sin() and cos() functions for getting the below patterns.
This all thing I have done in Xcode in the next tutorial for generating sine waves in for circle and different shapes and shown the relationships of plotting points, wavelength, frequency, and amplitude with a Unit circle and many more. It will describe how the native trigonometric functions and basic calculation of core graphics can generate any kind of complex patterns.
Thanks for reading 😁. Feel free to ask any questions. Thanks!!
