HO_Voorbeeldhoofdstuk_Mathematics for Game Creators 2024
Chapter 3 Animation with Trigonometric Functions
3.1 Animation
The trigonometric functions and formulas allow you to calculate angles, position points via polar coordinates, and solve trigonometric problems.
The sine and cosine functions can also be used to create simple animations which are the major topics for this chapter.
The chapter starts with an explanation of the concept of timeline and frame based animation. In games and 3D editors time is an important aspect of the development of animation and game play. Sometimes an absolute time is used, in other instances the time difference or delta time between two frames is sufficient to program an animation.
The concept of using functions to control animations is the next topic, and the sine and cosine functions are used here to demonstrate how to control the timing with the help of mathematical functions.
3.2 Timeline
Games, animations and films are part of the digital world. As such it is common to hear concepts as frames per second (fps) or framerate. The framerate of a film or game is linked to the mathematical concepts of frequency and period, which you will discover later on in this chapter.
For gamers the fps is an important metric when judging the quality of a game, i.e. a low or choppy framerate can be detrimental to the fun of a game. For smooth motion and responsiveness the fps should strive to match the framerate of the monitor. Most game companies aim for at least 30 frames per second for games, while 60 frames per second is considered good. With the advent of modern monitors, the framerate for games can be even higher, for example 90 or even 144 frames per second. Although a high framerate is preferred in games it is also important to synchronise the frames to the framerate of the monitor. A typical problem is tearing where the lack of synchronisation results in a visible tear in the image. For virtual reality applications this is even more important as low framerates in these cases can induce dizzyness or even nausea. In cinematic settings a framerate of 24 frames per second is the gold standard. Most animation tools such as Houdini, Blender or Maya will use this setting as the default when you create character animations or film clips. The historical reasons for this framerate are varied. At the start of the film industry there was no generally accepted standard for film framerates, the only consensus was to keep the framerate low to reduce costs, which resulted in a framerate of about 16 frames per second. Cameras were handcranked, so this framerate was only by approximation.
There are different reasons for switching to 24 fps. The most important reason is that this framerate is an important threshold for visual perception. At 24 fps, a film appears to have continuous motion for most people. Another reason for the change is the introduction of audio to films which necessitated a better framerate. Finally, for some the reason was mathematical as 24 has six dividers: 2,3,4,8,6,12. Whatever the reason, 24 fps is what people expect when they go see a film. Some films experiment with this setting, for example, “The Hobbit” was filmed at 48 fps. However, this was a change that was not received well by critics and audiences. Human perception remains subjective, so even though a framerate could be objectively better, people resist change. The following figure shows a time between 0 and 2 seconds with a framerate of 24 fps. Within this timeframe, 48 frames will be needed to create a cinematic animation.
You can also calculate how much time passes between two subsequent frames. So if you have a timeframe of 2s and 48 frames the time between each frame can be calculated as:
The symbol Δt is commonly used to indicate a delta time, meaning a difference between two distinct moments in time.
3.3 Time as the Driver of Animation
If you want to create an animation, one of the important components will be the factor time In a game or animation the time is the independent variable that dictates changes in an object’s position, rotation, and scale. If you want to animate a ball bouncing up and down, you need to calculate a new position for the ball for each frame.
In this chapter we will focus on using the sine and cosine functions to generate a new position. As the output of sine and cosine functions is limited to the range of [–1 1] it is necessary to add extra parameters if we want to achieve a specific movement.
Time Sine parameters
A typical example is the motion of a platform in a game. The moving platform in the figure needs to move horizontally between the two points L and R
You can use the sine function for such a horizontal motion, and as you will see the sine function generates a simple but plausible animation for this moving platform. The first parameter of the sine function that will help achieve the desired result is the amplitude parameter, which allows you to modify the output range of the sine function.
The second parameter is the offset, that can move the centre of the sine function to the centre of the moving platform.
A third parameter is the frequency, which covers the speed of the moving platform animation. If you want the platform to move fast, a high frequency parameter will be required. Finally, there is also a phase parameter, that allows you to change the starting position of the moving platform.
These four parameters and their influence on the shape of the sine function will be discussed in the following section. Chapter 3 Animation with Trigonometric Functions
3.4 The Sine Function
Sine function plot
We already covered the sine function in previous chapters. In this section you discover the sine function and plot out the relationship between the angle α and the sin(α) value.
Point P1 is traced along the circumference of the unit circle while the plot shows the value of angle α on the horizontal axis and the value of sin(α) on the vertical axis.
Notice some important characteristics of this shape. The maximum of the sine function is 1 and the minimum value is –1. The amplitude of the sine function is defined as the difference between the maximum and the minimum value, divided by 2. The amplitude is denoted with the letter a:
The sine function crosses the horizontal axis at α = π. Other important points are:
3.5 Sine Function Shape
For clarity, we show the same sine function again, but now the horizontal axis shows a division that is based on multiples of π.
For an unmodified sine function, one full period takes 2π, and then the same shape is repeated again.
3.6 Parameters
The sine function is very interesting on its own, but you need extra parameters to make the sine function useful. The following parameters can be used:
• Amplitude – a: A sine function variates between –1 and 1, with the amplitude we can increase this minimum and maximum value.
• Frequency – f: One period has a duration of 2π, this can be changed with the frequency parameter.
• Phase shift – Φ: This parameter can shift the sine function left and right (horizontal direction).
• Vertical shift – v: The vertical shift parameter shifts the centre of the sine function.
3.7 Base Sine Function Shape
The sine function without parameters has a minimum of –1 and a maximum of +1. One period of the sine function starts at 0 and ends at 2 π
3.8 Amplitude Parameter
The amplitude parameter determines the difference between the maximum and the minimum of the sine function. To implement this parameter you multiply the sine function with the parameter called a, which gives the following equation: a sin(t).
The amplitude a equals half the vertical distance from the maximum to the minimum of the sine function. This is visually represented by the distance 2a in the figure above. One way to determine the amplitude given the shape of the sine function is to divide this distance from top to top and divide by 2. An example of this calculation is as follows:
(1.5 −1.5)
As an exercise, take a look at the following figure:
Use the given formula to determine the amplitude of this sine function.
3.9 Frequency Parameter
The frequency parameter determines how many periods there are within a range of [0s 1s] or one second. A period is defined as one full cycle of the sine function, which you can measure as the horizontal distance from top to top of the sine function. The unit of frequency is called Hertz and is abbreviated as Hz . The following figure demonstrates what a frequency of 1Hz looks like:
There are three possibilities for this parameter:
• Frequency > 1Hz: There will be more than one period within one second.
• Frequency == 1Hz: There is exactly one period in one second.
• Frequency < 1Hz: There will be only part of a period within one second.
The formula for the sine function with only the frequency parameter is:
sin ( 2π f t )
Frequency > 1Hz
The following figure shows the result of a frequency of 2 Hz. Notice that there are more periods per second, and that by doubling the frequency the period has been halved.
The relationship between period and frequency is inverse. If the frequency increases by a factor of two, the period will decrease by a factor of two. Chapter 3 Animation with Trigonometric Functions
Frequency < 1Hz
The following figure shows the result of a frequency of 0.5Hz. Notice that there are less periods per second, and that by halving the frequency the period has been doubled
3.10 Phase Parameter Φ
The phase shift parameter determines a horizontal shift of the sine function. For a positive value of this parameter Φ, the sine function will be shifted to the left by an amount of Φ. In the figure below the value for Φ has been set to 1/3 π.
The original sine function with Φ set to zero sin(t) and the phase shift sine function with Φ set to 1/3 π which is + 3
The formula with only the Φ parameter is: sin ( t + Φ )
The parameter Φ can be used to change the starting point of an animation. Without the phase, an animated object would by default always start at its centre position. The phase parameter allows you to pick a starting point anywhere within the range of motion of said object.
A positive Φ value will shift the sine function to the left
A negative Φ value will shift the sine function to the right.
3.11 Vertical Shift Parameter
The shift parameter generates a shift of the sine function in a direction perpendicular to its baseline (in this figure the horizontal axis).
Two examples of adding a shift parameter to the sine function with v1 = 1.5, and v2 = –2. The central line of the sine function is defined as the line that runs exactly through the vertical centre of the sine function.
The shift parameter is added to the sine function as: = ( ) + 1
As pictured here, the output of the sine function is a coordinate y. In a 2D or 3D world you can use the output of the function and connect it to whatever variable you want. For example the sine function could modify the x or z‐ coordinate of an object.
3.12 Sine Function Shape
Finally, you can combine all the parameters for the sine function in one formula:
With the actual values for these parameters, the formula is:
Period, amplitude and shift are relatively easy to read from this function plot. Period and frequency have an inverse relationship, which is given by:
The phase Φ1 requires more work as it involves the useage of the arc sine and knowledge about the locations of the peaks or zero crossings of the function. The methodology to determine this parameter correctly will be discussed in the following section.
Application
You can already put the knowledge of the sine function into action. In the following figure we take another look at the platform problem from the beginning of the chapter. Remember that you wanted to make the platform move from left to right with a repeating cycle and a certain speed.
The first problem is that the platform has a width that you need to take into account. There is also a point P that is defined as the model centre of the platform. The first step you need to take is to think about the valid locations of this point P in this situation. P cannot be at the location L or R because then half of the platform would intersect with the boundaries of the world. The answer is then to restrict P to make sure it keeps a distance of half the width of the platform itself or 2 away from the boundary points L and R
By labeling the baseline and the amplitude you can determine the parameters a and v if the position of L and R are known.
The x‐ coordinate of point L equals 1 and the x‐ coordinate of point R equals 6. Here you see the advantage of using the centre of the platform as model centre, because you can calculate the x‐ position of the baseline as the average between these two coordinates, which also corresponds to the parameter v:
For the amplitude parameter you can calculate the distance of the left boundary to the baseline, which is calculated as the horizontal distance between the baseline and the left boundary:
3.13 Phase Control
By determining a and v you can already setup a sine function that will animate the platform within the defined boundaries:
Notice how the time t is used as argument in the sine function. The result of the sine function is then used as the x‐ coordinate for the point P. The clear message here is that you are free to use the output of the sine function wherever you want. The result might be stored in the x, y or z‐ coordinate of a point, but it is also possible to use the sine function to animate other properties of an object, such as the colour, scale or speed.
The next problem you need to tackle is the starting position of the platform. You can first determine what the starting position would be of the platform at t = 0s:
This corresponds to the x‐position of the baseline and this indicates that at the starting time of the game or simulation, the platform will be at the baseline position or the centre. It is possible to use the phase shift Φ to change this starting position. A common demand is for example to set the start position on the left boundary. This requires that at t = 0s, the point P must have the x‐ coordinate of : x = L x + wH = 1 + 0.5 = 1.5. You can now determine the phase by requiring that the sine function with an unknown phase must be equal to this coordinate x = 1.5 at time t = 0s:
Determinating phase Φ will always involve setting a condition for the position of the animated object at a given time (usually at t = 0s). Determing the phase always involves an arc function. With the determination of Φ, the function is now:
When the condition is set at t = 0s, the frequency or period of the sine wave does not matter because the term in t will be zero. However, when the condition is set at a different time it will be necessary to take this frequency or period into account.
3.14 Cosine
The cosine function has similar characteristics to the sine function, but has been shifted over the horizontal axis.
The following picture shows the plot of the regular cosine function:
= cos ( α )
The cosine function starts with an initial value of 1. However if a bigger range of this function would be plotted, the function would look exactly the same as the sine function.
Sine and cosine are the result of the same operation, the only difference is that sine is projected on the vertical axis and cosine is projected on the horizontal axis. Therefore, the phase shift is the result of the fact that the angle between these two axes is also 90° or 2 apart.
3.15 Determining the Frequency
Control the timing of the sine function
The period is the length of one full cycle of a sine wave and is typically expressed in the time unit seconds
The frequency is the number of full cycles per second There is an inverse relationship between frequency and period: = 1 ⇒ = 1
When you want to control the timing of the sine function you need to express the timing either by frequency or by period. Hence, using the inverse relationship you can express the sine function in two ways: = (2 ) ⇒ = 2
For example, if f = 2Hz, then = 1 = 1 2 = , and both forms of the sine function (either by frequency or by period) would lead to the same sine function shape: = (2 2 ) = (4 ) = 2 0.5 = (4 )
The use of the period T in the sine function can be more practical than using the expression with frequency. It is sometimes easier to express how long the animation should take in seconds than to try and come up with a plausible frequency.
As an example, suppose we want the moving platform to complete one full cycle in 16s, and we call this period T2 . The frequency in this case would be f 2 = 1 2 = 0.0625Hz. When the period is bigger than 1s it is easier to express the timing by period instead of frequency, and the expression for the sine function is also easier to read and understand: = 2 2 = 2 16 ⇒ 2 =
However, when the period is less than one second, it may be more practical to think in terms of frequency, particularly in scenarios where rapid oscillations are involved, such as in audio signals. Another example might be animations in games, such as those in the Steampunk genre, which feature rapidly rotating gears, wheels, ... with frequencies that are higher than 1Hz
Chapter 3 Animation with Trigonometric Functions
3.16 Period of Ordinary Sine
Why is factor 2π necessary?
The formulas for the sine function with frequency or period parameters were introduced without an explanation for factor 2π. For a better understanding of this factor we take a step back and revisit the sine function without parameters:
y = sin( t )
You can make a table of important points of this sine function and calculate the values for t and y:
In this case the sin function works with radians, and the period of the sine function without parameters is T = 2π = 6.2832s. This standard period of 2 π is cumbersome in practice, which is one reason why the factor 2 π is included in the sine function. The frequency 0.1592Hz (the inverse of this period) of the standard sine function is also impractical to work with.
In the next section you can further explore what the exact reason behind the factor 2π is. To understand this properly you need to rethink the section about conversions from one unit to another. This problem is similar in that we want to have a full cycle of the sine function in a period from 0s to 1s
Sine function shape
Given the sine function:
y = sin( 2 πt )
You can now repeat the same process, but the range of t will be between 0s and 1s. Notice how this range between 0s and 1s in the first column is converted into a range of 0 to 2π radians in the second column. This effectively matches a period of 1s to a full cycle of the sine wave.
The figure shows that the effective period T of the sine wave is now 1s and the frequency
1
1
This formula results in a frequency of one Hz. How can you now control the frequencies of the sine wave?
3 Animation with Trigonometric Functions
Frequency parameter
The final step in controlling the frequency or period of the sine function is to add the factor f or frequency in the formula or the alternative version with the parameter T.
If you set the frequency f = 2, then the period = 1 = 1 2 = .
The function with the value of the frequency is:
You can now repeat the same process, but the range of t will be between 0s and 0.5s. Notice how this range between 0s and 0.5s in the first column is converted into a range of 0 to 2π radians in the second column. This effectively matches a period of 0.5s to a full cycle of the sine wave.
3.17 Applications – Extra
Exponential function
The exponential function is given as:
This is a power function with e as its base, which is also called Euler’s number and this is a constant with a value of 2.71828
The exponential function decreases over time and reaches zero at ∞. This makes it a good fit for animations that have to fade out over time. The λ value controls how fast the value of this function reaches zero. A value smaller than 1 for λ results in a slowly decaying function.
When the value of λ is higher than 1, the function reaches 0 faster. The function below the orginal function has λ = 3 and almost reaches zero after 2 seconds. The function with the actual value of λ is then:
= e –3 t
Chapter 3 Animation with Trigonometric Functions
Exponential amplitude
Previously, you used a constant (unchanging) amplitude for the sine function. However, you can use the previous section’s exponential function as slowly decaying amplitude and multiply it by the sine function to achieve a slowly decaying sine function. One example of where you can use this is a pendulum that slowly loses energy and stops swinging. The function is given by: e-λt sin ( 2 π f t )
If you set the value for λ to 1 and the value for f to 1Hz you get the following graph. The sine function is still detectable for the first 4 seconds, where you can see that the period T = 1s:
Using the exponential function as amplitude results in a sine function that slowly dies out.
3.18 Angular Velocity
You can now combine your knowledge about sine and cosine to create a variety of motion. The following figure illustrates what the possibilities are.
• Point P1 is defined as: ( cos ( t ) sin ( t ) ). This corresponds to a polar coordinate where the time t is used as angle for the cosine and sine functions. This coordinate moves along the unit circle over time.
• Point P 2 is defined as: ( P 2 x sin ( t ) ). The x‐ coordinate of this point is constant, which results in a point that moves vertically.
• Point P 3 is defined as: ( cos ( t ) P 3 y ). The y‐ coordinate of this point is constant, which results in a point that moves horizontally. 1 2 3
If we use time as input angle for the animation we can control the speed of this animation.
3.19 Angular Velocity with Frequency Parameter
The formula for point P1 is:
1 = (2 ) (2 )
With the value for the frequency given as: 0.25Hz, the actual formula for point P1 is now:
1 = (2 0.25 ) (2 0.25 )
The other two points are animated with the same frequency and are now:
• Point P 2 is defined as: (P 2x sin ( 2 π f t ) ). The x‐ coordinate of this point is constant, which results in a point that moves vertically and with the frequency f = 0.25Hz.
• Point P 3 is defined as: ( cos ( 2 π f t ) P 3y ). The y‐ coordinate of this point is constant, which results in a point that moves horizontally and with the frequency f = 0.25Hz.
