Drawing Lines on a GUI?

Asked by

9 years ago

Ok, so I've got my script. Currently, it correctly plots points, but now I want to connect those points to make a line graph. I've tried a lot of different things, but I've not gotten it right. I think the only problem is that the lines have wrong slopes, but I'm not sure if that's the only problem.

PS: If you know of a script that does exactly what I am describing (plotting points and/or drawing lines), then let me know!

Btw, this script uses the data from this table: {18.351, 18.615, 18.516, 18.921, 19.012, 19.051}

01local x2 = 0
02local y2 = 0
03local x1 = 0
04local y1 = 0
05local dist = 0
06local slope = 0
07local line = 0
08 
09function graph(x, y, i)
10    local p = Instance.new("Frame", script.Parent.Pixels)
11    p.Size = UDim2.new(0, 5, 0, 5)
12    p.Position = UDim2.new(x, 0, y, 0)
13    p.BorderSizePixel = 0
14    p.BackgroundColor3 = Color3.new(200, 20, 20)
15    p.Name = p.Name .. i
16    p.ZIndex = 3
17    if p.Position.Y.Scale > High then
18        High = p.Position.Y.Scale
19    end
20    if p.Position.Y.Scale < Low then
21        Low = p.Position.Y.Scale
22    end
23    local SpanY = High - Low
24    local PixelY = p.Position.Y.Scale
25    local FactorY = High - PixelY
26    local FractionY = FactorY / SpanY
27 
28    local PixelX = p.Position.X.Scale
29    local FactorX = (#bux - 1) - PixelX
30    local FractionX = FactorX / (#bux - 1)
31 
32    local XO = p.Position.X.Offset
33    local YO = p.Position.Y.Offset
34    p.Position = UDim2.new(FractionX, XO, FractionY, YO)
35 
36    --ALL THE CODE ABOVE IS JUST TO PLOT THE POINTS
37    --All THE CODE BELOW IS TO MAKE THE LINES
38 
39    --So the idea here is to make a new frame, make its height 10 pixels (how thick the line is)
40    --and make adjust its length using distance formula, then adjust its rotation using slope form
41    --and convert that to degrees. Then make its position the same position as point 1 (which is the top left of the new line, because it is going to the right). Also, X?, Y?, X?, Y? are found by storing each ? and ? into a variable based on if the loop iteration is even or odd. 
42 
43    if i%2 == 0 then --So it does "every other" to connect both points when it can only look at one at a time
44        y2 = p.Position.Y.Scale * script.Parent.AbsoluteSize.Y
45        x2 = p.Position.X.Scale * script.Parent.AbsoluteSize.X
46    elseif i%2 == 1 then
47        y1 = p.Position.Y.Scale * script.Parent.AbsoluteSize.Y
48        x1 = p.Position.X.Scale * script.Parent.AbsoluteSize.X
49        slope = math.atan2((y2 - y1),(x2 - x1))
50        dist = math.sqrt(math.pow((x2 - x1), 2) + math.pow((y2 - y1), 2))
51        line = Instance.new('Frame', script.Parent.Lines)
52        line.BorderSizePixel = 0
53        line.Size = UDim2.new(0, dist, 0, 10)
54        print(slope, slope * 360)
55        line.Rotation = slope * 360
56        line.Position = UDim2.new(0, x2, 0, y2)
57        line.Name = i
58    end
59end
60 
61bux = {18.351, 18.615, 18.516, 18.921, 19.012, 19.051} --Not my actual bux/tix data, but random example
62 
63for i = #bux-1, 1, -1 do
64    x = i
65    y = bux[i]
66    graph(x, y, i)
67end
 View all 67 lines...

The problem with Rotation scripting is that ROBLOX anchors rotation to the center of the GUI element, but positioning to the top left, unrotated, making it much harder than it has to be to get the math right. adark 5487 — 9y

Drawing Lines on a GUI?

Answer this question