Version française: https://devforum.roblox.com/t/comment-utiliser-cos-et-sin/1660043
This tutorial will explain you how to use cos and sin inside of a Roblox experience.
In Roblox, you can access cos and sin with the math.cos() and math.sin() functions respectively.
What are cos and sin
Basically, cos and sin are mathematical functions, they take a number and give another, they also have curves, which help visualize how they work:
Cos Curve:
Sin Curve:
Those two functions are used in geometry, more specifically in circles, this is why you see degrees and radians in those curves.
If you examine the curves, you can notice the cos and sin are very similar, the only difference in those two curves is that the sin curve is basically the cos curve but offset by 90 degrees or pi/2.
What are their uses
A circle is 360 degrees or pi*2, a circle always starts on the right, and progresses counter-clockwise
As you can see on the circle, I have drawn one green line and one red line, the green line is the X axis and the red line is the Y axis.
Why axis in a circle? Because circles have a radius, in this case, the radius is 1, the radius is the length from the center of the circle to any extremities.
If you come back to the curves, you can see the curves Y value is between -1 and 1, meaning that when given a value in radians, the cos and sin functions will return a value between -1 and 1.
(Since Roblox’s cos and sin functions need radians as arguments, example will only be done with radians.)
For example, cos(pi) is equal to -1, because if you treat the circle as a grid with coordinates, and try to see where pi is on the green line, you can see it’s on the opposite side of where the circle starts.
Another example: cos(pi*0.75) is equal to -0.707.
Basically, cos gives you the ability to obtain a value between -1 and 1 by inputting a point on the circle as a radians.
As for sin, it’s the same thing, except, instead of getting a value on the X axis, you get a value on the Y axis.
For example, sin(pi*2) is equal to 0, it’s at the start of the circle, on the right, so the Y axis value is 0.
Now, what if I wanted to do the opposite? What if I wanted to obtain a value in radians based on an X or Y value that is between -1 and 1?
There’s arc cos and arc sin functions, which are the same but do the opposite, if you give them a value between -1 and 1, they will return a value in radians on the circle.
(On Roblox, you can access these functions with math.acos() and math.asin())
What are their practical uses
With cos and sin, we are working with circles, which means, you can accurately position objects in a circular or elliptic shape.
For example, let’s say I wanted to place 7 parts so that they shape a circle.
for i = 1, 7 do
local formula = i * ((math.pi*2)/7)
local position = Vector3.new(math.cos(formula) * 5, 5, math.sin(formula) * 5)
local part = Instance.new("Part")
part.Anchored = true
part.Size = Vector3.new(1, 1, 1)
part.Position = position
part.Parent = workspace
end
This is the result you should get:
First, we create a for loop, it will run 7 times.
We then create a formula, the value of this formula is in radians, because we want to do a full circle, we go from 0 to 360 degrees in a progressive way, for example, if i is 1, then formula will be equal to around 51 degrees.
We have the position on the circle, now, based on that value, we want an X and Y value, so we will be using the cos and sin functions in a Vector3.new function, we want the circle to face upwards, so we’re using the cos function on the X axis and the sin function on the Z axis.
Remember, cos and sin are always used in a circle with a radius of 1, meaning we need to multiply the value cos and sin by the radius wanted, in this case, the parts will be away from the center by 5 studs.
Another interesting use of the cos and sin functions is for tweening parts. for example, if you wanted to make a floating crystal, you could do the following:
local part = Instance.new("Part")
part.Anchored = true
part.Size = Vector3.new(3, 5, 3)
part.Parent = workspace
local alpha = 0
game:GetService("RunService").Heartbeat:Connect(function(delta)
alpha += delta
part.CFrame = CFrame.new(0, 5 + math.sin(alpha), 0)
end)
This will give you a part that floats very smoothly and looks nicely animated.
alpha keeps going upwards, by 1 per second, the delta argument of the Heartbeat function is the time passed since the last frame.
This means alpha can be used as a radians, meaning the part will do a full cycle in pi seconds (about 3.14 seconds.)
That is all, I really hope this tutorial will allow you to understand how to use these two functions to give great spice to the visuals in your game, and make your life as a scripter easier.
