Using trigonometry for draggable frame on a circle/orbit

As a student I never really listen on most subjects including math, after watching a Youtube video about trigonometry I realized I can actually use this to create a color wheel or make a planet orbit around a sun without using the built in Line Forces. I’m not implying that school is useless.

Orbit
local TweenService = game:GetService("TweenService")

local Earth = workspace.Earth
local Moon = Earth.Moon

local function WaitForTween(Tween: Tween)
	if Tween.PlaybackState == Enum.PlaybackState.Playing then
		Tween.Completed:Wait()
	end
end

local function UpdatePosition(Part, Position: Vector3, Seconds: number)
	local Tween = TweenService:Create(Part, TweenInfo.new(Seconds, Enum.EasingStyle.Linear), {
		CFrame = CFrame.new(Position)
	})

	Tween:Play()
	WaitForTween(Tween)
end

-- EARTH
task.spawn(function()
	local Hypotenuse = 20 -- Distance
	local Origin = workspace.Sun.Position

	while true do
		for Degrees = 1, 360 do
			local Radians = math.rad(Degrees)
			local Adjacent = Hypotenuse * math.cos(Radians)
			local Opposite = Hypotenuse * math.sin(Radians)

			UpdatePosition(Earth, Vector3.new(Adjacent, 0, Opposite) + Origin, 0.2)
		end
	end
end)

-- Moon
task.spawn(function()
	local Hypotenuse = 3

	while true do
		for Degrees = 1, 360 do
			local Radians = math.rad(Degrees)
			local Adjacent = Hypotenuse * math.cos(Radians)
			local Opposite = Hypotenuse * math.sin(Radians)
			local Origin = Earth.Position

			UpdatePosition(Moon, Vector3.new(Adjacent, 0, Opposite) + Origin, 0)
		end
	end
end)


Of curse the Line Force would be better since it’s already available without doing any calculations yourself.

The other one is limit the frame on a circle:
local TweenService = game:GetService("TweenService")

local MainFrame = script.Parent
local Pin = MainFrame.Pin

local SIZE = 500
local ORIGIN = (MainFrame.AbsolutePosition + Vector2.new(SIZE / 2, SIZE / 2))

local Player = game:GetService("Players").LocalPlayer
local Mouse = Player:GetMouse()

local TWEEN_INFO = TweenInfo.new(0)
local Connection

type HSV = ({ ["H"]: number, ["S"]: number, ["V"]: number })

local Baseplat = workspace.Baseplate

local function UpdatePinPosition(Position: Vector2)
	TweenService:Create(Pin, TWEEN_INFO, {
		Position = UDim2.new(0.5, Position.X, 0.5, Position.Y)
	}):Play()
end

local function HSV(Hue: number, Saturation: number, Value: number): HSV
	return {
		H = Hue,
		V = Value,
		S = Saturation
	}
end

local function ColorWheel(ColorValue: HSV)
	Baseplat.Color = Color3.fromHSV(ColorValue.H, ColorValue.S, ColorValue.V)
end

MainFrame.MouseButton1Down:Connect(function()
	UpdatePinPosition(Vector2.new(Mouse.X, Mouse.Y) - ORIGIN)
	local HalfSize = SIZE / 2

	Connection = Mouse.Move:Connect(function()
		local Offset = Vector2.new(Mouse.X, Mouse.Y) - ORIGIN
		local Hypotenuse = math.clamp(Offset.Magnitude, 0, HalfSize)
		local Radian = math.atan2(Offset.Y, Offset.X)
		
		local Adjacent = Hypotenuse * math.cos(Radian)
		local Opposite = Hypotenuse * math.sin(Radian)
		
		UpdatePinPosition(Vector2.new(Adjacent, Opposite))

		ColorWheel(HSV((math.pi - Radian) / (math.pi * 2), Hypotenuse / HalfSize, 1))
	end)
end)

MainFrame.MouseButton2Click:Connect(function()
	UpdatePinPosition(Vector2.new(0, 0))
end)

MainFrame.MouseButton1Up:Connect(function()
	if typeof(Connection) == "RBXScriptConnection" then
		Connection:Disconnect()
	end
end)

Mouse.Button1Up:Connect(function()
	if typeof(Connection) == "RBXScriptConnection" then
		Connection:Disconnect()
	end
end)

3 Likes

Anypoint on a circle can be represented by (x0 + sin(x), y0 + cos(x))

1 Like
  • radius
    30-characterssssssssss

How do you get the colour black though??? >__<

That’s on the Value I never really intended to make a color picker. 1 is white 0 is black, you can make that youself simply adding a slider and get the position of the slider in unit which is 0 - 1.

1 Like

You use Color3.fromHSV(H, S, V)

That’s right I used Color3.fromHSV()

(x0 + sin(x)* radius, y0 + cos(x)* radius)