How would I make a graph drawing system?

Title. I have the main math stuff, but I’m stuck at converting numbers into properly usable scale positions for the Y coordinate. How would I do this?
Thanks!!

Do you mean you want to place Parts in game to create a graph?
You could place a Part on your X or Z axis at evenly spaced intervals and do the “main math stuff” to calculate the Y Position. Then you could use RopeConstraints or Beams to join the Parts.

1 Like

I’m trying to do it in GUI. The only thing I don’t know how to do is calculate the Y position, that’s where I’m stuck

Since gui’s start from top-left, you’ll have to use the 4th quadrant’s topleft corner as the origin, that way over 0 will go in the top half of the graph, and -1 will go towards the bottom half of the graph.

I don’t think this really helps me though. I’m trying to convert the numbers into numbers usable for UDim2 Scale.

It does, that’s meant to be for scale.

local axisWidth = 1
local markWidth = 5
local step = 0.1
local renderStep = 0.05

local plane = Instance.new'Part'
plane.Size = Vector3.new(10,10,0)
plane.Anchored = true
plane.Color = Color3.new(1,1,1)
plane.Material = Enum.Material.SmoothPlastic
plane.CFrame = owner.Character.PrimaryPart.CFrame * CFrame.new(0,1,-5)
plane.CanCollide = false
plane.CastShadow = false
plane.Parent = script

local surfacegui = Instance.new'SurfaceGui'
surfacegui.Face = Enum.NormalId.Back
surfacegui.LightInfluence = 0
surfacegui.Parent = plane

local background = Instance.new'Frame'
background.Size = UDim2.new(1,0,1,0)
background.BackgroundColor3 = Color3.new(1,1,1)
background.BorderSizePixel = 0
background.Parent = surfacegui

local quadrant4 = Instance.new'Frame'
quadrant4.Size = UDim2.new(0.5,0,0.5,0)
quadrant4.Position = UDim2.new(1,0,1,0)
quadrant4.AnchorPoint = Vector2.new(1,1)
quadrant4.BackgroundTransparency = 1
quadrant4.BorderSizePixel = 0
quadrant4.Parent = surfacegui

local xaxis = Instance.new'Frame'
xaxis.Size = UDim2.new(1,0,0,axisWidth)
xaxis.AnchorPoint = Vector2.new(0.5,0.5)
xaxis.Position = UDim2.new(0.5,0,0.5,0)
xaxis.BackgroundColor3 = Color3.new(0,0,0)
xaxis.BorderSizePixel = 0
xaxis.Parent = surfacegui

local yaxis = Instance.new'Frame'
yaxis.Size = UDim2.new(0,axisWidth,1,0)
yaxis.AnchorPoint = Vector2.new(0.5,0.5)
yaxis.Position = UDim2.new(0.5,0,0.5,0)
yaxis.BackgroundColor3 = Color3.new(0,0,0)
yaxis.BorderSizePixel = 0
yaxis.Parent = surfacegui

for i=-1,1,step do
    local markX = Instance.new('Frame')
    markX.BackgroundColor3 = Color3.new(0,0,0)
    markX.BorderSizePixel = 0
    markX.AnchorPoint = Vector2.new(0,0.5)
    markX.Size = UDim2.new(0,1,0,markWidth)
    markX.Position = UDim2.new(i,0,0,0)
    markX.Parent = quadrant4

    local gridlineX = markX:Clone()
    gridlineX.BackgroundTransparency = 0.7
    gridlineX.Size = UDim2.new(0,axisWidth,0,surfacegui.AbsoluteSize.Y)
    gridlineX.Parent = quadrant4
    
    local numberLabel = Instance.new'TextLabel'
    numberLabel.Text = math.round(i*10)/10 ~= 0 and math.round(i*10)/10 or ''
    numberLabel.TextColor3 = Color3.new(0,0,0)
    numberLabel.BackgroundTransparency = 1
    numberLabel.AnchorPoint = Vector2.new(0.5,0.5)
    numberLabel.Size = UDim2.new(0,1,0,1)
    numberLabel.Position = markX.Position + UDim2.new(0,0,0,markWidth)
    numberLabel.Font = Enum.Font.Arial
    numberLabel.TextYAlignment = Enum.TextYAlignment.Top
    numberLabel.TextSize = 10
    numberLabel.Parent = quadrant4

    local markY = markX:Clone()
    markY.AnchorPoint = Vector2.new(0.5,0)
    markY.Size = UDim2.new(0,markWidth,0,1)
    markY.Position = UDim2.new(0,0,i,0)
    markY.Parent = quadrant4

    local gridlineY = markY:Clone()
    gridlineY.BackgroundTransparency = 0.7
    gridlineY.Size = UDim2.new(0,surfacegui.AbsoluteSize.X,0,axisWidth)
    gridlineY.Parent = quadrant4

    local numberLabel = numberLabel:Clone()
    numberLabel.TextXAlignment = Enum.TextXAlignment.Left
    numberLabel.TextYAlignment = Enum.TextYAlignment.Center
    numberLabel.Position = -markY.Position + UDim2.new(0,markWidth+2,0,0)
    numberLabel.Parent = quadrant4
end

function graph(func, color)
    for i=-1,1,renderStep do
        local dot = Instance.new'Frame'
        dot.BackgroundColor3 = color
        dot.BorderSizePixel = 0
        dot.AnchorPoint = Vector2.new(0.5,0.5)
        dot.Size = UDim2.new(0,3,0,3)
        dot.Position = UDim2.new(i,0,-func(i),0)
        dot.ZIndex = 2
        dot.Parent = quadrant4
    end
end

I don’t understand how this works… Why does graph use a function as a parameter? Sorry if I sound horrendously stupid right now.

It uses a function as a parameter to return a value. When you call it, e.g

graph(function(x)
    return x^2
end, Color3.new(1,1,1))

the x value is fed through the parameters when calling func().

I don’t really get why this is needed…

The function is just necessary because if you see in the code above (the full one), I call func(i), in which calls the function and passes “i” as the parameter.

1 Like